@intlayer/design-system 7.6.0-canary.1 → 8.0.0-canary.0

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport type { CodeCompAttributes } from '../IDE/Code';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\nimport { MarkdownProcessor, type MarkdownProcessorOptions } from './processor';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  options?: MarkdownProcessorOptions;\n};\n\n/**\n * Removes frontmatter from markdown content\n * Frontmatter is the YAML metadata block at the beginning of markdown files\n * delimited by --- at the start and end\n */\nconst stripFrontmatter = (markdown: string): string => {\n  const lines = markdown.split(/\\r?\\n/);\n\n  // Check if the very first non-empty line is the metadata start delimiter\n  const firstNonEmptyLine = lines.find((line) => line.trim() !== '');\n\n  if (!firstNonEmptyLine || firstNonEmptyLine.trim() !== '---') {\n    // No frontmatter, return original content\n    return markdown;\n  }\n\n  let inMetadataBlock = false;\n  let endOfMetadataIndex = -1;\n\n  for (let i = 0; i < lines.length; i++) {\n    const trimmedLine = lines[i].trim();\n\n    // Toggle metadata block on encountering the delimiter\n    if (trimmedLine === '---') {\n      if (!inMetadataBlock) {\n        // Begin metadata block\n        inMetadataBlock = true;\n      } else {\n        // End of metadata block\n        endOfMetadataIndex = i;\n        break;\n      }\n    }\n  }\n\n  if (endOfMetadataIndex > -1) {\n    // Return content after the frontmatter\n    return lines.slice(endOfMetadataIndex + 1).join('\\n');\n  }\n\n  // If we couldn't find the end delimiter, return original content\n  return markdown;\n};\n\n/**\n * MarkdownRenderer Component\n *\n * A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * const markdownContent = `\n * # Hello World\n * This is **bold** and *italic* text.\n * `;\n *\n * <MarkdownRenderer>{markdownContent}</MarkdownRenderer>\n * ```\n *\n * @example\n * With dark mode:\n * ```tsx\n * const codeExample = `\n * # API Documentation\n * \\`\\`\\`javascript\n * const response = await fetch('/api/data');\n * const data = await response.json();\n * \\`\\`\\`\n * `;\n *\n * <MarkdownRenderer isDarkMode={true}>\n *   {codeExample}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * With internationalized links:\n * ```tsx\n * const content = `\n * Visit our [documentation](/docs) for more information.\n * External link: [Google](https://google.com)\n * `;\n *\n * <MarkdownRenderer locale=\"fr\">\n *   {content}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * With custom overrides:\n * ```tsx\n * const customOptions = {\n *   overrides: {\n *     h1: ({ children }) => (\n *       <h1 className=\"custom-title\">{children}</h1>\n *     ),\n *   },\n * };\n *\n * <MarkdownRenderer options={customOptions}>\n *   {markdownContent}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * With frontmatter (automatically stripped):\n * ```tsx\n * const blogPost = `\n * ---\n * title: \"My Blog Post\"\n * date: \"2023-12-01\"\n * author: \"John Doe\"\n * ---\n * # My Blog Post\n * This content will be rendered without the frontmatter.\n * `;\n *\n * <MarkdownRenderer>{blogPost}</MarkdownRenderer>\n * ```\n *\n * Features:\n * - Automatic frontmatter detection and removal\n * - Syntax-highlighted code blocks with theme support\n * - Clickable headers with anchor links\n * - Internationalized link handling with locale awareness\n * - Responsive tables with hover effects\n * - Custom blockquote, list, and image styling\n * - External link detection and security attributes\n * - Inline code with distinctive styling\n * - Lazy-loaded images with GitHub raw URL support\n * - Horizontal rules with custom styling\n *\n * Supported Markdown Elements:\n * - Headers (h1-h4) with click-to-anchor functionality\n * - Code blocks with language-specific syntax highlighting\n * - Inline code with background styling\n * - Blockquotes with custom border and padding\n * - Ordered and unordered lists with custom spacing\n * - Links (internal and external) with security attributes\n * - Images with lazy loading and responsive sizing\n * - Tables with hover effects and proper styling\n * - Horizontal rules with custom appearance\n * - All standard markdown formatting (bold, italic, etc.)\n *\n * Code Block Support:\n * - Language detection from code fence info\n * - Syntax highlighting through Code component\n * - Dark/light mode theme switching\n * - Line numbers and copy functionality (via Code component)\n * - Support for popular languages (JS, TS, Python, etc.)\n *\n * Link Handling:\n * - Automatic external link detection (starts with 'http')\n * - Security attributes for external links (rel=\"noopener noreferrer\")\n * - Locale-aware internal link routing\n * - Custom Link component integration\n * - Underlined styling for better visibility\n *\n * Image Processing:\n * - Automatic lazy loading for performance\n * - GitHub raw URL transformation for repository images\n * - Responsive sizing with max-width constraints\n * - Rounded corners for visual appeal\n *\n * Accessibility:\n * - Semantic HTML structure with proper heading hierarchy\n * - ARIA attributes through component integration\n * - Screen reader friendly link descriptions\n * - Keyboard navigation support\n * - High contrast styling options\n *\n * Performance:\n * - Lazy loading for images\n * - Efficient re-rendering with React memo patterns\n * - Code syntax highlighting with minimal bundle impact\n * - Optimized markdown parsing with markdown-to-jsx\n *\n * @param props - Component props\n * @param props.children - Raw markdown content to render\n * @param props.isDarkMode - Enable dark mode styling for code blocks\n * @param props.locale - Current locale for link internationalization\n * @param props.options - Additional markdown-to-jsx options\n * @param props.options.overrides - Custom component overrides for markdown elements\n *\n * @returns Rendered markdown content with custom styling and functionality\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  options,\n}) => {\n  const { overrides, ...restOptions } = options ?? {};\n\n  // Strip frontmatter from the markdown content before rendering\n  const cleanMarkdown = stripFrontmatter(children);\n\n  return (\n    <CodeProvider>\n      <TabProvider>\n        <MarkdownProcessor\n          options={{\n            overrides: {\n              h1: (props: ComponentProps<typeof H1>) => (\n                <H1 isClickable={true} {...props} />\n              ),\n              h2: (props: ComponentProps<typeof H2>) => (\n                <H2 isClickable={true} className=\"mt-16\" {...props} />\n              ),\n              h3: (props: ComponentProps<typeof H3>) => (\n                <H3 isClickable={true} className=\"mt-5\" {...props} />\n              ),\n              h4: (props: ComponentProps<typeof H4>) => (\n                <H4 isClickable={true} className=\"mt-3\" {...props} />\n              ),\n              h5: (props: ComponentProps<typeof H5>) => (\n                <H5 isClickable={true} className=\"mt-3\" {...props} />\n              ),\n              h6: (props: ComponentProps<typeof H6>) => (\n                <H6 isClickable={true} className=\"mt-3\" {...props} />\n              ),\n\n              code: (\n                props: Omit<ComponentPropsWithoutRef<'code'>, 'children'> &\n                  Partial<CodeCompAttributes> & { children: string }\n              ) =>\n                !props.className ? (\n                  <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5\">\n                    {props.children}\n                  </strong>\n                ) : (\n                  <Code\n                    {...props}\n                    isDarkMode={isDarkMode}\n                    language={\n                      (props.className?.replace('lang-', '') ||\n                        'plaintext') as BundledLanguage\n                    }\n                    fileName={props.fileName}\n                    showHeader={Boolean(\n                      props.fileName ||\n                        props.packageManager ||\n                        props.codeFormat ||\n                        props.contentDeclarationFormat\n                    )}\n                  />\n                ),\n\n              blockquote: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'blockquote'>) => (\n                <blockquote\n                  className={cn(\n                    'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              ul: ({ className, ...props }: ComponentPropsWithoutRef<'ul'>) => (\n                <ul\n                  className={cn(\n                    'mt-5 flex list-disc flex-col gap-3 pl-5',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              ol: ({ className, ...props }: ComponentPropsWithoutRef<'ol'>) => (\n                <ol\n                  className={cn(\n                    'mt-5 flex list-decimal flex-col gap-3 pl-5',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              img: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'img'>) => (\n                <img\n                  {...props}\n                  loading=\"lazy\"\n                  className={cn(\n                    'max-h-[80vh] max-w-full rounded-md',\n                    className\n                  )}\n                  src={`${props.src}?raw=true`}\n                />\n              ),\n              a: (props: ComponentProps<typeof Link>) => (\n                <Link\n                  color=\"neutral\"\n                  isExternalLink={props.href?.startsWith('http')}\n                  underlined={true}\n                  locale={locale}\n                  {...props}\n                />\n              ),\n              pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n\n              table: (props: ComponentProps<typeof Table>) => (\n                <Table isRollable={true} {...props} />\n              ),\n              th: ({ className, ...props }: ComponentPropsWithoutRef<'th'>) => (\n                <th\n                  className={cn(\n                    'border-neutral border-b bg-neutral/10 p-4',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              tr: ({ className, ...props }: ComponentPropsWithoutRef<'tr'>) => (\n                <tr\n                  className={cn('hover:/10 hover:bg-neutral/10', className)}\n                  {...props}\n                />\n              ),\n              td: ({ className, ...props }: ComponentPropsWithoutRef<'td'>) => (\n                <td\n                  className={cn(\n                    'border-neutral-500/50 border-b p-4',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              hr: ({ className, ...props }: ComponentPropsWithoutRef<'hr'>) => (\n                <hr\n                  className={cn('mx-6 mt-16 text-neutral', className)}\n                  {...props}\n                />\n              ),\n              // Support both <Tab> and <Tabs> in markdown\n              Tabs: (props: ComponentProps<typeof Tab>) => (\n                <Tab\n                  {...props}\n                  headerClassName=\"sticky top-36 z-10 bg-background/70 backdrop-blur\"\n                />\n              ),\n              Tab: (props: ComponentProps<typeof Tab>) => (\n                <Tab\n                  {...props}\n                  headerClassName=\"sticky top-36 z-10 bg-background/70 backdrop-blur\"\n                />\n              ),\n              TabItem: (props: ComponentProps<typeof Tab.Item>) => (\n                <Tab.Item {...props} />\n              ),\n              Columns: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'div'>) => (\n                <div\n                  className={cn('flex gap-4 max-md:flex-col', className)}\n                  {...props}\n                />\n              ),\n              Column: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'div'>) => (\n                <div className={cn('flex-1', className)} {...props} />\n              ),\n              ...overrides,\n            },\n            ...restOptions,\n          }}\n        >\n          {cleanMarkdown ?? ''}\n        </MarkdownProcessor>\n      </TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport type { CodeCompAttributes } from '../IDE/Code';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\nimport {\n  MarkdownProcessor,\n  type MarkdownProcessorOptions,\n} from './processor-adapter';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  options?: MarkdownProcessorOptions;\n};\n\n/**\n * Removes frontmatter from markdown content\n * Frontmatter is the YAML metadata block at the beginning of markdown files\n * delimited by --- at the start and end\n */\nconst stripFrontmatter = (markdown: string): string => {\n  const lines = markdown.split(/\\r?\\n/);\n\n  // Check if the very first non-empty line is the metadata start delimiter\n  const firstNonEmptyLine = lines.find((line) => line.trim() !== '');\n\n  if (!firstNonEmptyLine || firstNonEmptyLine.trim() !== '---') {\n    // No frontmatter, return original content\n    return markdown;\n  }\n\n  let inMetadataBlock = false;\n  let endOfMetadataIndex = -1;\n\n  for (let i = 0; i < lines.length; i++) {\n    const trimmedLine = lines[i].trim();\n\n    // Toggle metadata block on encountering the delimiter\n    if (trimmedLine === '---') {\n      if (!inMetadataBlock) {\n        // Begin metadata block\n        inMetadataBlock = true;\n      } else {\n        // End of metadata block\n        endOfMetadataIndex = i;\n        break;\n      }\n    }\n  }\n\n  if (endOfMetadataIndex > -1) {\n    // Return content after the frontmatter\n    return lines.slice(endOfMetadataIndex + 1).join('\\n');\n  }\n\n  // If we couldn't find the end delimiter, return original content\n  return markdown;\n};\n\n/**\n * MarkdownRenderer Component\n *\n * A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * const markdownContent = `\n * # Hello World\n * This is **bold** and *italic* text.\n * `;\n *\n * <MarkdownRenderer>{markdownContent}</MarkdownRenderer>\n * ```\n *\n * @example\n * With dark mode:\n * ```tsx\n * const codeExample = `\n * # API Documentation\n * \\`\\`\\`javascript\n * const response = await fetch('/api/data');\n * const data = await response.json();\n * \\`\\`\\`\n * `;\n *\n * <MarkdownRenderer isDarkMode={true}>\n *   {codeExample}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * With internationalized links:\n * ```tsx\n * const content = `\n * Visit our [documentation](/docs) for more information.\n * External link: [Google](https://google.com)\n * `;\n *\n * <MarkdownRenderer locale=\"fr\">\n *   {content}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * With custom overrides:\n * ```tsx\n * const customOptions = {\n *   overrides: {\n *     h1: ({ children }) => (\n *       <h1 className=\"custom-title\">{children}</h1>\n *     ),\n *   },\n * };\n *\n * <MarkdownRenderer options={customOptions}>\n *   {markdownContent}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * With frontmatter (automatically stripped):\n * ```tsx\n * const blogPost = `\n * ---\n * title: \"My Blog Post\"\n * date: \"2023-12-01\"\n * author: \"John Doe\"\n * ---\n * # My Blog Post\n * This content will be rendered without the frontmatter.\n * `;\n *\n * <MarkdownRenderer>{blogPost}</MarkdownRenderer>\n * ```\n *\n * Features:\n * - Automatic frontmatter detection and removal\n * - Syntax-highlighted code blocks with theme support\n * - Clickable headers with anchor links\n * - Internationalized link handling with locale awareness\n * - Responsive tables with hover effects\n * - Custom blockquote, list, and image styling\n * - External link detection and security attributes\n * - Inline code with distinctive styling\n * - Lazy-loaded images with GitHub raw URL support\n * - Horizontal rules with custom styling\n *\n * Supported Markdown Elements:\n * - Headers (h1-h4) with click-to-anchor functionality\n * - Code blocks with language-specific syntax highlighting\n * - Inline code with background styling\n * - Blockquotes with custom border and padding\n * - Ordered and unordered lists with custom spacing\n * - Links (internal and external) with security attributes\n * - Images with lazy loading and responsive sizing\n * - Tables with hover effects and proper styling\n * - Horizontal rules with custom appearance\n * - All standard markdown formatting (bold, italic, etc.)\n *\n * Code Block Support:\n * - Language detection from code fence info\n * - Syntax highlighting through Code component\n * - Dark/light mode theme switching\n * - Line numbers and copy functionality (via Code component)\n * - Support for popular languages (JS, TS, Python, etc.)\n *\n * Link Handling:\n * - Automatic external link detection (starts with 'http')\n * - Security attributes for external links (rel=\"noopener noreferrer\")\n * - Locale-aware internal link routing\n * - Custom Link component integration\n * - Underlined styling for better visibility\n *\n * Image Processing:\n * - Automatic lazy loading for performance\n * - GitHub raw URL transformation for repository images\n * - Responsive sizing with max-width constraints\n * - Rounded corners for visual appeal\n *\n * Accessibility:\n * - Semantic HTML structure with proper heading hierarchy\n * - ARIA attributes through component integration\n * - Screen reader friendly link descriptions\n * - Keyboard navigation support\n * - High contrast styling options\n *\n * Performance:\n * - Lazy loading for images\n * - Efficient re-rendering with React memo patterns\n * - Code syntax highlighting with minimal bundle impact\n * - Optimized markdown parsing with markdown-to-jsx\n *\n * @param props - Component props\n * @param props.children - Raw markdown content to render\n * @param props.isDarkMode - Enable dark mode styling for code blocks\n * @param props.locale - Current locale for link internationalization\n * @param props.options - Additional markdown-to-jsx options\n * @param props.options.overrides - Custom component overrides for markdown elements\n *\n * @returns Rendered markdown content with custom styling and functionality\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  options,\n}) => {\n  const { overrides, ...restOptions } = options ?? {};\n\n  // Strip frontmatter from the markdown content before rendering\n  const cleanMarkdown = stripFrontmatter(children);\n\n  return (\n    <CodeProvider>\n      <TabProvider>\n        <MarkdownProcessor\n          options={{\n            overrides: {\n              h1: (props: ComponentProps<typeof H1>) => (\n                <H1 isClickable={true} {...props} />\n              ),\n              h2: (props: ComponentProps<typeof H2>) => (\n                <H2 isClickable={true} className=\"mt-16\" {...props} />\n              ),\n              h3: (props: ComponentProps<typeof H3>) => (\n                <H3 isClickable={true} className=\"mt-5\" {...props} />\n              ),\n              h4: (props: ComponentProps<typeof H4>) => (\n                <H4 isClickable={true} className=\"mt-3\" {...props} />\n              ),\n              h5: (props: ComponentProps<typeof H5>) => (\n                <H5 isClickable={true} className=\"mt-3\" {...props} />\n              ),\n              h6: (props: ComponentProps<typeof H6>) => (\n                <H6 isClickable={true} className=\"mt-3\" {...props} />\n              ),\n\n              code: (\n                props: Omit<ComponentPropsWithoutRef<'code'>, 'children'> &\n                  Partial<CodeCompAttributes> & { children: string }\n              ) =>\n                !props.className ? (\n                  <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5\">\n                    {props.children}\n                  </strong>\n                ) : (\n                  <Code\n                    {...props}\n                    isDarkMode={isDarkMode}\n                    language={\n                      (props.className?.replace('lang-', '') ||\n                        'plaintext') as BundledLanguage\n                    }\n                    fileName={props.fileName}\n                    showHeader={Boolean(\n                      props.fileName ||\n                        props.packageManager ||\n                        props.codeFormat ||\n                        props.contentDeclarationFormat\n                    )}\n                  />\n                ),\n\n              blockquote: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'blockquote'>) => (\n                <blockquote\n                  className={cn(\n                    'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              ul: ({ className, ...props }: ComponentPropsWithoutRef<'ul'>) => (\n                <ul\n                  className={cn(\n                    'mt-5 flex list-disc flex-col gap-3 pl-5',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              ol: ({ className, ...props }: ComponentPropsWithoutRef<'ol'>) => (\n                <ol\n                  className={cn(\n                    'mt-5 flex list-decimal flex-col gap-3 pl-5',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              img: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'img'>) => (\n                <img\n                  {...props}\n                  loading=\"lazy\"\n                  className={cn(\n                    'max-h-[80vh] max-w-full rounded-md',\n                    className\n                  )}\n                  src={`${props.src}?raw=true`}\n                />\n              ),\n              a: (props: ComponentProps<typeof Link>) => (\n                <Link\n                  color=\"neutral\"\n                  isExternalLink={props.href?.startsWith('http')}\n                  underlined={true}\n                  locale={locale}\n                  {...props}\n                />\n              ),\n              pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n\n              table: (props: ComponentProps<typeof Table>) => (\n                <Table isRollable={true} {...props} />\n              ),\n              th: ({ className, ...props }: ComponentPropsWithoutRef<'th'>) => (\n                <th\n                  className={cn(\n                    'border-neutral border-b bg-neutral/10 p-4',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              tr: ({ className, ...props }: ComponentPropsWithoutRef<'tr'>) => (\n                <tr\n                  className={cn('hover:/10 hover:bg-neutral/10', className)}\n                  {...props}\n                />\n              ),\n              td: ({ className, ...props }: ComponentPropsWithoutRef<'td'>) => (\n                <td\n                  className={cn(\n                    'border-neutral-500/50 border-b p-4',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              hr: ({ className, ...props }: ComponentPropsWithoutRef<'hr'>) => (\n                <hr\n                  className={cn('mx-6 mt-16 text-neutral', className)}\n                  {...props}\n                />\n              ),\n              // Support both <Tab> and <Tabs> in markdown\n              Tabs: (props: ComponentProps<typeof Tab>) => (\n                <Tab\n                  {...props}\n                  headerClassName=\"sticky top-36 z-10 bg-background/70 backdrop-blur\"\n                />\n              ),\n              Tab: (props: ComponentProps<typeof Tab>) => (\n                <Tab\n                  {...props}\n                  headerClassName=\"sticky top-36 z-10 bg-background/70 backdrop-blur\"\n                />\n              ),\n              TabItem: (props: ComponentProps<typeof Tab.Item>) => (\n                <Tab.Item {...props} />\n              ),\n              Columns: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'div'>) => (\n                <div\n                  className={cn('flex gap-4 max-md:flex-col', className)}\n                  {...props}\n                />\n              ),\n              Column: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'div'>) => (\n                <div className={cn('flex-1', className)} {...props} />\n              ),\n              ...overrides,\n            },\n            ...restOptions,\n          }}\n        >\n          {cleanMarkdown ?? ''}\n        </MarkdownProcessor>\n      </TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkDownRender/index.mjs

@@ -1,3 +1,4 @@
+import { MarkdownProcessor, RuleType, compiler, sanitizer as defaultSanitizer, slugify as defaultSlugify } from "./processor-adapter.mjs";
 import { MarkdownRenderer } from "./MarkDownRender.mjs";
 
-export { MarkdownRenderer };
+export { MarkdownProcessor, MarkdownRenderer, RuleType, compiler, defaultSanitizer as sanitizer, defaultSlugify as slugify };

package/dist/esm/components/MarkDownRender/processor-adapter.mjs

@@ -0,0 +1,57 @@
+import { Fragment, cloneElement, createElement } from "react";
+import { RuleType, compile, sanitizer as defaultSanitizer, slugify as defaultSlugify } from "@intlayer/core";
+
+//#region src/components/MarkDownRender/processor-adapter.tsx
+/**
+* Backward-compatible adapter for the markdown processor.
+*
+* This file re-exports the framework-agnostic markdown processor from @intlayer/core
+* with React-specific bindings for backward compatibility with existing code.
+*
+* This is part of the Solution F (Hybrid AST + Callback Pattern) implementation
+* for GitHub Issue #289: Adapt markdown parser in custom packages
+*/
+/**
+* Create the React runtime with optional custom createElement.
+*/
+const createReactRuntime = (customCreateElement) => ({
+	createElement: customCreateElement ?? createElement,
+	cloneElement,
+	Fragment,
+	normalizeProps: (_tag, props) => props
+});
+/**
+* Compile markdown to React elements.
+* Maintains backward compatibility with the original API.
+*/
+const compiler = (markdown = "", options = {}) => {
+	const { createElement: customCreateElement, disableAutoLink, disableParsingRawHTML, enforceAtxHeadings, forceBlock, forceInline, forceWrapper, namedCodesToUnicode, overrides, renderRule, sanitizer, slugify, wrapper } = options;
+	return compile(markdown, {
+		runtime: createReactRuntime(customCreateElement),
+		overrides,
+		namedCodesToUnicode,
+		sanitizer,
+		slugify
+	}, {
+		disableAutoLink,
+		disableParsingRawHTML,
+		enforceAtxHeadings,
+		forceBlock,
+		forceInline,
+		forceWrapper,
+		renderRule,
+		wrapper
+	});
+};
+/**
+* React component that renders markdown to JSX.
+* Backward compatible with the original MarkdownProcessor component.
+*/
+const MarkdownProcessor = ({ 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 cloneElement(compiler(children, options), props);
+};
+
+//#endregion
+export { MarkdownProcessor, RuleType, compiler, defaultSanitizer as sanitizer, defaultSlugify as slugify };
+//# sourceMappingURL=processor-adapter.mjs.map

package/dist/esm/components/MarkDownRender/processor-adapter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"processor-adapter.mjs","names":["coreCompile"],"sources":["../../../../src/components/MarkDownRender/processor-adapter.tsx"],"sourcesContent":["/**\n * Backward-compatible adapter for the markdown processor.\n *\n * This file re-exports the framework-agnostic markdown processor from @intlayer/core\n * with React-specific bindings for backward compatibility with existing code.\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 {\n  type Overrides as CoreOverrides,\n  // Core compile function\n  compile as coreCompile,\n  sanitizer as defaultSanitizer,\n  // Utilities\n  slugify as defaultSlugify,\n  // Types\n  type MarkdownContext,\n  type MarkdownOptions,\n  type MarkdownRuntime,\n  type ParserResult,\n  type ParseState,\n  type RenderRuleHook,\n  type RuleOutput,\n  // Constants\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 backward compatibility\nexport { RuleType };\n\n// Re-export utilities for backward compatibility\nexport { defaultSlugify as slugify, defaultSanitizer as sanitizer };\n\n// ============================================================================\n// TYPES (backward compatible)\n// ============================================================================\n\ntype HTMLTags = keyof JSX.IntrinsicElements;\n\ntype State = ParseState;\n\n/**\n * Backward-compatible MarkdownProcessorOptions type.\n * Maps to the core library's options while maintaining the existing API.\n */\nexport type MarkdownProcessorOptions = 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  overrides: 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// ============================================================================\n// REACT RUNTIME\n// ============================================================================\n\n/**\n * Create the React runtime with optional custom createElement.\n */\nconst createReactRuntime = (\n  customCreateElement?: MarkdownProcessorOptions['createElement']\n): MarkdownRuntime => ({\n  createElement: customCreateElement ?? createElement,\n  cloneElement,\n  Fragment,\n  // React uses className instead of class, htmlFor instead of for\n  // The core library already handles this via ATTRIBUTE_TO_NODE_PROP_MAP\n  normalizeProps: (_tag, props) => props,\n});\n\n// ============================================================================\n// COMPILER WRAPPER\n// ============================================================================\n\n/**\n * Compile markdown to React elements.\n * Maintains backward compatibility with the original API.\n */\nexport const compiler = (\n  markdown: string = '',\n  options: MarkdownProcessorOptions = {}\n): JSX.Element => {\n  const {\n    createElement: customCreateElement,\n    disableAutoLink,\n    disableParsingRawHTML,\n    enforceAtxHeadings,\n    forceBlock,\n    forceInline,\n    forceWrapper,\n    namedCodesToUnicode,\n    overrides,\n    renderRule,\n    sanitizer,\n    slugify,\n    wrapper,\n  } = options;\n\n  // Create React runtime\n  const runtime = createReactRuntime(customCreateElement);\n\n  // Build context\n  const ctx: MarkdownContext = {\n    runtime,\n    overrides,\n    namedCodesToUnicode,\n    sanitizer,\n    slugify,\n  };\n\n  // Build compiler options\n  const compilerOptions: MarkdownOptions = {\n    disableAutoLink,\n    disableParsingRawHTML,\n    enforceAtxHeadings,\n    forceBlock,\n    forceInline,\n    forceWrapper,\n    renderRule,\n    wrapper,\n  };\n\n  // Compile and return\n  return coreCompile(markdown, ctx, compilerOptions) as JSX.Element;\n};\n\n// ============================================================================\n// MARKDOWN PROCESSOR COMPONENT\n// ============================================================================\n\n/**\n * React component that renders markdown to JSX.\n * Backward compatible with the original MarkdownProcessor component.\n */\nexport const MarkdownProcessor: FC<\n  Omit<HTMLAttributes<Element>, 'children'> & {\n    children: string;\n    options?: MarkdownProcessorOptions;\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\n// ============================================================================\n// TYPE EXPORTS (backward compatibility)\n// ============================================================================\n\nexport type {\n  State,\n  ParseState,\n  ParserResult,\n  RuleOutput,\n  CoreOverrides as Overrides,\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA0IA,MAAM,sBACJ,yBACqB;CACrB,eAAe,uBAAuB;CACtC;CACA;CAGA,iBAAiB,MAAM,UAAU;CAClC;;;;;AAUD,MAAa,YACX,WAAmB,IACnB,UAAoC,EAAE,KACtB;CAChB,MAAM,EACJ,eAAe,qBACf,iBACA,uBACA,oBACA,YACA,aACA,cACA,qBACA,WACA,YACA,WACA,SACA,YACE;AA2BJ,QAAOA,QAAY,UArBU;EAC3B,SAJc,mBAAmB,oBAAoB;EAKrD;EACA;EACA;EACA;EACD,EAGwC;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAGiD;;;;;;AAWpD,MAAa,qBAKR,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/components/MarkDownRender/processor.mjs

@@ -59,7 +59,7 @@ const Priority = {
 	MIN: 4
 };
 /** TODO: Drop for React 16? */
-const ATTRIBUTE_TO_JSX_PROP_MAP = [
+const ATTRIBUTE_TO_NODE_PROP_MAP = [
 	"allowFullScreen",
 	"allowTransparency",
 	"autoComplete",
@@ -575,7 +575,7 @@ const trimLeadingWhitespaceOutsideFences = (text, whitespace) => {
 	if (duration > durationDelayTrigger) console.log(`trimLeadingWhitespaceOutsideFences: ${duration.toFixed(3)}ms, text length: ${text.length}, lines count: ${lines.length}`);
 	return result;
 };
-const attributeValueToJSXPropValue = (tag, key, value, sanitizeUrlFn) => {
+const attributeValueToNodePropValue = (tag, key, value, sanitizeUrlFn) => {
 	if (key === "style") return parseStyleAttribute(value).reduce((styles, [key$1, value$1]) => {
 		const camelCasedKey = key$1.replace(/(-[a-z])/g, (substr) => substr[1].toUpperCase());
 		styles[camelCasedKey] = sanitizeUrlFn(value$1, tag, key$1);
@@ -919,12 +919,12 @@ const compiler = (markdown = "", options = {}) => {
 			if (delimiterIdx !== -1) {
 				const key = normalizeAttributeKey(raw.slice(0, delimiterIdx)).trim();
 				const value = unquote(raw.slice(delimiterIdx + 1).trim());
-				const mappedKey = ATTRIBUTE_TO_JSX_PROP_MAP[key] ?? key;
+				const mappedKey = ATTRIBUTE_TO_NODE_PROP_MAP[key] ?? key;
 				if (mappedKey === "ref") return map;
-				const normalizedValue = attributeValueToJSXPropValue(tag, key, value, sanitize);
+				const normalizedValue = attributeValueToNodePropValue(tag, key, value, sanitize);
 				map[mappedKey] = normalizedValue;
 				if (typeof normalizedValue === "string" && (HTML_BLOCK_ELEMENT_R.test(normalizedValue) || HTML_SELF_CLOSING_ELEMENT_R.test(normalizedValue))) map[mappedKey] = compile(normalizedValue.trim());
-			} else if (raw !== "style") map[ATTRIBUTE_TO_JSX_PROP_MAP[raw] ?? raw] = true;
+			} else if (raw !== "style") map[ATTRIBUTE_TO_NODE_PROP_MAP[raw] ?? raw] = true;
 			return map;
 		}, {});
 		const duration = performance.now() - start;