From 5613df1d0141adcc102bf3cb26fb6b2c974cef89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <ludeeus@ludeeus.dev>
Date: Mon, 2 Sep 2024 17:21:58 +0200
Subject: [PATCH] Fix rendering of alerts in markdown when not breaking
 (#21856)

---
 gallery/src/pages/misc/ha-markdown.markdown |  3 +
 gallery/src/pages/misc/ha-markdown.ts       | 93 +++++++++++++++++++++
 src/components/ha-markdown-element.ts       | 20 ++++-
 3 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 gallery/src/pages/misc/ha-markdown.markdown
 create mode 100644 gallery/src/pages/misc/ha-markdown.ts

diff --git a/gallery/src/pages/misc/ha-markdown.markdown b/gallery/src/pages/misc/ha-markdown.markdown
new file mode 100644
index 000000000000..4e1bd1b6089f
--- /dev/null
+++ b/gallery/src/pages/misc/ha-markdown.markdown
@@ -0,0 +1,3 @@
+---
+title: Markdown
+---
diff --git a/gallery/src/pages/misc/ha-markdown.ts b/gallery/src/pages/misc/ha-markdown.ts
new file mode 100644
index 000000000000..600a9a4f0229
--- /dev/null
+++ b/gallery/src/pages/misc/ha-markdown.ts
@@ -0,0 +1,93 @@
+import { css, html, LitElement } from "lit";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-markdown";
+
+import { customElement } from "lit/decorators";
+
+interface MarkdownContent {
+  content: string;
+  breaks: boolean;
+  allowSvg: boolean;
+  lazyImages: boolean;
+}
+
+const mdContentwithDefaults = (md: Partial<MarkdownContent>) =>
+  ({
+    breaks: false,
+    allowSvg: false,
+    lazyImages: false,
+    ...md,
+  }) as MarkdownContent;
+
+const generateContent = (md) => `
+\`\`\`json
+${JSON.stringify({ ...md, content: undefined })}
+\`\`\`
+
+---
+
+${md.content}
+`;
+
+const markdownContents: MarkdownContent[] = [
+  mdContentwithDefaults({
+    content: "_Hello_ **there** 👋, ~~nice~~ of you ||to|| show up.",
+  }),
+  ...[true, false].map((breaks) =>
+    mdContentwithDefaults({
+      breaks,
+      content: `
+![image](https://img.shields.io/badge/markdown-rendering-brightgreen)
+![image](https://img.shields.io/badge/markdown-rendering-blue)
+
+> [!TIP]
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum quis ante eu eleifend. Integer sed [consectetur est, nec elementum magna](#). Fusce lobortis lectus ac rutrum tincidunt. Quisque suscipit gravida ante, in convallis risus vulputate non.
+
+key | description
+--  | --
+lorem | ipsum
+
+- list item 1
+- list item 2
+
+
+    `,
+    })
+  ),
+];
+
+@customElement("demo-misc-ha-markdown")
+export class DemoMiscMarkdown extends LitElement {
+  protected render() {
+    return html`
+      <div class="container">
+        ${markdownContents.map(
+          (md) =>
+            html`<ha-card>
+              <ha-markdown
+                .content=${generateContent(md)}
+                .breaks=${md.breaks}
+                .allowSvg=${md.allowSvg}
+                .lazyImages=${md.lazyImages}
+              ></ha-markdown>
+            </ha-card>`
+        )}
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        margin: 12px;
+        padding: 12px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-misc-ha-markdown": DemoMiscMarkdown;
+  }
+}
diff --git a/src/components/ha-markdown-element.ts b/src/components/ha-markdown-element.ts
index 5ca7fa66b262..e291a54cce35 100644
--- a/src/components/ha-markdown-element.ts
+++ b/src/components/ha-markdown-element.ts
@@ -96,7 +96,25 @@ class HaMarkdownElement extends ReactiveElement {
 
           haAlertNode.append(
             ...Array.from(node.childNodes)
-              .map((child) => Array.from(child.childNodes))
+              .map((child) => {
+                const arr = Array.from(child.childNodes);
+                if (!this.breaks && arr.length) {
+                  // When we are not breaking, the first line of the blockquote is not considered,
+                  // so we need to adjust the first child text content
+                  const firstChild = arr[0];
+                  if (
+                    firstChild.nodeType === Node.TEXT_NODE &&
+                    firstChild.textContent === gitHubAlertMatch.input &&
+                    firstChild.textContent?.includes("\n")
+                  ) {
+                    firstChild.textContent = firstChild.textContent
+                      .split("\n")
+                      .slice(1)
+                      .join("\n");
+                  }
+                }
+                return arr;
+              })
               .reduce((acc, val) => acc.concat(val), [])
               .filter(
                 (childNode) =>