Add support for new GitHub alerts (#19470)

This commit is contained in:
Joakim Sørensen 2024-01-19 17:10:46 +01:00 committed by GitHub
parent 809df848ef
commit 51059e99a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 17 deletions

View File

@ -65,15 +65,20 @@ const CONFIGS = [
>> ...by using additional greater-than signs right next to each other... >> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows. > > > ...or with spaces between arrows.
> **Warning** Hey there > [!NOTE]
> This is a warning with a title > This is a GitHub note alert
> **Note** > [!TIP]
> This is a note > This is a GitHub tip alert
> **Note** > [!IMPORTANT]
> This is a multiline note > This is a GitHub important alert
> Lorem ipsum...
> [!WARNING]
> This is a GitHub warning alert
> [!CAUTION]
> This is a GitHub caution alert
## Lists ## Lists

View File

@ -3,7 +3,14 @@ import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { renderMarkdown } from "../resources/render-markdown"; import { renderMarkdown } from "../resources/render-markdown";
const _blockQuoteToAlert = { Note: "info", Warning: "warning" }; const _legacyGitHubBlockQuoteToAlert = { Note: "info", Warning: "warning" };
const _gitHubBlockQuoteToAlert = {
"[!NOTE]": "info",
"[!TIP]": "success",
"[!IMPORTANT]": "info",
"[!WARNING]": "warning",
"[!CAUTION]": "error",
};
@customElement("ha-markdown-element") @customElement("ha-markdown-element")
class HaMarkdownElement extends ReactiveElement { class HaMarkdownElement extends ReactiveElement {
@ -71,18 +78,25 @@ class HaMarkdownElement extends ReactiveElement {
// Map GitHub blockquote elements to our ha-alert element // Map GitHub blockquote elements to our ha-alert element
const firstElementChild = node.firstElementChild; const firstElementChild = node.firstElementChild;
const quoteTitleElement = firstElementChild?.firstElementChild; const quoteTitleElement = firstElementChild?.firstElementChild;
const quoteType = const blockQuoteType =
firstElementChild?.firstChild?.textContent &&
_gitHubBlockQuoteToAlert[firstElementChild.firstChild.textContent];
const legacyBlockQuoteType =
!blockQuoteType &&
quoteTitleElement?.textContent && quoteTitleElement?.textContent &&
_blockQuoteToAlert[quoteTitleElement.textContent]; _legacyGitHubBlockQuoteToAlert[quoteTitleElement.textContent];
// GitHub is strict on how these are defined, we need to make sure we know what we have before starting to replace it if (
if (quoteTitleElement?.nodeName === "STRONG" && quoteType) { blockQuoteType ||
(quoteTitleElement?.nodeName === "STRONG" && legacyBlockQuoteType)
) {
const alertNote = document.createElement("ha-alert"); const alertNote = document.createElement("ha-alert");
alertNote.alertType = quoteType; alertNote.alertType = blockQuoteType || legacyBlockQuoteType;
alertNote.title = alertNote.title = blockQuoteType
(firstElementChild!.childNodes[1].nodeName === "#text" && ? ""
firstElementChild!.childNodes[1].textContent?.trimStart()) || : (firstElementChild!.childNodes[1].nodeName === "#text" &&
""; firstElementChild!.childNodes[1].textContent?.trimStart()) ||
"";
const childNodes = Array.from(firstElementChild!.childNodes); const childNodes = Array.from(firstElementChild!.childNodes);
for (const child of childNodes.slice( for (const child of childNodes.slice(