Fix yaml card editor (#6275)

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

@@ -8,6 +8,7 @@ import {
   LitElement,
   property,
   TemplateResult,
+  query,
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTL } from "../../../../common/util/compute_rtl";
@@ -22,6 +23,7 @@ import { getCardElementClass } from "../../create-element/create-card-element";
 import type { EntityConfig } from "../../entity-rows/types";
 import type { LovelaceCardEditor } from "../../types";
 import type { GUIModeChangedEvent } from "../types";
+import "../../../../components/ha-circular-progress";
 
 export interface ConfigChangedEvent {
   config: LovelaceCardConfig;
@@ -69,6 +71,8 @@ export class HuiCardEditor extends LitElement {
 
   @property() private _loading = false;
 
+  @query("ha-code-editor") _yamlEditor?: HaCodeEditor;
+
   public get yaml(): string {
     return this._yaml || "";
   }
@@ -119,17 +123,18 @@ export class HuiCardEditor extends LitElement {
     });
   }
 
-  private get _yamlEditor(): HaCodeEditor {
-    return this.shadowRoot!.querySelector("ha-code-editor")! as HaCodeEditor;
-  }
-
   public toggleMode() {
     this.GUImode = !this.GUImode;
   }
 
-  public connectedCallback() {
-    super.connectedCallback();
-    this._refreshYamlEditor();
+  public refreshYamlEditor(focus = false) {
+    if (!this._yamlEditor?.codemirror) {
+      return;
+    }
+    this._yamlEditor.codemirror.refresh();
+    if (focus) {
+      this._yamlEditor.codemirror.focus();
+    }
   }
 
   protected render(): TemplateResult {
@@ -155,7 +160,7 @@ export class HuiCardEditor extends LitElement {
                   mode="yaml"
                   autofocus
                   .value=${this.yaml}
-                  .error=${this._error}
+                  .error=${Boolean(this._error)}
                   .rtl=${computeRTL(this.hass)}
                   @value-changed=${this._handleYAMLChanged}
                   @keydown=${this._ignoreKeydown}
@@ -182,14 +187,6 @@ export class HuiCardEditor extends LitElement {
 
   protected updated(changedProperties) {
     super.updated(changedProperties);
-
-    if (changedProperties.has("_GUImode")) {
-      if (this.GUImode === false) {
-        // Refresh code editor when switching to yaml mode
-        this._refreshYamlEditor(true);
-      }
-    }
-
     if (this._configElement && changedProperties.has("hass")) {
       this._configElement.hass = this.hass;
     }
@@ -198,18 +195,6 @@ export class HuiCardEditor extends LitElement {
     }
   }
 
-  private _refreshYamlEditor(focus = false) {
-    // wait on render
-    setTimeout(() => {
-      if (this._yamlEditor && this._yamlEditor.codemirror) {
-        this._yamlEditor.codemirror.refresh();
-        if (focus) {
-          this._yamlEditor.codemirror.focus();
-        }
-      }
-    }, 1);
-  }
-
   private _handleUIConfigChanged(ev: UIConfigChangedEvent) {
     ev.stopPropagation();
     const config = ev.detail.config;
@@ -298,10 +283,10 @@ export class HuiCardEditor extends LitElement {
         padding: 8px 0px;
       }
       .error {
-        color: #ef5350;
+        color: var(--error-color);
       }
       .warning {
-        color: #ffa726;
+        color: var(--warning-color);
       }
       ha-circular-progress {
         display: block;

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -122,6 +122,7 @@ export class HuiDialogEditCard extends LitElement {
         scrimClickAction
         @keydown=${this._ignoreKeydown}
         @closed=${this._close}
+        @opened=${this._opened}
         .heading=${html`${heading}
         ${this._documentationURL !== undefined
           ? html`
@@ -360,6 +361,10 @@ export class HuiDialogEditCard extends LitElement {
     this._cardEditorEl?.toggleMode();
   }
 
+  private _opened() {
+    this._cardEditorEl?.refreshYamlEditor();
+  }
+
   private _close(): void {
     this._params = undefined;
     this._cardConfig = undefined;

src/resources/ha-style.ts

@@ -34,7 +34,7 @@ documentContainer.innerHTML = `<custom-style>
       --scrollbar-thumb-color: rgb(194, 194, 194);
 
       --error-color: #db4437;
-      --warning-color: f4b400;
+      --warning-color: #f4b400;
       --success-color: #0f9d58;
       --info-color: #4285f4;