Use YAML editor in card/badge editor (#22075)

src/components/ha-yaml-editor.ts

@@ -7,13 +7,15 @@ import {
   nothing,
   PropertyValues,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
 import { haStyle } from "../resources/styles";
 import "./ha-code-editor";
 import { showToast } from "../util/toast";
 import { copyToClipboard } from "../common/util/copy-clipboard";
+import type { HaCodeEditor } from "./ha-code-editor";
+import "./ha-button";
 
 const isEmpty = (obj: Record<string, unknown>): boolean => {
   if (typeof obj !== "object") {
@@ -53,6 +55,8 @@ export class HaYamlEditor extends LitElement {
 
   @state() private _yaml = "";
 
+  @query("ha-code-editor") _codeEditor?: HaCodeEditor;
+
   public setValue(value): void {
     try {
       this._yaml =
@@ -83,6 +87,12 @@ export class HaYamlEditor extends LitElement {
     }
   }
 
+  public focus(): void {
+    if (this._codeEditor?.codemirror) {
+      this._codeEditor?.codemirror.focus();
+    }
+  }
+
   protected render() {
     if (this._yaml === undefined) {
       return nothing;
@@ -90,7 +100,7 @@ export class HaYamlEditor extends LitElement {
     return html`
       ${this.label
         ? html`<p>${this.label}${this.required ? " *" : ""}</p>`
-        : ""}
+        : nothing}
       <ha-code-editor
         .hass=${this.hass}
         .value=${this._yaml}
@@ -103,16 +113,20 @@ export class HaYamlEditor extends LitElement {
         dir="ltr"
       ></ha-code-editor>
       ${this.copyClipboard || this.hasExtraActions
-        ? html`<div class="card-actions">
+        ? html`
-            ${this.copyClipboard
+            <div class="card-actions">
-              ? html` <mwc-button @click=${this._copyYaml}>
+              ${this.copyClipboard
-                  ${this.hass.localize(
+                ? html`
-                    "ui.components.yaml-editor.copy_to_clipboard"
+                    <ha-button @click=${this._copyYaml}>
-                  )}
+                      ${this.hass.localize(
-                </mwc-button>`
+                        "ui.components.yaml-editor.copy_to_clipboard"
-              : nothing}
+                      )}
-            <slot name="extra-actions"></slot>
+                    </ha-button>
-          </div>`
+                  `
+                : nothing}
+              <slot name="extra-actions"></slot>
+            </div>
+          `
         : nothing}
     `;
   }

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

@@ -1,4 +1,3 @@
-import { dump, load } from "js-yaml";
 import {
   CSSResultGroup,
   LitElement,
@@ -14,8 +13,8 @@ import { handleStructError } from "../../../common/structs/handle-errors";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-alert";
 import "../../../components/ha-circular-progress";
-import "../../../components/ha-code-editor";
+import "../../../components/ha-yaml-editor";
-import type { HaCodeEditor } from "../../../components/ha-code-editor";
+import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import { LovelaceConfig } from "../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../types";
 import type {
@@ -56,8 +55,6 @@ export abstract class HuiElementEditor<
 
   @property({ attribute: false }) public context?: C;
 
-  @state() private _yaml?: string;
-
   @state() private _config?: T;
 
   @state() private _configElement?: LovelaceGenericElementEditor;
@@ -74,25 +71,7 @@ export abstract class HuiElementEditor<
 
   @state() private _loading = false;
 
-  @query("ha-code-editor") _yamlEditor?: HaCodeEditor;
+  @query("ha-yaml-editor") _yamlEditor?: HaYamlEditor;
-
-  public get yaml(): string {
-    if (!this._yaml) {
-      this._yaml = dump(this._config);
-    }
-    return this._yaml || "";
-  }
-
-  public set yaml(_yaml: string) {
-    this._yaml = _yaml;
-    try {
-      this._config = load(this.yaml) as any;
-      this._errors = undefined;
-    } catch (err: any) {
-      this._errors = [err.message];
-    }
-    this._setConfig();
-  }
 
   public get value(): T | undefined {
     return this._config;
@@ -103,7 +82,6 @@ export abstract class HuiElementEditor<
       return;
     }
     this._config = config;
-    this._yaml = undefined;
     this._errors = undefined;
     this._setConfig();
   }
@@ -164,10 +142,10 @@ export abstract class HuiElementEditor<
     if (this._configElement?.focusYamlEditor) {
       this._configElement.focusYamlEditor();
     }
-    if (!this._yamlEditor?.codemirror) {
+    if (!this._yamlEditor) {
       return;
     }
-    this._yamlEditor.codemirror.focus();
+    this._yamlEditor.focus();
   }
 
   protected async getConfigElement(): Promise<
@@ -202,18 +180,14 @@ export abstract class HuiElementEditor<
             `
           : html`
               <div class="yaml-editor">
-                <ha-code-editor
+                <ha-yaml-editor
-                  mode="yaml"
+                  .defaultValue=${this._config}
                   autofocus
-                  autocomplete-entities
-                  autocomplete-icons
                   .hass=${this.hass}
-                  .value=${this.yaml}
-                  .error=${Boolean(this._errors)}
                   @value-changed=${this._handleYAMLChanged}
                   @keydown=${this._ignoreKeydown}
                   dir="ltr"
-                ></ha-code-editor>
+                ></ha-yaml-editor>
               </div>
             `}
         ${this._guiSupported === false && this._loading === false
@@ -296,9 +270,11 @@ export abstract class HuiElementEditor<
 
   private _handleYAMLChanged(ev: CustomEvent) {
     ev.stopPropagation();
-    const newYaml = ev.detail.value;
+    const config = ev.detail.value;
-    if (newYaml !== this.yaml) {
+    if (ev.detail.isValid) {
-      this.yaml = newYaml;
+      this._config = config;
+      this._errors = undefined;
+      this._setConfig();
     }
   }