@readme/markdown 13.6.2 → 13.7.0

package/dist/main.node.js

@@ -24514,6 +24514,16 @@ const CreateHeading = (depth) => {
 
 ;// ./components/Image/index.tsx
 
+
+/**
+ * Renders lightbox overlay via a React portal to document.body so it escapes
+ * any intermediate CSS stacking contexts and reliably covers all UI chrome.
+ */
+const LightboxPortal = ({ children }) => {
+    if (typeof document === 'undefined')
+        return null;
+    return (0,external_react_dom_namespaceObject.createPortal)(children, document.body);
+};
 const Image = (Props) => {
     const { align = '', alt = '', border: borderProp = false, caption, className = '', height = 'auto', src, title = '', width = 'auto', lazy = true, children, } = Props;
     // Normalize border: MDXish passes {false} as the string "false", not a boolean
@@ -24546,20 +24556,27 @@ const Image = (Props) => {
             return;
         setLightbox(!lightbox);
     };
+    const imgElement = (external_react_.createElement("img", { alt: alt, className: `img ${caption || children ? 'img-align-center' : align ? `img-align-${align}` : ''} ${border ? 'border' : ''}`, height: height, loading: lazy ? 'lazy' : 'eager', src: src, title: title, width: width }));
+    const lightboxOverlay = lightbox ? (external_react_.createElement(LightboxPortal, null,
+        external_react_.createElement("div", { className: "markdown-body" },
+            external_react_.createElement("span", { "aria-label": alt || 'Collapse image', className: "img lightbox open", onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
+                external_react_.createElement("span", { className: "lightbox-inner" },
+                    imgElement,
+                    (children || caption) && external_react_.createElement("figcaption", null, children || caption))),
+            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 (children || caption) {
         return (external_react_.createElement("figure", null,
-            external_react_.createElement("span", { "aria-label": alt, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
+            external_react_.createElement("span", { "aria-label": alt, className: "img lightbox closed", onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
                 external_react_.createElement("span", { className: "lightbox-inner" },
-                    external_react_.createElement("img", { alt: alt, className: `img img-align-center ${border ? 'border' : ''}`, height: height, loading: lazy ? 'lazy' : 'eager', src: src, title: title, width: width }),
+                    imgElement,
                     external_react_.createElement("figcaption", null, children || caption))),
-            lightbox && (external_react_.createElement("button", { "aria-label": "Minimize image", className: "lightbox-close", type: "button" },
-                external_react_.createElement("i", { "aria-hidden": "true", className: "fa-solid fa-xmark" })))));
+            lightboxOverlay));
     }
-    return (external_react_.createElement("span", { "aria-label": `${lightbox ? 'Collapse image' : 'Expand image'}`, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
-        external_react_.createElement("span", { className: "lightbox-inner" },
-            external_react_.createElement("img", { alt: alt, className: `img ${align ? `img-align-${align}` : ''} ${border ? 'border' : ''}`, height: height, loading: lazy ? 'lazy' : 'eager', src: src, title: title, width: width })),
-        lightbox && (external_react_.createElement("button", { "aria-label": "Minimize image", className: "lightbox-close", type: "button" },
-            external_react_.createElement("i", { "aria-hidden": "true", className: "fa-solid fa-xmark" })))));
+    return (external_react_.createElement(external_react_.Fragment, null,
+        external_react_.createElement("span", { "aria-label": "Expand image", className: "img lightbox closed", onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
+            external_react_.createElement("span", { className: "lightbox-inner" }, imgElement)),
+        lightboxOverlay));
 };
 /* harmony default export */ const components_Image = (Image);
 
@@ -46998,13 +47015,9 @@ function listItemWithTaskListItem(node, parent, state, info) {
 
 ;// ./node_modules/mdast-util-gfm/lib/index.js
 /**
- * @typedef {import('mdast-util-from-markdown').Extension} FromMarkdownExtension
- * @typedef {import('mdast-util-to-markdown').Options} ToMarkdownExtension
- */
-
-/**
- * @typedef {import('mdast-util-gfm-table').Options} Options
- *   Configuration.
+ * @import {Extension as FromMarkdownExtension} from 'mdast-util-from-markdown'
+ * @import {Options} from 'mdast-util-gfm'
+ * @import {Options as ToMarkdownExtension} from 'mdast-util-to-markdown'
  */
 
 
@@ -47036,7 +47049,7 @@ function gfmFromMarkdown() {
  * literals, footnotes, strikethrough, tables, tasklists).
  *
  * @param {Options | null | undefined} [options]
- *   Configuration.
+ *   Configuration (optional).
  * @returns {ToMarkdownExtension}
  *   Extension for `mdast-util-to-markdown` to enable GFM (autolink literals,
  *   footnotes, strikethrough, tables, tasklists).
@@ -47045,7 +47058,7 @@ function gfmToMarkdown(options) {
   return {
     extensions: [
       gfmAutolinkLiteralToMarkdown(),
-      gfmFootnoteToMarkdown(),
+      gfmFootnoteToMarkdown(options),
       gfmStrikethroughToMarkdown(),
       gfmTableToMarkdown(options),
       gfmTaskListItemToMarkdown()
@@ -73285,7 +73298,7 @@ const titleParser = unified().use(remarkParse).use(remarkGfm);
 // The title paragraph may contain custom AST nodes that `toMarkdown` doesn't
 // natively understand
 const toMarkdownExtensions = [
-    gfmStrikethroughToMarkdown(),
+    gfmToMarkdown(),
     // For mdx variable syntaxes (e.g., {user.name})
     mdxExpressionToMarkdown(),
     // Important: This is required and would crash the parser if there's no variable node handler
@@ -73377,7 +73390,7 @@ const removeIconPrefix = (paragraph, prefixLength) => {
         firstTextNode.value = firstTextNode.value.slice(prefixLength);
     }
 };
-const processBlockquote = (node, index, parent) => {
+const processBlockquote = (node, index, parent, isMdxish = false) => {
     if (!isCalloutStructure(node)) {
         // Only stringify empty blockquotes (no extractable text content)
         // Preserve blockquotes with actual content (e.g., headings, lists, etc.)
@@ -73425,7 +73438,11 @@ const processBlockquote = (node, index, parent) => {
                 node.children[0].position.start.offset += match.length;
                 node.children[0].position.start.column += match.length;
             }
-            else {
+            else if (isMdxish) {
+                // Block-level title re-parsing is only needed for MDXish where HTML stays
+                // as raw nodes. In MDX, remarkMdx has already converted HTML to JSX AST
+                // nodes which toMarkdown can't serialize — and MDX doesn't need this
+                // block-level title handling anyway.
                 const headingText = toMarkdown({ type: 'root', children: [firstParagraph] }, {
                     extensions: toMarkdownExtensions,
                 })
@@ -73451,6 +73468,11 @@ const processBlockquote = (node, index, parent) => {
                     node.children[0].position.start.column += match.length;
                 }
             }
+            else {
+                node.children[0] = wrapHeading(node);
+                node.children[0].position.start.offset += match.length;
+                node.children[0].position.start.column += match.length;
+            }
         }
         // Insert body content as a separate paragraph after the heading
         if (bodyChildren) {
@@ -73481,10 +73503,10 @@ const processBlockquote = (node, index, parent) => {
         });
     }
 };
-const calloutTransformer = () => {
+const calloutTransformer = ({ isMdxish = false } = {}) => {
     const processNode = (root) => {
         visit(root, 'blockquote', (node, index, parent) => {
-            processBlockquote(node, index, parent);
+            processBlockquote(node, index, parent, isMdxish);
             if (node.type === NodeTypes.callout) {
                 // SKIP prevents re-processing synthetic blockquotes in parsed title content
                 // (e.g., blockquotes from "> Quote" titles). Recursively process body children
@@ -91477,7 +91499,7 @@ const tableNodeProcessor = unified()
     .use(remarkParse)
     .use(remarkMdx)
     .use(normalize_malformed_md_syntax)
-    .use([callouts, gemoji_, code_tabs])
+    .use([[callouts, { isMdxish: true }], gemoji_, code_tabs])
     .use(remarkGfm);
 /**
  * Check if children are only text nodes that might contain markdown
@@ -92346,7 +92368,12 @@ const defaultTransforms = {
     imageTransformer: transform_images,
     gemojiTransformer: gemoji_,
 };
-const mdxishTransformers = [callouts, code_tabs, transform_images, gemoji_];
+const mdxishTransformers = [
+    [callouts, { isMdxish: true }],
+    code_tabs,
+    transform_images,
+    gemoji_,
+];
 /* harmony default export */ const transform = (Object.values(defaultTransforms));
 
 ;// ./lib/ast-processor.ts
@@ -115655,7 +115682,7 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 data: {
                     hProperties: {
                         ...(imgData.align && { align: imgData.align }),
-                        ...(imgData.border && { border: imgData.border.toString() }),
+                        ...(imgData.border !== undefined && { border: String(imgData.border) !== 'false' }),
                         ...(imgData.sizing && { width: imgWidthBySize[imgData.sizing] }),
                     },
                 },
@@ -115934,7 +115961,7 @@ const constants_INLINE_COMPONENT_TAGS = new Set(['Anchor']);
 
 
 
-const pascalCaseTagPattern = /^<([A-Z][A-Za-z0-9_]*)([^>]*?)(\/?)>([\s\S]*)?$/;
+const pascalCaseTagPattern = /^<([A-Z][A-Za-z0-9_]*)((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?)>([\s\S]*)?$/;
 const tagAttributePattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*("[^"]*"|'[^']*'|[^\s"'>]+))?/g;
 /**
  * Maximum number of siblings to scan forward when looking for a closing tag
@@ -116658,6 +116685,30 @@ const mdxishInlineComponents = () => tree => {
 
 
 
+function toImageAlign(value) {
+    if (value === 'left' || value === 'center' || value === 'right') {
+        return value;
+    }
+    return undefined;
+}
+function toBool(value) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === 'boolean')
+        return value;
+    return value !== '' && value !== 'false';
+}
+function mdxish_jsx_to_mdast_extractText(nodes) {
+    return nodes
+        .map(n => {
+        if ('value' in n && typeof n.value === 'string')
+            return n.value;
+        if ('children' in n)
+            return mdxish_jsx_to_mdast_extractText(n.children);
+        return '';
+    })
+        .join('');
+}
 const transformAnchor = (jsx) => {
     const attrs = getAttrs(jsx);
     const { href = '', label, target, title } = attrs;
@@ -116679,31 +116730,35 @@ const transformAnchor = (jsx) => {
 const transformImage = (jsx) => {
     const attrs = getAttrs(jsx);
     const { align, alt = '', border, caption, className, height, lazy, src = '', title = '', width } = attrs;
+    const validAlign = toImageAlign(align);
+    const sizing = width !== undefined ? String(width) : undefined;
     const hProperties = {
         alt,
         src,
         title,
-        ...(align && { align }),
-        ...(border !== undefined && { border: String(border) }),
+        ...(validAlign && { align: validAlign }),
+        ...(border !== undefined && { border: toBool(border) }),
         ...(caption && { caption }),
         ...(className && { className }),
         ...(height !== undefined && { height: String(height) }),
-        ...(lazy !== undefined && { lazy }),
-        ...(width !== undefined && { width: String(width) }),
+        ...(lazy !== undefined && { lazy: toBool(lazy) }),
+        ...(sizing && { sizing }),
+        ...(sizing && { width: sizing }),
     };
     return {
         type: NodeTypes.imageBlock,
-        align,
+        align: validAlign,
         alt,
-        border: border !== undefined ? String(border) : undefined,
+        border: toBool(border),
         caption,
         children: caption ? lib_mdast(caption).children : [],
         className,
         height: height !== undefined ? String(height) : undefined,
-        lazy,
+        lazy: toBool(lazy),
+        sizing,
         src,
         title,
-        width: width !== undefined ? String(width) : undefined,
+        width: sizing,
         data: {
             hName: 'img',
             hProperties,
@@ -116730,7 +116785,7 @@ const transformCallout = (jsx) => {
 };
 const transformEmbed = (jsx) => {
     const attrs = getAttrs(jsx);
-    const { favicon, height, html, iframe, image, providerName, providerUrl, title = '', typeOfEmbed, url = '', width } = attrs;
+    const { favicon, height, html, iframe, image, providerName, providerUrl, title = '', typeOfEmbed, url = '', width, } = attrs;
     return {
         type: NodeTypes.embedBlock,
         title,
@@ -116776,22 +116831,26 @@ const transformMagicBlockImage = (node) => {
     const { alt = '', data, position, title = '', url = '' } = node;
     const hProps = data?.hProperties || {};
     const { align, border, width } = hProps;
+    const validAlign = toImageAlign(align);
+    const sizing = width || undefined;
     const hProperties = {
         alt,
         src: url,
         title,
-        ...(align && { align }),
-        ...(border && { border }),
-        ...(width && { width }),
+        ...(validAlign && { align: validAlign }),
+        ...(border !== undefined && { border: toBool(border) }),
+        ...(sizing && { sizing }),
+        ...(sizing && { width: sizing }),
     };
     return {
         type: NodeTypes.imageBlock,
-        align,
+        align: validAlign,
         alt,
-        border,
+        border: toBool(border),
+        sizing,
         src: url,
         title,
-        width,
+        width: sizing,
         data: {
             hName: 'img',
             hProperties,
@@ -116839,7 +116898,8 @@ const COMPONENT_MAP = {
  * - JSX component elements (Image, Callout, Embed, Recipe) into their corresponding MDAST types
  * - Magic block image nodes (type: 'image') into image-block
  * - Magic block embed nodes (type: 'embed') into embed-block
- * - Figure nodes containing images (from magic blocks with captions) - transforms the inner image
+ * - Figure nodes (magic blocks with captions) into flat image-block with caption string
+ * - Normalizes all image-block attrs (border, align, sizing, caption) to a consistent shape
  *
  * This is controlled by the `newEditorTypes` flag to maintain backwards compatibility.
  */
@@ -116865,12 +116925,10 @@ const mdxishJsxToMdast = () => tree => {
         }
     });
     // Transform magic block images (type: 'image') to image-block
-    // Note: Standard markdown images are wrapped in paragraphs and handled by imageTransformer
-    // Magic block images are direct children of root, so we handle them here
+    // Images inside paragraphs are standard markdown — handled by imageTransformer, normalized below
     visit(tree, 'image', (node, index, parent) => {
         if (!parent || index === undefined)
             return SKIP;
-        // Skip images inside paragraphs (those are standard markdown images handled by imageTransformer)
         if (parent.type === 'paragraph')
             return SKIP;
         const newNode = transformMagicBlockImage(node);
@@ -116885,16 +116943,74 @@ const mdxishJsxToMdast = () => tree => {
         parent.children[index] = newNode;
         return SKIP;
     });
-    // Transform images inside figure nodes (magic blocks with captions)
+    // Flatten figure nodes (magic blocks with captions) into image-block nodes
     const isFigure = (node) => node.type === 'figure';
-    visit(tree, isFigure, node => {
-        // Find and transform the image child
-        node.children = node.children.map(child => {
-            if (child.type === 'image') {
-                return transformMagicBlockImage(child);
-            }
-            return child;
-        });
+    visit(tree, isFigure, (node, index, parent) => {
+        if (!parent || index === undefined)
+            return;
+        const imageChild = node.children.find(child => child.type === 'image' || child.type === NodeTypes.imageBlock);
+        if (!imageChild)
+            return;
+        const figcaptionChild = node.children.find(child => child.type === 'figcaption');
+        // If the image was already transformed to image-block by the earlier visitor, use it directly
+        const imageBlock = imageChild.type === NodeTypes.imageBlock
+            ? imageChild
+            : transformMagicBlockImage(imageChild);
+        if (figcaptionChild?.children) {
+            const caption = mdxish_jsx_to_mdast_extractText(figcaptionChild.children);
+            if (caption) {
+                imageBlock.caption = caption;
+                imageBlock.data.hProperties.caption = caption;
+            }
+        }
+        parent.children[index] = imageBlock;
+    });
+    // Final normalization pass across all image-block nodes
+    // Ensures consistent types (border→boolean, align→ImageAlign, width→sizing) and cleans up artifacts
+    const isImageBlock = (node) => node.type === NodeTypes.imageBlock;
+    visit(tree, isImageBlock, _node => {
+        const node = _node;
+        const hProps = (node.data?.hProperties || {});
+        // Normalize boolean attrs
+        if (hProps.border !== undefined) {
+            const val = toBool(hProps.border);
+            node.border = val;
+            hProps.border = val;
+        }
+        else if (node.border !== undefined) {
+            node.border = toBool(node.border);
+        }
+        // Validate align
+        const validAlign = toImageAlign(hProps.align) || toImageAlign(node.align);
+        node.align = validAlign;
+        if (validAlign) {
+            hProps.align = validAlign;
+        }
+        else {
+            delete hProps.align;
+        }
+        // Map width → sizing
+        const width = hProps.width || node.width;
+        if (width) {
+            node.sizing = width;
+            node.width = width;
+            hProps.sizing = width;
+            hProps.width = width;
+        }
+        // Normalize caption
+        const caption = hProps.caption || node.caption;
+        if (caption) {
+            node.caption = caption;
+            hProps.caption = caption;
+        }
+        // Normalize src (url → src)
+        node.src = hProps.src || node.src;
+        hProps.src = node.src;
+        // Remove stray children array from imageTransformer, but preserve caption children
+        if (!caption) {
+            delete node.children;
+        }
+        delete hProps.children;
     });
     return tree;
 };
@@ -119178,7 +119294,12 @@ function loadComponents() {
 
 
 
-const defaultTransformers = [callouts, code_tabs, gemoji_, transform_embeds];
+const defaultTransformers = [
+    [callouts, { isMdxish: true }],
+    code_tabs,
+    gemoji_,
+    transform_embeds,
+];
 /**
  * Preprocessing pipeline: applies string-level transformations to work around
  * CommonMark/remark limitations and reach parity with legacy (rdmd) rendering.
@@ -119225,8 +119346,21 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         ? [jsxTable(), magicBlock(), legacyVariable(), looseHtmlEntity()]
         : [jsxTable(), magicBlock(), mdxExprTextOnly, legacyVariable(), looseHtmlEntity()])
         .data('fromMarkdownExtensions', safeMode
-        ? [jsxTableFromMarkdown(), magicBlockFromMarkdown(), legacyVariableFromMarkdown(), emptyTaskListItemFromMarkdown(), looseHtmlEntityFromMarkdown()]
-        : [jsxTableFromMarkdown(), magicBlockFromMarkdown(), mdxExpressionFromMarkdown(), legacyVariableFromMarkdown(), emptyTaskListItemFromMarkdown(), looseHtmlEntityFromMarkdown()])
+        ? [
+            jsxTableFromMarkdown(),
+            magicBlockFromMarkdown(),
+            legacyVariableFromMarkdown(),
+            emptyTaskListItemFromMarkdown(),
+            looseHtmlEntityFromMarkdown(),
+        ]
+        : [
+            jsxTableFromMarkdown(),
+            magicBlockFromMarkdown(),
+            mdxExpressionFromMarkdown(),
+            legacyVariableFromMarkdown(),
+            emptyTaskListItemFromMarkdown(),
+            looseHtmlEntityFromMarkdown(),
+        ])
         .use(remarkParse)
         .use(remarkFrontmatter)
         .use(normalize_malformed_md_syntax)
@@ -119239,7 +119373,6 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         .use(mdxish_html_blocks)
         .use(newEditorTypes ? mdxish_inline_components : undefined) // Merge inline html components (e.g. <Anchor>) into MDAST nodes
         .use(newEditorTypes ? mdxish_jsx_to_mdast : undefined) // Convert block JSX elements to MDAST types
-        .use(safeMode ? undefined : evaluate_expressions, { context: jsxContext }) // Evaluate MDX expressions using jsxContext
         .use(variables_text) // Parse {user.*} patterns from text nodes
         .use(useTailwind ? transform_tailwind : undefined, { components: tempComponentsMap })
         .use(remarkGfm);