@readme/markdown 11.12.1 → 11.13.0

package/dist/main.node.js

@@ -19028,6 +19028,8 @@ __webpack_require__.d(__webpack_exports__, {
   mdastV6: () => (/* reexport */ lib_mdastV6),
   mdx: () => (/* reexport */ lib_mdx),
   mdxish: () => (/* reexport */ lib_mdxish),
+  mdxishAstProcessor: () => (/* reexport */ mdxishAstProcessor),
+  mdxishMdastToMd: () => (/* reexport */ mdxishMdastToMd),
   mdxishTags: () => (/* reexport */ mdxishTags),
   migrate: () => (/* reexport */ lib_migrate),
   mix: () => (/* reexport */ lib_mix),
@@ -19175,9 +19177,17 @@ function docLink(href) {
 function Anchor(props) {
     const { children, href = '', target = '', title = '', ...attrs } = props;
     const baseUrl = (0,external_react_.useContext)(BaseUrl);
+    // Unwrap any nested anchor elements that GFM's autolinker may have created.
+    // This prevents invalid nested <a> tags when the Anchor's text content looks like a URL.
+    const unwrappedChildren = external_react_default().Children.map(children, child => {
+        if (external_react_default().isValidElement(child) && child.type === 'a') {
+            return child.props.children;
+        }
+        return child;
+    });
     return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    external_react_default().createElement("a", { ...attrs, href: getHref(href, baseUrl), target: target, title: title, ...docLink(href) }, children));
+    external_react_default().createElement("a", { ...attrs, href: getHref(href, baseUrl), target: target, title: title, ...docLink(href) }, unwrappedChildren));
 }
 /* harmony default export */ const components_Anchor = (Anchor);
 
@@ -19315,7 +19325,8 @@ const Code = (props) => {
     const theme = (0,external_react_.useContext)(Theme);
     const copyButtons = (0,external_react_.useContext)(CodeOpts) || props.copyButtons;
     const isHydrated = useHydrated();
-    const language = isHydrated ? canonicalLanguage(lang) : '';
+    const language = canonicalLanguage(lang);
+    const isMermaid = language === 'mermaid';
     const codeRef = (0,external_react_.createRef)();
     const codeOpts = {
         inline: !lang,
@@ -19326,7 +19337,7 @@ const Code = (props) => {
     const highlightedCode = syntaxHighlighter && typeof syntaxHighlighter === 'function' && code && isHydrated
         ? syntaxHighlighter(code, language, codeOpts, { mdx: true })
         : code;
-    if (language === 'mermaid') {
+    if (isHydrated && isMermaid) {
         return code;
     }
     return (external_react_default().createElement((external_react_default()).Fragment, null,
@@ -19342,15 +19353,28 @@ var dist_utils_default = /*#__PURE__*/__webpack_require__.n(dist_utils);
 
 
 
+
 let mermaid;
 const { uppercase } = (dist_utils_default());
 const CodeTabs = (props) => {
     const { children } = props;
     const theme = (0,external_react_.useContext)(Theme);
-    const hasMermaid = !Array.isArray(children) && children.props?.children.props.lang === 'mermaid';
-    // render Mermaid diagram
+    const isHydrated = useHydrated();
+    // Handle both array (from rehype-react in rendering mdxish) and single element (MDX/JSX runtime) cases
+    // The children here is the individual code block objects
+    const childrenArray = Array.isArray(children) ? children : [children];
+    // The structure varies depending on rendering context:
+    // - When rendered via rehype-react: pre.props.children is an array where the first element is the Code component
+    // - When rendered via MDX/JSX runtime: pre.props.children is directly the Code component
+    const getCodeComponent = (pre) => {
+        return Array.isArray(pre?.props?.children) ? pre.props.children[0] : pre?.props?.children;
+    };
+    const containAtLeastOneMermaid = childrenArray.some(pre => getCodeComponent(pre)?.props?.lang === 'mermaid');
+    // Render Mermaid diagram
     (0,external_react_.useEffect)(() => {
-        if (typeof window !== 'undefined' && hasMermaid) {
+        // Ensure we only render mermaids when frontend is hydrated to avoid hydration errors
+        // because mermaid mutates the DOM before react hydrates
+        if (typeof window !== 'undefined' && containAtLeastOneMermaid && isHydrated) {
             __webpack_require__.e(/* import() */ 486).then(__webpack_require__.bind(__webpack_require__, 5486)).then(module => {
                 mermaid = module.default;
                 mermaid.initialize({
@@ -19362,7 +19386,7 @@ const CodeTabs = (props) => {
                 });
             });
         }
-    }, [hasMermaid, theme]);
+    }, [containAtLeastOneMermaid, theme, isHydrated]);
     function handleClick({ target }, index) {
         const $wrap = target.parentElement.parentElement;
         const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
@@ -19372,19 +19396,22 @@ const CodeTabs = (props) => {
         codeblocks[index].classList.add('CodeTabs_active');
         target.classList.add('CodeTabs_active');
     }
-    // render single Mermaid diagram
-    if (hasMermaid) {
-        const value = children.props.children.props.value;
-        return external_react_default().createElement("pre", { className: "mermaid-render mermaid_single" }, value);
+    // We want to render single mermaid diagrams without the code tabs UI
+    if (childrenArray.length === 1) {
+        const codeComponent = getCodeComponent(childrenArray[0]);
+        if (codeComponent?.props?.lang === 'mermaid') {
+            const value = codeComponent?.props?.value;
+            return external_react_default().createElement("pre", { className: "mermaid-render mermaid_single" }, value);
+        }
     }
     return (external_react_default().createElement("div", { className: `CodeTabs CodeTabs_initial theme-${theme}` },
-        external_react_default().createElement("div", { className: "CodeTabs-toolbar" }, (Array.isArray(children) ? children : [children]).map((pre, i) => {
+        external_react_default().createElement("div", { className: "CodeTabs-toolbar" }, childrenArray.map((pre, i) => {
             // the first or only child should be our Code component
-            const codeComponent = Array.isArray(pre.props?.children)
+            const tabCodeComponent = Array.isArray(pre.props?.children)
                 ? pre.props.children[0]
                 : pre.props?.children;
-            const lang = codeComponent?.props?.lang;
-            const meta = codeComponent?.props?.meta;
+            const lang = tabCodeComponent?.props?.lang;
+            const meta = tabCodeComponent?.props?.meta;
             /* istanbul ignore next */
             return (external_react_default().createElement("button", { key: i, onClick: e => handleClick(e, i), type: "button", value: lang }, meta || `${!lang ? 'Text' : uppercase(lang)}`));
         })),
@@ -91418,10 +91445,20 @@ const coerceJsxToMd = ({ components = {}, html = false } = {}) => (node, index,
             hProperties.url = hProperties.href;
             delete hProperties.href;
         }
+        // Unwrap any autolinked children to prevent nested links.
+        // GFM's autolink feature can convert URL-like text inside Anchor children
+        // into link nodes, which would create invalid nested links when Anchor
+        // is converted back to a link node.
+        const children = node.children.flatMap(child => {
+            if (child.type === 'link') {
+                return child.children;
+            }
+            return child;
+        });
         // @ts-expect-error we don't have a mechanism to enforce the URL attribute type right now
         const mdNode = {
             ...hProperties,
-            children: node.children,
+            children,
             type: readme_components_types[node.name],
             position: node.position,
         };
@@ -106710,16 +106747,17 @@ const tocHastToMdx = (toc, components) => {
 
 
 
-const { codeTabsTransformer: compile_codeTabsTransformer, ...transforms } = defaultTransforms;
 const sanitizeSchema = cjs_default()(defaultSchema, {
     protocols: ['doc', 'ref', 'blog', 'changelog', 'page'],
 });
 const compile_compile = (text, { components = {}, missingComponents, copyButtons, useTailwind, ...opts } = {}) => {
+    // Destructure at runtime to avoid circular dependency issues
+    const { codeTabsTransformer, ...transforms } = defaultTransforms;
     const remarkPlugins = [
         remarkFrontmatter,
         remarkGfm,
         ...Object.values(transforms),
-        [compile_codeTabsTransformer, { copyButtons }],
+        [codeTabsTransformer, { copyButtons }],
         [
             handle_missing_components,
             { components, missingComponents: ['ignore', 'throw'].includes(missingComponents) ? missingComponents : 'ignore' },
@@ -113997,8 +114035,6 @@ const mdxishHtmlBlocks = () => tree => {
  * Taken from the v6 branch
  */
 const RGXP = /^\s*\[block:([^\]]*)\]([^]+?)\[\/block\]/;
-/** Parses markdown in table cells */
-const cellParser = unified().use(remarkParse).use(remarkGfm);
 /**
  * Wraps a node in a "pinned" container if sidebar: true is set in the JSON.
  * Pinned blocks are displayed in a sidebar/floating position in the UI.
@@ -114032,11 +114068,13 @@ const imgWidthBySize = new Proxy(imgSizeValues, {
 const textToInline = (text) => [{ type: 'text', value: text }];
 // Simple text to block nodes (wraps in paragraph)
 const textToBlock = (text) => [{ children: textToInline(text), type: 'paragraph' }];
+/** Parses markdown and html to markdown nodes */
+const contentParser = unified().use(remarkParse).use(remarkGfm);
 // Table cells may contain html or markdown content, so we need to parse it accordingly instead of keeping it as raw text
-const parseInline = (text) => {
+const parseTableCell = (text) => {
     if (!text.trim())
         return [{ type: 'text', value: '' }];
-    const tree = cellParser.runSync(cellParser.parse(text));
+    const tree = contentParser.runSync(contentParser.parse(text));
     // If there are multiple block-level nodes, keep them as-is to preserve the document structure and spacing
     if (tree.children.length > 1) {
         return tree.children;
@@ -114045,6 +114083,13 @@ const parseInline = (text) => {
     // This unwraps the extra p node that might appear & wrapping the content
     n.type === 'paragraph' && 'children' in n ? n.children : [n]);
 };
+// Parse markdown/HTML into block-level nodes (preserves paragraphs, headings, lists, etc.)
+const parseBlock = (text) => {
+    if (!text.trim())
+        return [{ type: 'paragraph', children: [{ type: 'text', value: '' }] }];
+    const tree = contentParser.runSync(contentParser.parse(text));
+    return tree.children;
+};
 /**
  * Parse a magic block string and return MDAST nodes.
  *
@@ -114123,7 +114168,7 @@ function parseMagicBlock(raw, options = {}) {
                 data: {
                     hProperties: {
                         ...(imgData.align && { align: imgData.align }),
-                        className: imgData.border ? 'border' : '',
+                        ...(imgData.border && { border: imgData.border.toString() }),
                         ...(imgData.sizing && { width: imgWidthBySize[imgData.sizing] }),
                     },
                 },
@@ -114162,8 +114207,9 @@ function parseMagicBlock(raw, options = {}) {
             const [icon, theme] = Array.isArray(resolvedType) ? resolvedType : ['👍', 'default'];
             if (!(calloutJson.title || calloutJson.body))
                 return [];
-            const titleBlocks = textToBlock(calloutJson.title || '');
-            const bodyBlocks = textToBlock(calloutJson.body || '');
+            // Parses html & markdown content
+            const titleBlocks = parseBlock(calloutJson.title || '');
+            const bodyBlocks = parseBlock(calloutJson.body || '');
             const children = [];
             if (titleBlocks.length > 0 && titleBlocks[0].type === 'paragraph') {
                 const firstTitle = titleBlocks[0];
@@ -114217,7 +114263,7 @@ function parseMagicBlock(raw, options = {}) {
                 return mapped;
             }, []);
             // In compatibility mode, wrap cell content in paragraphs; otherwise inline text
-            const tokenizeCell = compatibilityMode ? textToBlock : parseInline;
+            const tokenizeCell = compatibilityMode ? textToBlock : parseTableCell;
             const children = Array.from({ length: rows + 1 }, (_, y) => ({
                 children: Array.from({ length: cols }, (__, x) => ({
                     children: sparseData[y]?.[x] ? tokenizeCell(sparseData[y][x]) : [{ type: 'text', value: '' }],
@@ -114351,6 +114397,38 @@ const magicBlockRestorer = ({ blocks }) => tree => {
 };
 /* harmony default export */ const mdxish_magic_blocks = (magicBlockRestorer);
 
+;// ./processor/transform/mdxish/mdxish-mermaid.ts
+
+/**
+ * Rehype plugin for mdxish pipeline to add mermaid-render className to mermaid code blocks.
+ * The mermaid-render class is used to identify the mermaid diagrams elements for the
+ * mermaid library to transform. See components/CodeTabs/index.tsx for context
+ */
+const mdxishMermaidTransformer = () => (tree) => {
+    visit(tree, 'element', (node) => {
+        if (node.tagName !== 'pre' || node.children.length !== 1)
+            return;
+        const [child] = node.children;
+        if (child.type === 'element' &&
+            child.tagName === 'code' &&
+            child.properties?.lang === 'mermaid') {
+            // Combine existing className with the new mermaid-render class
+            const existingClassName = node.properties?.className;
+            const classNameArray = Array.isArray(existingClassName)
+                ? existingClassName.filter(c => typeof c === 'string' || typeof c === 'number')
+                : existingClassName && (typeof existingClassName === 'string' || typeof existingClassName === 'number')
+                    ? [existingClassName]
+                    : [];
+            node.properties = {
+                ...node.properties,
+                className: ['mermaid-render', ...classNameArray],
+            };
+        }
+    });
+    return tree;
+};
+/* harmony default export */ const mdxish_mermaid = (mdxishMermaidTransformer);
+
 ;// ./lib/constants.ts
 /**
  * Pattern to match component tags (PascalCase or snake_case)
@@ -114797,18 +114875,15 @@ function loadComponents() {
 
 
 
+
+
+
 
 
 
 
 const defaultTransformers = [callouts, code_tabs, gemoji_, transform_embeds];
-/**
- * Process markdown content with MDX syntax support.
- * Detects and renders custom component tags from the components hash.
- *
- * @see {@link https://github.com/readmeio/rmdx/blob/main/docs/mdxish-flow.md}
- */
-function mdxish(mdContent, opts = {}) {
+function mdxishAstProcessor(mdContent, opts = {}) {
     const { components: userComponents = {}, jsxContext = {}, useTailwind } = opts;
     const components = {
         ...loadComponents(),
@@ -114843,11 +114918,46 @@ function mdxish(mdContent, opts = {}) {
         .use(evaluate_expressions, { context: jsxContext }) // Evaluate MDX expressions using jsxContext
         .use(variables_text) // Parse {user.*} patterns from text (can't rely on remarkMdx)
         .use(useTailwind ? transform_tailwind : undefined, { components: tempComponentsMap })
-        .use(remarkGfm)
+        .use(remarkGfm);
+    return {
+        processor,
+        /**
+         * @todo we need to return this transformed content for now
+         * but ultimately need to properly tokenize our special markdown syntax
+         * into hast nodes instead of relying on transformed content
+         */
+        parserReadyContent,
+    };
+}
+/**
+ * Converts an Mdast to a Markdown string.
+ */
+function mdxishMdastToMd(mdast) {
+    const md = unified().use(remarkGfm).use(processor_compile).use(remarkStringify, {
+        bullet: '-',
+        emphasis: '_',
+    }).stringify(mdast);
+    return md;
+}
+/**
+ * Processes markdown content with MDX syntax support and returns a HAST.
+ * Detects and renders custom component tags from the components hash.
+ *
+ * @see {@link https://github.com/readmeio/rmdx/blob/main/docs/mdxish-flow.md}
+ */
+function mdxish(mdContent, opts = {}) {
+    const { components: userComponents = {} } = opts;
+    const components = {
+        ...loadComponents(),
+        ...userComponents,
+    };
+    const { processor, parserReadyContent } = mdxishAstProcessor(mdContent, opts);
+    processor
         .use(remarkRehype, { allowDangerousHtml: true, handlers: mdxComponentHandlers })
         .use(preserveBooleanProperties) // RehypeRaw converts boolean properties to empty strings
         .use(rehypeRaw, { passThrough: ['html-block'] })
         .use(restoreBooleanProperties)
+        .use(mdxish_mermaid) // Add mermaid-render className to pre wrappers
         .use(rehypeSlug)
         .use(rehypeMdxishComponents, {
         components,