react-intlayer 8.0.0-canary.1 → 8.0.0-canary.2

package/dist/esm/markdown/MarkdownProvider.mjs

@@ -7,38 +7,77 @@ import { jsx } from "react/jsx-runtime";
 //#region src/markdown/MarkdownProvider.tsx
 const MarkdownContext = createContext(void 0);
 const useMarkdownContext = () => useContext(MarkdownContext);
-const MarkdownProvider = ({ children, components, wrapper, options = {}, renderMarkdown }) => {
-	const { forceBlock, preserveFrontmatter, tagfilter } = options;
-	const internalOptions = {
+const isRenderMarkdownOptions = (override) => {
+	return override && typeof override === "object" && ("components" in override || "wrapper" in override || "forceBlock" in override || "forceInline" in override || "preserveFrontmatter" in override || "tagfilter" in override);
+};
+const mergeOptions = (baseOptions, overrides) => {
+	if (!overrides) return baseOptions;
+	if (!isRenderMarkdownOptions(overrides)) return {
+		...baseOptions,
+		components: {
+			...baseOptions.components,
+			...overrides
+		}
+	};
+	const { components: overrideComponents, wrapper, forceBlock, forceInline, preserveFrontmatter, tagfilter, ...componentsFromRest } = overrides;
+	const components = overrideComponents || componentsFromRest;
+	return {
+		...baseOptions,
+		forceBlock: forceBlock ?? baseOptions.forceBlock,
+		forceInline: forceInline ?? baseOptions.forceInline,
+		preserveFrontmatter: preserveFrontmatter ?? baseOptions.preserveFrontmatter,
+		tagfilter: tagfilter ?? baseOptions.tagfilter,
+		wrapper: wrapper || baseOptions.wrapper,
+		forceWrapper: !!(wrapper || baseOptions.wrapper),
+		components: {
+			...baseOptions.components,
+			...components
+		}
+	};
+};
+/**
+* Provider for the MarkdownRenderer component.
+*
+* It will provide the `renderMarkdown` function to the context, which can be used to render markdown.
+*
+* ```tsx
+* const content = useIntlayer('app');
+*
+* return (
+*   <div>
+*     {content.markdown} // Will be rendered with the components and options provided to the MarkdownProvider
+*   </div>
+* );
+* ```
+*
+* @example
+* ```tsx
+* <MarkdownProvider components={{ h1: CustomHeading }}>
+*   <MarkdownRenderer>
+*     {markdownContent}
+*   </MarkdownRenderer>
+* </MarkdownProvider>
+* ```
+*/
+const MarkdownProvider = ({ children, components, wrapper, forceBlock, forceInline, preserveFrontmatter, tagfilter, renderMarkdown: customRenderFn }) => {
+	const baseOptions = {
 		components,
 		forceBlock,
+		forceInline,
 		wrapper,
 		forceWrapper: !!wrapper,
 		preserveFrontmatter,
 		tagfilter
 	};
-	const finalRenderMarkdown = renderMarkdown || ((markdown, componentsOverride) => {
-		const isOptionsObject = componentsOverride && (typeof componentsOverride.components === "object" || typeof componentsOverride.wrapper === "function" || typeof componentsOverride.options === "object");
-		const localComponents = isOptionsObject ? componentsOverride.components : componentsOverride;
-		const localWrapper = isOptionsObject ? componentsOverride.wrapper : void 0;
-		const localOptions = isOptionsObject ? componentsOverride.options : {};
-		const mergedOptions = {
-			...options,
-			...localOptions
-		};
-		return compiler(markdown, {
-			...internalOptions,
-			...mergedOptions,
-			wrapper: localWrapper || wrapper || internalOptions.wrapper,
-			forceWrapper: !!(localWrapper || wrapper),
-			components: {
-				...internalOptions.components,
-				...localComponents
-			}
-		});
+	const defaultRenderMarkdown = (markdown, overrides) => {
+		return compiler(markdown, mergeOptions(baseOptions, overrides));
+	};
+	const customRenderMarkdownWrapper = (markdown, overrides) => /* @__PURE__ */ jsx(MarkdownContext.Provider, {
+		value: void 0,
+		children: customRenderFn?.(markdown, overrides)
 	});
 	return /* @__PURE__ */ jsx(MarkdownContext.Provider, {
-		value: { renderMarkdown: finalRenderMarkdown },
+		value: { renderMarkdown: customRenderFn ? customRenderMarkdownWrapper : defaultRenderMarkdown },
 		children
 	});
 };

package/dist/esm/markdown/MarkdownProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownProvider.mjs","names":[],"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\ntype RenderMarkdownOptions = {\n  components?: Overrides;\n  wrapper?: FC;\n  options?: MarkdownProviderOptions;\n};\n\ntype MarkdownContextValue = {\n  renderMarkdown: (\n    markdown: string,\n    components?: Overrides | RenderMarkdownOptions\n  ) => ReactNode;\n};\n\n/**\n * Refined options for the MarkdownProvider.\n */\nexport type MarkdownProviderOptions = {\n  /**\n   * Forces the compiler to always output content with a block-level wrapper.\n   */\n  forceBlock?: boolean;\n  /**\n   * Whether to preserve frontmatter in the markdown content.\n   */\n  preserveFrontmatter?: boolean;\n  /**\n   * Whether to use the GitHub Tag Filter.\n   */\n  tagfilter?: boolean;\n};\n\ntype MarkdownProviderProps = PropsWithChildren<{\n  /**\n   * Component overrides for HTML tags.\n   */\n  components?: Overrides;\n  /**\n   * Wrapper element or component to be used when there are multiple children.\n   */\n  wrapper?: any;\n  /**\n   * Markdown processor options.\n   */\n  options?: MarkdownProviderOptions;\n  /**\n   * Custom render function for markdown.\n   * If provided, it will overwrite all rules and default rendering.\n   */\n  renderMarkdown?: (markdown: string, overrides?: Overrides) => ReactNode;\n}>;\n\nconst MarkdownContext = createContext<MarkdownContextValue | undefined>(\n  undefined\n);\n\nexport const useMarkdownContext = () => useContext(MarkdownContext);\n\nexport const MarkdownProvider: FC<MarkdownProviderProps> = ({\n  children,\n  components,\n  wrapper,\n  options = {},\n  renderMarkdown,\n}) => {\n  const { forceBlock, preserveFrontmatter, tagfilter } = options;\n\n  // Map public options to internal processor options\n  const internalOptions: MarkdownRendererOptions = {\n    components,\n    forceBlock,\n    wrapper,\n    forceWrapper: !!wrapper,\n    preserveFrontmatter,\n    tagfilter,\n  };\n\n  const finalRenderMarkdown =\n    renderMarkdown ||\n    ((\n      markdown: string,\n      componentsOverride?: Overrides | RenderMarkdownOptions\n    ) => {\n      const isOptionsObject =\n        componentsOverride &&\n        (typeof (componentsOverride as RenderMarkdownOptions).components ===\n          'object' ||\n          typeof (componentsOverride as RenderMarkdownOptions).wrapper ===\n            'function' ||\n          typeof (componentsOverride as RenderMarkdownOptions).options ===\n            'object');\n\n      const localComponents = isOptionsObject\n        ? (componentsOverride as RenderMarkdownOptions).components\n        : (componentsOverride as Overrides);\n      const localWrapper = isOptionsObject\n        ? (componentsOverride as RenderMarkdownOptions).wrapper\n        : undefined;\n      const localOptions = isOptionsObject\n        ? (componentsOverride as RenderMarkdownOptions).options\n        : {};\n\n      const mergedOptions = {\n        ...options,\n        ...localOptions,\n      };\n\n      return compiler(markdown, {\n        ...internalOptions,\n        ...mergedOptions,\n        wrapper: localWrapper || wrapper || internalOptions.wrapper,\n        forceWrapper: !!(localWrapper || wrapper),\n        components: {\n          ...internalOptions.components,\n          ...localComponents,\n        },\n      });\n    });\n\n  return (\n    <MarkdownContext.Provider value={{ renderMarkdown: finalRenderMarkdown }}>\n      {children}\n    </MarkdownContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;AA+DA,MAAM,kBAAkB,cACtB,OACD;AAED,MAAa,2BAA2B,WAAW,gBAAgB;AAEnE,MAAa,oBAA+C,EAC1D,UACA,YACA,SACA,UAAU,EAAE,EACZ,qBACI;CACJ,MAAM,EAAE,YAAY,qBAAqB,cAAc;CAGvD,MAAM,kBAA2C;EAC/C;EACA;EACA;EACA,cAAc,CAAC,CAAC;EAChB;EACA;EACD;CAED,MAAM,sBACJ,oBAEE,UACA,uBACG;EACH,MAAM,kBACJ,uBACC,OAAQ,mBAA6C,eACpD,YACA,OAAQ,mBAA6C,YACnD,cACF,OAAQ,mBAA6C,YACnD;EAEN,MAAM,kBAAkB,kBACnB,mBAA6C,aAC7C;EACL,MAAM,eAAe,kBAChB,mBAA6C,UAC9C;EACJ,MAAM,eAAe,kBAChB,mBAA6C,UAC9C,EAAE;EAEN,MAAM,gBAAgB;GACpB,GAAG;GACH,GAAG;GACJ;AAED,SAAO,SAAS,UAAU;GACxB,GAAG;GACH,GAAG;GACH,SAAS,gBAAgB,WAAW,gBAAgB;GACpD,cAAc,CAAC,EAAE,gBAAgB;GACjC,YAAY;IACV,GAAG,gBAAgB;IACnB,GAAG;IACJ;GACF,CAAC;;AAGN,QACE,oBAAC,gBAAgB;EAAS,OAAO,EAAE,gBAAgB,qBAAqB;EACrE;GACwB"}
+{"version":3,"file":"MarkdownProvider.mjs","names":[],"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,kBAAkB,cACtB,OACD;AAED,MAAa,2BAA2B,WAAW,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,SAAO,SAAS,UADM,aAAa,aAAa,UAAU,CAClB;;CAK1C,MAAM,+BACJ,UACA,cAEA,oBAAC,gBAAgB;EAAS,OAAO;YAC9B,iBAAiB,UAAU,UAAU;GACb;AAG7B,QACE,oBAAC,gBAAgB;EACf,OAAO,EACL,gBAAgB,iBACZ,8BACA,uBACL;EAEA;GACwB"}

package/dist/esm/markdown/MarkdownRenderer.mjs

@@ -4,22 +4,190 @@ import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/markdown/MarkdownRenderer.tsx
 /**
-* React component that renders markdown to JSX.
+* Renders markdown content to JSX with the provided components and options.
 *
-* It uses the renderMarkdown function from the MarkdownProvider context if available.
-* Otherwise, it falls back to the default compiler with 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 compiler(content, {
+		components,
+		forceBlock,
+		forceInline,
+		wrapper,
+		forceWrapper: !!wrapper,
+		preserveFrontmatter,
+		tagfilter
+	});
+};
+/**
+* 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 = 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, options = {} }) => {
+const MarkdownRenderer = ({ children = "", components, wrapper, forceBlock, forceInline, preserveFrontmatter, tagfilter, renderMarkdown }) => {
 	const context = useMarkdownContext();
+	if (renderMarkdown) return /* @__PURE__ */ jsx(Fragment, { children: renderMarkdown(children, {
+		components,
+		wrapper,
+		forceBlock,
+		forceInline,
+		preserveFrontmatter,
+		tagfilter
+	}) });
 	if (context) return /* @__PURE__ */ jsx(Fragment, { children: context.renderMarkdown(children, {
 		components,
 		wrapper,
-		options
+		forceBlock,
+		forceInline,
+		preserveFrontmatter,
+		tagfilter
 	}) });
-	const { forceBlock, preserveFrontmatter, tagfilter } = options;
 	return /* @__PURE__ */ jsx(Fragment, { children: compiler(children, {
 		components,
 		forceBlock,
+		forceInline,
 		wrapper,
 		forceWrapper: !!wrapper,
 		preserveFrontmatter,
@@ -28,5 +196,5 @@ const MarkdownRenderer = ({ children = "", components, wrapper, options = {} })
 };
 
 //#endregion
-export { MarkdownRenderer };
+export { MarkdownRenderer, renderMarkdown, useMarkdownRenderer };
 //# sourceMappingURL=MarkdownRenderer.mjs.map

package/dist/esm/markdown/MarkdownRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownRenderer.mjs","names":[],"sources":["../../../src/markdown/MarkdownRenderer.tsx"],"sourcesContent":["import type { Overrides } from '@intlayer/core';\nimport type { FC } from 'react';\nimport {\n  type MarkdownProviderOptions,\n  useMarkdownContext,\n} from './MarkdownProvider';\nimport { compiler, type MarkdownRendererOptions } from './processor';\n\ntype MarkdownRendererProps = {\n  /**\n   * The markdown content to render.\n   */\n  children: string;\n  /**\n   * Component overrides for HTML tags.\n   * Only used if not wrapped in a MarkdownProvider.\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  wrapper?: FC;\n  /**\n   * Markdown processor options.\n   * Only used if not wrapped in a MarkdownProvider.\n   */\n  options?: MarkdownProviderOptions;\n};\n\n/**\n * React component that renders markdown to JSX.\n *\n * It uses the renderMarkdown function from the MarkdownProvider context if available.\n * Otherwise, it falls back to the default compiler with provided components and options.\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children = '',\n  components,\n  wrapper,\n  options = {},\n}) => {\n  const context = useMarkdownContext();\n\n  if (context) {\n    return (\n      <>{context.renderMarkdown(children, { components, wrapper, options })}</>\n    );\n  }\n\n  const { forceBlock, preserveFrontmatter, tagfilter } = options;\n\n  // Map public options to internal processor options\n  const internalOptions: MarkdownRendererOptions = {\n    components,\n    forceBlock,\n    wrapper,\n    forceWrapper: !!wrapper,\n    preserveFrontmatter,\n    tagfilter,\n  };\n\n  return <>{compiler(children, internalOptions)}</>;\n};\n"],"mappings":";;;;;;;;;;;AAoCA,MAAa,oBAA+C,EAC1D,WAAW,IACX,YACA,SACA,UAAU,EAAE,OACR;CACJ,MAAM,UAAU,oBAAoB;AAEpC,KAAI,QACF,QACE,0CAAG,QAAQ,eAAe,UAAU;EAAE;EAAY;EAAS;EAAS,CAAC,GAAI;CAI7E,MAAM,EAAE,YAAY,qBAAqB,cAAc;AAYvD,QAAO,0CAAG,SAAS,UAT8B;EAC/C;EACA;EACA;EACA,cAAc,CAAC,CAAC;EAChB;EACA;EACD,CAE4C,GAAI"}
+{"version":3,"file":"MarkdownRenderer.mjs","names":[],"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,QAAO,SAAS,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,UAAU,oBAAoB;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,UAAU,oBAAoB;AAEpC,KAAI,eACF,QACE,0CACG,eAAe,UAAU;EACxB;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,GACD;AAIP,KAAI,QACF,QACE,0CACG,QAAQ,eAAe,UAAU;EAChC;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,GACD;AAeP,QAAO,0CAAG,SAAS,UAV8B;EAC/C;EACA;EACA;EACA;EACA,cAAc,CAAC,CAAC;EAChB;EACA;EACD,CAE4C,GAAI"}

package/dist/esm/markdown/MarkdownRendererPlugin.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownRendererPlugin.mjs","names":[],"sources":["../../../src/markdown/MarkdownRendererPlugin.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 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":";;;;;;;;AAqBA,MAAa,0BACX,UACc;CACd,MAAM,EAAE,eAAe,SAAS,UAAU,QAAQ,GAAG,eAAe;CAEpE,MAAM,iBADU,oBAAoB,EACJ,oBAAoB,OAAO;CAC3D,MAAM,uBAAuB,yBAAyB;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,uBAAuB,yBAAyB;EACpD;EACA;EACA;EACD,CAAC;CACF,MAAM,gBAAgB,iBAAiB;AAUvC,QANmB,wBAFF,oBAAoB,qBAAqB,EAIxD,iBACA,cACD"}
+{"version":3,"file":"MarkdownRendererPlugin.mjs","names":[],"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,iBADU,oBAAoB,EACJ,oBAAoB,OAAO;CAC3D,MAAM,uBAAuB,yBAAyB;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,uBAAuB,yBAAyB;EACpD;EACA;EACA;EACD,CAAC;CACF,MAAM,gBAAgB,iBAAiB;AAUvC,QANmB,wBAFF,oBAAoB,qBAAqB,EAIxD,iBACA,cACD"}

package/dist/esm/markdown/index.mjs

@@ -1,7 +1,7 @@
 import { LegacyMarkdownRenderer, RuleType, compile, compileMarkdown, compiler, sanitizer as defaultSanitizer, slugify as defaultSlugify } from "./processor.mjs";
 import { MarkdownProvider, useMarkdownContext } from "./MarkdownProvider.mjs";
-import { MarkdownRenderer } from "./MarkdownRenderer.mjs";
+import { MarkdownRenderer, renderMarkdown, useMarkdownRenderer } from "./MarkdownRenderer.mjs";
 import { MarkdownMetadataRenderer, MarkdownRendererPlugin } from "./MarkdownRendererPlugin.mjs";
 import { createReactRuntime, reactRuntime } from "./runtime.mjs";
 
-export { LegacyMarkdownRenderer, MarkdownMetadataRenderer, MarkdownProvider, MarkdownRenderer, MarkdownRendererPlugin, RuleType, compile, compileMarkdown, compiler, createReactRuntime, reactRuntime, defaultSanitizer as sanitizer, defaultSlugify as slugify, useMarkdownContext };
+export { LegacyMarkdownRenderer, MarkdownMetadataRenderer, MarkdownProvider, MarkdownRenderer, MarkdownRendererPlugin, RuleType, compile, compileMarkdown, compiler, createReactRuntime, reactRuntime, renderMarkdown, defaultSanitizer as sanitizer, defaultSlugify as slugify, useMarkdownContext, useMarkdownRenderer };

package/dist/esm/markdown/processor.mjs

@@ -3,11 +3,6 @@ import { RuleType, compile as compile$1, sanitizer as defaultSanitizer, slugify
 
 //#region src/markdown/processor.tsx
 /**
-* React adapter for the framework-agnostic markdown processor.
-*
-* Provides a backward-compatible compiler and LegacyMarkdownRenderer component.
-*/
-/**
 * Default React runtime for markdown rendering.
 */
 const DEFAULT_RUNTIME = {

package/dist/esm/markdown/processor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"processor.mjs","names":["coreCompile"],"sources":["../../../src/markdown/processor.tsx"],"sourcesContent":["/**\n * React adapter for the framework-agnostic markdown processor.\n *\n * Provides a backward-compatible compiler and LegacyMarkdownRenderer component.\n */\n\nimport {\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":";;;;;;;;;;;;AAmIA,MAAM,kBAAmC;CACxB;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,QAAOA,UAAY,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,QAAO,aACL,SAAS,UAAU,QAAQ,EAC3B,MACD"}
+{"version":3,"file":"processor.mjs","names":["coreCompile"],"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;CACxB;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,QAAOA,UAAY,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,QAAO,aACL,SAAS,UAAU,QAAQ,EAC3B,MACD"}

package/dist/esm/plugins.mjs

@@ -4,9 +4,9 @@ import { EditedContentRenderer } from "./editor/useEditedContentRenderer.mjs";
 import { HTMLRendererPlugin } from "./html/HTMLRendererPlugin.mjs";
 import { MarkdownMetadataRenderer, MarkdownRendererPlugin } from "./markdown/MarkdownRendererPlugin.mjs";
 import { renderReactElement } from "./reactElement/renderReactElement.mjs";
-import { createElement } from "react";
+import { Fragment, createElement } from "react";
 import { jsx } from "react/jsx-runtime";
-import { getMarkdownMetadata } from "@intlayer/core";
+import { getMarkdownMetadata, splitInsertionTemplate } from "@intlayer/core";
 import { NodeType } from "@intlayer/types";
 
 //#region src/plugins.tsx
@@ -36,6 +36,49 @@ const reactNodePlugins = {
 		})
 	})
 };
+/**
+* Split insertion string and join with React nodes using shared core logic
+*/
+const splitAndJoinInsertion = (template, values) => {
+	const result = splitInsertionTemplate(template, values);
+	if (result.isSimple) return result.parts;
+	return createElement(Fragment, null, ...result.parts.map((part, index) => createElement(Fragment, { key: index }, part)));
+};
+/** Insertion plugin for React. Handles component/node insertion. */
+const insertionPlugin = {
+	id: "insertion-plugin",
+	canHandle: (node) => typeof node === "object" && node?.nodeType === NodeType.Insertion,
+	transform: (node, props, deepTransformNode) => {
+		const newKeyPath = [...props.keyPath, { type: NodeType.Insertion }];
+		const children = node[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",
@@ -46,14 +89,14 @@ const markdownStringPlugin = {
 			plugins: [{
 				id: "markdown-metadata-plugin",
 				canHandle: (metadataNode) => typeof metadataNode === "string" || typeof metadataNode === "number" || typeof metadataNode === "boolean" || !metadataNode,
-				transform: (metadataNode, props$1) => renderIntlayerNode({
-					...props$1,
+				transform: (metadataNode, props) => renderIntlayerNode({
+					...props,
 					value: metadataNode,
 					children: /* @__PURE__ */ jsx(ContentSelectorRenderer, {
 						...rest,
 						children: /* @__PURE__ */ jsx(MarkdownMetadataRenderer, {
 							...rest,
-							metadataKeyPath: props$1.keyPath,
+							metadataKeyPath: props.keyPath,
 							children: node
 						})
 					})
@@ -86,7 +129,7 @@ const markdownStringPlugin = {
 };
 const markdownPlugin = {
 	id: "markdown-plugin",
-	canHandle: (node) => typeof node === "object" && (node?.nodeType === NodeType.Markdown || node?.nodeType === "markdown"),
+	canHandle: (node) => typeof node === "object" && node?.nodeType === NodeType.Markdown,
 	transform: (node, props, deepTransformNode) => {
 		const newKeyPath = [...props.keyPath, { type: NodeType.Markdown }];
 		const children = node[NodeType.Markdown];
@@ -101,9 +144,10 @@ 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 === NodeType.HTML || node?.nodeType === "html"),
+	canHandle: (node) => typeof node === "object" && node?.nodeType === NodeType.HTML,
 	transform: (node, props) => {
 		const html = node[NodeType.HTML];
+		node.tags;
 		const { plugins, ...rest } = props;
 		const render = (userComponents) => createElement(HTMLRendererPlugin, {
 			...rest,
@@ -120,5 +164,5 @@ const htmlPlugin = {
 };
 
 //#endregion
-export { htmlPlugin, intlayerNodePlugins, markdownPlugin, markdownStringPlugin, reactNodePlugins };
+export { htmlPlugin, insertionPlugin, intlayerNodePlugins, markdownPlugin, markdownStringPlugin, reactNodePlugins };
 //# sourceMappingURL=plugins.mjs.map

package/dist/esm/plugins.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"plugins.mjs","names":["props"],"sources":["../../src/plugins.tsx"],"sourcesContent":["import {\n  type DeepTransformContent as DeepTransformContentCore,\n  getMarkdownMetadata,\n  type HTMLCond,\n  type HTMLContent,\n  type IInterpreterPluginState as IInterpreterPluginStateCore,\n  type MarkdownContent,\n  type Plugins,\n} from '@intlayer/core';\nimport {\n  type DeclaredLocales,\n  type KeyPath,\n  type LocalesValues,\n  NodeType,\n} from '@intlayer/types';\nimport { createElement, type ReactElement, type ReactNode } from 'react';\nimport { ContentSelectorRenderer } from './editor';\nimport { EditedContentRenderer } from './editor/useEditedContentRenderer';\nimport { HTMLRendererPlugin } from './html';\nimport { type IntlayerNode, renderIntlayerNode } from './IntlayerNode';\nimport { MarkdownMetadataRenderer, MarkdownRendererPlugin } from './markdown';\nimport { renderReactElement } from './reactElement/renderReactElement';\n\n/** ---------------------------------------------\n *  INTLAYER NODE PLUGIN\n *  --------------------------------------------- */\n\nexport type IntlayerNodeCond<T> = T extends number | string\n  ? IntlayerNode<T>\n  : never;\n\n/** Translation plugin. Replaces node with a locale string if nodeType = Translation. */\nexport const intlayerNodePlugins: Plugins = {\n  id: 'intlayer-node-plugin',\n  canHandle: (node) =>\n    typeof node === 'bigint' ||\n    typeof node === 'string' ||\n    typeof node === 'number',\n  transform: (\n    _node,\n    {\n      plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components\n      ...rest\n    }\n  ) =>\n    renderIntlayerNode({\n      ...rest,\n      value: rest.children,\n      children: (\n        <EditedContentRenderer {...rest}>{rest.children}</EditedContentRenderer>\n      ),\n    }),\n};\n\n/** ---------------------------------------------\n *  REACT NODE PLUGIN\n *  --------------------------------------------- */\n\nexport type ReactNodeCond<T> = T extends {\n  props: any;\n  key: any;\n}\n  ? ReactNode\n  : never;\n\n/** Translation plugin. Replaces node with a locale string if nodeType = Translation. */\nexport const reactNodePlugins: Plugins = {\n  id: 'react-node-plugin',\n  canHandle: (node) =>\n    typeof node === 'object' &&\n    typeof node?.props !== 'undefined' &&\n    typeof node.key !== 'undefined',\n\n  transform: (\n    node,\n    {\n      plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components\n      ...rest\n    }\n  ) =>\n    renderIntlayerNode({\n      ...rest,\n      value: '[[react-element]]',\n      children: (\n        <ContentSelectorRenderer {...rest}>\n          {renderReactElement(node)}\n        </ContentSelectorRenderer>\n      ),\n    }),\n};\n\n/**\n * MARKDOWN PLUGIN\n */\n\nexport type MarkdownStringCond<T> = T extends string\n  ? IntlayerNode<string, { metadata: DeepTransformContent<string> }>\n  : never;\n\n/** Markdown string plugin. Replaces string node with a component that render the markdown. */\nexport const markdownStringPlugin: Plugins = {\n  id: 'markdown-string-plugin',\n  canHandle: (node) => typeof node === 'string',\n  transform: (node: string, props, deepTransformNode) => {\n    const {\n      plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components\n      ...rest\n    } = props;\n\n    const metadata = getMarkdownMetadata(node);\n\n    const metadataPlugins: Plugins = {\n      id: 'markdown-metadata-plugin',\n      canHandle: (metadataNode) =>\n        typeof metadataNode === 'string' ||\n        typeof metadataNode === 'number' ||\n        typeof metadataNode === 'boolean' ||\n        !metadataNode,\n      transform: (metadataNode, props) =>\n        renderIntlayerNode({\n          ...props,\n          value: metadataNode,\n          children: (\n            <ContentSelectorRenderer {...rest}>\n              <MarkdownMetadataRenderer\n                {...rest}\n                metadataKeyPath={props.keyPath}\n              >\n                {node}\n              </MarkdownMetadataRenderer>\n            </ContentSelectorRenderer>\n          ),\n        }),\n    };\n\n    // Transform metadata while keeping the same structure\n    const metadataNodes = deepTransformNode(metadata, {\n      plugins: [metadataPlugins],\n      dictionaryKey: rest.dictionaryKey,\n      keyPath: [],\n    });\n\n    const render = (components?: any) =>\n      renderIntlayerNode({\n        ...props,\n        value: node,\n        children: (\n          <ContentSelectorRenderer {...rest}>\n            <MarkdownRendererPlugin {...rest} {...components}>\n              {node}\n            </MarkdownRendererPlugin>\n          </ContentSelectorRenderer>\n        ),\n        additionalProps: {\n          metadata: metadataNodes,\n        },\n      });\n\n    const element = render() as ReactElement;\n\n    return new Proxy(element, {\n      get(target, prop, receiver) {\n        if (prop === 'value') {\n          return node;\n        }\n        if (prop === 'metadata') {\n          return metadataNodes;\n        }\n\n        if (prop === 'use') {\n          return (components?: any) => render(components);\n        }\n\n        return Reflect.get(target, prop, receiver);\n      },\n    }) as any;\n  },\n};\n\nexport type MarkdownCond<T, S, L extends LocalesValues> = T extends {\n  nodeType: NodeType | string;\n  [NodeType.Markdown]: infer M;\n  metadata?: infer U;\n}\n  ? {\n      use: (components: any) => any;\n      metadata: DeepTransformContent<U, L>;\n    } & any\n  : never;\n\nexport const markdownPlugin: Plugins = {\n  id: 'markdown-plugin',\n  canHandle: (node) =>\n    typeof node === 'object' &&\n    (node?.nodeType === NodeType.Markdown || node?.nodeType === 'markdown'),\n  transform: (node: MarkdownContent, props, deepTransformNode) => {\n    const newKeyPath: KeyPath[] = [\n      ...props.keyPath,\n      {\n        type: NodeType.Markdown,\n      },\n    ];\n\n    const children = node[NodeType.Markdown];\n\n    return deepTransformNode(children, {\n      ...props,\n      children,\n      keyPath: newKeyPath,\n      plugins: [markdownStringPlugin, ...(props.plugins ?? [])],\n    });\n  },\n};\n\n/** ---------------------------------------------\n *  HTML PLUGIN\n *  --------------------------------------------- */\n\nexport type HTMLPluginCond<T, S, L> = HTMLCond<T, S, L>;\n\n/** HTML plugin. Replaces node with a function that takes components => ReactNode. */\nexport const htmlPlugin: Plugins = {\n  id: 'html-plugin',\n  canHandle: (node) =>\n    typeof node === 'object' &&\n    (node?.nodeType === NodeType.HTML || node?.nodeType === 'html'),\n\n  transform: (node: HTMLContent, props) => {\n    const html = node[NodeType.HTML];\n    const { plugins, ...rest } = props;\n\n    const render = (userComponents?: Record<string, any>): ReactNode =>\n      createElement(HTMLRendererPlugin, { ...rest, html, userComponents });\n\n    const element = render() as ReactElement;\n\n    return new Proxy(element, {\n      get(target, prop, receiver) {\n        if (prop === 'value') {\n          return html;\n        }\n\n        if (prop === 'use') {\n          return (userComponents?: Record<string, any>) =>\n            render(userComponents);\n        }\n\n        return Reflect.get(target, prop, receiver);\n      },\n    }) as any;\n  },\n};\n\n/** ---------------------------------------------\n *  PLUGINS RESULT\n *  --------------------------------------------- */\n\nexport interface IInterpreterPluginReact<T, S, L extends LocalesValues> {\n  reactNode: ReactNodeCond<T>;\n  reactIntlayerNode: IntlayerNodeCond<T>;\n  reactMarkdown: MarkdownCond<T, S, L>;\n  reactHtml: HTMLPluginCond<T, S, L>;\n}\n\n/**\n * Insert this type as param of `DeepTransformContent` to avoid `intlayer` package pollution.\n *\n * Otherwise the the `react-intlayer` plugins will override the types of `intlayer` functions.\n */\nexport type IInterpreterPluginState = IInterpreterPluginStateCore & {\n  reactNode: true;\n  reactIntlayerNode: true;\n  reactMarkdown: true;\n  reactHtml: true;\n};\n\nexport type DeepTransformContent<\n  T,\n  L extends LocalesValues = DeclaredLocales,\n> = DeepTransformContentCore<T, IInterpreterPluginState, L>;\n"],"mappings":"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"}
+{"version":3,"file":"plugins.mjs","names":[],"sources":["../../src/plugins.tsx"],"sourcesContent":["import {\n  type DeepTransformContent as DeepTransformContentCore,\n  getMarkdownMetadata,\n  type HTMLCond,\n  type HTMLContent,\n  type IInterpreterPluginState as IInterpreterPluginStateCore,\n  type InsertionContent,\n  type MarkdownContent,\n  type Plugins,\n  splitInsertionTemplate,\n} from '@intlayer/core';\nimport {\n  type DeclaredLocales,\n  type KeyPath,\n  type LocalesValues,\n  NodeType,\n} from '@intlayer/types';\nimport {\n  type ComponentType,\n  createElement,\n  type ElementType,\n  Fragment,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { ContentSelectorRenderer } from './editor';\nimport { EditedContentRenderer } from './editor/useEditedContentRenderer';\nimport { HTMLRendererPlugin } from './html';\nimport type { ReactHTMLComponentMap } from './html/types';\nimport { type IntlayerNode, renderIntlayerNode } from './IntlayerNode';\nimport { MarkdownMetadataRenderer, MarkdownRendererPlugin } from './markdown';\nimport { renderReactElement } from './reactElement/renderReactElement';\n\n/** ---------------------------------------------\n *  INTLAYER NODE PLUGIN\n *  --------------------------------------------- */\n\nexport type IntlayerNodeCond<T> = T extends number | string\n  ? IntlayerNode<T>\n  : never;\n\n/** Translation plugin. Replaces node with a locale string if nodeType = Translation. */\nexport const intlayerNodePlugins: Plugins = {\n  id: 'intlayer-node-plugin',\n  canHandle: (node) =>\n    typeof node === 'bigint' ||\n    typeof node === 'string' ||\n    typeof node === 'number',\n  transform: (\n    _node,\n    {\n      plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components\n      ...rest\n    }\n  ) =>\n    renderIntlayerNode({\n      ...rest,\n      value: rest.children,\n      children: (\n        <EditedContentRenderer {...rest}>{rest.children}</EditedContentRenderer>\n      ),\n    }),\n};\n\n/** ---------------------------------------------\n *  REACT NODE PLUGIN\n *  --------------------------------------------- */\n\nexport type ReactNodeCond<T> = T extends {\n  props: any;\n  key: any;\n}\n  ? ReactNode\n  : never;\n\n/** Translation plugin. Replaces node with a locale string if nodeType = Translation. */\nexport const reactNodePlugins: Plugins = {\n  id: 'react-node-plugin',\n  canHandle: (node) =>\n    typeof node === 'object' &&\n    typeof node?.props !== 'undefined' &&\n    typeof node.key !== 'undefined',\n\n  transform: (\n    node,\n    {\n      plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components\n      ...rest\n    }\n  ) =>\n    renderIntlayerNode({\n      ...rest,\n      value: '[[react-element]]',\n      children: (\n        <ContentSelectorRenderer {...rest}>\n          {renderReactElement(node)}\n        </ContentSelectorRenderer>\n      ),\n    }),\n};\n\n/** ---------------------------------------------\n *  INSERTION PLUGIN\n *  --------------------------------------------- */\n\nexport type InsertionCond<T, S, L> = T extends {\n  nodeType: NodeType | string;\n  [NodeType.Insertion]: string;\n  fields: readonly string[];\n}\n  ? (\n      values: {\n        [K in T['fields'][number]]: ReactNode;\n      }\n    ) => ReactNode\n  : never;\n\n/**\n * Split insertion string and join with React nodes using shared core logic\n */\nconst splitAndJoinInsertion = (\n  template: string,\n  values: Record<string, string | number | ReactNode>\n): ReactNode => {\n  const result = splitInsertionTemplate(template, values);\n\n  if (result.isSimple) {\n    // Simple string replacement\n    return result.parts as string;\n  }\n\n  // Return as Fragment with proper keys\n  return createElement(\n    Fragment,\n    null,\n    ...(result.parts as any[]).map((part, index) =>\n      createElement(Fragment, { key: index }, part)\n    )\n  );\n};\n\n/** Insertion plugin for React. Handles component/node insertion. */\nexport const insertionPlugin: Plugins = {\n  id: 'insertion-plugin',\n  canHandle: (node) =>\n    typeof node === 'object' && node?.nodeType === NodeType.Insertion,\n  transform: (node: InsertionContent, props, deepTransformNode) => {\n    const newKeyPath: KeyPath[] = [\n      ...props.keyPath,\n      {\n        type: NodeType.Insertion,\n      },\n    ];\n\n    const children = node[NodeType.Insertion];\n\n    /** Insertion string plugin. Replaces string node with a component that render the insertion. */\n    const insertionStringPlugin: Plugins = {\n      id: 'insertion-string-plugin',\n      canHandle: (node) => typeof node === 'string',\n      transform: (node: string, subProps, deepTransformNode) => {\n        const transformedResult = deepTransformNode(node, {\n          ...subProps,\n          children: node,\n          plugins: [\n            ...(props.plugins ?? ([] as Plugins[])).filter(\n              (plugin) => plugin.id !== 'intlayer-node-plugin'\n            ),\n          ],\n        });\n\n        return (\n          values: {\n            [K in InsertionContent['fields'][number]]:\n              | string\n              | number\n              | ReactNode;\n          }\n        ) => {\n          const result = splitAndJoinInsertion(transformedResult, values);\n\n          return deepTransformNode(result, {\n            ...subProps,\n            plugins: props.plugins,\n            children: result,\n          });\n        };\n      },\n    };\n\n    return deepTransformNode(children, {\n      ...props,\n      children,\n      keyPath: newKeyPath,\n      plugins: [insertionStringPlugin, ...(props.plugins ?? [])],\n    });\n  },\n};\n\n/**\n * MARKDOWN PLUGIN\n */\n\nexport type MarkdownStringCond<T> = T extends string\n  ? IntlayerNode<\n      string,\n      { metadata: DeepTransformContent<string>; use: (components: any) => any }\n    >\n  : never;\n\n/** Markdown string plugin. Replaces string node with a component that render the markdown. */\nexport const markdownStringPlugin: Plugins = {\n  id: 'markdown-string-plugin',\n  canHandle: (node) => typeof node === 'string',\n  transform: (node: string, props, deepTransformNode) => {\n    const {\n      plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components\n      ...rest\n    } = props;\n\n    const metadata = getMarkdownMetadata(node);\n\n    const metadataPlugins: Plugins = {\n      id: 'markdown-metadata-plugin',\n      canHandle: (metadataNode) =>\n        typeof metadataNode === 'string' ||\n        typeof metadataNode === 'number' ||\n        typeof metadataNode === 'boolean' ||\n        !metadataNode,\n      transform: (metadataNode, props) =>\n        renderIntlayerNode({\n          ...props,\n          value: metadataNode,\n          children: (\n            <ContentSelectorRenderer {...rest}>\n              <MarkdownMetadataRenderer\n                {...rest}\n                metadataKeyPath={props.keyPath}\n              >\n                {node}\n              </MarkdownMetadataRenderer>\n            </ContentSelectorRenderer>\n          ),\n        }),\n    };\n\n    // Transform metadata while keeping the same structure\n    const metadataNodes = deepTransformNode(metadata, {\n      plugins: [metadataPlugins],\n      dictionaryKey: rest.dictionaryKey,\n      keyPath: [],\n    });\n\n    const render = (components?: any) =>\n      renderIntlayerNode({\n        ...props,\n        value: node,\n        children: (\n          <ContentSelectorRenderer {...rest}>\n            <MarkdownRendererPlugin {...rest} {...components}>\n              {node}\n            </MarkdownRendererPlugin>\n          </ContentSelectorRenderer>\n        ),\n        additionalProps: {\n          metadata: metadataNodes,\n        },\n      });\n\n    const element = render() as ReactElement;\n\n    return new Proxy(element, {\n      get(target, prop, receiver) {\n        if (prop === 'value') {\n          return node;\n        }\n        if (prop === 'metadata') {\n          return metadataNodes;\n        }\n\n        if (prop === 'use') {\n          return (components?: any) => render(components);\n        }\n\n        return Reflect.get(target, prop, receiver);\n      },\n    }) as any;\n  },\n};\n\ntype MarkdownComponentMap = Record<string, ComponentType<any> | ElementType>;\n\nexport type MarkdownCond<T, S, L extends LocalesValues> = T extends {\n  nodeType: NodeType | string;\n  [NodeType.Markdown]: infer M;\n  metadata?: infer U;\n}\n  ? {\n      use: (components?: MarkdownComponentMap) => ReactNode;\n      metadata: DeepTransformContent<U, L>;\n    } & any\n  : never;\n\nexport const markdownPlugin: Plugins = {\n  id: 'markdown-plugin',\n  canHandle: (node) =>\n    typeof node === 'object' && node?.nodeType === NodeType.Markdown,\n  transform: (node: MarkdownContent, props, deepTransformNode) => {\n    const newKeyPath: KeyPath[] = [\n      ...props.keyPath,\n      {\n        type: NodeType.Markdown,\n      },\n    ];\n\n    const children = node[NodeType.Markdown];\n\n    return deepTransformNode(children, {\n      ...props,\n      children,\n      keyPath: newKeyPath,\n      plugins: [markdownStringPlugin, ...(props.plugins ?? [])],\n    });\n  },\n};\n\n/** ---------------------------------------------\n *  HTML PLUGIN\n *  --------------------------------------------- */\n\nexport type HTMLPluginCond<T, S, L> = HTMLCond<T, S, L>;\n\n/** HTML plugin. Replaces node with a function that takes components => ReactNode. */\nexport const htmlPlugin: Plugins = {\n  id: 'html-plugin',\n  canHandle: (node) =>\n    typeof node === 'object' && node?.nodeType === NodeType.HTML,\n\n  transform: (node: HTMLContent<string>, props) => {\n    const html = node[NodeType.HTML];\n    const tags = node.tags ?? [];\n    const { plugins, ...rest } = props;\n\n    // Type-safe render function that accepts properly typed components\n    const render = <\n      T = typeof tags extends readonly (infer U extends string)[]\n        ? U\n        : typeof tags,\n    >(\n      userComponents?: ReactHTMLComponentMap<T>\n    ): ReactNode =>\n      createElement(HTMLRendererPlugin, { ...rest, html, userComponents });\n\n    const element = render() as ReactElement;\n\n    return new Proxy(element, {\n      get(target, prop, receiver) {\n        if (prop === 'value') {\n          return html;\n        }\n\n        if (prop === 'use') {\n          // Return a properly typed function based on custom components\n          return <\n            T = typeof tags extends readonly (infer U extends string)[]\n              ? U\n              : typeof tags,\n          >(\n            userComponents?: ReactHTMLComponentMap<T>\n          ) => render(userComponents);\n        }\n\n        return Reflect.get(target, prop, receiver);\n      },\n    }) as any;\n  },\n};\n\n/** ---------------------------------------------\n *  PLUGINS RESULT\n *  --------------------------------------------- */\n\nexport interface IInterpreterPluginReact<T, S, L extends LocalesValues> {\n  reactNode: ReactNodeCond<T>;\n  reactIntlayerNode: IntlayerNodeCond<T>;\n  reactInsertion: InsertionCond<T, S, L>;\n  reactMarkdown: MarkdownCond<T, S, L>;\n  reactHtml: HTMLPluginCond<T, S, L>;\n}\n\n/**\n * Insert this type as param of `DeepTransformContent` to avoid `intlayer` package pollution.\n *\n * Otherwise the the `react-intlayer` plugins will override the types of `intlayer` functions.\n */\nexport type IInterpreterPluginState = IInterpreterPluginStateCore & {\n  reactNode: true;\n  reactIntlayerNode: true;\n  reactInsertion: true;\n  reactMarkdown: true;\n  reactHtml: true;\n};\n\nexport type DeepTransformContent<\n  T,\n  L extends LocalesValues = DeclaredLocales,\n> = DeepTransformContentCore<T, IInterpreterPluginState, L>;\n"],"mappings":"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"}