@readme/markdown 11.12.0 → 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}