From eda0ea077c2993f9ee0cc34aeb3db4a7b0e34c46 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Mon, 13 Jan 2025 22:49:09 -0800
Subject: [PATCH] Show yaml parsing errors in hui-element-editor (#23690)

---
 .../lovelace/editor/hui-element-editor.ts     | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 6df053cc52..8032004b6c 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -4,6 +4,7 @@ import { property, query, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { debounce } from "../../../common/util/debounce";
 import { handleStructError } from "../../../common/structs/handle-errors";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-alert";
@@ -67,6 +68,11 @@ export abstract class HuiElementEditor<
   // Error: Configuration broken - do not save
   @state() private _errors?: string[];
 
+  // Error from unparseable YAML, but don't show it immediately to prevent showing immediately on every keystroke
+  @state() private _pendingYamlError?: string;
+
+  @state() private _yamlError = false;
+
   // Warning: GUI editor can't handle configuration - ok to save
   @state() private _warnings?: string[];
 
@@ -237,6 +243,7 @@ export abstract class HuiElementEditor<
                   autofocus
                   .hass=${this.hass}
                   @value-changed=${this._handleYAMLChanged}
+                  @blur=${this._onBlurYaml}
                   @keydown=${this._ignoreKeydown}
                   dir="ltr"
                 ></ha-yaml-editor>
@@ -327,6 +334,34 @@ export abstract class HuiElementEditor<
     if (ev.detail.isValid) {
       this._config = config;
       this._errors = undefined;
+      this._pendingYamlError = undefined;
+      this._yamlError = false;
+      this._debounceYamlError.cancel();
+      this._setConfig();
+    } else if (this._yamlError) {
+      // If we're already showing a yaml error, don't bother to debounce, just update immediately.
+      this._errors = [ev.detail.errorMsg];
+    } else {
+      this._pendingYamlError = ev.detail.errorMsg;
+      this._debounceYamlError();
+    }
+  }
+
+  private _debounceYamlError = debounce(() => {
+    if (this._pendingYamlError) {
+      this._yamlError = true;
+      this._errors = [this._pendingYamlError];
+      this._pendingYamlError = undefined;
+      this._setConfig();
+    }
+  }, 2000);
+
+  private _onBlurYaml() {
+    this._debounceYamlError.cancel();
+    if (this._pendingYamlError) {
+      this._yamlError = true;
+      this._errors = [this._pendingYamlError];
+      this._pendingYamlError = undefined;
       this._setConfig();
     }
   }