Display yaml errors in all ha-yaml-editor (#25819)

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;
   }

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>

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>`;
   }
 

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>

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>
             `}