@readme/markdown 11.12.1 → 11.13.0

package/components/Anchor.tsx

@@ -59,10 +59,19 @@ function Anchor(props: Props) {
   const { children, href = '', target = '', title = '', ...attrs } = props;
   const baseUrl: string = useContext(BaseUrlContext);
 
+  // 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 = React.Children.map(children, child => {
+    if (React.isValidElement(child) && child.type === 'a') {
+      return child.props.children;
+    }
+    return child;
+  });
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <a {...attrs} href={getHref(href, baseUrl)} target={target} title={title} {...docLink(href)}>
-      {children}
+      {unwrappedChildren}
     </a>
   );
 }

package/components/Code/index.tsx

@@ -61,7 +61,8 @@ const Code = (props: CodeProps) => {
   const copyButtons = useContext(CodeOptsContext) || props.copyButtons;
   const isHydrated = useHydrated();
 
-  const language = isHydrated ? canonicalLanguage(lang) : '';
+  const language = canonicalLanguage(lang);
+  const isMermaid = language === 'mermaid';
 
   const codeRef = createRef<HTMLElement>();
 
@@ -78,7 +79,7 @@ const Code = (props: CodeProps) => {
       ? syntaxHighlighter(code, language, codeOpts, { mdx: true })
       : code;
 
-  if (language === 'mermaid') {
+  if (isHydrated && isMermaid) {
     return code;
   }
 

package/components/CodeTabs/index.tsx

@@ -4,6 +4,7 @@ import syntaxHighlighterUtils from '@readme/syntax-highlighter/utils';
 import React, { useContext, useEffect } from 'react';
 
 import ThemeContext from '../../contexts/Theme';
+import useHydrated from '../../hooks/useHydrated';
 
 let mermaid: Mermaid;
 
@@ -16,11 +17,26 @@ interface Props {
 const CodeTabs = (props: Props) => {
   const { children } = props;
   const theme = useContext(ThemeContext);
-  const hasMermaid = !Array.isArray(children) && children.props?.children.props.lang === 'mermaid';
+  const isHydrated = useHydrated();
 
-  // render Mermaid diagram
+  // 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: JSX.Element) => {
+    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
   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) {
       import('mermaid').then(module => {
         mermaid = module.default;
         mermaid.initialize({
@@ -32,7 +48,7 @@ const CodeTabs = (props: Props) => {
         });
       });
     }
-  }, [hasMermaid, theme]);
+  }, [containAtLeastOneMermaid, theme, isHydrated]);
 
   function handleClick({ target }, index: number) {
     const $wrap = target.parentElement.parentElement;
@@ -46,22 +62,25 @@ const CodeTabs = (props: Props) => {
     target.classList.add('CodeTabs_active');
   }
 
-  // render single Mermaid diagram
-  if (hasMermaid) {
-    const value = children.props.children.props.value;
-    return <pre className="mermaid-render mermaid_single">{value}</pre>;
+  // 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 <pre className="mermaid-render mermaid_single">{value}</pre>;
+    }
   }
 
   return (
     <div className={`CodeTabs CodeTabs_initial theme-${theme}`}>
       <div className="CodeTabs-toolbar">
-        {(Array.isArray(children) ? children : [children]).map((pre, i) => {
+        {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 (

package/dist/index.d.ts

@@ -6,7 +6,7 @@ declare const utils: {
     getHref: typeof getHref;
     calloutIcons: {};
 };
-export { compile, exports, hast, run, mdast, mdastV6, mdx, mdxish, mdxishTags, migrate, mix, plain, renderMdxish, remarkPlugins, stripComments, tags, } from './lib';
+export { compile, exports, hast, run, mdast, mdastV6, mdx, mdxish, mdxishAstProcessor, mdxishMdastToMd, mdxishTags, migrate, mix, plain, renderMdxish, remarkPlugins, stripComments, tags, } from './lib';
 export { default as Owlmoji } from './lib/owlmoji';
 export { Components, utils };
 export { tailwindCompiler } from './utils/tailwind-compiler';

package/dist/lib/index.d.ts

@@ -7,7 +7,7 @@ export { default as mdast } from './mdast';
 export { default as mdastV6 } from './mdastV6';
 export { default as mdx } from './mdx';
 export { default as mix } from './mix';
-export { default as mdxish } from './mdxish';
+export { default as mdxish, mdxishAstProcessor, mdxishMdastToMd } from './mdxish';
 export type { MdxishOpts } from './mdxish';
 export { default as migrate } from './migrate';
 export { default as plain } from './plain';

package/dist/lib/mdxish.d.ts

@@ -1,13 +1,27 @@
 import type { CustomComponents } from '../types';
 import type { Root } from 'hast';
+import type { Root as MdastRoot } from 'mdast';
 import { type JSXContext } from '../processor/transform/mdxish/preprocess-jsx-expressions';
 export interface MdxishOpts {
     components?: CustomComponents;
     jsxContext?: JSXContext;
     useTailwind?: boolean;
 }
+export declare function mdxishAstProcessor(mdContent: string, opts?: MdxishOpts): {
+    processor: import("unified").Processor<MdastRoot, import("unist").Node, import("unist").Node, undefined, undefined>;
+    /**
+     * @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: string;
+};
 /**
- * Process markdown content with MDX syntax support.
+ * Converts an Mdast to a Markdown string.
+ */
+export declare function mdxishMdastToMd(mdast: MdastRoot): string;
+/**
+ * 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}

package/dist/main.js

@@ -11366,6 +11366,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),
@@ -11513,9 +11515,17 @@ function docLink(href) {
 function Anchor(props) {
     const { children, href = '', target = '', title = '', ...attrs } = props;
     const baseUrl = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_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_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.map(children, child => {
+        if (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().isValidElement(child) && child.type === 'a') {
+            return child.props.children;
+        }
+        return child;
+    });
     return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("a", { ...attrs, href: getHref(href, baseUrl), target: target, title: title, ...docLink(href) }, children));
+    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("a", { ...attrs, href: getHref(href, baseUrl), target: target, title: title, ...docLink(href) }, unwrappedChildren));
 }
 /* harmony default export */ const components_Anchor = (Anchor);
 
@@ -11653,7 +11663,8 @@ const Code = (props) => {
     const theme = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(Theme);
     const copyButtons = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_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_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createRef)();
     const codeOpts = {
         inline: !lang,
@@ -11664,7 +11675,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_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).Fragment, null,
@@ -11680,15 +11691,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_amd_react_commonjs_react_commonjs2_react_root_React_umd_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_amd_react_commonjs_react_commonjs2_react_root_React_umd_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) {
             Promise.resolve(/* import() */).then(__webpack_require__.t.bind(__webpack_require__, 1387, 23)).then(module => {
                 mermaid = module.default;
                 mermaid.initialize({
@@ -11700,7 +11724,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'));
@@ -11710,19 +11734,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_amd_react_commonjs_react_commonjs2_react_root_React_umd_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_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("pre", { className: "mermaid-render mermaid_single" }, value);
+        }
     }
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: `CodeTabs CodeTabs_initial theme-${theme}` },
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CodeTabs-toolbar" }, (Array.isArray(children) ? children : [children]).map((pre, i) => {
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_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_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { key: i, onClick: e => handleClick(e, i), type: "button", value: lang }, meta || `${!lang ? 'Text' : uppercase(lang)}`));
         })),
@@ -71214,10 +71241,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: types[node.name],
             position: node.position,
         };
@@ -86506,16 +86543,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' },
@@ -93793,8 +93831,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.
@@ -93828,11 +93864,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;
@@ -93841,6 +93879,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.
  *
@@ -93919,7 +93964,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] }),
                     },
                 },
@@ -93958,8 +94003,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];
@@ -94013,7 +94059,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: '' }],
@@ -94147,6 +94193,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)
@@ -94593,18 +94671,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(),
@@ -94639,11 +94714,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,