From 7b0e743ecae84e8f1bbe8737bd3498ecf99dbcb7 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 29 Jun 2020 22:19:20 +0200
Subject: [PATCH] Fix yaml card editor (#6275)

---
 .../editor/card-editor/hui-card-editor.ts     | 45 +++++++------------
 .../card-editor/hui-dialog-edit-card.ts       |  5 +++
 src/resources/ha-style.ts                     |  2 +-
 3 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
index e33b3af43049..404c0df8eb53 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
+++ b/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;
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index c5ffaf01670b..dd718075bfb9 100755
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/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;
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index b1a63138c3cc..40c0c80ff1d8 100644
--- a/src/resources/ha-style.ts
+++ b/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;