Merge pull request #13047 from piitaya/feat/ha-code-editor-autocomplete-icon-option

src/components/ha-code-editor.ts

@@ -2,6 +2,7 @@ import type {
   Completion,
   CompletionContext,
   CompletionResult,
+  CompletionSource,
 } from "@codemirror/autocomplete";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
 import { HassEntities } from "home-assistant-js-websocket";
@@ -48,6 +49,9 @@ export class HaCodeEditor extends ReactiveElement {
   @property({ type: Boolean, attribute: "autocomplete-entities" })
   public autocompleteEntities = false;
 
+  @property({ type: Boolean, attribute: "autocomplete-icons" })
+  public autocompleteIcons = false;
+
   @property() public error = false;
 
   @state() private _value = "";
@@ -160,17 +164,23 @@ export class HaCodeEditor extends ReactiveElement {
       ),
     ];
 
-    if (!this.readOnly && this.autocompleteEntities && this.hass) {
+    if (!this.readOnly) {
+      const completionSources: CompletionSource[] = [];
+      if (this.autocompleteEntities && this.hass) {
+        completionSources.push(this._entityCompletions.bind(this));
+      }
+      if (this.autocompleteIcons) {
+        completionSources.push(this._mdiCompletions.bind(this));
+      }
+      if (completionSources.length > 0) {
         extensions.push(
           this._loadedCodeMirror.autocompletion({
-          override: [
+            override: completionSources,
-            this._entityCompletions.bind(this),
-            this._mdiCompletions.bind(this),
-          ],
             maxRenderedOptions: 10,
           })
         );
       }
+    }
 
     this.codemirror = new this._loadedCodeMirror.EditorView({
       state: this._loadedCodeMirror.EditorState.create({

src/components/ha-selector/ha-selector-template.ts

@@ -31,6 +31,7 @@ export class HaTemplateSelector extends LitElement {
         .readOnly=${this.disabled}
         autofocus
         autocomplete-entities
+        autocomplete-icons
         @value-changed=${this._handleChange}
         dir="ltr"
       ></ha-code-editor>

src/components/ha-yaml-editor.ts

@@ -70,6 +70,7 @@ export class HaYamlEditor extends LitElement {
         .readOnly=${this.readOnly}
         mode="yaml"
         autocomplete-entities
+        autocomplete-icons
         .error=${this.isValid === false}
         @value-changed=${this._onChange}
         dir="ltr"

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -60,6 +60,7 @@ class HaPanelDevMqtt extends LitElement {
               <ha-code-editor
                 mode="jinja2"
                 autocomplete-entities
+                autocomplete-icons
                 .hass=${this.hass}
                 .value=${this.payload}
                 @value-changed=${this._handlePayload}

src/panels/developer-tools/template/developer-tools-template.ts

@@ -133,6 +133,7 @@ class HaPanelDevTemplate extends LitElement {
             .error=${this._error}
             autofocus
             autocomplete-entities
+            autocomplete-icons
             @value-changed=${this._templateChanged}
             dir="ltr"
           ></ha-code-editor>

src/panels/lovelace/editor/hui-element-editor.ts

@@ -198,6 +198,7 @@ export abstract class HuiElementEditor<T> extends LitElement {
                   mode="yaml"
                   autofocus
                   autocomplete-entities
+                  autocomplete-icons
                   .hass=${this.hass}
                   .value=${this.yaml}
                   .error=${Boolean(this._errors)}

src/panels/lovelace/hui-editor.ts

@@ -92,6 +92,7 @@ class LovelaceFullConfigEditor extends LitElement {
             mode="yaml"
             autofocus
             autocomplete-entities
+            autocomplete-icons
             .hass=${this.hass}
             @value-changed=${this._yamlChanged}
             @editor-save=${this._handleSave}