@readme/markdown 14.4.1 → 14.6.0

package/dist/main.node.js

@@ -24835,10 +24835,12 @@ const LightboxPortal = ({ children }) => {
     return (0,external_react_dom_namespaceObject.createPortal)(children, document.body);
 };
 const Image = (Props) => {
-    const { align = '', alt = '', border: borderProp = false, caption, className = '', framed: framedProp = false, height = 'auto', src, title = '', width = 'auto', lazy = true, children, } = Props;
+    const { align = '', alt = '', border: borderProp = false, caption, className = '', framed: framedProp = false, height = 'auto', src, title = '', width = 'auto', lazy = true, children, wrap: wrapProp, } = Props;
     // Normalize border/framed: MDXish passes {false} as the string "false", not a boolean
     const border = borderProp === true || borderProp === 'true';
     const framed = framedProp === true || framedProp === 'true';
+    // Default (undefined) keeps legacy behavior: left/right images float and wrap text.
+    const noWrap = (align === 'left' || align === 'right') && (wrapProp === false || wrapProp === 'false');
     const [lightbox, setLightbox] = external_react_.useState(false);
     if (className === 'emoji') {
         return external_react_.createElement("img", { alt: alt, height: height, loading: lazy ? 'lazy' : 'eager', src: src, title: title, width: width });
@@ -24868,7 +24870,8 @@ const Image = (Props) => {
         setLightbox(!lightbox);
     };
     // Framed images center the <img> itself; outer wrapper handles left/right alignment via text-align.
-    const imgElement = (external_react_.createElement("img", { alt: alt, className: `img ${caption || children || framed ? 'img-align-center' : align ? `img-align-${align}` : ''} ${border ? 'border' : ''}`, height: height, loading: lazy ? 'lazy' : 'eager', src: src, title: title, width: width }));
+    const imgClass = `img ${caption || children || framed ? 'img-align-center' : align ? `img-align-${align}` : ''} ${border ? 'border' : ''}${noWrap ? ' img-no-wrap' : ''}`;
+    const imgElement = (external_react_.createElement("img", { alt: alt, className: imgClass, height: height, loading: lazy ? 'lazy' : 'eager', src: src, title: title, width: width }));
     const closedLightbox = (ariaLabel, content) => (external_react_.createElement("span", { "aria-label": ariaLabel, className: "img lightbox closed", onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
         external_react_.createElement("span", { className: "lightbox-inner" }, content)));
     const lightboxOverlay = lightbox ? (external_react_.createElement(LightboxPortal, null,
@@ -24880,14 +24883,18 @@ const Image = (Props) => {
             external_react_.createElement("button", { "aria-label": "Minimize image", className: "lightbox-close", onClick: toggle, type: "button" },
                 external_react_.createElement("i", { "aria-hidden": "true", className: "fa-solid fa-xmark" }))))) : null;
     if (framed) {
-        const frameClass = `img-frame img-frame-${align || 'center'}`;
+        const frameClass = `img-frame img-frame-${align || 'center'}${noWrap ? ' img-no-wrap' : ''}`;
+        // Only left/right wrapping frames shrink to fit; for those, hoist percentage
+        // widths onto the wrapper since they can't resolve against a shrink-to-fit parent.
+        const isClamped = (align === 'left' || align === 'right') && !noWrap;
+        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 +96054,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 +96355,7 @@ const repairUnclosedTags = (html) => {
 
 
 
+
 
 const isTableCell = (node) => isMDXElement(node) && ['th', 'td'].includes(node.name);
 const tableTypes = {
@@ -96308,6 +96367,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 +96604,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 +96647,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;
 };
@@ -123897,7 +123968,7 @@ const transformAnchor = (jsx) => {
  */
 const transformImage = (jsx) => {
     const attrs = getAttrs(jsx);
-    const { align, alt = '', border, caption, className, framed, height, lazy, src = '', title = '', width } = attrs;
+    const { align, alt = '', border, caption, className, framed, height, lazy, src = '', title = '', width, wrap, } = attrs;
     const validAlign = toImageAlign(align);
     const sizing = width !== undefined ? String(width) : undefined;
     const hProperties = {
@@ -123913,6 +123984,7 @@ const transformImage = (jsx) => {
         ...(lazy !== undefined && { lazy: toBool(lazy) }),
         ...(sizing && { sizing }),
         ...(sizing && { width: sizing }),
+        ...(wrap !== undefined && { wrap: toBool(wrap) }),
     };
     return {
         type: NodeTypes.imageBlock,
@@ -123929,6 +124001,7 @@ const transformImage = (jsx) => {
         src,
         title,
         width: sizing,
+        ...(wrap !== undefined && { wrap: toBool(wrap) }),
         data: {
             hName: 'img',
             hProperties,