Add entity id autocompletion to YAML code editors

[kubawolanin]

Breaking change

Proposed change

Add autocompletion to YAML code editors.
Accesses hass object and maps its states entity_id's as CodeMirror autocompletion labels.
This PR adds @codemirror/autocomplete package.

Autocompletion is not activated as editor's CodeMirror extension when:

• component has a readOnly flag
• component has no hasAutocomplete flag

Read more:
https://codemirror.net/6/docs/ref/#autocomplete.autocompletion
https://codemirror.net/6/examples/autocompletion/

Demo

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:
• 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

[zsarnett]

I like this feature. I'll read up a bit more on the autocomplete and test with a lot of entities to see how the performance is.

[kubawolanin]

Thanks @zsarnett, appreciate you taking a look.

test with a lot of entities to see how the performance is

Sure! Please note I've added maxRenderedOptions: 10, to the autocomplete plugin config having performance in mind, but also not to clutter the UI much.

Side note: I have a separate branch where I play a bit with ninja2-homeassistant extension. In the future our yaml/template editors may become more powerful 😎 But one step at a time

[bramkragten]

When testing this, I got an error after every next char if autocomplete is open:

TypeError: Cannot read properties of undefined (reading 'breakAfter')
    at DocView.coordsAt (index.js?02d1:2628:1)
    at EditorView.coordsAtPos (index.js?02d1:6404:1)
    at eval (index.js?7cad:177:1)
    at Array.map (<anonymous>)
    at _codemirror_view__WEBPACK_IMPORTED_MODULE_1__.ViewPlugin.fromClass.eventHandlers.scroll.readMeasure (index.js?7cad:177:1)
    at eval (index.js?02d1:6043:1)
    at Array.map (<anonymous>)
    at EditorView.measure (index.js?02d1:6041:1)
    at eval (index.js?02d1:6158:1)
    at eval (timeline.js?905f:21:7)

And autocomplete would no longer work

[kubawolanin]

When testing this, I got an error after every next char if autocomplete is open:

@bramkragten I think it's codemirror's bug:
https://discuss.codemirror.net/t/error-when-completing-brackets/3735

I've yet to find a solution

Edit: Thank you @bramkragten for fixing it in e56f313 <3

[bramkragten]

Updated the styling a bit, now looks like this: