@readme/markdown 11.7.6 → 11.8.0

package/components/CodeTabs/index.tsx

@@ -56,7 +56,12 @@ const CodeTabs = (props: Props) => {
     <div className={`CodeTabs CodeTabs_initial theme-${theme}`}>
       <div className="CodeTabs-toolbar">
         {(Array.isArray(children) ? children : [children]).map((pre, i) => {
-          const { meta, lang } = pre.props.children.props;
+          // the first or only child should be our Code component
+          const codeComponent = Array.isArray(pre.props?.children)
+            ? pre.props.children[0]
+            : pre.props?.children;
+          const lang = codeComponent?.props?.lang;
+          const meta = codeComponent?.props?.meta;
 
           /* istanbul ignore next */
           return (

package/components/HTMLBlock/index.tsx

@@ -14,20 +14,31 @@ const extractScripts = (html: string = ''): [string, () => void] => {
 };
 
 interface Props {
-  children: React.ReactElement | string;
+  children?: React.ReactElement | string;
+  html?: string;
   runScripts?: boolean | string;
-  safeMode?: boolean;
+  safeMode?: boolean | string;
 }
 
-const HTMLBlock = ({ children = '', runScripts, safeMode = false }: Props) => {
-  if (typeof children !== 'string') {
-    throw new TypeError('HTMLBlock: children must be a string');
+const HTMLBlock = ({ children = '', html: htmlProp, runScripts, safeMode: safeModeRaw = false }: Props) => {
+  // Determine HTML source: MDXish uses html prop (from HAST), MDX uses children
+  let html: string = '';
+  if (htmlProp !== undefined) {
+    html = htmlProp;
+  } else {
+    if (typeof children !== 'string') {
+      throw new TypeError('HTMLBlock: children must be a string');
+    }
+    html = children;
   }
 
-  const html = children;
   // eslint-disable-next-line no-param-reassign
   runScripts = typeof runScripts !== 'boolean' ? runScripts === 'true' : runScripts;
 
+  // In MDX mode, safeMode is passed in as a boolean from JSX parsing
+  // In MDXish mode, safeMode comes in as a string from HAST props
+  const safeMode = typeof safeModeRaw !== 'boolean' ? safeModeRaw === 'true' : safeModeRaw;
+
   const [cleanedHtml, exec] = extractScripts(html);
 
   useEffect(() => {

package/dist/components/HTMLBlock/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 interface Props {
-    children: React.ReactElement | string;
+    children?: React.ReactElement | string;
+    html?: string;
     runScripts?: boolean | string;
-    safeMode?: boolean;
+    safeMode?: boolean | string;
 }
-declare const HTMLBlock: ({ children, runScripts, safeMode }: Props) => React.JSX.Element;
+declare const HTMLBlock: ({ children, html: htmlProp, runScripts, safeMode: safeModeRaw }: Props) => React.JSX.Element;
 export default HTMLBlock;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ declare const utils: {
     getHref: typeof getHref;
     calloutIcons: {};
 };
-export { compile, exports, hast, run, mdast, mdastV6, mdx, migrate, plain, remarkPlugins, stripComments, tags } from './lib';
+export { compile, exports, hast, run, mdast, mdastV6, mdx, mdxish, 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/ast-processor.d.ts

@@ -9,6 +9,8 @@ export interface MdastOpts {
 }
 export declare const remarkPlugins: ((() => (tree: import("mdast").Root) => void) | (({ copyButtons }?: {
     copyButtons?: boolean;
+}) => (tree: import("mdast").Node) => import("mdast").Node) | (({ isMdxish }?: {
+    isMdxish?: boolean;
 }) => (tree: import("mdast").Node) => import("mdast").Node) | typeof remarkFrontmatter | typeof remarkGfm)[];
 export declare const rehypePlugins: (typeof rehypeSlug | (() => (tree: import("unist").Node) => import("unist").Node))[];
 declare const astProcessor: (opts?: MdastOpts) => import("unified").Processor<import("mdast").Root, import("mdast").Root, import("mdast").Root, import("mdast").Root, string>;

package/dist/lib/index.d.ts

@@ -6,8 +6,13 @@ export { default as hast } from './hast';
 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 type { MdxishOpts } from './mdxish';
 export { default as migrate } from './migrate';
 export { default as plain } from './plain';
+export { default as renderMdxish } from './renderMdxish';
+export type { RenderMdxishOpts } from './renderMdxish';
 export { default as run } from './run';
 export { default as tags } from './tags';
 export { default as stripComments } from './stripComments';

package/dist/lib/mdxish.d.ts

@@ -0,0 +1,16 @@
+import type { CustomComponents } from '../types';
+import type { Root } from 'hast';
+import { type JSXContext } from '../processor/transform/mdxish/preprocess-jsx-expressions';
+export interface MdxishOpts {
+    components?: CustomComponents;
+    jsxContext?: JSXContext;
+    useTailwind?: boolean;
+}
+/**
+ * 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}
+ */
+export declare function mdxish(mdContent: string, opts?: MdxishOpts): Root;
+export default mdxish;

package/dist/lib/mix.d.ts

@@ -0,0 +1,4 @@
+import type { MdxishOpts } from './mdxish';
+/** Wrapper around mdxish that returns an HTML string instead of a HAST tree. */
+declare const mix: (text: string, opts?: MdxishOpts) => string;
+export default mix;

package/dist/lib/renderMdxish.d.ts

@@ -0,0 +1,14 @@
+import type { RMDXModule } from '../types';
+import type { Root } from 'hast';
+import { type RenderOpts } from './utils/mdxish/mdxish-render-utils';
+export type { RenderOpts as RenderMdxishOpts };
+/**
+ * Converts a HAST tree to a React component.
+ * @param tree - The HAST tree to convert
+ * @param opts - The options for the render
+ * @returns The React component
+ *
+ * @see {@link https://github.com/readmeio/rmdx/blob/main/docs/mdxish-flow.md}
+ */
+declare const renderMdxish: (tree: Root, opts?: RenderOpts) => RMDXModule;
+export default renderMdxish;

package/dist/lib/utils/extractMagicBlocks.d.ts

@@ -1,4 +1,4 @@
-interface BlockHit {
+export interface BlockHit {
     raw: string;
     token: string;
 }
@@ -14,4 +14,3 @@ export declare function extractMagicBlocks(markdown: string): {
  * Restore extracted magic blocks back into a markdown string.
  */
 export declare function restoreMagicBlocks(replaced: string, blocks: BlockHit[]): string;
-export {};

package/dist/lib/utils/mdxish/mdxish-get-component-name.d.ts

@@ -0,0 +1,11 @@
+import type { CustomComponents } from '../../../types';
+/**
+ * Find a component in the components hash using case-insensitive matching.
+ * Returns the actual key from the map, or null if not found.
+ *
+ * Matching priority:
+ * 1. Exact match
+ * 2. PascalCase version
+ * 3. Case-insensitive match
+ */
+export declare function getComponentName(componentName: string, components: CustomComponents): string | null;

package/dist/lib/utils/mdxish/mdxish-load-components.d.ts

@@ -0,0 +1,7 @@
+import type { CustomComponents } from '../../../types';
+/**
+ * Load components from the components directory and wrap them in RMDXModule format
+ * Similar to prototype.js getAvailableComponents, but for React components instead of MDX files
+ * This allows mix to use React components directly without MDX compilation
+ */
+export declare function loadComponents(): CustomComponents;

package/dist/lib/utils/mdxish/mdxish-render-utils.d.ts

@@ -0,0 +1,25 @@
+import type { GlossaryTerm } from '../../../contexts/GlossaryTerms';
+import type { CustomComponents, IndexableElements, RMDXModule, TocList, Variables } from '../../../types';
+import React from 'react';
+export interface RenderOpts {
+    baseUrl?: string;
+    components?: CustomComponents;
+    copyButtons?: boolean;
+    imports?: Record<string, unknown>;
+    terms?: GlossaryTerm[];
+    theme?: 'dark' | 'light';
+    useTailwind?: boolean;
+    variables?: Variables;
+}
+/** Flatten CustomComponents into a component map for rehype-react */
+export declare function exportComponentsForRehype(components: CustomComponents): Record<string, React.ComponentType>;
+/** Create a rehype-react processor */
+export declare function createRehypeReactProcessor(components: Record<string, React.ComponentType>): import("unified").Processor<undefined, undefined, undefined, undefined, undefined>;
+/** Create a TOC React component from headings */
+export declare function createTocComponent(tocHast: TocList): React.FC<{
+    heading?: string;
+}>;
+/** Create the default wrapper component with contexts */
+export declare function createDefaultComponent(content: React.ReactNode, opts: Pick<RenderOpts, 'baseUrl' | 'copyButtons' | 'terms' | 'theme' | 'variables'>): React.FC;
+/** Build the RMDXModule result object */
+export declare function buildRMDXModule(content: React.ReactNode, headings: IndexableElements[], tocHast: TocList | null, opts: Pick<RenderOpts, 'baseUrl' | 'copyButtons' | 'terms' | 'theme' | 'variables'>): RMDXModule;