From 0944b1e9d3daeade3a06ca9b8d7bda22f3938df6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <ludeeus@ludeeus.dev>
Date: Tue, 30 Jan 2024 13:37:47 +0100
Subject: [PATCH] Simplify GtHub markdown alerts (#19536)

Simplify GtHub merkdown alerts
---
 src/components/ha-markdown-element.ts | 76 ++++++++++++---------------
 src/components/ha-markdown.ts         |  4 ++
 2 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/src/components/ha-markdown-element.ts b/src/components/ha-markdown-element.ts
index cd4e90c0c9..5ca7fa66b2 100644
--- a/src/components/ha-markdown-element.ts
+++ b/src/components/ha-markdown-element.ts
@@ -3,13 +3,16 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
 
-const _legacyGitHubBlockQuoteToAlert = { Note: "info", Warning: "warning" };
-const _gitHubBlockQuoteToAlert = {
-  "[!NOTE]": "info",
-  "[!TIP]": "success",
-  "[!IMPORTANT]": "info",
-  "[!WARNING]": "warning",
-  "[!CAUTION]": "error",
+const _gitHubMarkdownAlerts = {
+  reType:
+    /(?<input>(\[!(?<type>caution|important|note|tip|warning)\])(?:\s|\\n)?)/i,
+  typeToHaAlert: {
+    caution: "error",
+    important: "info",
+    note: "info",
+    tip: "success",
+    warning: "warning",
+  },
 };
 
 @customElement("ha-markdown-element")
@@ -75,42 +78,33 @@ class HaMarkdownElement extends ReactiveElement {
         }
         node.addEventListener("load", this._resize);
       } else if (node instanceof HTMLQuoteElement) {
-        // Map GitHub blockquote elements to our ha-alert element
-        const firstElementChild = node.firstElementChild;
-        const quoteTitleElement = firstElementChild?.firstElementChild;
-        const blockQuoteType =
-          firstElementChild?.firstChild?.textContent &&
-          _gitHubBlockQuoteToAlert[firstElementChild.firstChild.textContent];
-        const legacyBlockQuoteType =
-          !blockQuoteType &&
-          quoteTitleElement?.textContent &&
-          _legacyGitHubBlockQuoteToAlert[quoteTitleElement.textContent];
+        /**
+         * Map GitHub blockquote elements to our ha-alert element
+         * https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
+         */
+        const gitHubAlertMatch =
+          node.firstElementChild?.firstChild?.textContent &&
+          _gitHubMarkdownAlerts.reType.exec(
+            node.firstElementChild.firstChild.textContent
+          );
 
-        if (
-          blockQuoteType ||
-          (quoteTitleElement?.nodeName === "STRONG" && legacyBlockQuoteType)
-        ) {
-          const alertNote = document.createElement("ha-alert");
-          alertNote.alertType = blockQuoteType || legacyBlockQuoteType;
-          alertNote.title = blockQuoteType
-            ? ""
-            : (firstElementChild!.childNodes[1].nodeName === "#text" &&
-                firstElementChild!.childNodes[1].textContent?.trimStart()) ||
-              "";
+        if (gitHubAlertMatch) {
+          const { type: alertType } = gitHubAlertMatch.groups!;
+          const haAlertNode = document.createElement("ha-alert");
+          haAlertNode.alertType =
+            _gitHubMarkdownAlerts.typeToHaAlert[alertType.toLowerCase()];
 
-          const childNodes = Array.from(node.childNodes)
-            .map((child) => Array.from(child.childNodes))
-            .reduce((acc, val) => acc.concat(val), [])
-            .filter(
-              (childNode) =>
-                childNode.textContent &&
-                !(childNode.textContent in _gitHubBlockQuoteToAlert) &&
-                !(childNode.textContent in _legacyGitHubBlockQuoteToAlert)
-            );
-          for (const child of childNodes) {
-            alertNote.appendChild(child);
-          }
-          node.firstElementChild!.replaceWith(alertNote);
+          haAlertNode.append(
+            ...Array.from(node.childNodes)
+              .map((child) => Array.from(child.childNodes))
+              .reduce((acc, val) => acc.concat(val), [])
+              .filter(
+                (childNode) =>
+                  childNode.textContent &&
+                  childNode.textContent !== gitHubAlertMatch.input
+              )
+          );
+          walker.parentNode()!.replaceChild(haAlertNode, node);
         }
       } else if (
         node instanceof HTMLElement &&
diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts
index f81ddd2860..d8f0ba2270 100644
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@@ -42,6 +42,10 @@ export class HaMarkdown extends LitElement {
       ha-markdown-element > *:last-child {
         margin-bottom: 0;
       }
+      ha-alert {
+        display: block;
+        margin: 4px 0;
+      }
       a {
         color: var(--primary-color);
       }