@readme/markdown 14.12.0 → 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

@@ -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.
  *
@@ -89658,63 +89664,6 @@ function rehypeSanitize(options) {
   }
 }
 
-;// ./node_modules/mdast-util-newline-to-break/lib/index.js
-/**
- * @typedef {import('mdast').Nodes} Nodes
- * @typedef {import('mdast-util-find-and-replace').ReplaceFunction} ReplaceFunction
- */
-
-
-
-/**
- * Turn normal line endings into hard breaks.
- *
- * @param {Nodes} tree
- *   Tree to change.
- * @returns {undefined}
- *   Nothing.
- */
-function newlineToBreak(tree) {
-  findAndReplace(tree, [/\r?\n|\r/g, lib_replace])
-}
-
-/**
- * Replace line endings.
- *
- * @type {ReplaceFunction}
- */
-function lib_replace() {
-  return {type: 'break'}
-}
-
-;// ./node_modules/remark-breaks/lib/index.js
-/**
- * @typedef {import('mdast').Root} Root
- */
-
-
-
-/**
- * Support hard breaks without needing spaces or escapes (turns enters into
- * `<br>`s).
- *
- * @returns
- *   Transform.
- */
-function remarkBreaks() {
-  /**
-   * Transform.
-   *
-   * @param {Root} tree
-   *   Tree.
-   * @returns {undefined}
-   *   Nothing.
-   */
-  return function (tree) {
-    newlineToBreak(tree)
-  }
-}
-
 ;// ./errors/mdx-syntax-error.ts
 class MdxSyntaxError extends SyntaxError {
     original = null;
@@ -89736,6 +89685,22 @@ class MdxSyntaxError extends SyntaxError {
     }
 }
 
+;// ./processor/plugin/hard-breaks.ts
+
+/**
+ * Converts LF and CRLF line endings into hard breaks while leaving standalone
+ * carriage returns as soft whitespace.
+ *
+ * Unlike `remark-breaks`, this does not promote a lone `\r` into a `<br>`.
+ * Standalone carriage returns can be left behind by generators that replace
+ * the LF in Windows line endings with an explicit `<br>`, producing input such
+ * as `\r<br>`. Treating both characters as hard breaks doubles the spacing.
+ */
+const hardBreaks = () => tree => {
+    findAndReplace(tree, [/\r?\n/g, () => ({ type: 'break' })]);
+};
+/* harmony default export */ const hard_breaks = (hardBreaks);
+
 ;// ./node_modules/estree-util-value-to-estree/dist/estree-util-value-to-estree.js
 /**
  * Create an ESTree identifier node for a given name.
@@ -92440,7 +92405,7 @@ const compile_compile = (text, { components = {}, missingComponents, copyButtons
     const remarkPlugins = [
         remarkFrontmatter,
         remarkGfm,
-        ...(hardBreaks ? [remarkBreaks] : []),
+        ...(hardBreaks ? [hard_breaks] : []),
         ...Object.values(transforms),
         [codeTabsTransformer, { copyButtons }],
         [
@@ -98971,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';
 }
@@ -99146,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
@@ -99457,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_-]*)/;
@@ -102624,10 +102673,36 @@ const mdxishInlineMdxComponents = () => tree => {
 };
 /* harmony default export */ const inline_mdx_blocks = (mdxishInlineMdxComponents);
 
+;// ./processor/transform/mdxish/indentation.ts
+/**
+ * CommonMark indentation helpers, shared by the mdxish preprocessors so tab- and
+ * space-indented content is measured (and sliced) on one scale.
+ *
+ * CommonMark's indented-code threshold is 4 *columns*, and a tab is a 4-column tab
+ * stop — not a fixed 4 characters. Counting characters (tab = 1) under-measures
+ * tab-indented lines, letting them slip past the 4-column gate so their content
+ * fragments into code blocks. Keeping one implementation here stops the two callers
+ * from drifting on what "4 columns" means.
+ */
+/** The run of leading spaces/tabs on a line. */
+const leadingIndent = (line) => line.match(/^[ \t]*/)?.[0] ?? '';
+/**
+ * Expand a leading-whitespace run to spaces using CommonMark's 4-column tab stops,
+ * so a run of mixed tabs/spaces can be measured by length and sliced by column.
+ */
+function expandIndentToColumns(indent) {
+    return indent
+        .split('')
+        .reduce((columns, char) => columns + (char === '\t' ? ' '.repeat(4 - (columns.length % 4)) : ' '), '');
+}
+/** Indentation width of a line in CommonMark columns (a tab advances to the next 4-column stop). */
+const indentWidth = (line) => expandIndentToColumns(leadingIndent(line)).length;
+
 ;// ./processor/transform/mdxish/terminate-html-flow-blocks.ts
 
 
 
+
 const STANDALONE_HTML_LINE_REGEX = /^(<[a-z][^<>]*>|<\/[a-z][^<>]*>)+\s*$/;
 const HTML_LINE_WITH_CONTENT_REGEX = /^<[a-z][^<>]*>.*<\/[a-z][^<>]*>(?:[^<]*)$/;
 // A line that is exactly one lowercase opening (or self-closing) tag — the shape
@@ -102653,11 +102728,6 @@ function countRawContentTags(line) {
         closes: (line.match(close) ?? []).length,
     }));
 }
-// Indentation width in columns, counting a tab as 4 per CommonMark.
-function indentWidth(line) {
-    const leading = line.match(/^[ \t]*/)?.[0] ?? '';
-    return leading.replace(/\t/g, '    ').length;
-}
 /**
  * Decides whether a blank line belongs between `line` and `next` so the HTML
  * flow block opened on `line` terminates and `next` parses as markdown.
@@ -102729,6 +102799,7 @@ function terminateHtmlFlowBlocks(content) {
 
 
 
+
 // Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. */
 const NESTED_ATTR_EXPRESSION_RE = /[\w-]+\s*=\s*\{/;
 // Name shape mirrors `componentTagPattern`; the lookbehind skips the inner tag
@@ -102739,25 +102810,33 @@ const NESTED_COMPONENT_TAG_RE = /(?<!<)<([A-Z][A-Za-z0-9_]*)[\s/>]/g;
 const hasNestedGenericComponentTag = (content) => [...content.matchAll(NESTED_COMPONENT_TAG_RE)].some(match => !GENERIC_MDX_COMPONENT_EXCLUDED_TAGS.has(match[1]));
 /**
  * Strip the shared leading indentation from a component body so readability indentation
- * isn't parsed as indented code (4+ spaces), e.g. `  <p>` / `   text` -> `<p>` / ` text`.
+ * isn't parsed as indented code (4+ columns), e.g. `  <p>` / `   text` -> `<p>` / ` text`.
  * Relative indentation is kept, so content genuinely 4+ columns deeper stays code. We
  * only strip when a line actually reaches 4 columns; otherwise the body is left as-is so
  * its leading whitespace survives as text nodes (mixed component + HTML content needs it).
+ *
+ * Indentation is measured in CommonMark columns (tab = up to 4), matching how the parser
+ * decides indented code. A char count (tab = 1) under-measures tab-indented bodies, so
+ * they slip past the 4-column gate and their nested content fragments into code blocks.
  */
 function safeDeindent(text) {
     const lines = text.split('\n');
     const nonEmptyLines = lines.filter(line => line.trim().length > 0);
     if (nonEmptyLines.length === 0)
         return text;
-    // Indent counts characters (tab = 1), unlike indentWidth's CommonMark columns
-    // (tab = 4) in terminate-html-flow-blocks.
-    const indents = nonEmptyLines.map(line => line.match(/^(\s*)/)?.[1].length ?? 0);
+    const indents = nonEmptyLines.map(line => expandIndentToColumns(leadingIndent(line)).length);
     const minIndent = Math.min(...indents);
     const maxIndent = Math.max(...indents);
-    const stripAmount = maxIndent > 3 ? minIndent : 0;
-    if (stripAmount === 0)
+    if (maxIndent < 4 || minIndent === 0)
         return text;
-    return lines.map(line => line.slice(stripAmount)).join('\n');
+    // Expand each line's leading run to spaces before slicing so a shared indent of mixed
+    // tabs/spaces (and partial-tab remainders) strips cleanly while relative depth survives.
+    return lines
+        .map(line => {
+        const indent = leadingIndent(line);
+        return expandIndentToColumns(indent).slice(minIndent) + line.slice(indent.length);
+    })
+        .join('\n');
 }
 /**
  * Parse component-body markdown into mdast children. Dedenting shifts columns and
@@ -103934,7 +104013,7 @@ const textToBlock = (text) => [{ children: textToInline(text), type: 'paragraph'
 /**
  * Converts leading newlines in magic block content to `<br>` tags.
  * Leading newlines are stripped by remark-parse before they become soft break nodes,
- * so remark-breaks cannot handle them. We convert them to HTML `<br>` tags instead.
+ * so the hard-breaks plugin cannot handle them. We convert them to HTML `<br>` tags instead.
  */
 const ensureLeadingBreaks = (text) => text.replace(/^\n+/, match => '<br>'.repeat(match.length));
 /** Preprocesses magic block body content before parsing. */
@@ -103946,7 +104025,7 @@ const contentParser = unified()
     .data('micromarkExtensions', [syntax_gemoji(), legacyVariable(), looseHtmlEntity()])
     .data('fromMarkdownExtensions', [gemojiFromMarkdown(), legacyVariableFromMarkdown(), emptyTaskListItemFromMarkdown(), looseHtmlEntityFromMarkdown()])
     .use(remarkParse)
-    .use(remarkBreaks)
+    .use(hard_breaks)
     .use(remarkGfm)
     .use(normalize_malformed_md_syntax);
 /**
@@ -106566,6 +106645,7 @@ function loadComponents() {
 
 
 
+
 
 
 const defaultTransformers = [
@@ -106580,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;
@@ -106591,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);
@@ -106730,7 +106815,7 @@ function mdxish(mdContent, opts = {}) {
     const { processor, parserReadyContent } = mdxishAstProcessor(contentWithoutComments, opts);
     processor
         .use(safeMode ? undefined : evaluate_exports) // Evaluate `export const/function` and stash scope on file.data.mdxishScope
-        .use(remarkBreaks) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
+        .use(hard_breaks) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
         .use(safeMode ? undefined : evaluate_expressions) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
         .use(safeMode ? undefined : evaluate_style_block_expressions) // Evaluate `<style>{`...`}</style>` template literals into plain CSS
         .use(variables_code, { variables }) // Resolve <<...>> and {user.*} inside code and inline code nodes
@@ -107314,6 +107399,8 @@ function restoreMagicBlocks(replaced, blocks) {
 
 
 
+
+
 /**
  * Removes Markdown and MDX comments.
  */
@@ -107324,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