@readme/markdown 14.4.1 → 14.5.0

package/dist/main.js

@@ -12255,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));
     }
@@ -75823,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
@@ -76073,6 +76128,7 @@ const repairUnclosedTags = (html) => {
 
 
 
+
 
 const isTableCell = (node) => isMDXElement(node) && ['th', 'td'].includes(node.name);
 const tableTypes = {
@@ -76084,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', [
@@ -76318,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
@@ -76354,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;
 };

package/dist/main.node.js

@@ -24881,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));
     }
@@ -96047,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
@@ -96297,6 +96352,7 @@ const repairUnclosedTags = (html) => {
 
 
 
+
 
 const isTableCell = (node) => isMDXElement(node) && ['th', 'td'].includes(node.name);
 const tableTypes = {
@@ -96308,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', [
@@ -96542,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
@@ -96578,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;
 };