react-intlayer/dist/cjs/markdown/MarkdownRenderer.cjs.map

Easily internationalize i18n your React applications with type-safe multilingual content management.

{"version":3,"file":"MarkdownRenderer.cjs","names":["compileMarkdown","useMarkdownContext"],"sources":["../../../src/markdown/MarkdownRenderer.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, JSX, ReactNode } from 'react';\nimport type { HTMLComponents } from '../html/HTMLComponentTypes';\nimport {\n  type MarkdownProviderOptions,\n  useMarkdownContext,\n} from './MarkdownProvider';\nimport {\n  compileMarkdown,\n  type MarkdownRendererOptions,\n  type ParsedMarkdown,\n} 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?: HTMLComponents<'permissive', {}>;\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<HTMLAttributes<HTMLElement>>;\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 | ParsedMarkdown,\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 compileMarkdown(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 | ParsedMarkdown) => {\n    if (context) {\n      return context.renderMarkdown(\n        content as any, // Context assumes string for now but we'll pass AST through\n        {\n          forceBlock,\n          forceInline,\n          preserveFrontmatter,\n          tagfilter,\n        },\n        components,\n        wrapper\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 | ParsedMarkdown;\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 | ParsedMarkdown,\n    options?: {\n      components?: HTMLComponents<'permissive', {}>;\n      wrapper?: FC;\n      forceBlock?: boolean;\n      forceInline?: boolean;\n      preserveFrontmatter?: boolean;\n      tagfilter?: boolean;\n    }\n  ) => ReactNode | Promise<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(\n          children,\n          {\n            forceBlock,\n            forceInline,\n            preserveFrontmatter,\n            tagfilter,\n          },\n          components,\n          wrapper\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 <>{compileMarkdown(children, internalOptions)}</>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,MAAa,kBACX,SACA,EACE,YACA,SACA,YACA,aACA,qBACA,cACuB,EAAE,KACX;AAYhB,QAAOA,2CAAgB,SAAS;EAT9B;EACA;EACA;EACA;EACA,cAAc,CAAC,CAAC;EAChB;EACA;EAG6C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDlD,MAAa,uBAAuB,EAClC,YACA,SACA,YACA,aACA,qBACA,cACuB,EAAE,KAAK;CAC9B,MAAM,UAAUC,sDAAoB;AAEpC,SAAQ,YAAqC;AAC3C,MAAI,QACF,QAAO,QAAQ,eACb,SACA;GACE;GACA;GACA;GACA;GACD,EACD,YACA,QACD;AAGH,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,EACD;AAIP,KAAI,QACF,QACE,mFACG,QAAQ,eACP,UACA;EACE;EACA;EACA;EACA;EACD,EACD,YACA,QACD,EACA;AAeP,QAAO,mFAAGD,2CAAgB,UAAU;EATlC;EACA;EACA;EACA;EACA,cAAc,CAAC,CAAC;EAChB;EACA;EAGiD,CAAC,EAAI"}