react-intlayer 7.6.0-canary.0 → 8.0.0-canary.2

package/dist/cjs/markdown/MarkdownProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownProvider.cjs","names":[],"sources":["../../../src/markdown/MarkdownProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n} from 'react';\n\ntype MarkdownContextValue = {\n  renderMarkdown: (markdown: string) => ReactNode;\n};\n\ntype MarkdownProviderProps = PropsWithChildren<MarkdownContextValue>;\n\nconst MarkdownContext = createContext<MarkdownContextValue>({\n  renderMarkdown: (markdown: string) => markdown,\n});\n\nexport const useMarkdownContext = () => useContext(MarkdownContext);\n\nexport const MarkdownProvider: FC<MarkdownProviderProps> = ({\n  children,\n  renderMarkdown,\n}) => (\n  <MarkdownContext.Provider value={{ renderMarkdown }}>\n    {children}\n  </MarkdownContext.Provider>\n);\n"],"mappings":";;;;;;;AAgBA,MAAM,2CAAsD,EAC1D,iBAAiB,aAAqB,UACvC,CAAC;AAEF,MAAa,iDAAsC,gBAAgB;AAEnE,MAAa,oBAA+C,EAC1D,UACA,qBAEA,2CAAC,gBAAgB;CAAS,OAAO,EAAE,gBAAgB;CAChD;EACwB"}
+{"version":3,"file":"MarkdownProvider.cjs","names":["compiler"],"sources":["../../../src/markdown/MarkdownProvider.tsx"],"sourcesContent":["'use client';\n\nimport type { Overrides } from '@intlayer/core';\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n} from 'react';\nimport { compiler, type MarkdownRendererOptions } from './processor';\n\nexport type MarkdownProviderOptions = {\n  /** Forces the compiler to always output content with a block-level wrapper. */\n  forceBlock?: boolean;\n  /** Forces the compiler to always output content with an inline wrapper. */\n  forceInline?: boolean;\n  /** Whether to preserve frontmatter in the markdown content. */\n  preserveFrontmatter?: boolean;\n  /** Whether to use the GitHub Tag Filter for security. */\n  tagfilter?: boolean;\n};\n\ntype RenderMarkdownOptions = MarkdownProviderOptions & {\n  components?: Overrides;\n  wrapper?: FC<any>;\n};\n\ntype MarkdownContextValue = {\n  renderMarkdown: (\n    markdown: string,\n    components?: Overrides | RenderMarkdownOptions\n  ) => ReactNode;\n};\n\ntype MarkdownProviderProps = PropsWithChildren<\n  MarkdownProviderOptions & {\n    components?: Overrides;\n    wrapper?: any;\n    renderMarkdown?: (\n      markdown: string,\n      overrides?: Overrides | RenderMarkdownOptions\n    ) => ReactNode;\n  }\n>;\n\nconst MarkdownContext = createContext<MarkdownContextValue | undefined>(\n  undefined\n);\n\nexport const useMarkdownContext = () => useContext(MarkdownContext);\n\n// Pure functions defined outside the component are easier for React Compiler to track\n// and don't need to be recreated on every render.\n\nconst isRenderMarkdownOptions = (\n  override: any\n): override is RenderMarkdownOptions => {\n  return (\n    override &&\n    typeof override === 'object' &&\n    ('components' in override ||\n      'wrapper' in override ||\n      'forceBlock' in override ||\n      'forceInline' in override ||\n      'preserveFrontmatter' in override ||\n      'tagfilter' in override)\n  );\n};\n\nconst mergeOptions = (\n  baseOptions: MarkdownRendererOptions,\n  overrides?: Overrides | RenderMarkdownOptions\n): MarkdownRendererOptions => {\n  if (!overrides) return baseOptions;\n\n  if (!isRenderMarkdownOptions(overrides)) {\n    // Overrides is just a component map\n    return {\n      ...baseOptions,\n      components: { ...baseOptions.components, ...overrides },\n    };\n  }\n\n  // Overrides is a full options object\n  const {\n    components: overrideComponents,\n    wrapper,\n    forceBlock,\n    forceInline,\n    preserveFrontmatter,\n    tagfilter,\n    ...componentsFromRest\n  } = overrides;\n\n  const components = overrideComponents || componentsFromRest;\n\n  return {\n    ...baseOptions,\n    forceBlock: forceBlock ?? baseOptions.forceBlock,\n    forceInline: forceInline ?? baseOptions.forceInline,\n    preserveFrontmatter: preserveFrontmatter ?? baseOptions.preserveFrontmatter,\n    tagfilter: tagfilter ?? baseOptions.tagfilter,\n    wrapper: wrapper || baseOptions.wrapper,\n\n    forceWrapper: !!(wrapper || baseOptions.wrapper),\n    components: { ...baseOptions.components, ...components },\n  };\n};\n\n/**\n * Provider for the MarkdownRenderer component.\n *\n * It will provide the `renderMarkdown` function to the context, which can be used to render markdown.\n *\n * ```tsx\n * const content = useIntlayer('app');\n *\n * return (\n *   <div>\n *     {content.markdown} // Will be rendered with the components and options provided to the MarkdownProvider\n *   </div>\n * );\n * ```\n *\n * @example\n * ```tsx\n * <MarkdownProvider components={{ h1: CustomHeading }}>\n *   <MarkdownRenderer>\n *     {markdownContent}\n *   </MarkdownRenderer>\n * </MarkdownProvider>\n * ```\n */\nexport const MarkdownProvider: FC<MarkdownProviderProps> = ({\n  children,\n  components,\n  wrapper,\n  forceBlock,\n  forceInline,\n  preserveFrontmatter,\n  tagfilter,\n  renderMarkdown: customRenderFn,\n}) => {\n  const baseOptions: MarkdownRendererOptions = {\n    components,\n    forceBlock,\n    forceInline,\n    wrapper,\n    forceWrapper: !!wrapper,\n    preserveFrontmatter,\n    tagfilter,\n  };\n\n  // Standard internal renderer\n  const defaultRenderMarkdown = (\n    markdown: string,\n    overrides?: Overrides | RenderMarkdownOptions\n  ) => {\n    const mergedOptions = mergeOptions(baseOptions, overrides);\n    return compiler(markdown, mergedOptions);\n  };\n\n  // Wrapper for user-provided custom renderer\n  // Note: We wrap in a clean Provider to prevent infinite recursion\n  const customRenderMarkdownWrapper = (\n    markdown: string,\n    overrides?: Overrides | RenderMarkdownOptions\n  ) => (\n    <MarkdownContext.Provider value={undefined}>\n      {customRenderFn?.(markdown, overrides)}\n    </MarkdownContext.Provider>\n  );\n\n  return (\n    <MarkdownContext.Provider\n      value={{\n        renderMarkdown: customRenderFn\n          ? customRenderMarkdownWrapper\n          : defaultRenderMarkdown,\n      }}\n    >\n      {children}\n    </MarkdownContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;AA8CA,MAAM,2CACJ,OACD;AAED,MAAa,iDAAsC,gBAAgB;AAKnE,MAAM,2BACJ,aACsC;AACtC,QACE,YACA,OAAO,aAAa,aACnB,gBAAgB,YACf,aAAa,YACb,gBAAgB,YAChB,iBAAiB,YACjB,yBAAyB,YACzB,eAAe;;AAIrB,MAAM,gBACJ,aACA,cAC4B;AAC5B,KAAI,CAAC,UAAW,QAAO;AAEvB,KAAI,CAAC,wBAAwB,UAAU,CAErC,QAAO;EACL,GAAG;EACH,YAAY;GAAE,GAAG,YAAY;GAAY,GAAG;GAAW;EACxD;CAIH,MAAM,EACJ,YAAY,oBACZ,SACA,YACA,aACA,qBACA,WACA,GAAG,uBACD;CAEJ,MAAM,aAAa,sBAAsB;AAEzC,QAAO;EACL,GAAG;EACH,YAAY,cAAc,YAAY;EACtC,aAAa,eAAe,YAAY;EACxC,qBAAqB,uBAAuB,YAAY;EACxD,WAAW,aAAa,YAAY;EACpC,SAAS,WAAW,YAAY;EAEhC,cAAc,CAAC,EAAE,WAAW,YAAY;EACxC,YAAY;GAAE,GAAG,YAAY;GAAY,GAAG;GAAY;EACzD;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BH,MAAa,oBAA+C,EAC1D,UACA,YACA,SACA,YACA,aACA,qBACA,WACA,gBAAgB,qBACZ;CACJ,MAAM,cAAuC;EAC3C;EACA;EACA;EACA;EACA,cAAc,CAAC,CAAC;EAChB;EACA;EACD;CAGD,MAAM,yBACJ,UACA,cACG;AAEH,SAAOA,oCAAS,UADM,aAAa,aAAa,UAAU,CAClB;;CAK1C,MAAM,+BACJ,UACA,cAEA,2CAAC,gBAAgB;EAAS,OAAO;YAC9B,iBAAiB,UAAU,UAAU;GACb;AAG7B,QACE,2CAAC,gBAAgB;EACf,OAAO,EACL,gBAAgB,iBACZ,8BACA,uBACL;EAEA;GACwB"}

package/dist/cjs/markdown/MarkdownRenderer.cjs

@@ -1,43 +1,203 @@
-'use client';
-
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_editor_useEditedContentRenderer = require('../editor/useEditedContentRenderer.cjs');
+const require_markdown_processor = require('./processor.cjs');
 const require_markdown_MarkdownProvider = require('./MarkdownProvider.cjs');
-let _intlayer_core = require("@intlayer/core");
-let _intlayer_editor_react = require("@intlayer/editor-react");
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/markdown/MarkdownRenderer.tsx
-const MarkdownRenderer = ({ dictionaryKey, keyPath, children, locale }) => {
-	const { renderMarkdown } = require_markdown_MarkdownProvider.useMarkdownContext();
-	const editedContentContext = require_editor_useEditedContentRenderer.useEditedContentRenderer({
-		dictionaryKey,
-		keyPath,
-		children
+/**
+* Renders markdown content to JSX with the provided components and options.
+*
+* This function does not use context from MarkdownProvider. Use `useMarkdownRenderer`
+* hook if you want to leverage provider context.
+*
+* @param content - The markdown string to render
+* @param props - Configuration options for rendering
+* @param props.components - Component overrides for HTML tags
+* @param props.wrapper - Wrapper component for multiple children
+* @returns JSX element representing the rendered markdown
+*
+* @example
+* ```tsx
+* import { renderMarkdown } from '@intlayer/react-intlayer/markdown';
+*
+* const markdown = '# Hello World\n\nThis is **bold** text.';
+* const jsx = renderMarkdown(markdown, {
+*   components: {
+*     h1: ({ children }) => <h1 className="title">{children}</h1>,
+*   },
+*   forceBlock: true,
+* });
+* ```
+*/
+const renderMarkdown = (content, { components, wrapper, forceBlock, forceInline, preserveFrontmatter, tagfilter } = {}) => {
+	return require_markdown_processor.compiler(content, {
+		components,
+		forceBlock,
+		forceInline,
+		wrapper,
+		forceWrapper: !!wrapper,
+		preserveFrontmatter,
+		tagfilter
 	});
-	if (typeof editedContentContext !== "string") {
-		const transformedEditedContent = (0, _intlayer_core.getContent)(editedContentContext, {
-			dictionaryKey,
-			keyPath
-		}, locale);
-		if (typeof transformedEditedContent !== "string") {
-			console.error(`Incorrect Markdown content. Edited Markdown content type: ${typeof transformedEditedContent}. Expected string. Value ${JSON.stringify(transformedEditedContent)}`);
-			return renderMarkdown(children);
-		}
-		return renderMarkdown(transformedEditedContent);
-	}
-	return renderMarkdown(editedContentContext);
 };
-const MarkdownMetadataRenderer = ({ dictionaryKey, keyPath, children, metadataKeyPath }) => {
-	const editedContentContext = require_editor_useEditedContentRenderer.useEditedContentRenderer({
-		dictionaryKey,
-		keyPath,
-		children
-	});
-	const currentLocale = (0, _intlayer_editor_react.useEditorLocale)();
-	return (0, _intlayer_core.getContentNodeByKeyPath)((0, _intlayer_core.getMarkdownMetadata)(editedContentContext), metadataKeyPath, currentLocale);
+/**
+* Hook that returns a function to render markdown content.
+*
+* This hook considers the configuration from the `MarkdownProvider` context if available,
+* falling back to the provided props or default behavior.
+*
+* @param props - Optional configuration that will override context values
+* @param props.components - Component overrides for HTML tags (overrides context)
+* @param props.wrapper - Wrapper component (overrides context)
+* @returns A function that takes markdown content and returns JSX
+*
+* @example
+* ```tsx
+* import { useMarkdownRenderer } from '@intlayer/react-intlayer/markdown';
+*
+* function MyComponent() {
+*   const renderMarkdown = useMarkdownRenderer({
+*     components: {
+*       h1: ({ children }) => <h1 className="custom">{children}</h1>,
+*     },
+*   });
+*
+*   return (
+*     <div>
+*       {renderMarkdown('# Hello\n\nThis is **markdown**')}
+*     </div>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With MarkdownProvider context
+* function App() {
+*   return (
+*     <MarkdownProvider
+*       components={{ h1: CustomHeading }}
+*       forceBlock={true}
+*     >
+*       <MyComponent />
+*     </MarkdownProvider>
+*   );
+* }
+* ```
+*/
+const useMarkdownRenderer = ({ components, wrapper, forceBlock, forceInline, preserveFrontmatter, tagfilter } = {}) => {
+	const context = require_markdown_MarkdownProvider.useMarkdownContext();
+	return (content) => {
+		if (context) return context.renderMarkdown(content, {
+			components,
+			wrapper,
+			forceBlock,
+			forceInline,
+			preserveFrontmatter,
+			tagfilter
+		});
+		return renderMarkdown(content, {
+			components,
+			wrapper,
+			forceBlock,
+			forceInline,
+			preserveFrontmatter,
+			tagfilter
+		});
+	};
+};
+/**
+* React component that renders markdown content to JSX.
+*
+* This component uses the `renderMarkdown` function from the `MarkdownProvider` context
+* if available. Otherwise, it falls back to the default compiler with provided components
+* and options. You can also provide a custom `renderMarkdown` function prop to override
+* all rendering behavior.
+*
+* @example
+* ```tsx
+* import { MarkdownRenderer } from '@intlayer/react-intlayer/markdown';
+*
+* function MyComponent() {
+*   return (
+*     <MarkdownRenderer>
+*       {`# Hello World
+*
+* This is a paragraph with **bold** and *italic* text.
+*
+* - List item 1
+* - List item 2`}
+*     </MarkdownRenderer>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With custom components
+* <MarkdownRenderer
+*   components={{
+*     h1: ({ children }) => <h1 className="text-4xl font-bold">{children}</h1>,
+*     a: ({ href, children }) => (
+*       <a href={href} className="text-blue-500 hover:underline">
+*         {children}
+*       </a>
+*     ),
+*   }}
+*   forceBlock={true}
+* >
+*   {markdownContent}
+* </MarkdownRenderer>
+* ```
+*
+* @example
+* ```tsx
+* // With MarkdownProvider context
+* function App() {
+*   return (
+*     <MarkdownProvider
+*       components={{ h1: CustomHeading }}
+*       forceBlock={true}
+*     >
+*       <MarkdownRenderer>
+*         {markdownContent}
+*       </MarkdownRenderer>
+*     </MarkdownProvider>
+*   );
+* }
+* ```
+*/
+const MarkdownRenderer = ({ children = "", components, wrapper, forceBlock, forceInline, preserveFrontmatter, tagfilter, renderMarkdown }) => {
+	const context = require_markdown_MarkdownProvider.useMarkdownContext();
+	if (renderMarkdown) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: renderMarkdown(children, {
+		components,
+		wrapper,
+		forceBlock,
+		forceInline,
+		preserveFrontmatter,
+		tagfilter
+	}) });
+	if (context) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: context.renderMarkdown(children, {
+		components,
+		wrapper,
+		forceBlock,
+		forceInline,
+		preserveFrontmatter,
+		tagfilter
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: require_markdown_processor.compiler(children, {
+		components,
+		forceBlock,
+		forceInline,
+		wrapper,
+		forceWrapper: !!wrapper,
+		preserveFrontmatter,
+		tagfilter
+	}) });
 };
 
 //#endregion
-exports.MarkdownMetadataRenderer = MarkdownMetadataRenderer;
 exports.MarkdownRenderer = MarkdownRenderer;
+exports.renderMarkdown = renderMarkdown;
+exports.useMarkdownRenderer = useMarkdownRenderer;
 //# sourceMappingURL=MarkdownRenderer.cjs.map

package/dist/cjs/markdown/MarkdownRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownRenderer.cjs","names":["useMarkdownContext","useEditedContentRenderer"],"sources":["../../../src/markdown/MarkdownRenderer.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getContent,\n  getContentNodeByKeyPath,\n  getMarkdownMetadata,\n} from '@intlayer/core';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport type { ContentNode, KeyPath, LocalesValues } from '@intlayer/types';\nimport type { FC, ReactNode } from 'react';\nimport { useEditedContentRenderer } from '../editor/useEditedContentRenderer';\nimport { useMarkdownContext } from './MarkdownProvider';\n\ntype MarkdownRendererProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  locale?: LocalesValues;\n  children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  dictionaryKey,\n  keyPath,\n  children,\n  locale,\n}): ReactNode => {\n  const { renderMarkdown } = useMarkdownContext();\n  const editedContentContext = useEditedContentRenderer({\n    dictionaryKey,\n    keyPath,\n    children,\n  });\n\n  if (typeof editedContentContext !== 'string') {\n    const transformedEditedContent = getContent(\n      editedContentContext,\n      {\n        dictionaryKey,\n        keyPath,\n      },\n      locale\n    );\n\n    if (typeof transformedEditedContent !== 'string') {\n      console.error(\n        `Incorrect Markdown content. Edited Markdown content type: ${typeof transformedEditedContent}. Expected string. Value ${JSON.stringify(transformedEditedContent)}`\n      );\n\n      return renderMarkdown(children);\n    }\n\n    return renderMarkdown(transformedEditedContent);\n  }\n\n  return renderMarkdown(editedContentContext);\n};\n\ntype MarkdownMetadataRendererProps = MarkdownRendererProps & {\n  metadataKeyPath: KeyPath[];\n};\n\nexport const MarkdownMetadataRenderer: FC<MarkdownMetadataRendererProps> = ({\n  dictionaryKey,\n  keyPath,\n  children,\n  metadataKeyPath,\n}): ReactNode => {\n  const editedContentContext = useEditedContentRenderer({\n    dictionaryKey,\n    keyPath,\n    children,\n  });\n  const currentLocale = useEditorLocale();\n\n  const metadata = getMarkdownMetadata(editedContentContext);\n\n  const metadataEl = getContentNodeByKeyPath(\n    metadata as ContentNode,\n    metadataKeyPath,\n    currentLocale\n  );\n\n  return metadataEl as ReactNode;\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAa,oBAA+C,EAC1D,eACA,SACA,UACA,aACe;CACf,MAAM,EAAE,mBAAmBA,sDAAoB;CAC/C,MAAM,uBAAuBC,iEAAyB;EACpD;EACA;EACA;EACD,CAAC;AAEF,KAAI,OAAO,yBAAyB,UAAU;EAC5C,MAAM,0DACJ,sBACA;GACE;GACA;GACD,EACD,OACD;AAED,MAAI,OAAO,6BAA6B,UAAU;AAChD,WAAQ,MACN,6DAA6D,OAAO,yBAAyB,2BAA2B,KAAK,UAAU,yBAAyB,GACjK;AAED,UAAO,eAAe,SAAS;;AAGjC,SAAO,eAAe,yBAAyB;;AAGjD,QAAO,eAAe,qBAAqB;;AAO7C,MAAa,4BAA+D,EAC1E,eACA,SACA,UACA,sBACe;CACf,MAAM,uBAAuBA,iEAAyB;EACpD;EACA;EACA;EACD,CAAC;CACF,MAAM,6DAAiC;AAUvC,4FARqC,qBAAqB,EAIxD,iBACA,cACD"}
+{"version":3,"file":"MarkdownRenderer.cjs","names":["compiler","useMarkdownContext"],"sources":["../../../src/markdown/MarkdownRenderer.tsx"],"sourcesContent":["import type { Overrides } from '@intlayer/core';\nimport type { FC, JSX, ReactNode } from 'react';\nimport {\n  type MarkdownProviderOptions,\n  useMarkdownContext,\n} from './MarkdownProvider';\nimport { compiler, type MarkdownRendererOptions } from './processor';\n\n/**\n * Props for rendering markdown content.\n *\n * @example\n * ```tsx\n * const props: RenderMarkdownProps = {\n *   components: {\n *     h1: ({ children }) => <h1 className=\"text-3xl\">{children}</h1>,\n *     p: ({ children }) => <p className=\"text-gray-700\">{children}</p>,\n *   },\n *   wrapper: ({ children }) => <article>{children}</article>,\n *   options: {\n *     forceBlock: true,\n *     preserveFrontmatter: false,\n *     tagfilter: true,\n *   },\n * };\n * ```\n */\nexport type RenderMarkdownProps = MarkdownProviderOptions & {\n  /**\n   * Component overrides for HTML tags.\n   * Allows you to customize how specific HTML elements are rendered.\n   * Only used if not wrapped in a MarkdownProvider.\n   *\n   * @example\n   * ```tsx\n   * components={{\n   *   h1: ({ children }) => <h1 className=\"title\">{children}</h1>,\n   *   a: ({ href, children }) => <Link to={href}>{children}</Link>,\n   * }}\n   * ```\n   */\n  components?: Overrides;\n  /**\n   * Wrapper element or component to be used when there are multiple children.\n   * Only used if not wrapped in a MarkdownProvider.\n   *\n   * @example\n   * ```tsx\n   * wrapper={({ children }) => <div className=\"markdown-content\">{children}</div>}\n   * ```\n   */\n  wrapper?: FC;\n};\n\n/**\n * Renders markdown content to JSX with the provided components and options.\n *\n * This function does not use context from MarkdownProvider. Use `useMarkdownRenderer`\n * hook if you want to leverage provider context.\n *\n * @param content - The markdown string to render\n * @param props - Configuration options for rendering\n * @param props.components - Component overrides for HTML tags\n * @param props.wrapper - Wrapper component for multiple children\n * @returns JSX element representing the rendered markdown\n *\n * @example\n * ```tsx\n * import { renderMarkdown } from '@intlayer/react-intlayer/markdown';\n *\n * const markdown = '# Hello World\\n\\nThis is **bold** text.';\n * const jsx = renderMarkdown(markdown, {\n *   components: {\n *     h1: ({ children }) => <h1 className=\"title\">{children}</h1>,\n *   },\n *   forceBlock: true,\n * });\n * ```\n */\nexport const renderMarkdown = (\n  content: string,\n  {\n    components,\n    wrapper,\n    forceBlock,\n    forceInline,\n    preserveFrontmatter,\n    tagfilter,\n  }: RenderMarkdownProps = {}\n): JSX.Element => {\n  // Map public options to internal processor options\n  const internalOptions: MarkdownRendererOptions = {\n    components,\n    forceBlock,\n    forceInline,\n    wrapper,\n    forceWrapper: !!wrapper,\n    preserveFrontmatter,\n    tagfilter,\n  };\n\n  return compiler(content, internalOptions);\n};\n\n/**\n * Hook that returns a function to render markdown content.\n *\n * This hook considers the configuration from the `MarkdownProvider` context if available,\n * falling back to the provided props or default behavior.\n *\n * @param props - Optional configuration that will override context values\n * @param props.components - Component overrides for HTML tags (overrides context)\n * @param props.wrapper - Wrapper component (overrides context)\n * @returns A function that takes markdown content and returns JSX\n *\n * @example\n * ```tsx\n * import { useMarkdownRenderer } from '@intlayer/react-intlayer/markdown';\n *\n * function MyComponent() {\n *   const renderMarkdown = useMarkdownRenderer({\n *     components: {\n *       h1: ({ children }) => <h1 className=\"custom\">{children}</h1>,\n *     },\n *   });\n *\n *   return (\n *     <div>\n *       {renderMarkdown('# Hello\\n\\nThis is **markdown**')}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With MarkdownProvider context\n * function App() {\n *   return (\n *     <MarkdownProvider\n *       components={{ h1: CustomHeading }}\n *       forceBlock={true}\n *     >\n *       <MyComponent />\n *     </MarkdownProvider>\n *   );\n * }\n * ```\n */\nexport const useMarkdownRenderer = ({\n  components,\n  wrapper,\n  forceBlock,\n  forceInline,\n  preserveFrontmatter,\n  tagfilter,\n}: RenderMarkdownProps = {}) => {\n  const context = useMarkdownContext();\n\n  return (content: string) => {\n    if (context) {\n      return context.renderMarkdown(content, {\n        components,\n        wrapper,\n        forceBlock,\n        forceInline,\n        preserveFrontmatter,\n        tagfilter,\n      });\n    }\n\n    return renderMarkdown(content, {\n      components,\n      wrapper,\n      forceBlock,\n      forceInline,\n      preserveFrontmatter,\n      tagfilter,\n    });\n  };\n};\n\n/**\n * Props for the MarkdownRenderer component.\n *\n * @example\n * ```tsx\n * const props: MarkdownRendererProps = {\n *   children: '# Hello World\\n\\nThis is **bold** text.',\n *   components: {\n *     h1: ({ children }) => <h1 className=\"title\">{children}</h1>,\n *   },\n *   wrapper: ({ children }) => <article>{children}</article>,\n *   forceBlock: true,\n * };\n * ```\n */\nexport type MarkdownRendererProps = RenderMarkdownProps & {\n  /**\n   * The markdown content to render as a string.\n   *\n   * @example\n   * ```tsx\n   * <MarkdownRenderer>\n   *   {`# Title\\n\\nParagraph with **bold** text.`}\n   * </MarkdownRenderer>\n   * ```\n   */\n  children: string;\n  /**\n   * Custom render function for markdown.\n   * If provided, it will overwrite context and default rendering.\n   *\n   * @param markdown - The markdown string to render\n   * @param options - Optional rendering options\n   * @returns React node representing the rendered markdown\n   *\n   * @example\n   * ```tsx\n   * <MarkdownRenderer\n   *   renderMarkdown={(md, opts) => {\n   *     // Custom rendering logic\n   *     return <div dangerouslySetInnerHTML={{ __html: customParser(md) }} />;\n   *   }}\n   * >\n   *   {markdownContent}\n   * </MarkdownRenderer>\n   * ```\n   */\n  renderMarkdown?: (\n    markdown: string,\n    options?: {\n      components?: Overrides;\n      wrapper?: FC;\n      forceBlock?: boolean;\n      forceInline?: boolean;\n      preserveFrontmatter?: boolean;\n      tagfilter?: boolean;\n    }\n  ) => ReactNode;\n};\n\n/**\n * React component that renders markdown content to JSX.\n *\n * This component uses the `renderMarkdown` function from the `MarkdownProvider` context\n * if available. Otherwise, it falls back to the default compiler with provided components\n * and options. You can also provide a custom `renderMarkdown` function prop to override\n * all rendering behavior.\n *\n * @example\n * ```tsx\n * import { MarkdownRenderer } from '@intlayer/react-intlayer/markdown';\n *\n * function MyComponent() {\n *   return (\n *     <MarkdownRenderer>\n *       {`# Hello World\n *\n * This is a paragraph with **bold** and *italic* text.\n *\n * - List item 1\n * - List item 2`}\n *     </MarkdownRenderer>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom components\n * <MarkdownRenderer\n *   components={{\n *     h1: ({ children }) => <h1 className=\"text-4xl font-bold\">{children}</h1>,\n *     a: ({ href, children }) => (\n *       <a href={href} className=\"text-blue-500 hover:underline\">\n *         {children}\n *       </a>\n *     ),\n *   }}\n *   forceBlock={true}\n * >\n *   {markdownContent}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * ```tsx\n * // With MarkdownProvider context\n * function App() {\n *   return (\n *     <MarkdownProvider\n *       components={{ h1: CustomHeading }}\n *       forceBlock={true}\n *     >\n *       <MarkdownRenderer>\n *         {markdownContent}\n *       </MarkdownRenderer>\n *     </MarkdownProvider>\n *   );\n * }\n * ```\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children = '',\n  components,\n  wrapper,\n  forceBlock,\n  forceInline,\n  preserveFrontmatter,\n  tagfilter,\n  renderMarkdown,\n}) => {\n  const context = useMarkdownContext();\n\n  if (renderMarkdown) {\n    return (\n      <>\n        {renderMarkdown(children, {\n          components,\n          wrapper,\n          forceBlock,\n          forceInline,\n          preserveFrontmatter,\n          tagfilter,\n        })}\n      </>\n    );\n  }\n\n  if (context) {\n    return (\n      <>\n        {context.renderMarkdown(children, {\n          components,\n          wrapper,\n          forceBlock,\n          forceInline,\n          preserveFrontmatter,\n          tagfilter,\n        })}\n      </>\n    );\n  }\n\n  // Map public options to internal processor options\n  const internalOptions: MarkdownRendererOptions = {\n    components,\n    forceBlock,\n    forceInline,\n    wrapper,\n    forceWrapper: !!wrapper,\n    preserveFrontmatter,\n    tagfilter,\n  };\n\n  return <>{compiler(children, internalOptions)}</>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,MAAa,kBACX,SACA,EACE,YACA,SACA,YACA,aACA,qBACA,cACuB,EAAE,KACX;AAYhB,QAAOA,oCAAS,SAViC;EAC/C;EACA;EACA;EACA;EACA,cAAc,CAAC,CAAC;EAChB;EACA;EACD,CAEwC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgD3C,MAAa,uBAAuB,EAClC,YACA,SACA,YACA,aACA,qBACA,cACuB,EAAE,KAAK;CAC9B,MAAM,UAAUC,sDAAoB;AAEpC,SAAQ,YAAoB;AAC1B,MAAI,QACF,QAAO,QAAQ,eAAe,SAAS;GACrC;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;AAGJ,SAAO,eAAe,SAAS;GAC7B;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HN,MAAa,oBAA+C,EAC1D,WAAW,IACX,YACA,SACA,YACA,aACA,qBACA,WACA,qBACI;CACJ,MAAM,UAAUA,sDAAoB;AAEpC,KAAI,eACF,QACE,mFACG,eAAe,UAAU;EACxB;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,GACD;AAIP,KAAI,QACF,QACE,mFACG,QAAQ,eAAe,UAAU;EAChC;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,GACD;AAeP,QAAO,mFAAGD,oCAAS,UAV8B;EAC/C;EACA;EACA;EACA;EACA,cAAc,CAAC,CAAC;EAChB;EACA;EACD,CAE4C,GAAI"}

package/dist/cjs/markdown/MarkdownRendererPlugin.cjs

@@ -0,0 +1,33 @@
+'use client';
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_editor_useEditedContentRenderer = require('../editor/useEditedContentRenderer.cjs');
+const require_markdown_MarkdownProvider = require('./MarkdownProvider.cjs');
+let _intlayer_core = require("@intlayer/core");
+let _intlayer_editor_react = require("@intlayer/editor-react");
+
+//#region src/markdown/MarkdownRendererPlugin.tsx
+const MarkdownRendererPlugin = (props) => {
+	const { dictionaryKey, keyPath, children, locale, ...components } = props;
+	const renderMarkdown = require_markdown_MarkdownProvider.useMarkdownContext()?.renderMarkdown ?? ((md) => md);
+	const editedContentContext = require_editor_useEditedContentRenderer.useEditedContentRenderer({
+		dictionaryKey,
+		keyPath,
+		children
+	});
+	return renderMarkdown(typeof editedContentContext === "string" ? editedContentContext : children, components);
+};
+const MarkdownMetadataRenderer = ({ dictionaryKey, keyPath, children, metadataKeyPath }) => {
+	const editedContentContext = require_editor_useEditedContentRenderer.useEditedContentRenderer({
+		dictionaryKey,
+		keyPath,
+		children
+	});
+	const currentLocale = (0, _intlayer_editor_react.useEditorLocale)();
+	return (0, _intlayer_core.getContentNodeByKeyPath)((0, _intlayer_core.getMarkdownMetadata)(editedContentContext), metadataKeyPath, currentLocale);
+};
+
+//#endregion
+exports.MarkdownMetadataRenderer = MarkdownMetadataRenderer;
+exports.MarkdownRendererPlugin = MarkdownRendererPlugin;
+//# sourceMappingURL=MarkdownRendererPlugin.cjs.map

package/dist/cjs/markdown/MarkdownRendererPlugin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownRendererPlugin.cjs","names":["useMarkdownContext","useEditedContentRenderer"],"sources":["../../../src/markdown/MarkdownRendererPlugin.tsx"],"sourcesContent":["'use client';\n\nimport { getContentNodeByKeyPath, getMarkdownMetadata } from '@intlayer/core';\nimport { useEditorLocale } from '@intlayer/editor-react';\nimport type { ContentNode, KeyPath, LocalesValues } from '@intlayer/types';\nimport type { FC, ReactNode } from 'react';\nimport { useEditedContentRenderer } from '../editor/useEditedContentRenderer';\nimport { useMarkdownContext } from './MarkdownProvider';\n\ntype MarkdownRendererPluginProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  locale?: LocalesValues;\n  children: string;\n  [key: string]: any;\n};\n\nexport const MarkdownRendererPlugin: FC<MarkdownRendererPluginProps> = (\n  props\n): ReactNode => {\n  const { dictionaryKey, keyPath, children, locale, ...components } = props;\n  const context = useMarkdownContext();\n  const renderMarkdown = context?.renderMarkdown ?? ((md) => md);\n  const editedContentContext = useEditedContentRenderer({\n    dictionaryKey,\n    keyPath,\n    children,\n  });\n\n  const contentToRender =\n    typeof editedContentContext === 'string' ? editedContentContext : children;\n\n  return renderMarkdown(contentToRender, components);\n};\n\ntype MarkdownMetadataRendererProps = MarkdownRendererPluginProps & {\n  metadataKeyPath: KeyPath[];\n};\n\nexport const MarkdownMetadataRenderer: FC<MarkdownMetadataRendererProps> = ({\n  dictionaryKey,\n  keyPath,\n  children,\n  metadataKeyPath,\n}): ReactNode => {\n  const editedContentContext = useEditedContentRenderer({\n    dictionaryKey,\n    keyPath,\n    children,\n  });\n  const currentLocale = useEditorLocale();\n\n  const metadata = getMarkdownMetadata(editedContentContext);\n\n  const metadataEl = getContentNodeByKeyPath(\n    metadata as ContentNode,\n    metadataKeyPath,\n    currentLocale\n  );\n\n  return metadataEl as ReactNode;\n};\n"],"mappings":";;;;;;;;;AAiBA,MAAa,0BACX,UACc;CACd,MAAM,EAAE,eAAe,SAAS,UAAU,QAAQ,GAAG,eAAe;CAEpE,MAAM,iBADUA,sDAAoB,EACJ,oBAAoB,OAAO;CAC3D,MAAM,uBAAuBC,iEAAyB;EACpD;EACA;EACA;EACD,CAAC;AAKF,QAAO,eAFL,OAAO,yBAAyB,WAAW,uBAAuB,UAE7B,WAAW;;AAOpD,MAAa,4BAA+D,EAC1E,eACA,SACA,UACA,sBACe;CACf,MAAM,uBAAuBA,iEAAyB;EACpD;EACA;EACA;EACD,CAAC;CACF,MAAM,6DAAiC;AAUvC,4FARqC,qBAAqB,EAIxD,iBACA,cACD"}

package/dist/cjs/markdown/index.cjs

@@ -1,7 +1,24 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_markdown_processor = require('./processor.cjs');
 const require_markdown_MarkdownProvider = require('./MarkdownProvider.cjs');
 const require_markdown_MarkdownRenderer = require('./MarkdownRenderer.cjs');
+const require_markdown_MarkdownRendererPlugin = require('./MarkdownRendererPlugin.cjs');
+const require_markdown_runtime = require('./runtime.cjs');
+let _intlayer_core = require("@intlayer/core");
 
-exports.MarkdownMetadataRenderer = require_markdown_MarkdownRenderer.MarkdownMetadataRenderer;
+exports.LegacyMarkdownRenderer = require_markdown_processor.LegacyMarkdownRenderer;
+exports.MarkdownMetadataRenderer = require_markdown_MarkdownRendererPlugin.MarkdownMetadataRenderer;
 exports.MarkdownProvider = require_markdown_MarkdownProvider.MarkdownProvider;
 exports.MarkdownRenderer = require_markdown_MarkdownRenderer.MarkdownRenderer;
-exports.useMarkdownContext = require_markdown_MarkdownProvider.useMarkdownContext;
+exports.MarkdownRendererPlugin = require_markdown_MarkdownRendererPlugin.MarkdownRendererPlugin;
+exports.RuleType = _intlayer_core.RuleType;
+exports.compile = require_markdown_processor.compile;
+exports.compileMarkdown = require_markdown_processor.compileMarkdown;
+exports.compiler = require_markdown_processor.compiler;
+exports.createReactRuntime = require_markdown_runtime.createReactRuntime;
+exports.reactRuntime = require_markdown_runtime.reactRuntime;
+exports.renderMarkdown = require_markdown_MarkdownRenderer.renderMarkdown;
+exports.sanitizer = _intlayer_core.sanitizer;
+exports.slugify = _intlayer_core.slugify;
+exports.useMarkdownContext = require_markdown_MarkdownProvider.useMarkdownContext;
+exports.useMarkdownRenderer = require_markdown_MarkdownRenderer.useMarkdownRenderer;

package/dist/cjs/markdown/processor.cjs

@@ -0,0 +1,61 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let _intlayer_core = require("@intlayer/core");
+
+//#region src/markdown/processor.tsx
+/**
+* Default React runtime for markdown rendering.
+*/
+const DEFAULT_RUNTIME = {
+	createElement: react.createElement,
+	cloneElement: react.cloneElement,
+	Fragment: react.Fragment,
+	normalizeProps: (_tag, props) => props
+};
+/**
+* Compile markdown to React elements.
+* This is the primary export - use this for new code.
+*/
+const compileMarkdown = (markdown = "", options = {}) => {
+	const { createElement: customCreateElement, disableAutoLink, disableParsingRawHTML, enforceAtxHeadings, forceBlock, forceInline, forceWrapper, namedCodesToUnicode, components, renderRule, sanitizer, slugify, wrapper, preserveFrontmatter, tagfilter } = options;
+	return (0, _intlayer_core.compile)(markdown, {
+		runtime: customCreateElement ? {
+			...DEFAULT_RUNTIME,
+			createElement: customCreateElement
+		} : DEFAULT_RUNTIME,
+		components,
+		namedCodesToUnicode,
+		sanitizer,
+		slugify
+	}, {
+		disableAutoLink,
+		disableParsingRawHTML,
+		enforceAtxHeadings,
+		forceBlock,
+		forceInline,
+		forceWrapper,
+		renderRule,
+		wrapper,
+		preserveFrontmatter,
+		tagfilter
+	});
+};
+const compiler = compileMarkdown;
+const compile = compileMarkdown;
+/**
+* React component that renders markdown to JSX (legacy).
+*/
+const LegacyMarkdownRenderer = ({ children = "", options, ...props }) => {
+	if (process.env.NODE_ENV !== "production" && typeof children !== "string") console.error("intlayer: <Markdown> component only accepts a single string as a child, received:", children);
+	return (0, react.cloneElement)(compiler(children, options), props);
+};
+
+//#endregion
+exports.LegacyMarkdownRenderer = LegacyMarkdownRenderer;
+exports.RuleType = _intlayer_core.RuleType;
+exports.compile = compile;
+exports.compileMarkdown = compileMarkdown;
+exports.compiler = compiler;
+exports.sanitizer = _intlayer_core.sanitizer;
+exports.slugify = _intlayer_core.slugify;
+//# sourceMappingURL=processor.cjs.map

package/dist/cjs/markdown/processor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"processor.cjs","names":["createElement"],"sources":["../../../src/markdown/processor.tsx"],"sourcesContent":["import {\n  type Overrides as CoreOverrides,\n  compile as coreCompile,\n  sanitizer as defaultSanitizer,\n  slugify as defaultSlugify,\n  type MarkdownContext,\n  type MarkdownOptions,\n  type MarkdownRuntime,\n  type ParserResult,\n  type ParseState,\n  type RenderRuleHook,\n  type RuleOutput,\n  RuleType,\n} from '@intlayer/core';\nimport {\n  cloneElement,\n  createElement,\n  type FC,\n  Fragment,\n  type HTMLAttributes,\n  type JSX,\n  type ReactNode,\n} from 'react';\n\n// Re-export RuleType for compatibility\nexport { RuleType };\n\n// Re-export utilities for compatibility\nexport { defaultSlugify as slugify, defaultSanitizer as sanitizer };\n\ntype HTMLTags = keyof JSX.IntrinsicElements;\n\ntype State = ParseState;\n\n/**\n * Refined MarkdownRendererOptions type.\n */\nexport type MarkdownRendererOptions = Partial<{\n  /**\n   * Ultimate control over the output of all rendered JSX.\n   */\n  createElement: (\n    tag: Parameters<typeof createElement>[0],\n    props: JSX.IntrinsicAttributes,\n    ...children: ReactNode[]\n  ) => ReactNode;\n\n  /**\n   * The library automatically generates an anchor tag for bare URLs included in the markdown\n   * document, but this behavior can be disabled if desired.\n   */\n  disableAutoLink: boolean;\n\n  /**\n   * Disable the compiler's best-effort transcription of provided raw HTML\n   * into JSX-equivalent.\n   */\n  disableParsingRawHTML: boolean;\n\n  /**\n   * Forces the compiler to have space between hash sign and the header text.\n   */\n  enforceAtxHeadings: boolean;\n\n  /**\n   * Forces the compiler to always output content with a block-level wrapper.\n   */\n  forceBlock: boolean;\n\n  /**\n   * Forces the compiler to always output content with an inline wrapper.\n   */\n  forceInline: boolean;\n\n  /**\n   * Forces the compiler to wrap results, even if there is only a single child.\n   */\n  forceWrapper: boolean;\n\n  /**\n   * Supply additional HTML entity: unicode replacement mappings.\n   */\n  namedCodesToUnicode: {\n    [key: string]: string;\n  };\n\n  /**\n   * Selectively control the output of particular HTML tags.\n   */\n  components: CoreOverrides;\n\n  /**\n   * Allows for full control over rendering of particular rules.\n   */\n  renderRule: RenderRuleHook;\n\n  /**\n   * Override the built-in sanitizer function for URLs.\n   */\n  sanitizer: (value: string, tag: HTMLTags, attribute: string) => string | null;\n\n  /**\n   * Override normalization of non-URI-safe characters for anchor linking.\n   */\n  slugify: (input: string) => string;\n\n  /**\n   * Declare the type of the wrapper to be used when there are multiple children.\n   */\n  wrapper: any | null;\n\n  /**\n   * Whether to preserve frontmatter in the markdown content.\n   */\n  preserveFrontmatter: boolean;\n\n  /**\n   * Whether to use the GitHub Tag Filter.\n   */\n  tagfilter: boolean;\n}>;\n\n/**\n * Default React runtime for markdown rendering.\n */\nconst DEFAULT_RUNTIME: MarkdownRuntime = {\n  createElement: createElement as any,\n  cloneElement,\n  Fragment,\n  normalizeProps: (_tag, props) => props,\n};\n\n/**\n * Compile markdown to React elements.\n * This is the primary export - use this for new code.\n */\nexport const compileMarkdown = (\n  markdown: string = '',\n  options: MarkdownRendererOptions = {}\n): JSX.Element => {\n  const {\n    createElement: customCreateElement,\n    disableAutoLink,\n    disableParsingRawHTML,\n    enforceAtxHeadings,\n    forceBlock,\n    forceInline,\n    forceWrapper,\n    namedCodesToUnicode,\n    components,\n    renderRule,\n    sanitizer,\n    slugify,\n    wrapper,\n    preserveFrontmatter,\n    tagfilter,\n  } = options;\n\n  const runtime = customCreateElement\n    ? { ...DEFAULT_RUNTIME, createElement: customCreateElement as any }\n    : DEFAULT_RUNTIME;\n\n  const ctx: MarkdownContext = {\n    runtime,\n    components,\n    namedCodesToUnicode,\n    sanitizer: sanitizer as any,\n    slugify,\n  };\n\n  const compilerOptions: MarkdownOptions = {\n    disableAutoLink,\n    disableParsingRawHTML,\n    enforceAtxHeadings,\n    forceBlock,\n    forceInline,\n    forceWrapper,\n    renderRule,\n    wrapper,\n    preserveFrontmatter,\n    tagfilter,\n  };\n\n  return coreCompile(markdown, ctx, compilerOptions) as JSX.Element;\n};\n\n// Backward compatibility aliases\nexport const compiler = compileMarkdown;\nexport const compile = compileMarkdown;\n\n/**\n * React component that renders markdown to JSX (legacy).\n */\nexport const LegacyMarkdownRenderer: FC<\n  Omit<HTMLAttributes<Element>, 'children'> & {\n    children: string;\n    options?: MarkdownRendererOptions;\n  }\n> = ({ children = '', options, ...props }) => {\n  if (process.env.NODE_ENV !== 'production' && typeof children !== 'string') {\n    console.error(\n      'intlayer: <Markdown> component only accepts a single string as a child, received:',\n      children\n    );\n  }\n\n  return cloneElement(\n    compiler(children, options),\n    props as JSX.IntrinsicAttributes\n  );\n};\n\nexport type {\n  State,\n  ParseState,\n  ParserResult,\n  RuleOutput,\n  CoreOverrides as Overrides,\n};\n"],"mappings":";;;;;;;;AA6HA,MAAM,kBAAmC;CACvC,eAAeA;CACf;CACA;CACA,iBAAiB,MAAM,UAAU;CAClC;;;;;AAMD,MAAa,mBACX,WAAmB,IACnB,UAAmC,EAAE,KACrB;CAChB,MAAM,EACJ,eAAe,qBACf,iBACA,uBACA,oBACA,YACA,aACA,cACA,qBACA,YACA,YACA,WACA,SACA,SACA,qBACA,cACE;AA2BJ,oCAAmB,UArBU;EAC3B,SALc,sBACZ;GAAE,GAAG;GAAiB,eAAe;GAA4B,GACjE;EAIF;EACA;EACW;EACX;EACD,EAEwC;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAEiD;;AAIpD,MAAa,WAAW;AACxB,MAAa,UAAU;;;;AAKvB,MAAa,0BAKR,EAAE,WAAW,IAAI,SAAS,GAAG,YAAY;AAC5C,KAAI,QAAQ,IAAI,aAAa,gBAAgB,OAAO,aAAa,SAC/D,SAAQ,MACN,qFACA,SACD;AAGH,gCACE,SAAS,UAAU,QAAQ,EAC3B,MACD"}

package/dist/cjs/markdown/runtime.cjs

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/markdown/runtime.ts
+/**
+* React-specific runtime for the markdown processor.
+* Implements the MarkdownRuntime interface using React's primitives.
+*/
+const reactRuntime = {
+	createElement: (type, props, ...children) => {
+		if (children.length === 0) return (0, react.createElement)(type, props);
+		if (children.length === 1) return (0, react.createElement)(type, props, children[0]);
+		return (0, react.createElement)(type, props, ...children);
+	},
+	cloneElement: (element, props, ...children) => {
+		if (children.length === 0) return (0, react.cloneElement)(element, props);
+		return (0, react.cloneElement)(element, props, ...children);
+	},
+	Fragment: react.Fragment,
+	normalizeProps: (_tag, props) => {
+		return props;
+	}
+};
+/**
+* Creates a React runtime with custom createElement for advanced use cases.
+* Useful for wrapping elements or adding middleware.
+*/
+const createReactRuntime = (options = {}) => {
+	const { onCreateElement } = options;
+	if (onCreateElement) return {
+		...reactRuntime,
+		createElement: (type, props, ...children) => {
+			return onCreateElement(type, props, children);
+		}
+	};
+	return reactRuntime;
+};
+var runtime_default = reactRuntime;
+
+//#endregion
+exports.createReactRuntime = createReactRuntime;
+exports.default = runtime_default;
+exports.reactRuntime = reactRuntime;
+//# sourceMappingURL=runtime.cjs.map

package/dist/cjs/markdown/runtime.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.cjs","names":[],"sources":["../../../src/markdown/runtime.ts"],"sourcesContent":["/**\n * React-specific MarkdownRuntime implementation.\n *\n * This provides the React-specific createElement, cloneElement, and Fragment\n * implementations for the framework-agnostic markdown processor.\n *\n * This is part of the Solution F (Hybrid AST + Callback Pattern) implementation\n * for GitHub Issue #289: Adapt markdown parser in custom packages\n */\n\nimport type { HTMLTag, MarkdownRuntime } from '@intlayer/core';\nimport {\n  cloneElement,\n  createElement,\n  Fragment,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\n/**\n * React-specific runtime for the markdown processor.\n * Implements the MarkdownRuntime interface using React's primitives.\n */\nexport const reactRuntime: MarkdownRuntime = {\n  /**\n   * Creates a React element.\n   * Handles the conversion of props and children to React format.\n   */\n  createElement: (\n    type: string | any,\n    props: Record<string, any> | null,\n    ...children: any[]\n  ): ReactNode => {\n    // React accepts children as rest args or as a single array\n    // If there's only one child, pass it directly to avoid unnecessary array\n    if (children.length === 0) {\n      return createElement(type, props);\n    }\n    if (children.length === 1) {\n      return createElement(type, props, children[0]);\n    }\n    return createElement(type, props, ...children);\n  },\n\n  /**\n   * Clones a React element with new props.\n   */\n  cloneElement: (\n    element: unknown,\n    props: Record<string, any>,\n    ...children: any[]\n  ): ReactNode => {\n    if (children.length === 0) {\n      return cloneElement(element as ReactElement, props);\n    }\n    return cloneElement(element as ReactElement, props, ...children);\n  },\n\n  /**\n   * React Fragment component.\n   */\n  Fragment,\n\n  /**\n   * React-specific prop normalization.\n   * React uses className instead of class, htmlFor instead of for, etc.\n   * The core processor already handles ATTRIBUTE_TO_NODE_PROP_MAP,\n   * so this is mostly a no-op but can be used for additional React-specific transforms.\n   */\n  normalizeProps: (\n    _tag: HTMLTag,\n    props: Record<string, any>\n  ): Record<string, any> => {\n    // The core already handles class -> className and for -> htmlFor\n    // via ATTRIBUTE_TO_NODE_PROP_MAP in the attrStringToMap function.\n    // This hook is available for any additional React-specific transforms.\n    return props;\n  },\n};\n\n/**\n * Creates a React runtime with custom createElement for advanced use cases.\n * Useful for wrapping elements or adding middleware.\n */\nexport const createReactRuntime = (\n  options: {\n    onCreateElement?: (\n      type: string | any,\n      props: Record<string, any> | null,\n      children: any[]\n    ) => ReactNode;\n  } = {}\n): MarkdownRuntime => {\n  const { onCreateElement } = options;\n\n  if (onCreateElement) {\n    return {\n      ...reactRuntime,\n      createElement: (\n        type: string | any,\n        props: Record<string, any> | null,\n        ...children: any[]\n      ): ReactNode => {\n        return onCreateElement(type, props, children);\n      },\n    };\n  }\n\n  return reactRuntime;\n};\n\nexport default reactRuntime;\n"],"mappings":";;;;;;;;;AAuBA,MAAa,eAAgC;CAK3C,gBACE,MACA,OACA,GAAG,aACW;AAGd,MAAI,SAAS,WAAW,EACtB,iCAAqB,MAAM,MAAM;AAEnC,MAAI,SAAS,WAAW,EACtB,iCAAqB,MAAM,OAAO,SAAS,GAAG;AAEhD,kCAAqB,MAAM,OAAO,GAAG,SAAS;;CAMhD,eACE,SACA,OACA,GAAG,aACW;AACd,MAAI,SAAS,WAAW,EACtB,gCAAoB,SAAyB,MAAM;AAErD,iCAAoB,SAAyB,OAAO,GAAG,SAAS;;CAMlE;CAQA,iBACE,MACA,UACwB;AAIxB,SAAO;;CAEV;;;;;AAMD,MAAa,sBACX,UAMI,EAAE,KACc;CACpB,MAAM,EAAE,oBAAoB;AAE5B,KAAI,gBACF,QAAO;EACL,GAAG;EACH,gBACE,MACA,OACA,GAAG,aACW;AACd,UAAO,gBAAgB,MAAM,OAAO,SAAS;;EAEhD;AAGH,QAAO;;AAGT,sBAAe"}

package/dist/cjs/plugins.cjs

@@ -2,8 +2,10 @@ const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
 const require_IntlayerNode = require('./IntlayerNode.cjs');
 const require_editor_ContentSelectorWrapper = require('./editor/ContentSelectorWrapper.cjs');
 const require_editor_useEditedContentRenderer = require('./editor/useEditedContentRenderer.cjs');
-const require_markdown_MarkdownRenderer = require('./markdown/MarkdownRenderer.cjs');
+const require_html_HTMLRendererPlugin = require('./html/HTMLRendererPlugin.cjs');
+const require_markdown_MarkdownRendererPlugin = require('./markdown/MarkdownRendererPlugin.cjs');
 const require_reactElement_renderReactElement = require('./reactElement/renderReactElement.cjs');
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _intlayer_core = require("@intlayer/core");
 let _intlayer_types = require("@intlayer/types");
@@ -35,6 +37,49 @@ const reactNodePlugins = {
 		})
 	})
 };
+/**
+* Split insertion string and join with React nodes using shared core logic
+*/
+const splitAndJoinInsertion = (template, values) => {
+	const result = (0, _intlayer_core.splitInsertionTemplate)(template, values);
+	if (result.isSimple) return result.parts;
+	return (0, react.createElement)(react.Fragment, null, ...result.parts.map((part, index) => (0, react.createElement)(react.Fragment, { key: index }, part)));
+};
+/** Insertion plugin for React. Handles component/node insertion. */
+const insertionPlugin = {
+	id: "insertion-plugin",
+	canHandle: (node) => typeof node === "object" && node?.nodeType === _intlayer_types.NodeType.Insertion,
+	transform: (node, props, deepTransformNode) => {
+		const newKeyPath = [...props.keyPath, { type: _intlayer_types.NodeType.Insertion }];
+		const children = node[_intlayer_types.NodeType.Insertion];
+		/** Insertion string plugin. Replaces string node with a component that render the insertion. */
+		const insertionStringPlugin = {
+			id: "insertion-string-plugin",
+			canHandle: (node) => typeof node === "string",
+			transform: (node, subProps, deepTransformNode) => {
+				const transformedResult = deepTransformNode(node, {
+					...subProps,
+					children: node,
+					plugins: [...(props.plugins ?? []).filter((plugin) => plugin.id !== "intlayer-node-plugin")]
+				});
+				return (values) => {
+					const result = splitAndJoinInsertion(transformedResult, values);
+					return deepTransformNode(result, {
+						...subProps,
+						plugins: props.plugins,
+						children: result
+					});
+				};
+			}
+		};
+		return deepTransformNode(children, {
+			...props,
+			children,
+			keyPath: newKeyPath,
+			plugins: [insertionStringPlugin, ...props.plugins ?? []]
+		});
+	}
+};
 /** Markdown string plugin. Replaces string node with a component that render the markdown. */
 const markdownStringPlugin = {
 	id: "markdown-string-plugin",
@@ -45,14 +90,14 @@ const markdownStringPlugin = {
 			plugins: [{
 				id: "markdown-metadata-plugin",
 				canHandle: (metadataNode) => typeof metadataNode === "string" || typeof metadataNode === "number" || typeof metadataNode === "boolean" || !metadataNode,
-				transform: (metadataNode, props$1) => require_IntlayerNode.renderIntlayerNode({
-					...props$1,
+				transform: (metadataNode, props) => require_IntlayerNode.renderIntlayerNode({
+					...props,
 					value: metadataNode,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_editor_ContentSelectorWrapper.ContentSelectorRenderer, {
 						...rest,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_markdown_MarkdownRenderer.MarkdownMetadataRenderer, {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_markdown_MarkdownRendererPlugin.MarkdownMetadataRenderer, {
 							...rest,
-							metadataKeyPath: props$1.keyPath,
+							metadataKeyPath: props.keyPath,
 							children: node
 						})
 					})
@@ -61,18 +106,26 @@ const markdownStringPlugin = {
 			dictionaryKey: rest.dictionaryKey,
 			keyPath: []
 		});
-		return require_IntlayerNode.renderIntlayerNode({
+		const render = (components) => require_IntlayerNode.renderIntlayerNode({
 			...props,
 			value: node,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_editor_ContentSelectorWrapper.ContentSelectorRenderer, {
 				...rest,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_markdown_MarkdownRenderer.MarkdownRenderer, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_markdown_MarkdownRendererPlugin.MarkdownRendererPlugin, {
 					...rest,
+					...components,
 					children: node
 				})
 			}),
 			additionalProps: { metadata: metadataNodes }
 		});
+		const element = render();
+		return new Proxy(element, { get(target, prop, receiver) {
+			if (prop === "value") return node;
+			if (prop === "metadata") return metadataNodes;
+			if (prop === "use") return (components) => render(components);
+			return Reflect.get(target, prop, receiver);
+		} });
 	}
 };
 const markdownPlugin = {
@@ -89,8 +142,31 @@ const markdownPlugin = {
 		});
 	}
 };
+/** HTML plugin. Replaces node with a function that takes components => ReactNode. */
+const htmlPlugin = {
+	id: "html-plugin",
+	canHandle: (node) => typeof node === "object" && node?.nodeType === _intlayer_types.NodeType.HTML,
+	transform: (node, props) => {
+		const html = node[_intlayer_types.NodeType.HTML];
+		node.tags;
+		const { plugins, ...rest } = props;
+		const render = (userComponents) => (0, react.createElement)(require_html_HTMLRendererPlugin.HTMLRendererPlugin, {
+			...rest,
+			html,
+			userComponents
+		});
+		const element = render();
+		return new Proxy(element, { get(target, prop, receiver) {
+			if (prop === "value") return html;
+			if (prop === "use") return (userComponents) => render(userComponents);
+			return Reflect.get(target, prop, receiver);
+		} });
+	}
+};
 
 //#endregion
+exports.htmlPlugin = htmlPlugin;
+exports.insertionPlugin = insertionPlugin;
 exports.intlayerNodePlugins = intlayerNodePlugins;
 exports.markdownPlugin = markdownPlugin;
 exports.markdownStringPlugin = markdownStringPlugin;