Rename to hui-yaml-editor

package.json

@@ -103,6 +103,7 @@
     "@babel/preset-typescript": "^7.1.0",
     "@gfx/zopfli": "^1.0.9",
     "@types/chai": "^4.1.7",
+    "@types/codemirror": "^0.0.71",
     "@types/mocha": "^5.2.5",
     "babel-eslint": "^10",
     "babel-loader": "^8.0.4",

src/panels/lovelace/components/hui-yaml-editor.ts

@@ -3,24 +3,20 @@ import "codemirror/mode/yaml/yaml";
 // tslint:disable-next-line
 import codeMirrorCSS from "codemirror/lib/codemirror.css";
 import { fireEvent } from "../../../common/dom/fire_event";
-
-let _this;
-
 declare global {
   interface HASSDomEvents {
-    "code-changed": {
+    "yaml-changed": {
       value: string;
     };
   }
 }
 
-export class HuiCodeEditor extends HTMLElement {
-  public codemirror;
-  private _value;
+export class HuiYamlEditor extends HTMLElement {
+  public codemirror: CodeMirror;
+  private _value: string;
 
-  constructor() {
+  public constructor() {
     super();
-    _this = this;
     this._value = "";
     const shadowRoot = this.attachShadow({ mode: "open" });
     shadowRoot.innerHTML = `
@@ -43,27 +39,35 @@ export class HuiCodeEditor extends HTMLElement {
     this._value = value;
   }
 
-  get value() {
+  get value(): string {
     return this.codemirror.getValue();
   }
 
-  public connectedCallback() {
+  public connectedCallback(): void {
     if (!this.codemirror) {
       this.codemirror = CodeMirror(this.shadowRoot, {
         value: this._value,
         lineNumbers: true,
         mode: "yaml",
         tabSize: 2,
+        autofocus: true,
       });
+      fireEvent(this, "yaml-changed", { value: this._value });
       this.codemirror.on("changes", () => this._onChange());
     } else {
       this.codemirror.refresh();
     }
   }
 
-  private _onChange() {
-    fireEvent(this, "code-changed", { value: this.codemirror.getValue() });
+  private _onChange(): void {
+    fireEvent(this, "yaml-changed", { value: this.codemirror.getValue() });
   }
 }
 
-window.customElements.define("hui-code-editor", HuiCodeEditor);
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-yaml-editor": HuiYamlEditor;
+  }
+}
+
+window.customElements.define("hui-yaml-editor", HuiYamlEditor);

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

@@ -23,13 +23,16 @@ import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
 import { fireEvent } from "../../../../common/dom/fire_event";
 
-import "../../components/hui-code-editor";
+import "../../components/hui-yaml-editor";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { HuiYamlEditor } from "../../components/hui-yaml-editor";
 import "./hui-card-preview";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
 import { HuiCardPreview } from "./hui-card-preview";
 import { LovelaceCardEditor, Lovelace } from "../../types";
-import { YamlChangedEvent, ConfigValue, ConfigError } from "../types";
+import { ConfigValue, ConfigError } from "../types";
 import { EntityConfig } from "../../entity-rows/types";
 import { getCardElementTag } from "../../common/get-card-element-tag";
 import { addCard, replaceCard } from "../config-util";
@@ -115,10 +118,10 @@ export class HuiEditCard extends LitElement {
           ${this._uiEditor
             ? this._configElement
             : html`
-                <hui-code-editor
+                <hui-yaml-editor
                   .value="${this._configValue!.value}"
-                  @code-changed="${this._handleYamlChanged}"
-                ></hui-code-editor>
+                  @yaml-changed="${this._handleYamlChanged}"
+                ></hui-yaml-editor>
               `}
         </div>
       `;
@@ -190,6 +193,9 @@ export class HuiEditCard extends LitElement {
     await this.updateComplete;
     this._loading = false;
     this._resizeDialog();
+    if (!this._uiEditor) {
+      this.yamlEditor.codemirror.refresh();
+    }
   }
 
   private async _resizeDialog(): Promise<void> {
@@ -256,7 +262,9 @@ export class HuiEditCard extends LitElement {
     this._updatePreview(value);
   }
 
-  private _updatePreview(config: LovelaceCardConfig) {
+  private async _updatePreview(config: LovelaceCardConfig) {
+    await this.updateComplete;
+
     if (!this._previewEl) {
       return;
     }
@@ -389,6 +397,10 @@ export class HuiEditCard extends LitElement {
     }
   }
 
+  private get yamlEditor(): HuiYamlEditor {
+    return this.shadowRoot!.querySelector("hui-yaml-editor")!;
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyleDialog,

src/panels/lovelace/hui-editor.ts

@@ -14,10 +14,10 @@ import { Lovelace } from "./types";
 
 import "../../components/ha-icon";
 import { haStyle } from "../../resources/ha-style";
-import "./components/hui-code-editor";
+import "./components/hui-yaml-editor";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
-import { HuiCodeEditor } from "./components/hui-code-editor";
+import { HuiYamlEditor } from "./components/hui-yaml-editor";
 
 const lovelaceStruct = struct.interface({
   title: "string?",
@@ -69,24 +69,23 @@ class LovelaceFullConfigEditor extends LitElement {
           </app-toolbar>
         </app-header>
         <div class="content">
-          <hui-code-editor @code-changed="${this._yamlChanged}">
-          </hui-code-editor>
+          <hui-yaml-editor> </hui-yaml-editor>
         </div>
       </app-header-layout>
     `;
   }
 
   protected firstUpdated() {
-    const codeEditor = this.codeEditor;
-    codeEditor.value = yaml.safeDump(this.lovelace!.config);
-    codeEditor.addEventListener("keydown", (e) => {
+    const yamlEditor = this.yamlEditor;
+    yamlEditor.value = yaml.safeDump(this.lovelace!.config);
+    yamlEditor.addEventListener("keydown", (e) => {
       if (e.keyCode === 51) {
         this._hashAdded = true;
         return;
       }
     });
-    codeEditor.addEventListener("code-changed", (e) => {
-      this._hash = this._hashAdded || this.codeEditor.value.includes("#");
+    yamlEditor.addEventListener("yaml-changed", (e) => {
+      this._hash = this._hashAdded || this.yamlEditor.value.includes("#");
       if (this._changed) {
         return;
       }
@@ -169,7 +168,7 @@ class LovelaceFullConfigEditor extends LitElement {
 
     let value;
     try {
-      value = yaml.safeLoad(this.codeEditor.value);
+      value = yaml.safeLoad(this.yamlEditor.value);
     } catch (err) {
       alert(`Unable to parse YAML: ${err}`);
       this._saving = false;
@@ -192,8 +191,8 @@ class LovelaceFullConfigEditor extends LitElement {
     this._hashAdded = false;
   }
 
-  private get codeEditor(): HuiCodeEditor {
-    return this.shadowRoot!.querySelector("hui-code-editor")! as HuiCodeEditor;
+  private get yamlEditor(): HuiYamlEditor {
+    return this.shadowRoot!.querySelector("hui-yaml-editor")!;
   }
 }
 

yarn.lock

@@ -1436,6 +1436,13 @@
   resolved "https://registry.yarnpkg.com/@types/clone/-/clone-0.1.30.tgz#e7365648c1b42136a59c7d5040637b3b5c83b614"
   integrity sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ=
 
+"@types/codemirror@^0.0.71":
+  version "0.0.71"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.71.tgz#861f1bcb3100c0a064567c5400f2981cf4ae8ca7"
+  integrity sha512-b2oEEnno1LIGKMR7uBEsr40al1UijF1HEpRn0+Yf1xOLl24iQgB7DBpZVMM7y54G5wCNoclDrRO65E6KHPNO2w==
+  dependencies:
+    "@types/tern" "*"
+
 "@types/compression@^0.0.33":
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/@types/compression/-/compression-0.0.33.tgz#95dc733a2339aa846381d7f1377792d2553dc27d"
@@ -1477,7 +1484,7 @@
   resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-0.0.20.tgz#cae698714dd61ebee5ab3f2aeb9a34ba1011735a"
   integrity sha512-6dhZJLbA7aOwkYB2GDGdIqJ20wmHnkDzaxV9PJXe7O02I2dSFTERzRB6JrX6cWKaS+VqhhY7cQUMCbO5kloFUw==
 
-"@types/estree@0.0.39":
+"@types/estree@*", "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
@@ -1850,6 +1857,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/tern@*":
+  version "0.22.1"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.22.1.tgz#d96467553128794f42fbe7ba8f60b520acffb817"
+  integrity sha512-CRzPRkg8hYLwunsj61r+rqPJQbiCIEQqlMMY/0k7krgIsoSaFgGg1ZH2f9qaR1YpenaMl6PnlTtUkCbNH/uo+A==
+  dependencies:
+    "@types/estree" "*"
+
 "@types/through@*":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.29.tgz#72943aac922e179339c651fa34a4428a4d722f93"