Fix markdown card template handling (#17851)

src/panels/developer-tools/template/developer-tools-template.ts

@@ -340,6 +340,8 @@ class HaPanelDevTemplate extends LitElement {
   private async _subscribeTemplate() {
     this._rendering = true;
     await this._unsubscribeTemplate();
+    this._error = undefined;
+    this._errorLevel = undefined;
     this._templateResult = undefined;
     try {
       this._unsubRenderTemplate = subscribeRenderTemplate(
@@ -353,8 +355,6 @@ class HaPanelDevTemplate extends LitElement {
             }
           } else {
             this._templateResult = result;
-            this._error = undefined;
-            this._errorLevel = undefined;
           }
         },
         {

src/panels/lovelace/cards/hui-markdown-card.ts

@@ -12,6 +12,7 @@ import { classMap } from "lit/directives/class-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import "../../../components/ha-card";
 import "../../../components/ha-markdown";
+import "../../../components/ha-alert";
 import {
   RenderTemplateResult,
   subscribeRenderTemplate,
@@ -37,11 +38,17 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public editMode?: boolean;
+
   @state() private _config?: MarkdownCardConfig;
 
+  @state() private _error?: string;
+
+  @state() private _errorLevel?: "ERROR" | "WARNING";
+
   @state() private _templateResult?: RenderTemplateResult;
 
-  @state() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
+  private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
 
   public getCardSize(): number {
     return this._config === undefined
@@ -79,6 +86,12 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     }
 
     return html`
+      ${this._error
+        ? html`<ha-alert
+            alert-type=${this._errorLevel?.toLowerCase() || "error"}
+            >${this._error}</ha-alert
+          >`
+        : nothing}
       <ha-card .header=${this._config.title}>
         <ha-markdown
           breaks
@@ -97,7 +110,9 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    this._tryConnect();
+    if (changedProps.has("_config")) {
+      this._tryConnect();
+    }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     const oldConfig = changedProps.get("_config") as
@@ -123,11 +138,22 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       return;
     }
 
+    this._error = undefined;
+    this._errorLevel = undefined;
+
     try {
       this._unsubRenderTemplate = subscribeRenderTemplate(
         this.hass.connection,
         (result) => {
-          this._templateResult = result as RenderTemplateResult;
+          if ("error" in result) {
+            // We show the latest error, or a warning if there are no errors
+            if (result.level === "ERROR" || this._errorLevel !== "ERROR") {
+              this._error = result.error;
+              this._errorLevel = result.level;
+            }
+            return;
+          }
+          this._templateResult = result;
         },
         {
           template: this._config.content,
@@ -137,10 +163,15 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
             user: this.hass.user!.name,
           },
           strict: true,
+          report_errors: this.editMode,
         }
       );
       await this._unsubRenderTemplate;
-    } catch (_err) {
+    } catch (e: any) {
+      if (this.editMode) {
+        this._error = e.message;
+        this._errorLevel = undefined;
+      }
       this._templateResult = {
         result: this._config!.content,
         listeners: { all: false, domains: [], entities: [], time: false },
@@ -154,17 +185,10 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    try {
+    this._unsubRenderTemplate.then((unsub) => unsub()).catch(() => {});
-      const unsub = await this._unsubRenderTemplate;
+    this._unsubRenderTemplate = undefined;
-      unsub();
+    this._error = undefined;
-      this._unsubRenderTemplate = undefined;
+    this._errorLevel = undefined;
-    } catch (err: any) {
-      if (err.code === "not_found") {
-        // If we get here, the connection was probably already closed. Ignore.
-      } else {
-        throw err;
-      }
-    }
   }
 
   static get styles(): CSSResultGroup {
@@ -172,6 +196,9 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       ha-card {
         height: 100%;
       }
+      ha-alert {
+        margin-bottom: 8px;
+      }
       ha-markdown {
         padding: 0 16px 16px;
         word-wrap: break-word;

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

@@ -87,6 +87,8 @@ export class HuiCardPreview extends ReactiveElement {
     this._cleanup();
     this._element = createCardElement(configValue);
 
+    this._element.editMode = true;
+
     if (this.hass) {
       this._element!.hass = this.hass;
     }