Remove hui-yaml-editor

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

@@ -15,7 +15,7 @@ declare global {
 }
 
 export class HuiCodeEditor extends HTMLElement {
-  public cm;
+  public codemirror;
   private _value;
 
   constructor() {
@@ -35,35 +35,34 @@ export class HuiCodeEditor extends HTMLElement {
   }
 
   set value(value: string) {
-    console.log(value);
+    if (this.codemirror) {
-    if (this.cm) {
+      if (value !== this.codemirror.getValue()) {
-      if (value !== this.cm.getValue()) {
+        this.codemirror.setValue(value);
-        this.cm.setValue(value);
       }
     }
     this._value = value;
   }
 
   get value() {
-    return this.cm.getValue();
+    return this.codemirror.getValue();
   }
 
   public connectedCallback() {
-    if (!this.cm) {
+    if (!this.codemirror) {
-      this.cm = CodeMirror(this.shadowRoot, {
+      this.codemirror = CodeMirror(this.shadowRoot, {
         value: this._value,
         lineNumbers: true,
         mode: "yaml",
         tabSize: 2,
       });
-      this.cm.on("changes", this._onChange);
+      this.codemirror.on("changes", this._onChange);
     } else {
-      this.cm.refresh();
+      this.codemirror.refresh();
     }
   }
 
   private _onChange() {
-    fireEvent(_this, "code-changed", { value: _this.cm.getValue() });
+    fireEvent(_this, "code-changed", { value: _this.codemirror.getValue() });
   }
 }
 

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

@@ -23,7 +23,7 @@ import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
 import { fireEvent } from "../../../../common/dom/fire_event";
 
-import "./hui-yaml-editor";
+import "../../components/hui-code-editor";
 import "./hui-card-preview";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
@@ -36,9 +36,6 @@ import { addCard, replaceCard } from "../config-util";
 
 declare global {
   interface HASSDomEvents {
-    "yaml-changed": {
-      yaml: string;
-    };
     "entities-changed": {
       entities: EntityConfig[];
     };
@@ -118,11 +115,10 @@ export class HuiEditCard extends LitElement {
           ${this._uiEditor
             ? this._configElement
             : html`
-                <hui-yaml-editor
+                <hui-code-editor
-                  .hass="${this.hass}"
+                  .value="${this._configValue!.value}"
-                  .yaml="${this._configValue!.value}"
+                  @code-changed="${this._handleYamlChanged}"
-                  @yaml-changed="${this._handleYamlChanged}"
+                ></hui-code-editor>
-                ></hui-yaml-editor>
               `}
         </div>
       `;
@@ -238,8 +234,8 @@ export class HuiEditCard extends LitElement {
     }
   }
 
-  private _handleYamlChanged(ev: YamlChangedEvent): void {
+  private _handleYamlChanged(ev: CustomEvent): void {
-    this._configValue = { format: "yaml", value: ev.detail.yaml };
+    this._configValue = { format: "yaml", value: ev.detail.value };
     try {
       const config = yaml.safeLoad(
         this._configValue.value

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

@@ -1,64 +0,0 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  TemplateResult,
-} from "lit-element";
-import "@polymer/paper-input/paper-textarea";
-
-import { HomeAssistant } from "../../../../types";
-import { fireEvent } from "../../../../common/dom/fire_event";
-
-import "../../components/hui-code-editor";
-
-export class HuiYAMLEditor extends LitElement {
-  protected hass?: HomeAssistant;
-  private _yaml?: string;
-
-  static get properties(): PropertyDeclarations {
-    return { _yaml: {} };
-  }
-
-  set yaml(yaml: string) {
-    if (yaml === undefined) {
-      return;
-    } else {
-      this._yaml = yaml;
-    }
-  }
-
-  protected render(): TemplateResult | void {
-    return html`
-      ${this.renderStyle()}
-      <hui-code-editor
-        .value="${this._yaml}"
-        @code-changed="${this._valueChanged}"
-      >
-      </hui-code-editor>
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        paper-textarea {
-          --paper-input-container-shared-input-style_-_font-family: monospace;
-        }
-      </style>
-    `;
-  }
-
-  private _valueChanged(ev: CustomEvent): void {
-    fireEvent(this, "yaml-changed", {
-      yaml: ev.detail.value,
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-yaml-editor": HuiYAMLEditor;
-  }
-}
-
-customElements.define("hui-yaml-editor", HuiYAMLEditor);