jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify GtHub markdown alerts (#19536)

Browse Source 
Simplify GtHub merkdown alerts
This commit is contained in:
Joakim Sørensen 2024-01-30 13:37:47 +01:00 committed by GitHub
parent 623ac88166
commit 0944b1e9d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/ha-markdown-element.ts
View File

@ -3,13 +3,16 @@ 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 _legacyGitHubBlockQuoteToAlert = { Note: "info", Warning: "warning" }; const _gitHubMarkdownAlerts = {
const _gitHubBlockQuoteToAlert = { reType:
"[!NOTE]": "info", /(?<input>(\[!(?<type>caution|important|note|tip|warning)\])(?:\s|\\n)?)/i,
"[!TIP]": "success", typeToHaAlert: {
"[!IMPORTANT]": "info", caution: "error",
"[!WARNING]": "warning", important: "info",
"[!CAUTION]": "error", note: "info",
tip: "success",
warning: "warning",
},
}; };
@customElement("ha-markdown-element") @customElement("ha-markdown-element")
@ -75,42 +78,33 @@ class HaMarkdownElement extends ReactiveElement {
} }
node.addEventListener("load", this._resize); node.addEventListener("load", this._resize);
} else if (node instanceof HTMLQuoteElement) { } else if (node instanceof HTMLQuoteElement) {
// Map GitHub blockquote elements to our ha-alert element /**
const firstElementChild = node.firstElementChild; * Map GitHub blockquote elements to our ha-alert element
const quoteTitleElement = firstElementChild?.firstElementChild; * 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 blockQuoteType = */
firstElementChild?.firstChild?.textContent && const gitHubAlertMatch =
_gitHubBlockQuoteToAlert[firstElementChild.firstChild.textContent]; node.firstElementChild?.firstChild?.textContent &&
const legacyBlockQuoteType = _gitHubMarkdownAlerts.reType.exec(
!blockQuoteType && node.firstElementChild.firstChild.textContent
quoteTitleElement?.textContent && );
_legacyGitHubBlockQuoteToAlert[quoteTitleElement.textContent];
if ( if (gitHubAlertMatch) {
blockQuoteType || const { type: alertType } = gitHubAlertMatch.groups!;
(quoteTitleElement?.nodeName === "STRONG" && legacyBlockQuoteType) const haAlertNode = document.createElement("ha-alert");
) { haAlertNode.alertType =
const alertNote = document.createElement("ha-alert"); _gitHubMarkdownAlerts.typeToHaAlert[alertType.toLowerCase()];
alertNote.alertType = blockQuoteType || legacyBlockQuoteType;
alertNote.title = blockQuoteType
? ""
: (firstElementChild!.childNodes[1].nodeName === "#text" &&
firstElementChild!.childNodes[1].textContent?.trimStart()) ||
"";
const childNodes = Array.from(node.childNodes) haAlertNode.append(
.map((child) => Array.from(child.childNodes)) ...Array.from(node.childNodes)
.reduce((acc, val) => acc.concat(val), []) .map((child) => Array.from(child.childNodes))
.filter( .reduce((acc, val) => acc.concat(val), [])
(childNode) => .filter(
childNode.textContent && (childNode) =>
!(childNode.textContent in _gitHubBlockQuoteToAlert) && childNode.textContent &&
!(childNode.textContent in _legacyGitHubBlockQuoteToAlert) childNode.textContent !== gitHubAlertMatch.input
); )
for (const child of childNodes) { );
alertNote.appendChild(child); walker.parentNode()!.replaceChild(haAlertNode, node);
}
node.firstElementChild!.replaceWith(alertNote);
} }
} else if ( } else if (
node instanceof HTMLElement && node instanceof HTMLElement &&

4
src/components/ha-markdown.ts
View File

@ -42,6 +42,10 @@ export class HaMarkdown extends LitElement {
ha-markdown-element > *:last-child { ha-markdown-element > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
ha-alert {
display: block;
margin: 4px 0;
}
a { a {
color: var(--primary-color); color: var(--primary-color);
} }