fix(markdown): address PR #275 review feedback

Author: edelauna

webview-ui/src/components/common/MarkdownBlock.tsx

@@ -369,26 +369,22 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 					</code>
 				)
 			},
-			blockquote: ({ children, className, ...props }: any) => {
+			blockquote: ({ children, className, "data-alert-type": alertType, ..._rest }: any) => {
 				// The remarkGithubAlerts plugin tags alert blockquotes with a
 				// `data-alert-type` attribute and `markdown-alert*` classes.
 				// Anything without that attribute is a normal blockquote and
 				// must render unchanged.
-				const alertType = props["data-alert-type"] as AlertType | undefined
+				const typedAlertType = alertType as AlertType | undefined
 
-				if (!alertType || !(alertType in ALERT_ICONS)) {
-					return (
-						<blockquote className={className} {...props}>
-							{children}
-						</blockquote>
-					)
+				if (!typedAlertType || !(typedAlertType in ALERT_ICONS)) {
+					return <blockquote className={className}>{children}</blockquote>
 				}
 
 				return (
-					<blockquote className={className} {...props}>
+					<blockquote className={className} data-alert-type={typedAlertType}>
 						<div className="markdown-alert-title">
-							<span className={`codicon ${ALERT_ICONS[alertType]}`} aria-hidden="true" />
-							<span>{ALERT_LABELS[alertType]}</span>
+							<span className={`codicon ${ALERT_ICONS[typedAlertType]}`} aria-hidden="true" />
+							<span>{ALERT_LABELS[typedAlertType]}</span>
 						</div>
 						{children}
 					</blockquote>

webview-ui/src/utils/markdown.ts

@@ -1,3 +1,5 @@
+import { visit } from "unist-util-visit"
+
 /**
  * Counts the number of markdown headings in the given text.
  * Matches headings from level 1 to 6 (e.g. #, ##, ###, etc.).
@@ -32,7 +34,7 @@ export type AlertType = (typeof ALERT_TYPES)[number]
 
 // Matches a leading alert marker like "[!NOTE]" (case-insensitive) optionally
 // followed by trailing whitespace/newline on the first line of a blockquote.
-const ALERT_MARKER_REGEX = /^\[!(note|tip|important|warning|caution)\][^\S\r\n]*\r?\n?/i
+const ALERT_MARKER_REGEX = new RegExp(`^\\[!(${ALERT_TYPES.join("|")})\\][^\\S\\r\\n]*\\r?\\n?`, "i")
 
 /**
  * remark plugin that detects GitHub-style alerts inside blockquotes
@@ -47,24 +49,8 @@ const ALERT_MARKER_REGEX = /^\[!(note|tip|important|warning|caution)\][^\S\r\n]*
  * normal blockquotes continue to render exactly as before.
  */
 export function remarkGithubAlerts() {
-	return (tree: any) => {
-		walkAlertBlockquotes(tree)
-	}
-}
-
-function walkAlertBlockquotes(node: any): void {
-	if (!node || typeof node !== "object") {
-		return
-	}
-
-	if (node.type === "blockquote") {
-		annotateAlertBlockquote(node)
-	}
-
-	if (Array.isArray(node.children)) {
-		for (const child of node.children) {
-			walkAlertBlockquotes(child)
-		}
+	return (tree: Parameters<typeof visit>[0]) => {
+		visit(tree, "blockquote", annotateAlertBlockquote)
 	}
 }