Skip to content

site: fix GFM alerts rendering when links are present #19422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+19 −7
Draft

site: fix GFM alerts rendering when links are present #19422

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
026850f
site: fix GFM alerts rendering when links are present\n\nEnsure all t…
blink-so[bot] Aug 19, 2025
87b6a45
site: format Markdown.tsx via biome\n\nCo-authored-by: jaaydenh <1858…
blink-so[bot] Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 19 additions & 7 deletions site/src/components/Markdown/Markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ interface InlineMarkdownProps {
/**
* Additional element types to allow.
* Allows italic, bold, links, and inline code snippets by default.
* eg. `["ol", "ul", "li"]` to support lists.
* eg. ["ol", "ul", "li"] to support lists.
*/
allowedElements?: readonly string[];

Expand Down Expand Up @@ -251,9 +251,14 @@ function parseChildrenAsAlertContent(
return null;
}

const mainParentNode = jsxChildren.find((node): node is ReactElement =>
isValidElement(node),
// Identify the first element (usually a <p>) which contains the marker like [!NOTE]
const firstElementIndex = jsxChildren.findIndex(
(node): node is ReactElement => isValidElement(node),
);
const mainParentNode =
firstElementIndex >= 0
? (jsxChildren[firstElementIndex] as ReactElement)
: undefined;
let parentChildren = mainParentNode?.props.children;
if (typeof parentChildren === "string") {
// Children will only be an array if the parsed text contains other
Expand Down Expand Up @@ -301,7 +306,7 @@ function parseChildrenAsAlertContent(
},
};
});
const [firstEl, ...remainingChildren] = outputContent;
const [firstEl, ...firstParagraphRemainder] = outputContent;
if (typeof firstEl !== "string") {
return null;
}
Expand All @@ -317,14 +322,21 @@ function parseChildrenAsAlertContent(
}

const hasLeadingLinebreak =
isValidElement(remainingChildren[0]) && remainingChildren[0].type === "br";
isValidElement(firstParagraphRemainder[0]) &&
firstParagraphRemainder[0].type === "br";
if (hasLeadingLinebreak) {
remainingChildren.shift();
firstParagraphRemainder.shift();
}

// Include all sibling nodes after the first paragraph so that additional
// content (including links) renders inside the alert.
const trailingSiblings = jsxChildren
.slice(firstElementIndex + 1)
.filter((el) => !(typeof el === "string" && el.trim() === ""));

return {
type: alertType,
children: remainingChildren,
children: [...firstParagraphRemainder, ...trailingSiblings],
};
}

Expand Down
Loading