From e3cdd698355def806de2b457a9cfd109757228b7 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Tue, 17 Jun 2025 23:32:06 -0700
Subject: [PATCH] Display yaml errors in all ha-yaml-editor (#25819)

---
 src/components/ha-yaml-editor.ts              | 22 +++++++++++++++++++
 .../config/automation/ha-automation-editor.ts |  1 +
 src/panels/config/scene/ha-scene-editor.ts    |  1 +
 src/panels/config/script/ha-script-editor.ts  |  1 +
 .../lovelace/editor/hui-element-editor.ts     |  1 +
 5 files changed, 26 insertions(+)

diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts
index 561feb0f3f..c2a95a4022 100644
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -11,6 +11,7 @@ import { showToast } from "../util/toast";
 import { copyToClipboard } from "../common/util/copy-clipboard";
 import type { HaCodeEditor } from "./ha-code-editor";
 import "./ha-button";
+import "./ha-alert";
 
 const isEmpty = (obj: Record<string, unknown>): boolean => {
   if (typeof obj !== "object" || obj === null) {
@@ -51,8 +52,15 @@ export class HaYamlEditor extends LitElement {
   @property({ attribute: "has-extra-actions", type: Boolean })
   public hasExtraActions = false;
 
+  @property({ attribute: "show-errors", type: Boolean })
+  public showErrors = true;
+
   @state() private _yaml = "";
 
+  @state() private _error = "";
+
+  @state() private _showingError = false;
+
   @query("ha-code-editor") _codeEditor?: HaCodeEditor;
 
   public setValue(value): void {
@@ -107,8 +115,12 @@ export class HaYamlEditor extends LitElement {
         autocomplete-icons
         .error=${this.isValid === false}
         @value-changed=${this._onChange}
+        @blur=${this._onBlur}
         dir="ltr"
       ></ha-code-editor>
+      ${this._showingError
+        ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+        : nothing}
       ${this.copyClipboard || this.hasExtraActions
         ? html`
             <div class="card-actions">
@@ -146,6 +158,10 @@ export class HaYamlEditor extends LitElement {
     } else {
       parsed = {};
     }
+    this._error = errorMsg ?? "";
+    if (isValid) {
+      this._showingError = false;
+    }
 
     this.value = parsed;
     this.isValid = isValid;
@@ -157,6 +173,12 @@ export class HaYamlEditor extends LitElement {
     } as any);
   }
 
+  private _onBlur(): void {
+    if (this.showErrors && this._error) {
+      this._showingError = true;
+    }
+  }
+
   get yaml() {
     return this._yaml;
   }
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 5fae94ede3..09913aec3c 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -501,6 +501,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                     .defaultValue=${this._preprocessYaml()}
                     .readOnly=${this._readOnly}
                     @value-changed=${this._yamlChanged}
+                    .showErrors=${false}
                   ></ha-yaml-editor>`
               : nothing}
         </div>
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index d118cbf9c9..66494fbf3e 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -320,6 +320,7 @@ export class HaSceneEditor extends PreventUnsavedMixin(
       .hass=${this.hass}
       .defaultValue=${this._config}
       @value-changed=${this._yamlChanged}
+      .showErrors=${false}
     ></ha-yaml-editor>`;
   }
 
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 0e422ae834..4eaffe3d45 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -441,6 +441,7 @@ export class HaScriptEditor extends SubscribeMixin(
                   .defaultValue=${this._preprocessYaml()}
                   .readOnly=${this._readOnly}
                   @value-changed=${this._yamlChanged}
+                  .showErrors=${false}
                 ></ha-yaml-editor>`
               : nothing}
         </div>
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 9ac4546bab..b8a21bb35f 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -243,6 +243,7 @@ export abstract class HuiElementEditor<
                   @blur=${this._onBlurYaml}
                   @keydown=${this._ignoreKeydown}
                   dir="ltr"
+                  .showErrors=${false}
                 ></ha-yaml-editor>
               </div>
             `}