@readme/markdown 14.4.0 → 14.5.0

package/dist/main.js

@@ -11594,6 +11594,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   Components: () => (/* reexport */ components_namespaceObject),
   FLOW_TYPES: () => (/* reexport */ FLOW_TYPES),
+  INLINE_ONLY_PARENT_TYPES: () => (/* reexport */ INLINE_ONLY_PARENT_TYPES),
   NodeTypes: () => (/* reexport */ NodeTypes),
   Owlmoji: () => (/* reexport */ Owlmoji),
   compile: () => (/* reexport */ lib_compile),
@@ -12254,13 +12255,17 @@ const Image = (Props) => {
                 external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("i", { "aria-hidden": "true", className: "fa-solid fa-xmark" }))))) : null;
     if (framed) {
         const frameClass = `img-frame img-frame-${align || 'center'}`;
+        // Left/right frames shrink to fit, so percentage widths can't resolve
+        // against the parent, hoist onto the wrapper. Center frames are full-width.
+        const isClamped = align === 'left' || align === 'right';
+        const frameStyle = isClamped && typeof width === 'string' && width.endsWith('%') ? { width } : undefined;
         if (children || caption) {
-            return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figure", { className: frameClass },
+            return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figure", { className: frameClass, style: frameStyle },
                 closedLightbox(alt || 'Expand image', imgElement),
                 lightboxOverlay,
                 external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figcaption", null, children || caption)));
         }
-        return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("div", { className: frameClass },
+        return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("div", { className: frameClass, style: frameStyle },
             closedLightbox(alt || 'Expand image', imgElement),
             lightboxOverlay));
     }
@@ -13061,6 +13066,34 @@ const FLOW_TYPES = new Set([
     'table',
     'thematicBreak',
 ]);
+/**
+ * MDAST parent types whose children are restricted to inline content. A block-level
+ * node placed inside any of these violates the parent's content model and breaks
+ * downstream consumers
+ *
+ * Derived from the mdast spec. Seven of these are direct "phrasing content" parents:
+ *   - paragraph, heading, link, linkReference, emphasis, strong
+ *   - tableCell (phrasing minus Break)
+ *
+ * @link {https://github.com/syntax-tree/mdast}
+ *
+ * `delete` is GFM and has *transparent* content, see:
+ * @link {https://github.com/syntax-tree/mdast-util-gfm-strikethrough}
+ *
+ * its children must also be phrasing, so it belongs here too.
+ *
+ * NOTE: exported so downstream consumers can reuse and not drift away
+ */
+const INLINE_ONLY_PARENT_TYPES = new Set([
+    'paragraph',
+    'heading',
+    'tableCell',
+    'link',
+    'linkReference',
+    'emphasis',
+    'strong',
+    'delete',
+]);
 // HELPER CONSTANTS FOR MDXISH RENDERING
 /**
  * Inline-only custom components that appear as phrasing content within
@@ -75543,7 +75576,15 @@ const walkTags = (html, handlers) => {
     const tagEnd = (parser) => (parser.endIndex ?? parser.startIndex) + 1;
     const parser = new Parser_Parser({
         onopentag(name) {
-            handlers.onOpen?.({ name, start: parser.startIndex, end: tagEnd(parser) });
+            const start = parser.startIndex;
+            const end = tagEnd(parser);
+            handlers.onOpen?.({
+                name,
+                start,
+                end,
+                isSelfClosing: html[end - 2] === '/',
+                isStrayCloser: html[start + 1] === '/',
+            });
         },
         onclosetag(name, implicit) {
             handlers.onClose?.({ name, start: parser.startIndex, end: tagEnd(parser), implicit });
@@ -75786,6 +75827,57 @@ const remapPositionsToOriginal = (tree, originalSource, inserts) => {
     });
 };
 
+;// ./processor/transform/mdxish/tables/repair-expression-escapes.ts
+
+/**
+ * mdxjs hands the contents of every `{…}` to acorn as a JavaScript expression.
+ * A bare backslash is only legal inside a string/template literal in JS, so a
+ * markdown-style escape such as `{customer\_id}` — common when authors escape an
+ * underscore out of habit — makes acorn throw "Could not parse expression with
+ * acorn", which drops parsing for the whole surrounding `<Table>`.
+ *
+ * This pass deletes backslashes that sit in JS *code* position inside a `{…}`
+ * expression. Backslashes within a '…', "…" or `…` literal are valid escapes
+ * and are left untouched. Scoped to the malformed-retry path; the happy path
+ * never runs it.
+ */
+const repairExpressionEscapes = (html) => {
+    const inserts = [];
+    let braceDepth = 0;
+    // Active string/template delimiter while scanning inside an expression, or null.
+    let stringChar = null;
+    for (let i = 0; i < html.length; i += 1) {
+        const ch = html[i];
+        if (stringChar) {
+            // Inside a JS string/template literal a backslash escapes the next char
+            // and is valid, so skip the pair untouched (this also prevents an escaped
+            // quote from prematurely closing the literal).
+            if (ch === '\\') {
+                i += 1;
+            }
+            else if (ch === stringChar) {
+                stringChar = null;
+            }
+        }
+        else if (braceDepth > 0 && (ch === '"' || ch === "'" || ch === '`')) {
+            stringChar = ch;
+        }
+        else if (ch === '{') {
+            braceDepth += 1;
+        }
+        else if (ch === '}') {
+            if (braceDepth > 0)
+                braceDepth -= 1;
+        }
+        else if (braceDepth > 0 && ch === '\\') {
+            // A backslash in code position inside an expression is always a syntax
+            // error; delete it so acorn can parse the remaining expression.
+            inserts.push({ offset: i, text: '', consumes: 1 });
+        }
+    }
+    return applyInserts(html, inserts);
+};
+
 ;// ./node_modules/html-tags/html-tags.json
 const html_tags_namespaceObject = /*#__PURE__*/JSON.parse('["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","link","main","map","mark","math","menu","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","script","search","section","select","selectedcontent","slot","small","source","span","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr"]');
 // EXTERNAL MODULE: ./node_modules/react-html-attributes/dist/index.js
@@ -75912,13 +76004,6 @@ const isStandardHtmlTag = (name) => STANDARD_HTML_TAGS.has(name.toLowerCase());
 // (htmlparser2) handles attribute parsing; this scan only needs to locate
 // orphan closers, which can't appear inside an attribute value anyway.
 const HTML_TAG_TOKEN_RE = /<(\/)?([a-zA-Z][a-zA-Z0-9-]*)\b[^>]*>/g;
-/**
- * htmlparser2 silently drops closing tags that have no matching opener
- * (e.g. the trailing `</li>` in `<ul><li>x</ul></li>`), leaving them in the
- * source makes mdxjs choke on the dangling closer. Scan the masked
- * source for `</name>` tokens that don't pair with any prior unmatched
- * `<name>` and return their spans so the caller can drop them.
- */
 const findOrphanClosers = (html) => {
     const masked = maskNonTagRegions(html);
     const stack = [];
@@ -75927,18 +76012,30 @@ const findOrphanClosers = (html) => {
     let match;
     while ((match = HTML_TAG_TOKEN_RE.exec(masked)) !== null) {
         const name = match[2].toLowerCase();
-        // Non-HTML names and void elements are handled by the main walker.
         // eslint-disable-next-line no-continue
-        if (!isStandardHtmlTag(name) || HTML_VOID_ELEMENTS.has(name))
+        if (!isStandardHtmlTag(name))
+            continue;
+        // Special case for <br>: htmlparser2 will normalize orphan </br> to <br>
+        // so we don't need to handle it here.
+        // eslint-disable-next-line no-continue
+        if (name === 'br' && match[1] === '/')
             continue;
+        const isVoid = HTML_VOID_ELEMENTS.has(name);
         if (match[1] === '/') {
+            // Other void closers (`</hr>`, `</img>`, ...) have no HTML5 rewrite rule
+            // and must be stripped before the strict mdxjs parse runs.
+            if (isVoid) {
+                orphans.push({ offset: match.index, length: match[0].length });
+                // eslint-disable-next-line no-continue
+                continue;
+            }
             const idx = stack.lastIndexOf(name);
             if (idx === -1)
                 orphans.push({ offset: match.index, length: match[0].length });
             else
                 stack.length = idx;
         }
-        else if (!match[0].endsWith('/>')) {
+        else if (!isVoid && !match[0].endsWith('/>')) {
             stack.push(name);
         }
     }
@@ -75971,7 +76068,7 @@ const repairUnclosedTags = (html) => {
     const inserts = [];
     const openTags = [];
     walkTags(html, {
-        onOpen({ name, start, end }) {
+        onOpen({ name, start, end, isSelfClosing, isStrayCloser }) {
             // Escape non-HTML names (custom components, typos, `<arbitrary-tag>`)
             // so MDX treats them as literal text instead of expecting a closer
             if (!isStandardHtmlTag(name)) {
@@ -75979,12 +76076,19 @@ const repairUnclosedTags = (html) => {
                 return;
             }
             if (HTML_VOID_ELEMENTS.has(name.toLowerCase())) {
-                // MDX requires void elements to be self-closing (`<br/>`, not `<br>`).
-                // If the source open tag doesn't end with `/`, inject one before the
-                // `>` so it parses. `end` is one past `>`, so `end - 2` is the char
-                // immediately before `>`.
-                if (html[end - 2] !== '/')
+                // MDX requires void elements to be self-closing (`<br/>`, not `<br>`)
+                // so we need to rewrite them to self closing tags.
+                if (isStrayCloser) {
+                    // htmlparser2 may normalize some stray closers like `</br>` into opener
+                    // events <br> per the HTML5 spec. In this case remove the closing /
+                    // and fully rewrite the tag to self closing.
+                    inserts.push({ offset: start, text: `<${name}/>`, consumes: end - start });
+                    return;
+                }
+                else if (!isSelfClosing) {
+                    // Slots in the / right before the closing >
                     inserts.push({ offset: end - 1, text: '/' });
+                }
                 return;
             }
             openTags.push({ name, start, end });
@@ -76024,6 +76128,7 @@ const repairUnclosedTags = (html) => {
 
 
 
+
 
 const isTableCell = (node) => isMDXElement(node) && ['th', 'td'].includes(node.name);
 const tableTypes = {
@@ -76035,6 +76140,9 @@ const tableTypes = {
 // register them manually so we control ordering against our other tokenizers.
 // The fallback omits these so blank-line-separated markdown inside cells still
 // parses when mdxjs throws on malformed JSX.
+//
+// mdx parsing is used because it heavily simplifies the parsing of the table structure;
+// it can identify the rows and cells. The heavy lifting is done by it
 const buildTableNodeProcessor = (withMdx) => unified()
     .data('micromarkExtensions', [...(withMdx ? [mdxjs()] : []), syntax_gemoji(), legacyVariable()])
     .data('fromMarkdownExtensions', [
@@ -76269,22 +76377,29 @@ const mdxishTables = () => tree => {
         // 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
+        // To get around that, we have some fallback logics after trying to repair the table content.
         let parsed = parseTableNode(tableNodeProcessor, node);
         if (!parsed) {
-            // First common error is unclosed HTML tags
-            const repaired = repairUnclosedTags(node.value);
-            if (repaired.value !== node.value) {
-                parsed = parseTableNode(tableNodeProcessor, { ...node, value: repaired.value }, { inserts: repaired.inserts, originalSource: node.value });
-            }
-            if (!parsed) {
-                // Second common error is having a line with text and an opening tag
-                // E.g. text <div> \n <div> text
-                const normalized = normalizeTagSpacing(node.value);
-                if (normalized.value !== node.value) {
-                    parsed = parseTableNode(tableNodeProcessor, { ...node, value: normalized.value }, { inserts: normalized.inserts, originalSource: node.value });
+            // 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);
+            });
         }
         if (parsed) {
             // If the table is parsed successfully, we can now process it further
@@ -76305,6 +76420,8 @@ const mdxishTables = () => tree => {
                 return;
             parent.children.splice(index, 1, ...fallback.children);
         }
+        // Otherwise, there's no point in trying to parse the table content further
+        // More repairs are needed in that case
     });
     return tree;
 };
@@ -103402,6 +103519,7 @@ const mdxishHtmlBlocks = () => tree => {
 
 
 
+
 function toImageAlign(value) {
     if (value === 'left' || value === 'center' || value === 'right') {
         return value;
@@ -103954,16 +104072,12 @@ const mdxishJsxToMdast = () => tree => {
             parent.children[index] = newNode;
         }
     });
-    // Transform magic block images (type: 'image') to image-block
-    // Images inside paragraphs are standard markdown — handled by imageTransformer, normalized below
+    // Promote magic-block images (type: 'image') to image-block, except inside inline-only
+    // parents where the image must stay inline (authors use `<Image caption="…" />` instead).
     visit(tree, 'image', (node, index, parent) => {
         if (!parent || index === undefined)
             return SKIP;
-        if (parent.type === 'paragraph')
-            return SKIP;
-        // `![](url)` in any tableCell stays inline. Authors who want a captioned figure use
-        // `<Image caption="…" />` JSX, which becomes `image-block` via `COMPONENT_MAP` above.
-        if (parent.type === 'tableCell')
+        if (INLINE_ONLY_PARENT_TYPES.has(parent.type))
             return SKIP;
         const newNode = transformMagicBlockImage(node);
         parent.children[index] = newNode;

package/dist/main.node.js

@@ -19278,6 +19278,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   Components: () => (/* reexport */ components_namespaceObject),
   FLOW_TYPES: () => (/* reexport */ FLOW_TYPES),
+  INLINE_ONLY_PARENT_TYPES: () => (/* reexport */ INLINE_ONLY_PARENT_TYPES),
   NodeTypes: () => (/* reexport */ NodeTypes),
   Owlmoji: () => (/* reexport */ Owlmoji),
   compile: () => (/* reexport */ lib_compile),
@@ -24880,13 +24881,17 @@ const Image = (Props) => {
                 external_react_.createElement("i", { "aria-hidden": "true", className: "fa-solid fa-xmark" }))))) : null;
     if (framed) {
         const frameClass = `img-frame img-frame-${align || 'center'}`;
+        // Left/right frames shrink to fit, so percentage widths can't resolve
+        // against the parent, hoist onto the wrapper. Center frames are full-width.
+        const isClamped = align === 'left' || align === 'right';
+        const frameStyle = isClamped && typeof width === 'string' && width.endsWith('%') ? { width } : undefined;
         if (children || caption) {
-            return (external_react_.createElement("figure", { className: frameClass },
+            return (external_react_.createElement("figure", { className: frameClass, style: frameStyle },
                 closedLightbox(alt || 'Expand image', imgElement),
                 lightboxOverlay,
                 external_react_.createElement("figcaption", null, children || caption)));
         }
-        return (external_react_.createElement("div", { className: frameClass },
+        return (external_react_.createElement("div", { className: frameClass, style: frameStyle },
             closedLightbox(alt || 'Expand image', imgElement),
             lightboxOverlay));
     }
@@ -25634,6 +25639,34 @@ const FLOW_TYPES = new Set([
     'table',
     'thematicBreak',
 ]);
+/**
+ * MDAST parent types whose children are restricted to inline content. A block-level
+ * node placed inside any of these violates the parent's content model and breaks
+ * downstream consumers
+ *
+ * Derived from the mdast spec. Seven of these are direct "phrasing content" parents:
+ *   - paragraph, heading, link, linkReference, emphasis, strong
+ *   - tableCell (phrasing minus Break)
+ *
+ * @link {https://github.com/syntax-tree/mdast}
+ *
+ * `delete` is GFM and has *transparent* content, see:
+ * @link {https://github.com/syntax-tree/mdast-util-gfm-strikethrough}
+ *
+ * its children must also be phrasing, so it belongs here too.
+ *
+ * NOTE: exported so downstream consumers can reuse and not drift away
+ */
+const INLINE_ONLY_PARENT_TYPES = new Set([
+    'paragraph',
+    'heading',
+    'tableCell',
+    'link',
+    'linkReference',
+    'emphasis',
+    'strong',
+    'delete',
+]);
 // HELPER CONSTANTS FOR MDXISH RENDERING
 /**
  * Inline-only custom components that appear as phrasing content within
@@ -95767,7 +95800,15 @@ const walkTags = (html, handlers) => {
     const tagEnd = (parser) => (parser.endIndex ?? parser.startIndex) + 1;
     const parser = new Parser_Parser({
         onopentag(name) {
-            handlers.onOpen?.({ name, start: parser.startIndex, end: tagEnd(parser) });
+            const start = parser.startIndex;
+            const end = tagEnd(parser);
+            handlers.onOpen?.({
+                name,
+                start,
+                end,
+                isSelfClosing: html[end - 2] === '/',
+                isStrayCloser: html[start + 1] === '/',
+            });
         },
         onclosetag(name, implicit) {
             handlers.onClose?.({ name, start: parser.startIndex, end: tagEnd(parser), implicit });
@@ -96010,6 +96051,57 @@ const remapPositionsToOriginal = (tree, originalSource, inserts) => {
     });
 };
 
+;// ./processor/transform/mdxish/tables/repair-expression-escapes.ts
+
+/**
+ * mdxjs hands the contents of every `{…}` to acorn as a JavaScript expression.
+ * A bare backslash is only legal inside a string/template literal in JS, so a
+ * markdown-style escape such as `{customer\_id}` — common when authors escape an
+ * underscore out of habit — makes acorn throw "Could not parse expression with
+ * acorn", which drops parsing for the whole surrounding `<Table>`.
+ *
+ * This pass deletes backslashes that sit in JS *code* position inside a `{…}`
+ * expression. Backslashes within a '…', "…" or `…` literal are valid escapes
+ * and are left untouched. Scoped to the malformed-retry path; the happy path
+ * never runs it.
+ */
+const repairExpressionEscapes = (html) => {
+    const inserts = [];
+    let braceDepth = 0;
+    // Active string/template delimiter while scanning inside an expression, or null.
+    let stringChar = null;
+    for (let i = 0; i < html.length; i += 1) {
+        const ch = html[i];
+        if (stringChar) {
+            // Inside a JS string/template literal a backslash escapes the next char
+            // and is valid, so skip the pair untouched (this also prevents an escaped
+            // quote from prematurely closing the literal).
+            if (ch === '\\') {
+                i += 1;
+            }
+            else if (ch === stringChar) {
+                stringChar = null;
+            }
+        }
+        else if (braceDepth > 0 && (ch === '"' || ch === "'" || ch === '`')) {
+            stringChar = ch;
+        }
+        else if (ch === '{') {
+            braceDepth += 1;
+        }
+        else if (ch === '}') {
+            if (braceDepth > 0)
+                braceDepth -= 1;
+        }
+        else if (braceDepth > 0 && ch === '\\') {
+            // A backslash in code position inside an expression is always a syntax
+            // error; delete it so acorn can parse the remaining expression.
+            inserts.push({ offset: i, text: '', consumes: 1 });
+        }
+    }
+    return applyInserts(html, inserts);
+};
+
 ;// ./node_modules/html-tags/html-tags.json
 const html_tags_namespaceObject = /*#__PURE__*/JSON.parse('["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","link","main","map","mark","math","menu","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","script","search","section","select","selectedcontent","slot","small","source","span","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr"]');
 // EXTERNAL MODULE: ./node_modules/react-html-attributes/dist/index.js
@@ -96136,13 +96228,6 @@ const isStandardHtmlTag = (name) => STANDARD_HTML_TAGS.has(name.toLowerCase());
 // (htmlparser2) handles attribute parsing; this scan only needs to locate
 // orphan closers, which can't appear inside an attribute value anyway.
 const HTML_TAG_TOKEN_RE = /<(\/)?([a-zA-Z][a-zA-Z0-9-]*)\b[^>]*>/g;
-/**
- * htmlparser2 silently drops closing tags that have no matching opener
- * (e.g. the trailing `</li>` in `<ul><li>x</ul></li>`), leaving them in the
- * source makes mdxjs choke on the dangling closer. Scan the masked
- * source for `</name>` tokens that don't pair with any prior unmatched
- * `<name>` and return their spans so the caller can drop them.
- */
 const findOrphanClosers = (html) => {
     const masked = maskNonTagRegions(html);
     const stack = [];
@@ -96151,18 +96236,30 @@ const findOrphanClosers = (html) => {
     let match;
     while ((match = HTML_TAG_TOKEN_RE.exec(masked)) !== null) {
         const name = match[2].toLowerCase();
-        // Non-HTML names and void elements are handled by the main walker.
         // eslint-disable-next-line no-continue
-        if (!isStandardHtmlTag(name) || HTML_VOID_ELEMENTS.has(name))
+        if (!isStandardHtmlTag(name))
+            continue;
+        // Special case for <br>: htmlparser2 will normalize orphan </br> to <br>
+        // so we don't need to handle it here.
+        // eslint-disable-next-line no-continue
+        if (name === 'br' && match[1] === '/')
             continue;
+        const isVoid = HTML_VOID_ELEMENTS.has(name);
         if (match[1] === '/') {
+            // Other void closers (`</hr>`, `</img>`, ...) have no HTML5 rewrite rule
+            // and must be stripped before the strict mdxjs parse runs.
+            if (isVoid) {
+                orphans.push({ offset: match.index, length: match[0].length });
+                // eslint-disable-next-line no-continue
+                continue;
+            }
             const idx = stack.lastIndexOf(name);
             if (idx === -1)
                 orphans.push({ offset: match.index, length: match[0].length });
             else
                 stack.length = idx;
         }
-        else if (!match[0].endsWith('/>')) {
+        else if (!isVoid && !match[0].endsWith('/>')) {
             stack.push(name);
         }
     }
@@ -96195,7 +96292,7 @@ const repairUnclosedTags = (html) => {
     const inserts = [];
     const openTags = [];
     walkTags(html, {
-        onOpen({ name, start, end }) {
+        onOpen({ name, start, end, isSelfClosing, isStrayCloser }) {
             // Escape non-HTML names (custom components, typos, `<arbitrary-tag>`)
             // so MDX treats them as literal text instead of expecting a closer
             if (!isStandardHtmlTag(name)) {
@@ -96203,12 +96300,19 @@ const repairUnclosedTags = (html) => {
                 return;
             }
             if (HTML_VOID_ELEMENTS.has(name.toLowerCase())) {
-                // MDX requires void elements to be self-closing (`<br/>`, not `<br>`).
-                // If the source open tag doesn't end with `/`, inject one before the
-                // `>` so it parses. `end` is one past `>`, so `end - 2` is the char
-                // immediately before `>`.
-                if (html[end - 2] !== '/')
+                // MDX requires void elements to be self-closing (`<br/>`, not `<br>`)
+                // so we need to rewrite them to self closing tags.
+                if (isStrayCloser) {
+                    // htmlparser2 may normalize some stray closers like `</br>` into opener
+                    // events <br> per the HTML5 spec. In this case remove the closing /
+                    // and fully rewrite the tag to self closing.
+                    inserts.push({ offset: start, text: `<${name}/>`, consumes: end - start });
+                    return;
+                }
+                else if (!isSelfClosing) {
+                    // Slots in the / right before the closing >
                     inserts.push({ offset: end - 1, text: '/' });
+                }
                 return;
             }
             openTags.push({ name, start, end });
@@ -96248,6 +96352,7 @@ const repairUnclosedTags = (html) => {
 
 
 
+
 
 const isTableCell = (node) => isMDXElement(node) && ['th', 'td'].includes(node.name);
 const tableTypes = {
@@ -96259,6 +96364,9 @@ const tableTypes = {
 // register them manually so we control ordering against our other tokenizers.
 // The fallback omits these so blank-line-separated markdown inside cells still
 // parses when mdxjs throws on malformed JSX.
+//
+// mdx parsing is used because it heavily simplifies the parsing of the table structure;
+// it can identify the rows and cells. The heavy lifting is done by it
 const buildTableNodeProcessor = (withMdx) => unified()
     .data('micromarkExtensions', [...(withMdx ? [mdxjs()] : []), syntax_gemoji(), legacyVariable()])
     .data('fromMarkdownExtensions', [
@@ -96493,22 +96601,29 @@ const mdxishTables = () => tree => {
         // 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
+        // To get around that, we have some fallback logics after trying to repair the table content.
         let parsed = parseTableNode(tableNodeProcessor, node);
         if (!parsed) {
-            // First common error is unclosed HTML tags
-            const repaired = repairUnclosedTags(node.value);
-            if (repaired.value !== node.value) {
-                parsed = parseTableNode(tableNodeProcessor, { ...node, value: repaired.value }, { inserts: repaired.inserts, originalSource: node.value });
-            }
-            if (!parsed) {
-                // Second common error is having a line with text and an opening tag
-                // E.g. text <div> \n <div> text
-                const normalized = normalizeTagSpacing(node.value);
-                if (normalized.value !== node.value) {
-                    parsed = parseTableNode(tableNodeProcessor, { ...node, value: normalized.value }, { inserts: normalized.inserts, originalSource: node.value });
+            // 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);
+            });
         }
         if (parsed) {
             // If the table is parsed successfully, we can now process it further
@@ -96529,6 +96644,8 @@ const mdxishTables = () => tree => {
                 return;
             parent.children.splice(index, 1, ...fallback.children);
         }
+        // Otherwise, there's no point in trying to parse the table content further
+        // More repairs are needed in that case
     });
     return tree;
 };
@@ -123626,6 +123743,7 @@ const mdxishHtmlBlocks = () => tree => {
 
 
 
+
 function toImageAlign(value) {
     if (value === 'left' || value === 'center' || value === 'right') {
         return value;
@@ -124178,16 +124296,12 @@ const mdxishJsxToMdast = () => tree => {
             parent.children[index] = newNode;
         }
     });
-    // Transform magic block images (type: 'image') to image-block
-    // Images inside paragraphs are standard markdown — handled by imageTransformer, normalized below
+    // Promote magic-block images (type: 'image') to image-block, except inside inline-only
+    // parents where the image must stay inline (authors use `<Image caption="…" />` instead).
     visit(tree, 'image', (node, index, parent) => {
         if (!parent || index === undefined)
             return SKIP;
-        if (parent.type === 'paragraph')
-            return SKIP;
-        // `![](url)` in any tableCell stays inline. Authors who want a captioned figure use
-        // `<Image caption="…" />` JSX, which becomes `image-block` via `COMPONENT_MAP` above.
-        if (parent.type === 'tableCell')
+        if (INLINE_ONLY_PARENT_TYPES.has(parent.type))
             return SKIP;
         const newNode = transformMagicBlockImage(node);
         parent.children[index] = newNode;