@readme/markdown 14.11.2 → 14.11.4

package/dist/main.js

@@ -12631,10 +12631,10 @@ const Tabs = ({ children }) => {
     const tabs = external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.toArray(children);
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabGroup" },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("header", null,
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, tabs.map((tab, index) => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { key: tab.props.title, className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, onClick: () => setActiveTab(index) },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, tabs.map((tab, index) => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { key: tab.key, className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, onClick: () => setActiveTab(index) },
                 tab.props.icon && (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(components_Icon, { className: "TabGroup-icon", icon: tab.props.icon, iconColor: tab.props.iconColor })),
                 tab.props.title))))),
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, tabs[activeTab])));
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, tabs.map((tab, index) => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { key: tab.key, hidden: index !== activeTab }, tab))))));
 };
 /* harmony default export */ const components_Tabs = (Tabs);
 
@@ -54527,6 +54527,21 @@ function evaluate(source, scope = {}) {
     // eslint-disable-next-line no-new-func
     return new Function(...names, `return (${source})`)(...values);
 }
+/**
+ * Advance a `Point` by the `consumed` substring that follows it, returning the
+ * point at the consumed string's end. Lets split-out sub-nodes carry accurate
+ * document positions so downstream offset shifting stays correct.
+ */
+const pointAfter = (start, consumed) => {
+    const newlineIndex = consumed.lastIndexOf('\n');
+    const newlineCount = newlineIndex === -1 ? 0 : consumed.split('\n').length - 1;
+    return {
+        line: start.line + newlineCount,
+        // Same line → advance the base column; a later line → column is the run since its newline.
+        column: newlineCount === 0 ? start.column + consumed.length : consumed.length - newlineIndex,
+        offset: (start.offset ?? 0) + consumed.length,
+    };
+};
 /**
  * Formats the hProperties of a node as a string, so they can be compiled back into JSX/MDX.
  * This currently sets all the values to a string since we process/compile the MDX on the fly
@@ -75795,6 +75810,134 @@ const applyInserts = (html, inserts) => {
     return { value: out + html.slice(cursor), inserts: sorted };
 };
 
+;// ./processor/transform/mdxish/tables/escape-crossing-emphasis.ts
+
+
+
+// Maximal run of a single emphasis delimiter (`_`, `*`, `**`, `***`, …).
+const EMPHASIS_RUN_RE = /([*_])\1*/g;
+// String bounds (undefined) count as whitespace, not punctuation, per the
+// CommonMark flanking definition.
+const escape_crossing_emphasis_isWhitespace = (ch) => ch === undefined || unicodeWhitespace(ch.charCodeAt(0));
+const isPunctuation = (ch) => ch !== undefined && unicodePunctuation(ch.charCodeAt(0));
+/**
+ * Whether a delimiter run can open and/or close emphasis, per CommonMark's
+ * left/right-flanking rules. The extra `_` conditions forbid intraword
+ * emphasis, which keeps `snake_case` from being treated as a delimiter.
+ */
+const analyzeFlanking = (source, char, start, end) => {
+    const before = source[start - 1];
+    const after = source[end];
+    const leftFlanking = !escape_crossing_emphasis_isWhitespace(after) && (!isPunctuation(after) || escape_crossing_emphasis_isWhitespace(before) || isPunctuation(before));
+    const rightFlanking = !escape_crossing_emphasis_isWhitespace(before) && (!isPunctuation(before) || escape_crossing_emphasis_isWhitespace(after) || isPunctuation(after));
+    if (char === '_') {
+        return {
+            canOpen: leftFlanking && (!rightFlanking || isPunctuation(before)),
+            canClose: rightFlanking && (!leftFlanking || isPunctuation(after)),
+        };
+    }
+    return { canOpen: leftFlanking, canClose: rightFlanking };
+};
+/**
+ * Collect HTML tag boundaries (via htmlparser2) and emphasis delimiter runs
+ * (via regex over the masked source, so code spans and escaped `<` are skipped)
+ * into one list ordered by position. At a shared offset a tag opener sorts
+ * before a closer, so a self-closing tag brackets rather than swallows a run.
+ */
+const collectEvents = (html) => {
+    const masked = maskNonTagRegions(html);
+    const events = [];
+    walkTags(html, {
+        onOpen: ({ start }) => events.push({ kind: 'tagOpen', offset: start }),
+        onClose: ({ start }) => events.push({ kind: 'tagClose', offset: start }),
+    });
+    EMPHASIS_RUN_RE.lastIndex = 0;
+    let match;
+    while ((match = EMPHASIS_RUN_RE.exec(masked)) !== null) {
+        const [run, char] = match;
+        const start = match.index;
+        // eslint-disable-next-line no-continue
+        if (html[start - 1] === '\\')
+            continue; // already escaped
+        events.push({ kind: 'emphasis', offset: start, char, length: run.length, flanking: analyzeFlanking(html, char, start, start + run.length) });
+    }
+    return events.sort((a, b) => a.offset - b.offset || (a.kind === 'tagClose' ? 1 : 0) - (b.kind === 'tagClose' ? 1 : 0));
+};
+/**
+ * mdxjs rejects a table when a markdown emphasis run opens at one HTML
+ * tag-nesting depth and closes at another — e.g. `_<ul><li>text_</li></ul>`,
+ * where the `_` opens outside the list but closes inside a `<li>`. It throws
+ * "Expected a closing tag for `<li>` before the end of `emphasis`" and the
+ * whole `<Table>` fails to parse.
+ *
+ * We walk tags and emphasis together, tracking tag depth and a stack of open
+ * emphasis. A delimiter only closes an opener at the same depth; any emphasis
+ * still open when its enclosing tag closes (or at end of input), and any closer
+ * with no same-depth opener, is escaped so mdxjs treats it as literal text.
+ * Scoped to the malformed-retry path.
+ */
+const escapeCrossingEmphasis = (html) => {
+    const open = [];
+    const orphans = [];
+    let depth = 0;
+    collectEvents(html).forEach(event => {
+        if (event.kind === 'tagOpen') {
+            depth += 1;
+            return;
+        }
+        if (event.kind === 'tagClose') {
+            depth -= 1;
+            // Emphasis opened deeper than the surviving depth was inside the tag that
+            // just closed, so it crosses the boundary.
+            while (open.length > 0 && open[open.length - 1].depth > depth) {
+                const crossed = open.pop();
+                if (crossed)
+                    orphans.push(crossed);
+            }
+            return;
+        }
+        const top = open[open.length - 1];
+        if (event.flanking.canClose && top?.char === event.char && top.depth === depth) {
+            open.pop();
+        }
+        else if (event.flanking.canOpen) {
+            open.push({ char: event.char, depth, offset: event.offset, length: event.length });
+        }
+        else if (event.flanking.canClose) {
+            orphans.push({ offset: event.offset, length: event.length });
+        }
+    });
+    orphans.push(...open); // anything still open never closed
+    const inserts = orphans.flatMap(({ offset, length }) => Array.from({ length }, (_unused, i) => ({ offset: offset + i, text: '\\' })));
+    return applyInserts(html, inserts);
+};
+
+;// ./processor/transform/mdxish/tables/escape-stray-less-than.ts
+
+
+// A `<` only starts a JSX/HTML construct when followed by a tag-name start
+// (letter, `_`, `$`), a closer `/`, a fragment `>`, or a comment/declaration
+// `!`. Anything else (whitespace, EOL, a digit, …) is a literal `<` that acorn
+// rejects with "before name, expected a character that can start a name".
+const STRAY_LESS_THAN_RE = /<(?![a-zA-Z_$/>!])/g;
+/**
+ * Escapes stray `<` characters that don't begin a valid tag so the strict mdxjs
+ * parse treats them as literal text instead of throwing (`word <`, `a <1>`).
+ *
+ * Runs against the masked source so `<` inside code spans, legacy `<<var>>`
+ * syntax, or already-escaped `\<` are left untouched.
+ */
+const escapeStrayLessThan = (html) => {
+    const masked = maskNonTagRegions(html);
+    const inserts = [];
+    STRAY_LESS_THAN_RE.lastIndex = 0;
+    let match;
+    while ((match = STRAY_LESS_THAN_RE.exec(masked)) !== null) {
+        inserts.push({ offset: match.index, text: '\\' });
+    }
+    return applyInserts(html, inserts);
+};
+
 ;// ./processor/transform/mdxish/tables/normalize-tag-spacing.ts
 
 
@@ -75921,6 +76064,21 @@ const buildOffsetMapper = (inserts) => {
         return repaired - shift;
     };
 };
+/**
+ * Compose the per-repair offset mappers into one that maps an offset in the
+ * fully-repaired string back to the original. `layers` are in application
+ * order; each maps its own output space to its input space, so we apply them
+ * last-repair-first to peel every edit back to the original coordinates.
+ */
+const composeOffsetMapper = (layers) => {
+    const mappers = layers.map(buildOffsetMapper);
+    return (repaired) => {
+        let offset = repaired;
+        for (let i = mappers.length - 1; i >= 0; i -= 1)
+            offset = mappers[i](offset);
+        return offset;
+    };
+};
 /**
  * Map an offset in `source` to its 1-based `{ line, column }`. `lineStarts`
  * is the precomputed array of offsets where each line begins.
@@ -75948,14 +76106,11 @@ const computeLineStarts = (source) => {
 };
 /**
  * Walk `tree`, translating every node's position from the repaired source's
- * coordinate space back to the original source. Offsets are remapped via the
- * insert list; line/column are recomputed from the original source so they
- * remain accurate even if repairs introduced newlines.
+ * coordinate space back to the original source via `mapOffset`. Line/column
+ * are recomputed from the original source so they remain accurate even if
+ * repairs introduced newlines.
  */
-const remapPositionsToOriginal = (tree, originalSource, inserts) => {
-    if (inserts.length === 0)
-        return;
-    const mapOffset = buildOffsetMapper(inserts);
+const remapWithMapper = (tree, originalSource, mapOffset) => {
     const lineStarts = computeLineStarts(originalSource);
     visit(tree, child => {
         if (child.position?.start) {
@@ -75974,6 +76129,15 @@ const remapPositionsToOriginal = (tree, originalSource, inserts) => {
         }
     });
 };
+/**
+ * Remap positions produced after a chain of repairs (each applied to the prior
+ * one's output) back to the original source coordinates.
+ */
+const remapPositionsThroughLayers = (tree, originalSource, layers) => {
+    if (layers.length === 0)
+        return;
+    remapWithMapper(tree, originalSource, composeOffsetMapper(layers));
+};
 
 ;// ./processor/transform/mdxish/tables/repair-expression-escapes.ts
 
@@ -76273,6 +76437,83 @@ const repairUnclosedTags = (html) => {
     return applyInserts(html, inserts);
 };
 
+;// ./processor/transform/mdxish/tables/split-nested-tables.ts
+
+
+const TOP_LEVEL_TABLE_TAG_RE = /^<(?:table|Table)(?=[\s/>])/;
+/**
+ * Find every balanced, depth-matched `<table>…</table>` range in an html string.
+ * Uses `walkTags` so `<table>`s inside code spans / fenced blocks (masked away)
+ * are never matched.
+ *
+ * Note: An implicitly-closed table (no `</table>`, so htmlparser2 synthesizes the
+ * close at a later tag) is skipped: splitting there would swallow whatever
+ * followed the table into the fragment and drop it, so we leave such a node
+ * whole for downstream raw-HTML handling instead.
+ */
+const findTableRanges = (html) => {
+    const ranges = [];
+    let depth = 0;
+    let start = 0;
+    walkTags(html, {
+        onOpen: ({ name, start: openStart, isStrayCloser }) => {
+            if (name.toLowerCase() !== 'table' || isStrayCloser)
+                return;
+            if (depth === 0)
+                start = openStart;
+            depth += 1;
+        },
+        onClose: ({ name, end, implicit }) => {
+            if (implicit || name.toLowerCase() !== 'table' || depth === 0)
+                return;
+            depth -= 1;
+            if (depth === 0)
+                ranges.push({ start, end });
+        },
+    });
+    return ranges;
+};
+/**
+ * Given an HTML node that might contain table sequences inside it, split
+ * the node based on the table boundaries so they become a top level node.
+ *
+ * The surrounding raw HTML (the wrapper's open/close tags) would be re-nested
+ * around the parsed tables by rehype-raw.
+ *
+ * Returns null when there is no wrapped table to extract.
+ */
+const splitHtmlWithNestedTables = (node) => {
+    const { value } = node;
+    // This is a top-level table, so we don't need to split it
+    if (TOP_LEVEL_TABLE_TAG_RE.test(value))
+        return null;
+    // No table text anywhere in the value → skip the htmlparser2 walk entirely.
+    if (!/<\/?table/i.test(value))
+        return null;
+    const ranges = findTableRanges(value);
+    if (ranges.length === 0)
+        return null;
+    const base = node.position?.start;
+    const sliceToHtml = (from, to) => ({
+        type: 'html',
+        value: value.slice(from, to),
+        ...(base && {
+            position: { start: pointAfter(base, value.slice(0, from)), end: pointAfter(base, value.slice(0, to)) },
+        }),
+    });
+    const parts = [];
+    let cursor = 0;
+    ranges.forEach(({ start, end }) => {
+        if (start > cursor)
+            parts.push(sliceToHtml(cursor, start));
+        parts.push(sliceToHtml(start, end)); // starts with `<table` → picked up by the main pass
+        cursor = end;
+    });
+    if (cursor < value.length)
+        parts.push(sliceToHtml(cursor, value.length));
+    return parts;
+};
+
 ;// ./processor/transform/mdxish/tables/mdxish-tables.ts
 
 
@@ -76292,6 +76533,9 @@ const repairUnclosedTags = (html) => {
 
 
 
+
+
+
 
 
 
@@ -76322,6 +76566,21 @@ const buildTableNodeProcessor = (withMdx) => unified()
     .use(remarkGfm);
 const tableNodeProcessor = buildTableNodeProcessor(true);
 const fallbackTableNodeProcessor = buildTableNodeProcessor(false);
+// Targeted repairs for tables mdxjs rejects, tried cumulatively (each runs on
+// the prior's output) since one table can carry independent per-cell defects.
+// Each was added after seeing real customer content fail to parse:
+//  - repairUnclosedTags:      unclosed/orphan HTML tags
+//  - normalizeTagSpacing:     a line mixing text and an opening tag
+//  - repairExpressionEscapes: backslash escapes inside a `{…}` expression
+//  - escapeStrayLessThan:     a `<` that doesn't begin a valid tag (`word <`)
+//  - escapeCrossingEmphasis:  emphasis opening/closing at different tag depths
+const tableRepairs = [
+    repairUnclosedTags,
+    normalizeTagSpacing,
+    repairExpressionEscapes,
+    escapeStrayLessThan,
+    escapeCrossingEmphasis,
+];
 /**
  * Parse the HTML node that contains the full table substring
  * into the table parts (headers, rows, cells).
@@ -76337,10 +76596,10 @@ const parseTableNode = (processor, node, repair) => {
         return undefined;
     }
     // If `node.value` was repaired before parsing, first remap positions back to
-    // the original (unrepaired) coordinates via the insert list — otherwise the
+    // the original (unrepaired) coordinates via the insert layers — otherwise the
     // shift would land on synthetic characters and be inaccurate
     if (repair) {
-        remapPositionsToOriginal(parsed, repair.originalSource, repair.inserts);
+        remapPositionsThroughLayers(parsed, repair.originalSource, repair.layers);
     }
     // The subparser produces positions relative to `node.value`; shift them by
     // the outer node's offset/line so consumers can slice the full source.
@@ -76437,9 +76696,7 @@ const processTableNode = (node, index, parent, documentPosition) => {
     visit(node, isMDXElement, (child) => {
         if (child.name === 'thead')
             hasThead = true;
-        if (tableTags.has(child.name) &&
-            Array.isArray(child.attributes) &&
-            child.attributes.length > 0) {
+        if (tableTags.has(child.name) && Array.isArray(child.attributes) && child.attributes.length > 0) {
             hasStructuralAttributes = true;
         }
     });
@@ -76550,6 +76807,26 @@ const processTableNode = (node, index, parent, documentPosition) => {
     };
     parent.children[index] = mdNode;
 };
+/**
+ * Apply `tableRepairs` cumulatively, re-parsing after every change and stopping
+ * once the accumulated result parses. Each layer's inserts are relative to the
+ * string that repair received, so they stay ordered for position remapping.
+ */
+const repairAndReparse = (node) => {
+    let repairedValue = node.value;
+    const layers = [];
+    let parsed;
+    tableRepairs.some(repair => {
+        const { value, inserts } = repair(repairedValue);
+        if (value === repairedValue)
+            return false;
+        repairedValue = value;
+        layers.push(inserts);
+        parsed = parseTableNode(tableNodeProcessor, { ...node, value: repairedValue }, { layers, originalSource: node.value });
+        return Boolean(parsed);
+    });
+    return parsed;
+};
 /**
  * Converts JSX Table elements to markdown table nodes and re-parses markdown in cells.
  *
@@ -76562,39 +76839,30 @@ const processTableNode = (node, index, parent, documentPosition) => {
  * is kept as a JSX <Table> element so that remarkRehype can properly handle the flow content.
  */
 const mdxishTables = () => tree => {
+    // Pre-pass: lift `<table>`s wrapped in a raw HTML block out into their own
+    // html nodes so the main pass below treats them like top-level tables.
+    visit(tree, 'html', (_node, index, parent) => {
+        const node = _node;
+        if (typeof index !== 'number' || !parent || !('children' in parent))
+            return;
+        const parts = splitHtmlWithNestedTables(node);
+        if (!parts)
+            return;
+        // The inserted parts can't re-trigger a split (table parts start with
+        // `<table`; the wrapper slices hold no table), so plain in-place splicing
+        // visits each once without looping.
+        parent.children.splice(index, 1, ...parts);
+    });
     visit(tree, 'html', (_node, index, parent) => {
         const node = _node;
         if (typeof index !== 'number' || !parent || !('children' in parent))
             return;
         if (!node.value.startsWith('<Table') && !node.value.startsWith('<table'))
             return;
-        // Main logic to transform table node to its parts
         // Because the processor uses remarkMdx, it is stricter in what it accepts
-        // and only accepts valid MDX syntax. in the table node.
-        // To get around that, we have some fallback logics after trying to repair the table content.
-        let parsed = parseTableNode(tableNodeProcessor, node);
-        if (!parsed) {
-            // Try a sequence of targeted repairs and re-parse
-            // after each, stopping at the first that yields a parseable tree:
-            //  - repairUnclosedTags:       unclosed/orphan HTML tags
-            //  - normalizeTagSpacing:      a line mixing text and an opening tag
-            //                              (e.g. `text <div> \n <div> text`)
-            //  - repairExpressionEscapes:  backslash escapes inside a `{…}` expression
-            // These repairs are created after seeing real customer content that has failed to parse
-            const repairs = [
-                repairUnclosedTags,
-                normalizeTagSpacing,
-                repairExpressionEscapes,
-            ];
-            // Stops at the first repair that yields a parseable tree
-            repairs.some(repair => {
-                const { value, inserts } = repair(node.value);
-                if (value !== node.value) {
-                    parsed = parseTableNode(tableNodeProcessor, { ...node, value }, { inserts, originalSource: node.value });
-                }
-                return Boolean(parsed);
-            });
-        }
+        // and only accepts valid MDX syntax in the table node. To get around that,
+        // fall back to the cumulative repairs when the first parse fails.
+        const parsed = parseTableNode(tableNodeProcessor, node) ?? repairAndReparse(node);
         if (parsed) {
             // If the table is parsed successfully, we can now process it further
             // to build on the markdown / JSX table
@@ -98743,6 +99011,21 @@ function isActualHtmlTag(tagName, originalExcerpt) {
         return true;
     return false;
 }
+/**
+ * Re-parsing a component's text child treats it as a standalone document, so
+ * content that happens to start with the literal word `export`/`import`
+ * (e.g. link text like "export Lorem Ipsum") sits at true column 1 and
+ * gets mistaken for an MDX ESM statement, which then fails to parse as JS.
+ * Fall back to `undefined` rather than letting one such child crash the page.
+ */
+function tryProcessMarkdown(processMarkdown, content) {
+    try {
+        return processMarkdown(content);
+    }
+    catch {
+        return undefined;
+    }
+}
 /** Parse and replace text children with processed markdown */
 function parseTextChildren(node, processMarkdown, components) {
     if (!node.children?.length)
@@ -98757,7 +99040,9 @@ function parseTextChildren(node, processMarkdown, components) {
             node.properties = { ...node.properties, children: child.value };
             return [];
         }
-        const hast = processMarkdown(child.value.trim());
+        const hast = tryProcessMarkdown(processMarkdown, child.value.trim());
+        if (!hast)
+            return [child];
         const children = (hast.children ?? []).filter(isElementContentNode);
         // For inline components, preserve plain text instead of wrapping in <p>
         if (INLINE_COMPONENT_TAGS_LOWER.has(node.tagName.toLowerCase()) && isSingleParagraphTextNode(children)) {
@@ -98831,8 +99116,9 @@ const rehypeMdxishComponents = ({ components, processMarkdown }) => {
             // rehypeRaw strips children from <img> (void element), so we must
             // re-process the caption here, after rehypeRaw.
             if (node.tagName === 'img' && typeof node.properties?.caption === 'string' && !node.children?.length) {
-                const captionHast = processMarkdown(node.properties.caption);
-                node.children = (captionHast.children ?? []).filter(isElementContentNode);
+                const caption = node.properties.caption;
+                const captionHast = tryProcessMarkdown(processMarkdown, caption);
+                node.children = captionHast ? (captionHast.children ?? []).filter(isElementContentNode) : [{ type: 'text', value: caption }];
             }
             // Skip runtime components and standard HTML tags
             if (RUNTIME_COMPONENT_TAGS.has(node.tagName))
@@ -98865,11 +99151,10 @@ const rehypeMdxishComponents = ({ components, processMarkdown }) => {
 ;// ./processor/plugin/mdxish-handlers.ts
 
 
-// Convert MDX expressions to text nodes (evaluation happens earlier in pipeline)
-const mdxExpressionHandler = (_state, node) => ({
-    type: 'text',
-    value: node.value || '',
-});
+// If hChildren is populated, it means the node holds a renderable value (e.g. React)
+// See evaluate-expressions.ts for more details
+// Otherwise, it's a simple value and we fall back to text
+const mdxExpressionHandler = (_state, node) => node.data?.hChildren ?? { type: 'text', value: node.value || '' };
 // Convert MDX JSX elements to a custom mdx-jsx hast node that bypasses rehypeRaw's
 // HTML serialization round-trip; downstream normalization rewrites it to `element`.
 const mdxJsxElementHandler = (state, node) => {
@@ -101936,6 +102221,7 @@ const mdxishInlineMdxComponents = () => tree => {
 
 
 
+
 /** Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. */
 const NESTED_ATTR_EXPRESSION_RE = /[\w-]+\s*=\s*\{/;
 /**
@@ -101979,18 +102265,6 @@ const parseSibling = (stack, parent, index, sibling, safeMode) => {
         stack.push(parent);
     }
 };
-/**
- * Advance a point by the substring of source consumed from it.
- */
-const pointAfter = (start, consumed) => {
-    const newlineIndex = consumed.lastIndexOf('\n');
-    const newlineCount = newlineIndex === -1 ? 0 : consumed.split('\n').length - 1;
-    return {
-        line: start.line + newlineCount,
-        column: newlineCount === 0 ? start.column + consumed.length : consumed.length - newlineIndex,
-        offset: start.offset + consumed.length,
-    };
-};
 /**
  * Build a position ending at `consumedLength` into the html node's value, so the
  * component doesn't claim trailing content the tokenizer swallowed into one node.
@@ -102493,8 +102767,6 @@ const evaluateExports = () => (tree, file) => {
 };
 /* harmony default export */ const evaluate_exports = (evaluateExports);
 
-// EXTERNAL MODULE: ./node_modules/react-dom/server.browser.js
-var server_browser = __webpack_require__(5848);
 ;// ./lib/utils/mdxish/mdxish-expression.ts
 
 
@@ -102540,26 +102812,185 @@ const evalExpression = (expression, scope) => {
     return evalJsxProgram(program, scope);
 };
 
-;// ./processor/transform/mdxish/evaluate-expressions.ts
+// EXTERNAL MODULE: ./node_modules/react-dom/server.browser.js
+var server_browser = __webpack_require__(5848);
+;// ./processor/transform/mdxish/style-object-to-css.ts
+
+/**
+ * CSS properties React treats as unitless — a bare number stays as-is instead of
+ * getting `px` appended. Mirrors React DOM's `isUnitlessNumber` whitelist.
+ * @see https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/shared/CSSProperty.js
+ */
+const UNITLESS_CSS_PROPERTIES = new Set([
+    'animationIterationCount',
+    'aspectRatio',
+    'borderImageOutset',
+    'borderImageSlice',
+    'borderImageWidth',
+    'boxFlex',
+    'boxFlexGroup',
+    'boxOrdinalGroup',
+    'columnCount',
+    'columns',
+    'flex',
+    'flexGrow',
+    'flexPositive',
+    'flexShrink',
+    'flexNegative',
+    'flexOrder',
+    'gridArea',
+    'gridRow',
+    'gridRowEnd',
+    'gridRowSpan',
+    'gridRowStart',
+    'gridColumn',
+    'gridColumnEnd',
+    'gridColumnSpan',
+    'gridColumnStart',
+    'fontWeight',
+    'lineClamp',
+    'lineHeight',
+    'opacity',
+    'order',
+    'orphans',
+    'tabSize',
+    'widows',
+    'zIndex',
+    'zoom',
+    'fillOpacity',
+    'floodOpacity',
+    'stopOpacity',
+    'strokeDasharray',
+    'strokeDashoffset',
+    'strokeMiterlimit',
+    'strokeOpacity',
+    'strokeWidth',
+]);
+/** Convert a camelCase (or CSS custom property) key into its kebab-case CSS name. */
+const cssPropertyName = (key) => (key.startsWith('--') ? key : key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`));
+/** React appends `px` to non-zero numeric values, except unitless and custom properties. */
+const cssPropertyValue = (key, value) => typeof value === 'number' && value !== 0 && !key.startsWith('--') && !UNITLESS_CSS_PROPERTIES.has(key)
+    ? `${value}px`
+    : `${value}`;
+/**
+ * True for a value that should be serialized as a style object rather than passed through
+ * as an already-CSS string. React elements are excluded since they're valid objects too.
+ */
+const style_object_to_css_isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value) && !external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().isValidElement(value);
+/**
+ * Serialize a React-style inline style object (`{ color: "red", fontSize: 12 }`) into a
+ * CSS declaration string (`color:red;font-size:12px`), the shape hast/HTML expects for a
+ * `style` attribute. Empty (`undefined`/`null`/`''`) entries are dropped.
+ */
+const styleObjectToCssText = (style) => Object.entries(style)
+    .filter(([, value]) => value !== undefined && value !== null && value !== '')
+    .map(([key, value]) => `${cssPropertyName(key)}:${cssPropertyValue(key, value)}`)
+    .join(';');
 
+;// ./processor/transform/mdxish/react-element-to-hast.ts
 
 
 
-/** True for an array containing at least one React element, e.g. the result of `.map()` returning JSX. */
-const isRenderableElementArray = (value) => Array.isArray(value) && value.some((external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).isValidElement);
-/** Given the type of the expression result, create the corresponding mdast node. */
-const createEvaluatedNode = (result, position) => {
-    if (result === null || result === undefined) {
-        return { type: 'text', value: '', position };
+// React props that never map to an HTML/hast attribute.
+const RESERVED_PROPS = new Set(['children', 'key', 'ref']);
+/**
+ * Translate React props into hast `properties`: reserved and function props (event handlers)
+ * are dropped (known gap), `style` objects flatten to CSS text. Names stay as authored (`className`); the
+ * hast → HTML boundary maps them to `class`/`for` downstream.
+ */
+function propsToHastProperties(props) {
+    const properties = {};
+    Object.entries(props).forEach(([key, value]) => {
+        if (RESERVED_PROPS.has(key) || typeof value === 'function' || value === undefined)
+            return;
+        properties[key] = key === 'style' && style_object_to_css_isPlainObject(value) ? styleObjectToCssText(value) : value;
+    });
+    // Values are resolved React props, wider than hast's HTML-attribute `PropertyValue` union.
+    return properties;
+}
+/**
+ * Render an element with React's own renderer as a last resort, wrapped as a hast `raw` node —
+ * the same node type markdown's literal HTML blocks produce, so it re-enters rehypeRaw's
+ * parse5 pass normally. Used for element types this converter can't resolve on its own (wrapped
+ * component types, or a function component that throws when called outside React, e.g. one
+ * using hooks). It's not immune to the invalid-HTML-nesting this module otherwise avoids, but
+ * that's a fair trade against silently dropping the content.
+ */
+function renderFallbackHtml(element) {
+    try {
+        const rawNode = { type: 'raw', value: (0,server_browser/* renderToStaticMarkup */.qV)(element) };
+        return [rawNode];
     }
-    else if (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().isValidElement(result) || isRenderableElementArray(result)) {
-        // Convert react elements (or arrays of them, e.g. `.map()` returning JSX) to their HTML
-        // representation. This must come before the object check as both are a subset of it.
-        return { type: 'html', value: (0,server_browser/* renderToStaticMarkup */.qV)(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).Fragment, null, result)), position };
+    catch {
+        return [];
     }
-    else if (typeof result === 'object') {
-        return { type: 'text', value: JSON.stringify(result), position };
+}
+/**
+ * Convert a React element tree into hast. Emitting `mdx-jsx` nodes (rehypeRaw passthrough, later normalized to `element`)
+ * preserves nesting that is valid JSX but not valid HTML, which parse5 would otherwise
+ * restructure — e.g. an `<a>` wrapping another `<a>`.
+ * Recursively converts the tree into an array of hast nodes, dealing with arrays and null/undefined/boolean values.
+ */
+function reactElementToHast(node) {
+    if (Array.isArray(node))
+        return node.flatMap(reactElementToHast);
+    if (node === null || node === undefined || typeof node === 'boolean')
+        return [];
+    if (typeof node === 'string' || typeof node === 'number') {
+        const textNode = { type: 'text', value: String(node) };
+        return [textNode];
     }
+    if (!external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().isValidElement(node))
+        return [];
+    const { type, props } = node;
+    // Fragments contribute their children with no wrapper element.
+    if (type === (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).Fragment)
+        return reactElementToHast(props.children);
+    // Resolve function components to their rendered output so the tree is plain intrinsic
+    // elements. If invoking it directly throws (e.g. it uses hooks, which need React's own
+    // render context), fall back to React's renderer for just this subtree.
+    if (typeof type === 'function') {
+        try {
+            return reactElementToHast(type(props));
+        }
+        catch {
+            return renderFallbackHtml(node);
+        }
+    }
+    // Non-intrinsic, non-callable element types — `React.memo`, `React.forwardRef`,
+    // `Context.Provider`/`Consumer`, `React.lazy` — have no `type` we can resolve ourselves.
+    if (typeof type !== 'string')
+        return renderFallbackHtml(node);
+    const mdxJsxNode = {
+        type: 'mdx-jsx',
+        tagName: type,
+        properties: propsToHastProperties(props),
+        children: reactElementToHast(props.children),
+    };
+    return [mdxJsxNode];
+}
+
+;// ./processor/transform/mdxish/evaluate-expressions.ts
+
+
+
+
+/**
+ * We divide the result of an expression into two categories:
+ * 1. Renderable values: HTML, JSX, e.g. .map() returning JSX
+ * 2. Non-renderable values: a string, number, or object, regular JS values
+ */
+const isRenderable = (value) => {
+    if (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().isValidElement(value))
+        return true;
+    return Array.isArray(value) && value.some(isRenderable);
+};
+/** Turn a non-renderable evaluation result into a text node. */
+const createTextNode = (result, position) => {
+    if (result === null || result === undefined)
+        return { type: 'text', value: '', position };
+    if (typeof result === 'object')
+        return { type: 'text', value: JSON.stringify(result), position };
     return { type: 'text', value: String(result), position };
 };
 /**
@@ -102575,13 +103006,23 @@ const evaluateExpressions = () => (tree, file) => {
     visit(tree, ['mdxFlowExpression', 'mdxTextExpression'], (node, index, parent) => {
         if (!parent || index === null || index === undefined)
             return;
-        const { value, position } = node;
+        const expressionNode = node;
+        const { value, position } = expressionNode;
         const expression = value?.trim();
         if (!expression)
             return;
         try {
             const result = evalExpression(expression, scope);
-            parent.children.splice(index, 1, createEvaluatedNode(result, position));
+            if (isRenderable(result)) {
+                // Stash hast built straight from the React tree; `mdxExpressionHandler` emits it and it 
+                // passes through rehypeRaw/parse5 step later in the pipeline. This ensures that the 
+                // expression result is not parsed by parse5 and fragmenting the nesting that is valid JSX 
+                // but invalid HTML — e.g. an `<a>` wrapping `<a>`.
+                expressionNode.data = { ...expressionNode.data, hChildren: reactElementToHast(result) };
+            }
+            else {
+                parent.children.splice(index, 1, createTextNode(result, position));
+            }
         }
         catch (_error) {
             // Evaluation failed — fall back to literal `{...}` text. The expression
@@ -104492,79 +104933,6 @@ function removeJSXComments(content) {
     return content.replace(JSX_COMMENT_REGEX, '');
 }
 
-;// ./processor/transform/mdxish/style-object-to-css.ts
-
-/**
- * CSS properties React treats as unitless — a bare number stays as-is instead of
- * getting `px` appended. Mirrors React DOM's `isUnitlessNumber` whitelist.
- * @see https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/shared/CSSProperty.js
- */
-const UNITLESS_CSS_PROPERTIES = new Set([
-    'animationIterationCount',
-    'aspectRatio',
-    'borderImageOutset',
-    'borderImageSlice',
-    'borderImageWidth',
-    'boxFlex',
-    'boxFlexGroup',
-    'boxOrdinalGroup',
-    'columnCount',
-    'columns',
-    'flex',
-    'flexGrow',
-    'flexPositive',
-    'flexShrink',
-    'flexNegative',
-    'flexOrder',
-    'gridArea',
-    'gridRow',
-    'gridRowEnd',
-    'gridRowSpan',
-    'gridRowStart',
-    'gridColumn',
-    'gridColumnEnd',
-    'gridColumnSpan',
-    'gridColumnStart',
-    'fontWeight',
-    'lineClamp',
-    'lineHeight',
-    'opacity',
-    'order',
-    'orphans',
-    'tabSize',
-    'widows',
-    'zIndex',
-    'zoom',
-    'fillOpacity',
-    'floodOpacity',
-    'stopOpacity',
-    'strokeDasharray',
-    'strokeDashoffset',
-    'strokeMiterlimit',
-    'strokeOpacity',
-    'strokeWidth',
-]);
-/** Convert a camelCase (or CSS custom property) key into its kebab-case CSS name. */
-const cssPropertyName = (key) => (key.startsWith('--') ? key : key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`));
-/** React appends `px` to non-zero numeric values, except unitless and custom properties. */
-const cssPropertyValue = (key, value) => typeof value === 'number' && value !== 0 && !key.startsWith('--') && !UNITLESS_CSS_PROPERTIES.has(key)
-    ? `${value}px`
-    : `${value}`;
-/**
- * True for a value that should be serialized as a style object rather than passed through
- * as an already-CSS string. React elements are excluded since they're valid objects too.
- */
-const style_object_to_css_isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value) && !external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().isValidElement(value);
-/**
- * Serialize a React-style inline style object (`{ color: "red", fontSize: 12 }`) into a
- * CSS declaration string (`color:red;font-size:12px`), the shape hast/HTML expects for a
- * `style` attribute. Empty (`undefined`/`null`/`''`) entries are dropped.
- */
-const styleObjectToCssText = (style) => Object.entries(style)
-    .filter(([, value]) => value !== undefined && value !== null && value !== '')
-    .map(([key, value]) => `${cssPropertyName(key)}:${cssPropertyValue(key, value)}`)
-    .join(';');
-
 ;// ./processor/transform/mdxish/resolve-deferred-attribute-expression-props.ts
 
 
@@ -106383,6 +106751,332 @@ const mdxishTags_tags = (doc) => {
 };
 /* harmony default export */ const mdxishTags = (mdxishTags_tags);
 
+;// ./lib/mdast-util/html-block-component/index.ts
+const html_block_component_contextMap = new WeakMap();
+function findHtmlBlockComponentToken() {
+    const events = this.tokenStack;
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+        if (events[i][0].type === 'htmlBlockComponent')
+            return events[i][0];
+    }
+    return undefined;
+}
+function enterHtmlBlockComponent(token) {
+    html_block_component_contextMap.set(token, { chunks: [], lastEndLine: token.start.line });
+    this.enter({ type: 'html', value: '' }, token);
+}
+function exitHtmlBlockComponentData(token) {
+    const componentToken = findHtmlBlockComponentToken.call(this);
+    if (!componentToken)
+        return;
+    const ctx = html_block_component_contextMap.get(componentToken);
+    if (ctx) {
+        const gap = token.start.line - ctx.lastEndLine;
+        if (ctx.chunks.length > 0 && gap > 0) {
+            ctx.chunks.push('\n'.repeat(gap));
+        }
+        ctx.chunks.push(this.sliceSerialize(token));
+        ctx.lastEndLine = token.end.line;
+    }
+}
+function exitHtmlBlockComponent(token) {
+    const ctx = html_block_component_contextMap.get(token);
+    const node = this.stack[this.stack.length - 1];
+    if (ctx) {
+        node.value = ctx.chunks.join('');
+        html_block_component_contextMap.delete(token);
+    }
+    this.exit(token);
+}
+function htmlBlockComponentFromMarkdown() {
+    return {
+        enter: {
+            htmlBlockComponent: enterHtmlBlockComponent,
+        },
+        exit: {
+            htmlBlockComponentData: exitHtmlBlockComponentData,
+            htmlBlockComponent: exitHtmlBlockComponent,
+        },
+    };
+}
+
+;// ./lib/micromark/html-block-component/syntax.ts
+
+
+const TAG_SUFFIX = [
+    codes.uppercaseT,
+    codes.uppercaseM,
+    codes.uppercaseL,
+    codes.uppercaseB,
+    codes.lowercaseL,
+    codes.lowercaseO,
+    codes.lowercaseC,
+    codes.lowercaseK,
+];
+// ---------------------------------------------------------------------------
+// Shared tokenizer factory
+// ---------------------------------------------------------------------------
+/**
+ * Creates a tokenize function for `<HTMLBlock>...</HTMLBlock>`.
+ *
+ * - **flow** (block-level): supports multiline content via line continuations,
+ *   consumes trailing whitespace after the closing tag.
+ * - **text** (inline): single-line only, exits immediately after the closing tag.
+ */
+function syntax_createTokenize(mode) {
+    return function tokenize(effects, ok, nok) {
+        let depth = 1;
+        function matchChars(chars, onMatch, onFail) {
+            if (chars.length === 0)
+                return onMatch;
+            const next = (code) => {
+                if (code === chars[0]) {
+                    effects.consume(code);
+                    return matchChars(chars.slice(1), onMatch, onFail);
+                }
+                return onFail(code);
+            };
+            return next;
+        }
+        function matchTagName(onMatch, onFail) {
+            const next = (code) => {
+                if (code === codes.uppercaseH) {
+                    effects.consume(code);
+                    return matchChars(TAG_SUFFIX, onMatch, onFail);
+                }
+                return onFail(code);
+            };
+            return next;
+        }
+        return start;
+        function start(code) {
+            if (code !== codes.lessThan)
+                return nok(code);
+            effects.enter('htmlBlockComponent');
+            effects.enter('htmlBlockComponentData');
+            effects.consume(code);
+            return matchTagName(afterTagName, nok);
+        }
+        function afterTagName(code) {
+            if (code === codes.greaterThan) {
+                effects.consume(code);
+                return body;
+            }
+            if (code === codes.space || code === codes.horizontalTab) {
+                effects.consume(code);
+                return inAttributes;
+            }
+            if (mode === 'flow' && markdownLineEnding(code)) {
+                effects.exit('htmlBlockComponentData');
+                return attributeContinuationStart(code);
+            }
+            if (code === codes.slash) {
+                effects.consume(code);
+                return selfClose;
+            }
+            return nok(code);
+        }
+        function inAttributes(code) {
+            if (code === codes.greaterThan) {
+                effects.consume(code);
+                return body;
+            }
+            if (code === null) {
+                return nok(code);
+            }
+            if (markdownLineEnding(code)) {
+                if (mode === 'text')
+                    return nok(code);
+                effects.exit('htmlBlockComponentData');
+                return attributeContinuationStart(code);
+            }
+            effects.consume(code);
+            return inAttributes;
+        }
+        function attributeContinuationStart(code) {
+            return effects.check(html_block_component_syntax_nonLazyContinuationStart, attributeContinuationNonLazy, continuationAfter)(code);
+        }
+        function attributeContinuationNonLazy(code) {
+            effects.enter(types_types.lineEnding);
+            effects.consume(code);
+            effects.exit(types_types.lineEnding);
+            return attributeContinuationBefore;
+        }
+        function attributeContinuationBefore(code) {
+            if (code === null || markdownLineEnding(code)) {
+                return attributeContinuationStart(code);
+            }
+            effects.enter('htmlBlockComponentData');
+            return inAttributes(code);
+        }
+        function selfClose(code) {
+            if (code === codes.greaterThan) {
+                effects.consume(code);
+                return mode === 'flow' ? afterClose : done(code);
+            }
+            return nok(code);
+        }
+        function body(code) {
+            if (code === null)
+                return nok(code);
+            if (markdownLineEnding(code)) {
+                if (mode === 'text') {
+                    // Text constructs operate on paragraph content which spans lines
+                    effects.consume(code);
+                    return body;
+                }
+                effects.exit('htmlBlockComponentData');
+                return continuationStart(code);
+            }
+            if (code === codes.lessThan) {
+                effects.consume(code);
+                return closeSlash;
+            }
+            effects.consume(code);
+            return body;
+        }
+        function closeSlash(code) {
+            if (code === codes.slash) {
+                effects.consume(code);
+                return matchTagName(closeGt, body);
+            }
+            return matchTagName(openAfterTagName, body)(code);
+        }
+        function openAfterTagName(code) {
+            if (code === codes.greaterThan || code === codes.space || code === codes.horizontalTab) {
+                depth += 1;
+                effects.consume(code);
+                return body;
+            }
+            return body(code);
+        }
+        function closeGt(code) {
+            if (code === codes.greaterThan) {
+                depth -= 1;
+                effects.consume(code);
+                if (depth === 0) {
+                    return mode === 'flow' ? afterClose : done(code);
+                }
+                return body;
+            }
+            return body(code);
+        }
+        // -- flow-only states ---------------------------------------------------
+        function afterClose(code) {
+            if (code === null || markdownLineEnding(code)) {
+                return done(code);
+            }
+            if (code === codes.space || code === codes.horizontalTab) {
+                effects.consume(code);
+                return afterClose;
+            }
+            // Reject so the block re-parses as a paragraph, deferring to the
+            // text tokenizer which preserves trailing content in the same line.
+            return nok(code);
+        }
+        // -- flow-only: line continuation ---------------------------------------
+        function continuationStart(code) {
+            return effects.check(html_block_component_syntax_nonLazyContinuationStart, continuationStartNonLazy, continuationAfter)(code);
+        }
+        function continuationStartNonLazy(code) {
+            effects.enter(types_types.lineEnding);
+            effects.consume(code);
+            effects.exit(types_types.lineEnding);
+            return continuationBefore;
+        }
+        function continuationBefore(code) {
+            if (code === null || markdownLineEnding(code)) {
+                return continuationStart(code);
+            }
+            effects.enter('htmlBlockComponentData');
+            return body(code);
+        }
+        function continuationAfter(code) {
+            if (code === null)
+                return nok(code);
+            effects.exit('htmlBlockComponent');
+            return ok(code);
+        }
+        // -- shared exit --------------------------------------------------------
+        function done(_code) {
+            effects.exit('htmlBlockComponentData');
+            effects.exit('htmlBlockComponent');
+            return ok(_code);
+        }
+    };
+}
+// ---------------------------------------------------------------------------
+// Flow construct (block-level)
+// ---------------------------------------------------------------------------
+const html_block_component_syntax_nonLazyContinuationStart = {
+    tokenize: html_block_component_syntax_tokenizeNonLazyContinuationStart,
+    partial: true,
+};
+function resolveToHtmlBlockComponent(events) {
+    let index = events.length;
+    while (index > 0) {
+        index -= 1;
+        if (events[index][0] === 'enter' && events[index][1].type === 'htmlBlockComponent') {
+            break;
+        }
+    }
+    if (index > 1 && events[index - 2][1].type === types_types.linePrefix) {
+        events[index][1].start = events[index - 2][1].start;
+        events[index + 1][1].start = events[index - 2][1].start;
+        events.splice(index - 2, 2);
+    }
+    return events;
+}
+const htmlBlockComponentFlowConstruct = {
+    name: 'htmlBlockComponent',
+    tokenize: syntax_createTokenize('flow'),
+    resolveTo: resolveToHtmlBlockComponent,
+    concrete: true,
+};
+function html_block_component_syntax_tokenizeNonLazyContinuationStart(effects, ok, nok) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    return start;
+    function start(code) {
+        if (markdownLineEnding(code)) {
+            effects.enter(types_types.lineEnding);
+            effects.consume(code);
+            effects.exit(types_types.lineEnding);
+            return after;
+        }
+        return nok(code);
+    }
+    function after(code) {
+        if (self.parser.lazy[self.now().line]) {
+            return nok(code);
+        }
+        return ok(code);
+    }
+}
+// ---------------------------------------------------------------------------
+// Text construct (inline)
+// ---------------------------------------------------------------------------
+const htmlBlockComponentTextConstruct = {
+    name: 'htmlBlockComponent',
+    tokenize: syntax_createTokenize('text'),
+};
+// ---------------------------------------------------------------------------
+// Extension
+// ---------------------------------------------------------------------------
+function htmlBlockComponent() {
+    return {
+        flow: {
+            [codes.lessThan]: [htmlBlockComponentFlowConstruct],
+        },
+        text: {
+            [codes.lessThan]: [htmlBlockComponentTextConstruct],
+        },
+    };
+}
+
+;// ./lib/micromark/html-block-component/index.ts
+
+
 ;// ./lib/utils/extractMagicBlocks.ts
 /**
  * The content matching in this regex captures everything between `[block:TYPE]`
@@ -106449,19 +107143,22 @@ function restoreMagicBlocks(replaced, blocks) {
 
 
 
+
+
 /**
  * Removes Markdown and MDX comments.
  */
 async function stripComments(doc, { mdx, mdxish } = {}) {
     const { replaced, blocks } = extractMagicBlocks(doc);
     const processor = unified();
-    // we still require these two extensions because:
+    // we still require these extensions because:
     // 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
     if (mdxish) {
         processor
-            .data('micromarkExtensions', [jsxTable(), mdxExpression({ allowEmpty: true })])
-            .data('fromMarkdownExtensions', [jsxTableFromMarkdown(), mdxExpressionFromMarkdown()])
+            .data('micromarkExtensions', [htmlBlockComponent(), jsxTable(), mdxExpression({ allowEmpty: true })])
+            .data('fromMarkdownExtensions', [htmlBlockComponentFromMarkdown(), jsxTableFromMarkdown(), mdxExpressionFromMarkdown()])
             .data('toMarkdownExtensions', [mdxExpressionToMarkdown()]);
     }
     processor