@readme/markdown 14.12.1 → 14.13.0

package/components/Cards/index.tsx

@@ -6,6 +6,8 @@ import './style.scss';
 
 interface CardProps
   extends React.PropsWithChildren<{
+    // Optional link component wrapper so that the link can be formatted & processed by the parent
+    LinkComponent?: React.ElementType;
     badge?: string;
     href?: string;
     icon?: string;
@@ -15,8 +17,18 @@ interface CardProps
     title?: string;
   }> {}
 
-export const Card = ({ badge, children, href, kind = 'card', icon, iconColor, target, title }: CardProps) => {
-  const Tag = href ? 'a' : 'div';
+export const Card = ({
+  badge,
+  children,
+  href,
+  kind = 'card',
+  icon,
+  iconColor,
+  LinkComponent = 'a',
+  target,
+  title,
+}: CardProps) => {
+  const Tag = href ? LinkComponent : 'div';
 
   return (
     <Tag className={`Card Card_${kind}`} href={href} target={target}>

package/dist/components/Cards/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import './style.scss';
 interface CardProps extends React.PropsWithChildren<{
+    LinkComponent?: React.ElementType;
     badge?: string;
     href?: string;
     icon?: string;
@@ -10,7 +11,7 @@ interface CardProps extends React.PropsWithChildren<{
     title?: string;
 }> {
 }
-export declare const Card: ({ badge, children, href, kind, icon, iconColor, target, title }: CardProps) => React.JSX.Element;
+export declare const Card: ({ badge, children, href, kind, icon, iconColor, LinkComponent, target, title, }: CardProps) => React.JSX.Element;
 interface CardsGridProps extends React.PropsWithChildren<{
     cardWidth?: string;
     columns?: number | string;

package/dist/main.js

@@ -1893,7 +1893,7 @@ module.exports = function (exec) {
 
 /***/ }),
 
-/***/ 1842:
+/***/ 9461:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 module.exports = __webpack_require__(4556)('native-function-to-string', Function.toString);
@@ -2493,7 +2493,7 @@ var global = __webpack_require__(7526);
 var hide = __webpack_require__(3341);
 var has = __webpack_require__(7917);
 var SRC = __webpack_require__(4415)('src');
-var $toString = __webpack_require__(1842);
+var $toString = __webpack_require__(9461);
 var TO_STRING = 'toString';
 var TPL = ('' + $toString).split(TO_STRING);
 
@@ -11839,8 +11839,8 @@ const Callout = (props) => {
 
 
 
-const Card = ({ badge, children, href, kind = 'card', icon, iconColor, target, title }) => {
-    const Tag = href ? 'a' : 'div';
+const Card = ({ badge, children, href, kind = 'card', icon, iconColor, LinkComponent = 'a', target, title, }) => {
+    const Tag = href ? LinkComponent : 'div';
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Tag, { className: `Card Card_${kind}`, href: href, target: target },
         icon && external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(components_Icon, { className: "Card-icon", icon: icon, iconColor: iconColor }),
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card-content" },
@@ -76301,6 +76301,12 @@ const HTML_TABLE_STRUCTURE_TAGS = new Set([
     'caption',
     'colgroup',
 ]);
+/**
+ * The two HTML "foreign content" namespaces: SVG and MathML. Their descendants
+ * (`<path>`, `<mrow>`, …) are namespaced XML, not HTML tags or components. A closed
+ * set per the HTML spec, so transforms can treat these roots as opaque islands.
+ */
+const FOREIGN_CONTENT_TAGS = ['svg', 'math'];
 /**
  * HTML void elements — elements that have no closing tag and no children.
  *
@@ -98930,6 +98936,9 @@ function getComponentName(componentName, components) {
 
 
 
+// Foreign-content (SVG/MathML) roots — subtrees the component transform leaves
+// untouched (their children are namespaced XML, not HTML tags/components).
+const FOREIGN_CONTENT_ROOTS = new Set(FOREIGN_CONTENT_TAGS);
 function isElementContentNode(node) {
     return node.type === 'element' || node.type === 'text' || node.type === 'comment';
 }
@@ -99105,6 +99114,12 @@ const rehypeMdxishComponents = ({ components, processMarkdown }) => {
         visit(tree, 'element', (node, index, parent) => {
             if (index === undefined || !parent)
                 return;
+            // Skip foreign-content subtrees: their namespaced children (<path>, <mrow>, …)
+            // aren't HTML tags or components, so the "unknown component" removal below would
+            // otherwise delete them. (svg/math themselves are standard HTML tags, kept.)
+            // eslint-disable-next-line consistent-return
+            if (FOREIGN_CONTENT_ROOTS.has(node.tagName))
+                return SKIP;
             // Parse Image caption as markdown so it renders formatted (bold, code,
             // decoded entities) in the figcaption instead of as a raw string.
             // rehypeRaw strips children from <img> (void element), so we must
@@ -99416,6 +99431,81 @@ function closeSelfClosingHtmlTags(content) {
     return restoreCodeBlocks(result, protectedCode);
 }
 
+;// ./processor/transform/mdxish/collapse-foreign-content-blank-lines.ts
+
+
+// `svg|math`, from the canonical list so this stays in sync with the component transform.
+const ROOT_ALT = FOREIGN_CONTENT_TAGS.join('|');
+// A foreign-content opener. The `[\s/>]` boundary requires a real tag delimiter after the
+// root name, so lookalikes like `<svgfoo>` and custom elements like `<svg-icon>` are ignored.
+const ANY_ROOT_RE = new RegExp(`<(?:${ROOT_ALT})(?=[\\s/>])`, 'i');
+// Tag body: swallows whole quoted attribute values so a `>` inside a quote (e.g.
+// `<svg data-x="a > b" />`) can't be mistaken for the tag terminator; other non-`>`
+// chars (including newlines) are consumed one at a time.
+const TAG_BODY = '(?:"[^"]*"|\'[^\']*\'|[^>\'"])*?';
+// One whole svg/math tag (opener, self-closer, or closer), matched whole so attributes
+// and `>` may span lines. The `[\s/>]` boundary after the root name keeps `<svgfoo>`/
+// `<svg-icon>` out. Group 1 is `/` only for a self-closer.
+const FOREIGN_TAG_RE = new RegExp(`<(?:${ROOT_ALT})(?=[\\s/>])${TAG_BODY}(/)?>|</(?:${ROOT_ALT})(?=[\\s/>])${TAG_BODY}>`, 'gi');
+// An HTML comment. Foreign markup inside one is inert and must not open an island.
+const HTML_COMMENT_RE = /<!--[\s\S]*?-->/g;
+const withinAny = (spans, offset) => spans.some(([start, end]) => offset >= start && offset < end);
+/**
+ * `[start, end)` spans of every *matched* SVG/MathML pair — the regions whose blank
+ * lines are known-insignificant XML. Matching whole tags (not per-line open/close
+ * counts) keeps multi-line openers and self-closers balanced, so a wrapped
+ * `<svg … />` can't latch and swallow the doc (#1545).
+ *
+ * Tags are paired innermost-first, as a parser would; an opener still unpaired at EOF
+ * closed nothing and so covers nothing. That keeps a stray `<svg>` in prose from
+ * swallowing every blank line after it, without hiding the real islands that follow.
+ */
+function findForeignContentSpans(text) {
+    const spans = [];
+    // Foreign tags inside an HTML comment are inert; a stray `<svg>`/`<math>` in a comment
+    // must not open an island and latch onto the rest of the doc.
+    const comments = [...text.matchAll(HTML_COMMENT_RE)].map((m) => [m.index ?? 0, (m.index ?? 0) + m[0].length]);
+    // Offsets of openers still waiting for their closer, innermost last.
+    const openOffsets = [];
+    [...text.matchAll(FOREIGN_TAG_RE)].forEach(match => {
+        const offset = match.index ?? 0;
+        if (withinAny(comments, offset))
+            return; // markup inside an HTML comment is inert
+        if (match[1] === '/')
+            return; // self-closing tag opens no island
+        if (match[0].startsWith('</')) {
+            const start = openOffsets.pop();
+            if (start !== undefined)
+                spans.push([start, offset + match[0].length]); // a closer with no opener closes nothing
+        }
+        else {
+            openOffsets.push(offset);
+        }
+    });
+    return spans;
+}
+/**
+ * Drop blank lines inside `<svg>`/`<math>` islands: their whitespace is
+ * insignificant XML, but a blank line ends the CommonMark HTML block and spills the
+ * children out as a code block (#1545). Collapsing keeps the island one block.
+ */
+function collapseForeignContentBlankLines(content) {
+    // Fast path: nothing to do when the doc has no foreign-content island.
+    if (!ANY_ROOT_RE.test(content))
+        return content;
+    const { protectedContent, protectedCode } = protectCodeBlocks(content);
+    const islands = findForeignContentSpans(protectedContent);
+    // Drop blank lines inside an island; keep everything else verbatim.
+    const lines = [];
+    let lineStart = 0;
+    protectedContent.split('\n').forEach(line => {
+        if (line.trim().length > 0 || !withinAny(islands, lineStart))
+            lines.push(line);
+        lineStart += line.length + 1; // +1 for the '\n' that split() removed
+    });
+    return restoreCodeBlocks(lines.join('\n'), protectedCode);
+}
+
 ;// ./lib/utils/mdxish/mdxish-component-tag-parser.ts
 // Extract the tag name (PascalCase or lowercase HTML) at the start of a tag string.
 const tagNamePattern = /^<([A-Za-z][A-Za-z0-9_-]*)/;
@@ -106555,6 +106645,7 @@ function loadComponents() {
 
 
 
+
 
 
 const defaultTransformers = [
@@ -106569,10 +106660,11 @@ const defaultTransformers = [
  * Runs a series of string-level transformations before micromark/remark parsing:
  * 1. Canonicalize closing tags with stray whitespace (e.g., `</ td >` → `</td>`)
  * 2. Normalize malformed table separator syntax (e.g., `|: ---` → `| :---`)
- * 3. Terminate HTML flow blocks so subsequent content isn't swallowed
- * 4. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
- * 5. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
- * 6. Replace snake_case component names with parser-safe placeholders
+ * 3. Collapse blank lines inside `<svg>`/`<math>` so their children aren't fragmented
+ * 4. Terminate HTML flow blocks so subsequent content isn't swallowed
+ * 5. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
+ * 6. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
+ * 7. Replace snake_case component names with parser-safe placeholders
  */
 function preprocessContent(content, opts) {
     const { knownComponents } = opts;
@@ -106580,6 +106672,10 @@ function preprocessContent(content, opts) {
     // classification in `terminateHtmlFlowBlocks` is accurate)
     let result = normalizeClosingTagWhitespace(content);
     result = normalizeTableSeparator(result);
+    // Before terminateHtmlFlowBlocks: a blank line inside an <svg>/<math> island
+    // would otherwise fragment it (children spill out as an indented code block once
+    // a wrapper re-parses its deindented body — #1545).
+    result = collapseForeignContentBlankLines(result);
     result = terminateHtmlFlowBlocks(result);
     result = closeSelfClosingHtmlTags(result);
     result = normalizeCompactHeadings(result);
@@ -107303,6 +107399,8 @@ function restoreMagicBlocks(replaced, blocks) {
 
 
 
+
+
 /**
  * Removes Markdown and MDX comments.
  */
@@ -107313,10 +107411,16 @@ async function stripComments(doc, { mdx, mdxish } = {}) {
     // 1. we can rely on remarkMdx to parse MDXish
     // 2. we need to parse JSX comments into mdxTextExpression nodes so that the transformers can pick them up
     // 3. we need to claim <HTMLBlock> before htmlFlow intercepts its inner HTML tags
+    // 4. we need mdxComponent to parse custom components as one node, and prevent the tag from getting escaped
     if (mdxish) {
         processor
-            .data('micromarkExtensions', [htmlBlockComponent(), jsxTable(), mdxExpression({ allowEmpty: true })])
-            .data('fromMarkdownExtensions', [htmlBlockComponentFromMarkdown(), jsxTableFromMarkdown(), mdxExpressionFromMarkdown()])
+            .data('micromarkExtensions', [htmlBlockComponent(), jsxTable(), mdxComponent(), mdxExpression({ allowEmpty: true })])
+            .data('fromMarkdownExtensions', [
+            htmlBlockComponentFromMarkdown(),
+            jsxTableFromMarkdown(),
+            mdxComponentFromMarkdown(),
+            mdxExpressionFromMarkdown(),
+        ])
             .data('toMarkdownExtensions', [mdxExpressionToMarkdown()]);
     }
     processor

package/dist/main.node.js

@@ -19523,8 +19523,8 @@ const Callout = (props) => {
 
 
 
-const Card = ({ badge, children, href, kind = 'card', icon, iconColor, target, title }) => {
-    const Tag = href ? 'a' : 'div';
+const Card = ({ badge, children, href, kind = 'card', icon, iconColor, LinkComponent = 'a', target, title, }) => {
+    const Tag = href ? LinkComponent : 'div';
     return (external_react_default().createElement(Tag, { className: `Card Card_${kind}`, href: href, target: target },
         icon && external_react_default().createElement(components_Icon, { className: "Card-icon", icon: icon, iconColor: iconColor }),
         external_react_default().createElement("div", { className: "Card-content" },
@@ -96525,6 +96525,12 @@ const HTML_TABLE_STRUCTURE_TAGS = new Set([
     'caption',
     'colgroup',
 ]);
+/**
+ * The two HTML "foreign content" namespaces: SVG and MathML. Their descendants
+ * (`<path>`, `<mrow>`, …) are namespaced XML, not HTML tags or components. A closed
+ * set per the HTML spec, so transforms can treat these roots as opaque islands.
+ */
+const FOREIGN_CONTENT_TAGS = ['svg', 'math'];
 /**
  * HTML void elements — elements that have no closing tag and no children.
  *
@@ -119154,6 +119160,9 @@ function getComponentName(componentName, components) {
 
 
 
+// Foreign-content (SVG/MathML) roots — subtrees the component transform leaves
+// untouched (their children are namespaced XML, not HTML tags/components).
+const FOREIGN_CONTENT_ROOTS = new Set(FOREIGN_CONTENT_TAGS);
 function isElementContentNode(node) {
     return node.type === 'element' || node.type === 'text' || node.type === 'comment';
 }
@@ -119329,6 +119338,12 @@ const rehypeMdxishComponents = ({ components, processMarkdown }) => {
         visit(tree, 'element', (node, index, parent) => {
             if (index === undefined || !parent)
                 return;
+            // Skip foreign-content subtrees: their namespaced children (<path>, <mrow>, …)
+            // aren't HTML tags or components, so the "unknown component" removal below would
+            // otherwise delete them. (svg/math themselves are standard HTML tags, kept.)
+            // eslint-disable-next-line consistent-return
+            if (FOREIGN_CONTENT_ROOTS.has(node.tagName))
+                return SKIP;
             // Parse Image caption as markdown so it renders formatted (bold, code,
             // decoded entities) in the figcaption instead of as a raw string.
             // rehypeRaw strips children from <img> (void element), so we must
@@ -119640,6 +119655,81 @@ function closeSelfClosingHtmlTags(content) {
     return restoreCodeBlocks(result, protectedCode);
 }
 
+;// ./processor/transform/mdxish/collapse-foreign-content-blank-lines.ts
+
+
+// `svg|math`, from the canonical list so this stays in sync with the component transform.
+const ROOT_ALT = FOREIGN_CONTENT_TAGS.join('|');
+// A foreign-content opener. The `[\s/>]` boundary requires a real tag delimiter after the
+// root name, so lookalikes like `<svgfoo>` and custom elements like `<svg-icon>` are ignored.
+const ANY_ROOT_RE = new RegExp(`<(?:${ROOT_ALT})(?=[\\s/>])`, 'i');
+// Tag body: swallows whole quoted attribute values so a `>` inside a quote (e.g.
+// `<svg data-x="a > b" />`) can't be mistaken for the tag terminator; other non-`>`
+// chars (including newlines) are consumed one at a time.
+const TAG_BODY = '(?:"[^"]*"|\'[^\']*\'|[^>\'"])*?';
+// One whole svg/math tag (opener, self-closer, or closer), matched whole so attributes
+// and `>` may span lines. The `[\s/>]` boundary after the root name keeps `<svgfoo>`/
+// `<svg-icon>` out. Group 1 is `/` only for a self-closer.
+const FOREIGN_TAG_RE = new RegExp(`<(?:${ROOT_ALT})(?=[\\s/>])${TAG_BODY}(/)?>|</(?:${ROOT_ALT})(?=[\\s/>])${TAG_BODY}>`, 'gi');
+// An HTML comment. Foreign markup inside one is inert and must not open an island.
+const HTML_COMMENT_RE = /<!--[\s\S]*?-->/g;
+const withinAny = (spans, offset) => spans.some(([start, end]) => offset >= start && offset < end);
+/**
+ * `[start, end)` spans of every *matched* SVG/MathML pair — the regions whose blank
+ * lines are known-insignificant XML. Matching whole tags (not per-line open/close
+ * counts) keeps multi-line openers and self-closers balanced, so a wrapped
+ * `<svg … />` can't latch and swallow the doc (#1545).
+ *
+ * Tags are paired innermost-first, as a parser would; an opener still unpaired at EOF
+ * closed nothing and so covers nothing. That keeps a stray `<svg>` in prose from
+ * swallowing every blank line after it, without hiding the real islands that follow.
+ */
+function findForeignContentSpans(text) {
+    const spans = [];
+    // Foreign tags inside an HTML comment are inert; a stray `<svg>`/`<math>` in a comment
+    // must not open an island and latch onto the rest of the doc.
+    const comments = [...text.matchAll(HTML_COMMENT_RE)].map((m) => [m.index ?? 0, (m.index ?? 0) + m[0].length]);
+    // Offsets of openers still waiting for their closer, innermost last.
+    const openOffsets = [];
+    [...text.matchAll(FOREIGN_TAG_RE)].forEach(match => {
+        const offset = match.index ?? 0;
+        if (withinAny(comments, offset))
+            return; // markup inside an HTML comment is inert
+        if (match[1] === '/')
+            return; // self-closing tag opens no island
+        if (match[0].startsWith('</')) {
+            const start = openOffsets.pop();
+            if (start !== undefined)
+                spans.push([start, offset + match[0].length]); // a closer with no opener closes nothing
+        }
+        else {
+            openOffsets.push(offset);
+        }
+    });
+    return spans;
+}
+/**
+ * Drop blank lines inside `<svg>`/`<math>` islands: their whitespace is
+ * insignificant XML, but a blank line ends the CommonMark HTML block and spills the
+ * children out as a code block (#1545). Collapsing keeps the island one block.
+ */
+function collapseForeignContentBlankLines(content) {
+    // Fast path: nothing to do when the doc has no foreign-content island.
+    if (!ANY_ROOT_RE.test(content))
+        return content;
+    const { protectedContent, protectedCode } = protectCodeBlocks(content);
+    const islands = findForeignContentSpans(protectedContent);
+    // Drop blank lines inside an island; keep everything else verbatim.
+    const lines = [];
+    let lineStart = 0;
+    protectedContent.split('\n').forEach(line => {
+        if (line.trim().length > 0 || !withinAny(islands, lineStart))
+            lines.push(line);
+        lineStart += line.length + 1; // +1 for the '\n' that split() removed
+    });
+    return restoreCodeBlocks(lines.join('\n'), protectedCode);
+}
+
 ;// ./lib/utils/mdxish/mdxish-component-tag-parser.ts
 // Extract the tag name (PascalCase or lowercase HTML) at the start of a tag string.
 const tagNamePattern = /^<([A-Za-z][A-Za-z0-9_-]*)/;
@@ -126779,6 +126869,7 @@ function loadComponents() {
 
 
 
+
 
 
 const defaultTransformers = [
@@ -126793,10 +126884,11 @@ const defaultTransformers = [
  * Runs a series of string-level transformations before micromark/remark parsing:
  * 1. Canonicalize closing tags with stray whitespace (e.g., `</ td >` → `</td>`)
  * 2. Normalize malformed table separator syntax (e.g., `|: ---` → `| :---`)
- * 3. Terminate HTML flow blocks so subsequent content isn't swallowed
- * 4. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
- * 5. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
- * 6. Replace snake_case component names with parser-safe placeholders
+ * 3. Collapse blank lines inside `<svg>`/`<math>` so their children aren't fragmented
+ * 4. Terminate HTML flow blocks so subsequent content isn't swallowed
+ * 5. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
+ * 6. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
+ * 7. Replace snake_case component names with parser-safe placeholders
  */
 function preprocessContent(content, opts) {
     const { knownComponents } = opts;
@@ -126804,6 +126896,10 @@ function preprocessContent(content, opts) {
     // classification in `terminateHtmlFlowBlocks` is accurate)
     let result = normalizeClosingTagWhitespace(content);
     result = normalizeTableSeparator(result);
+    // Before terminateHtmlFlowBlocks: a blank line inside an <svg>/<math> island
+    // would otherwise fragment it (children spill out as an indented code block once
+    // a wrapper re-parses its deindented body — #1545).
+    result = collapseForeignContentBlankLines(result);
     result = terminateHtmlFlowBlocks(result);
     result = closeSelfClosingHtmlTags(result);
     result = normalizeCompactHeadings(result);
@@ -127527,6 +127623,8 @@ function restoreMagicBlocks(replaced, blocks) {
 
 
 
+
+
 /**
  * Removes Markdown and MDX comments.
  */
@@ -127537,10 +127635,16 @@ async function stripComments(doc, { mdx, mdxish } = {}) {
     // 1. we can rely on remarkMdx to parse MDXish
     // 2. we need to parse JSX comments into mdxTextExpression nodes so that the transformers can pick them up
     // 3. we need to claim <HTMLBlock> before htmlFlow intercepts its inner HTML tags
+    // 4. we need mdxComponent to parse custom components as one node, and prevent the tag from getting escaped
     if (mdxish) {
         processor
-            .data('micromarkExtensions', [htmlBlockComponent(), jsxTable(), mdxExpression({ allowEmpty: true })])
-            .data('fromMarkdownExtensions', [htmlBlockComponentFromMarkdown(), jsxTableFromMarkdown(), mdxExpressionFromMarkdown()])
+            .data('micromarkExtensions', [htmlBlockComponent(), jsxTable(), mdxComponent(), mdxExpression({ allowEmpty: true })])
+            .data('fromMarkdownExtensions', [
+            htmlBlockComponentFromMarkdown(),
+            jsxTableFromMarkdown(),
+            mdxComponentFromMarkdown(),
+            mdxExpressionFromMarkdown(),
+        ])
             .data('toMarkdownExtensions', [mdxExpressionToMarkdown()]);
     }
     processor