Add crosshairs, destroy globals, and tweak updates for code editor

[steverep]

Proposed change

A few unrelated tweaks I made while debugging and diagnosing #10458:

• Add a crosshair cursor to indicate rectangular selection when Alt is held down
• Add call to EditorView.destroy() to clean up global listeners (may partially help Text is Reversed when typing in the Code Editor when Editing Lovelace Cards #10458 in some situations as some listen for selections)
• Only dispatch transaction once per update
• Use state from the update listener when firing change events to simplify and keep them in step with editor

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion: Text is Reversed when typing in the Code Editor when Editing Lovelace Cards #10458
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[piitaya]

When I press enter, 2 lines are inserted and I got this error in the console. This is related to the comment I left for the updateListener.

TypeError: Cannot set properties of undefined (setting '_value')
    at _onUpdate (ha-code-editor.ts:286:1)

[home-assistant]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

[piitaya]

Another issue I found :

1. Go to template dev tools
2. Click to event tabs
3. Go to template dev tools

The code editor will not be loaded.

There is cache on these tabs so we don't pass in the firstUpdated when going back to template dev.

Maybe we should call _load function if this._codemirror is undefined in connectedCallback, remove it from firstUpdated and clear this._codeMirror in disconnectedCallback after the destroy with this._codeMirror = undefined. WDYT?

[steverep]

Did that test work fine before this PR?

Yeah this._codeMirror should definitely be deleted as it's unusable after the destroy. I'll add that.

I'm not sure about moving it to connectedCallback because the super call might not be awaiting the renderRoot?

[piitaya]

Yes it worked before this PR before code mirror wasn’t destroyed.

[steverep]

Okay I moved the creation from firstUpdated to update and that seems to work fine. Good catch again.

[piitaya]

I pushed another fix. As creation was async due to code mirror dynamic loading, code mirror instance can be created multiple time in update. I moved the loading and the creation in firstUpdated and the creation in connectedCallback
So code mirror is loaded only one time and recreated in connectedCallback.

Feel free to edit my changes if needed 😊

[steverep]

Seems overly complicated now with splitting everything up. Couldn't we just move the original _createCodeMirror to connectedCallback and been done? The reference to the loaded module would be updated immediately on subsequent calls, or just changed to:

this._loadedCodeMirror ||= await loadCodeMirror();

[piitaya]

Yes maybe that could work.

[steverep]

👍🏻 Also should handle the case of a quick disconnect (before the creation finishes). Working on that now.

[steverep]

Okay I pushed something that I think better uses the lit API to accomplish what we want:

• Await module load in scheduleUpdate since it can return a promise
• Synchronously create the editor in update
• Destroy editor on disconnect (after update in case of quick disconnect)
• Force update on reconnect to recreate the editor

The type check failure is stemming from multiple @codemirror/view packages introduced in #17341 so I'm going to bump the packages here too.

[steverep]

@piitaya are you okay with the latest revision on this one?

[piitaya]

Yes, it seems good to me ! 👍