markdown-flow-ui 0.1.81-beta.16 → 0.1.81-beta.18

package/dist/components/ContentRender/ContentRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentRender.js","sources":["../../../src/components/ContentRender/ContentRender.tsx"],"sourcesContent":["import \"highlight.js/styles/github.css\";\nimport \"katex/dist/katex.min.css\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeRaw from \"rehype-raw\";\nimport remarkBreaks from \"remark-breaks\";\nimport remarkFlow from \"remark-flow\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./contentRender.css\";\nimport \"./github-markdown-light.css\";\nimport CodeBlock from \"./CodeBlock\";\nimport CustomButtonInputVariable, {\n  ComponentsWithCustomVariable,\n} from \"./plugins/CustomVariable\";\nimport MermaidChart from \"./plugins/MermaidChart\";\nimport useTypewriterStateMachine from \"./useTypewriterStateMachine\";\nimport {\n  preserveCustomVariableProperties,\n  restoreCustomVariableProperties,\n} from \"./utils/custom-variable-props\";\nimport {\n  highlightLanguages,\n  subsetLanguages,\n} from \"./utils/highlight-languages\";\n// import { processMarkdownText } from \"./utils/process-markdown\";\nimport {\n  parseMarkdownSegments,\n  mermaidBlockIsComplete,\n} from \"./utils/mermaid-parse\";\nimport { normalizeInlineHtml } from \"./utils/normalize-inline-html\";\nimport IframeSandbox from \"./IframeSandbox\";\n\ntype RenderSegment =\n  | { type: \"markdown\"; value: string }\n  | { type: \"sandbox\"; value: string };\n\nconst splitContentSegments = (raw: string): RenderSegment[] => {\n  const startPattern =\n    /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)[\\s>]/i;\n\n  const startIndex = raw.search(startPattern);\n  if (startIndex === -1) {\n    return [{ type: \"markdown\", value: raw }];\n  }\n\n  // Find the end of the HTML block: stop at the first closing tag whose\n  // following line does not start with another HTML tag.\n  const closingBoundary = /<\\/[a-z][^>]*>\\s*\\n(?=[^\\s<])/gi;\n  let blockEnd = raw.length;\n  let match: RegExpExecArray | null;\n\n  while ((match = closingBoundary.exec(raw))) {\n    if (match.index <= startIndex) continue;\n    blockEnd = match.index + match[0].length - 1; // end before the newline\n    break;\n  }\n\n  const segments: RenderSegment[] = [];\n  const before = raw.slice(0, startIndex);\n  const htmlBlock = raw.slice(startIndex, blockEnd);\n  const after = raw.slice(blockEnd);\n\n  if (before.trim()) {\n    segments.push({ type: \"markdown\", value: before });\n  }\n\n  segments.push({ type: \"sandbox\", value: htmlBlock });\n\n  if (after.trim()) {\n    segments.push(...splitContentSegments(after));\n  }\n\n  return segments;\n};\n// Define component Props type\nexport interface ContentRenderProps {\n  content: string;\n  /**\n+   * Callback invoked when the custom button after content is clicked.\n+   * This button is rendered via the `<custom-button-after-content>` tag in markdown content.\n+   * @example\n+   * ```tsx\n+   * <ContentRender\n+   *   content=\"Hello <custom-button-after-content>Ask</custom-button-after-content>\"\n+   *   onClickCustomButtonAfterContent={() => console.log('Button clicked')}\n+   * />\n+   * ```\n+   */\n  customRenderBar?: CustomRenderBarProps;\n  onClickCustomButtonAfterContent?: () => void;\n  onSend?: (content: OnSendContentParams) => void;\n  typingSpeed?: number;\n  enableTypewriter?: boolean;\n  defaultButtonText?: string;\n  defaultInputText?: string; // Text input by user\n  defaultSelectedValues?: string[]; // Default selected values for multi-select\n  readonly?: boolean;\n  onTypeFinished?: () => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text (i18n support)\n  copyButtonText?: string;\n  // Copied state text (i18n support)\n  copiedButtonText?: string;\n  // Dynamic interaction format for multi-select support\n  dynamicInteractionFormat?: string;\n  beforeSend?: (param: OnSendContentParams) => boolean;\n  // tooltipMinLength?: number; // Control minimum character length for tooltip display, default 10\n}\n\n// Render svg string via Shadow DOM to avoid markdown wrapping\nconst SvgBlockInShadow: React.FC<{ svg: string }> = ({ svg }) => {\n  const hostRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: \"open\" });\n    const styleId = \"content-render-svg-style\";\n    let styleEl = shadowRoot.getElementById(styleId) as HTMLStyleElement | null;\n\n    if (!styleEl) {\n      styleEl = document.createElement(\"style\");\n      styleEl.id = styleId;\n      styleEl.textContent = `\n        :host { display: block; width: 100%; max-width: 100%; text-align: center; }\n        svg { max-width: 100%; height: auto; display: inline-block; }\n      `;\n      shadowRoot.appendChild(styleEl);\n    }\n\n    const nodesToRemove = Array.from(shadowRoot.childNodes).filter(\n      (node) => node !== styleEl\n    );\n    nodesToRemove.forEach((node) => shadowRoot.removeChild(node));\n\n    const template = document.createElement(\"template\");\n    template.innerHTML = svg;\n    shadowRoot.append(template.content.cloneNode(true));\n\n    shadowRoot.querySelectorAll(\"svg\").forEach((svgEl) => {\n      // Derive responsive sizing from viewBox so pure viewBox SVGs stay visible and fluid\n      const viewBox = svgEl.getAttribute(\"viewBox\");\n      if (!viewBox) return;\n\n      const dimensions = viewBox\n        .trim()\n        .split(/[\\s,]+/)\n        .map((value) => Number(value));\n\n      if (dimensions.length !== 4 || dimensions.some(Number.isNaN)) return;\n\n      const [, , viewBoxWidth, viewBoxHeight] = dimensions;\n      const widthAttr = svgEl.getAttribute(\"width\");\n      const heightAttr = svgEl.getAttribute(\"height\");\n      const hasWidth = !!widthAttr && widthAttr !== \"0\";\n      const hasHeight = !!heightAttr && heightAttr !== \"0\";\n      const shouldUseResponsiveSize = !hasWidth && !hasHeight;\n\n      if (shouldUseResponsiveSize) {\n        svgEl.style.width = \"100%\";\n        svgEl.style.height = \"auto\";\n        if (!svgEl.style.aspectRatio && viewBoxHeight > 0) {\n          svgEl.style.aspectRatio = `${viewBoxWidth} / ${viewBoxHeight}`;\n        }\n        return;\n      }\n\n      if (!hasWidth && viewBoxWidth > 0) {\n        svgEl.setAttribute(\"width\", `${viewBoxWidth}`);\n      }\n      if (!hasHeight && viewBoxHeight > 0) {\n        svgEl.setAttribute(\"height\", `${viewBoxHeight}`);\n      }\n    });\n  }, [svg]);\n\n  return (\n    <div className=\"content-render-svg-scroll\">\n      <div className=\"content-render-svg\" ref={hostRef} />\n    </div>\n  );\n};\n\n// Extended component interface\ntype CustomComponents = ComponentsWithCustomVariable & {\n  \"custom-button-after-content\"?: React.ComponentType<{\n    children: React.ReactNode;\n  }>;\n};\n\nconst remarkPlugins = [remarkGfm, remarkMath, remarkFlow, remarkBreaks];\n\nconst rehypePlugins = [\n  preserveCustomVariableProperties,\n  rehypeRaw,\n  restoreCustomVariableProperties,\n  [rehypeHighlight, { languages: highlightLanguages, subset: subsetLanguages }],\n  rehypeKatex,\n];\n\nconst MarkdownRenderer: React.FC<{\n  content: string;\n  components: CustomComponents;\n}> = ({ content: markdownContent, components }) => (\n  <div className=\"markdown-body\">\n    <ReactMarkdown\n      remarkPlugins={remarkPlugins}\n      rehypePlugins={rehypePlugins}\n      components={components}\n    >\n      {markdownContent}\n    </ReactMarkdown>\n  </div>\n);\n\nconst ContentRender: React.FC<ContentRenderProps> = ({\n  content,\n  customRenderBar,\n  onSend,\n  typingSpeed = 30,\n  enableTypewriter = false,\n  defaultButtonText,\n  defaultInputText,\n  defaultSelectedValues,\n  readonly = false,\n  onTypeFinished,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  onClickCustomButtonAfterContent,\n  beforeSend,\n  // tooltipMinLength,\n}) => {\n  const normalizedContent = useMemo(\n    () => normalizeInlineHtml(content),\n    [content]\n  );\n\n  // Use custom Hook to handle typewriter effect\n  const components: CustomComponents = {\n    \"custom-button-after-content\": ({\n      children,\n    }: {\n      children: React.ReactNode;\n    }) => {\n      return (\n        <button\n          className=\"content-render-custom-button-after-content\"\n          onClick={onClickCustomButtonAfterContent}\n        >\n          <span className=\"content-render-custom-button-after-content-inner\">\n            {children}\n          </span>\n        </button>\n      );\n    },\n    \"custom-variable\": (props) => (\n      <CustomButtonInputVariable\n        {...props}\n        readonly={readonly}\n        defaultButtonText={defaultButtonText}\n        defaultInputText={defaultInputText}\n        defaultSelectedValues={defaultSelectedValues}\n        onSend={onSend}\n        beforeSend={beforeSend}\n        confirmButtonText={confirmButtonText}\n        // tooltipMinLength={tooltipMinLength}\n      />\n    ),\n    code: (props) => {\n      const { className, children, ...rest } = props as {\n        className?: string;\n        children?: React.ReactNode;\n      };\n      const match = /language-(\\w+)/.exec(className || \"\");\n      const language = match?.[1];\n      if (language === \"mermaid\") {\n        const chartContent = children?.toString().replace(/\\n$/, \"\") || \"\";\n        const frozen = mermaidBlockIsComplete(content, chartContent);\n        return <MermaidChart chart={chartContent} frozen={frozen} />;\n      }\n\n      return (\n        <code className={className} {...rest}>\n          {children}\n        </code>\n      );\n    },\n    table: ({ ...props }) => (\n      <div className=\"content-render-table-container\">\n        <table className=\"content-render-table\" {...props} />\n      </div>\n    ),\n    th: ({ ...props }) => <th className=\"content-render-th\" {...props} />,\n    td: ({ ...props }) => <td className=\"content-render-td\" {...props} />,\n    tr: ({ ...props }) => <tr className=\"content-render-tr\" {...props} />,\n    li: ({ node, ...props }) => {\n      const className = node?.properties?.className;\n      const hasTaskListItem =\n        (typeof className === \"string\" &&\n          className.includes(\"task-list-item\")) ||\n        (Array.isArray(className) && className.includes(\"task-list-item\"));\n      if (hasTaskListItem) {\n        return <li className=\"content-render-task-list-item\" {...props} />;\n      }\n      return <li {...props} />;\n    },\n    ol: ({ ...props }) => <ol className=\"content-render-ol\" {...props} />,\n    ul: ({ ...props }) => <ul className=\"content-render-ul\" {...props} />,\n    input: ({ ...props }) => {\n      if (props.type === \"checkbox\") {\n        return (\n          <input\n            type=\"checkbox\"\n            className=\"content-render-checkbox\"\n            disabled\n            {...props}\n          />\n        );\n      }\n      return <input {...props} />;\n    },\n    a: ({ children, ...props }) => (\n      <a target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n        {children}\n      </a>\n    ),\n    pre: (props) => (\n      <CodeBlock\n        {...props}\n        copyButtonText={copyButtonText}\n        copiedButtonText={copiedButtonText}\n      />\n    ),\n  };\n\n  const { displayContent, isComplete } = useTypewriterStateMachine({\n    // processMarkdownText will let code block printf(\"You win!\\n\") become printf(\"You win!<br/>\");\n    // content: processMarkdownText(content),\n    content: normalizedContent,\n    typingSpeed,\n    disabled: !enableTypewriter,\n  });\n\n  const renderSegments = useMemo(\n    () => splitContentSegments(content),\n    [content]\n  );\n  const hasSandbox = renderSegments.some(\n    (segment) => segment.type === \"sandbox\"\n  );\n\n  const segments = useMemo(\n    () => parseMarkdownSegments(displayContent),\n    [displayContent]\n  );\n\n  const hasCompleted = useRef(false);\n\n  useEffect(() => {\n    if (hasSandbox) return;\n    if (isComplete && !hasCompleted.current) {\n      hasCompleted.current = true; // Mark as completed\n      onTypeFinished?.(); // Call the passed callback\n    }\n  }, [hasSandbox, isComplete, onTypeFinished]);\n\n  useEffect(() => {\n    if (hasSandbox) return;\n    hasCompleted.current = false; // Reset completion status when content changes\n  }, [hasSandbox, content]);\n\n  if (hasSandbox) {\n    return (\n      <div className=\"content-render\">\n        {renderSegments.map((segment, idx) =>\n          segment.type === \"sandbox\" ? (\n            <IframeSandbox\n              key={`sandbox-${idx}`}\n              content={segment.value}\n              className=\"content-render-iframe\"\n            />\n          ) : (\n            <MarkdownRenderer\n              key={`md-${idx}`}\n              components={components}\n              content={normalizeInlineHtml(segment.value)}\n            />\n          )\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"content-render\">\n      {segments.map((seg, index) => {\n        if (seg.type === \"text\") {\n          return (\n            <MarkdownRenderer\n              key={index}\n              components={components}\n              content={seg.value}\n            />\n          );\n        }\n\n        if (seg.type === \"mermaid\") {\n          return (\n            <MermaidChart\n              key={index}\n              chart={seg.value}\n              frozen={!seg.complete}\n            />\n          );\n        }\n\n        if (seg.type === \"svg\") {\n          return <SvgBlockInShadow key={index} svg={seg.value} />;\n        }\n      })}\n\n      {customRenderBar && (\n        <div className=\"content-render-custom-bar\">\n          {React.createElement(customRenderBar, {\n            content,\n            displayContent,\n            onSend,\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ContentRender;\n"],"names":["splitContentSegments","raw","startPattern","startIndex","closingBoundary","blockEnd","match","segments","before","htmlBlock","after","SvgBlockInShadow","svg","hostRef","useRef","useEffect","host","shadowRoot","styleId","styleEl","node","template","svgEl","viewBox","dimensions","value","viewBoxWidth","viewBoxHeight","widthAttr","heightAttr","hasWidth","hasHeight","jsx","remarkPlugins","remarkGfm","remarkMath","remarkFlow","remarkBreaks","rehypePlugins","preserveCustomVariableProperties","rehypeRaw","restoreCustomVariableProperties","rehypeHighlight","highlightLanguages","subsetLanguages","rehypeKatex","MarkdownRenderer","markdownContent","components","ReactMarkdown","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","onClickCustomButtonAfterContent","beforeSend","normalizedContent","useMemo","normalizeInlineHtml","children","props","CustomButtonInputVariable","className","rest","chartContent","frozen","mermaidBlockIsComplete","MermaidChart","CodeBlock","displayContent","isComplete","useTypewriterStateMachine","renderSegments","hasSandbox","segment","parseMarkdownSegments","hasCompleted","idx","IframeSandbox","jsxs","seg","index","React"],"mappings":"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"}
+{"version":3,"file":"ContentRender.js","sources":["../../../src/components/ContentRender/ContentRender.tsx"],"sourcesContent":["import \"highlight.js/styles/github.css\";\nimport \"katex/dist/katex.min.css\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeRaw from \"rehype-raw\";\nimport remarkBreaks from \"remark-breaks\";\nimport remarkFlow from \"remark-flow\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport { CustomRenderBarProps, OnSendContentParams } from \"../types\";\nimport \"./contentRender.css\";\nimport \"./github-markdown-light.css\";\nimport CodeBlock from \"./CodeBlock\";\nimport CustomButtonInputVariable, {\n  ComponentsWithCustomVariable,\n} from \"./plugins/CustomVariable\";\nimport MermaidChart from \"./plugins/MermaidChart\";\nimport useTypewriterStateMachine from \"./useTypewriterStateMachine\";\nimport {\n  preserveCustomVariableProperties,\n  restoreCustomVariableProperties,\n} from \"./utils/custom-variable-props\";\nimport {\n  highlightLanguages,\n  subsetLanguages,\n} from \"./utils/highlight-languages\";\n// import { processMarkdownText } from \"./utils/process-markdown\";\nimport {\n  parseMarkdownSegments,\n  mermaidBlockIsComplete,\n} from \"./utils/mermaid-parse\";\nimport { normalizeInlineHtml } from \"./utils/normalize-inline-html\";\nimport IframeSandbox from \"./IframeSandbox\";\nimport { splitContentSegments } from \"./utils/split-content\";\n// Define component Props type\nexport interface ContentRenderProps {\n  content: string;\n  /**\n+   * Callback invoked when the custom button after content is clicked.\n+   * This button is rendered via the `<custom-button-after-content>` tag in markdown content.\n+   * @example\n+   * ```tsx\n+   * <ContentRender\n+   *   content=\"Hello <custom-button-after-content>Ask</custom-button-after-content>\"\n+   *   onClickCustomButtonAfterContent={() => console.log('Button clicked')}\n+   * />\n+   * ```\n+   */\n  customRenderBar?: CustomRenderBarProps;\n  onClickCustomButtonAfterContent?: () => void;\n  onSend?: (content: OnSendContentParams) => void;\n  typingSpeed?: number;\n  enableTypewriter?: boolean;\n  defaultButtonText?: string;\n  defaultInputText?: string; // Text input by user\n  defaultSelectedValues?: string[]; // Default selected values for multi-select\n  readonly?: boolean;\n  onTypeFinished?: () => void;\n  // Multi-select confirm button text (i18n support)\n  confirmButtonText?: string;\n  // Copy button text (i18n support)\n  copyButtonText?: string;\n  // Copied state text (i18n support)\n  copiedButtonText?: string;\n  // Dynamic interaction format for multi-select support\n  dynamicInteractionFormat?: string;\n  // Loading text before first HTML block renders inside iframe (i18n support)\n  sandboxLoadingText?: string;\n  // Loading text while styles are being generated inside iframe\n  sandboxStyleLoadingText?: string;\n  // Loading text while scripts are being cached/executed inside iframe\n  sandboxScriptLoadingText?: string;\n  // Fullscreen button text for iframe sandbox\n  sandboxFullscreenButtonText?: string;\n  // Sandbox render mode\n  sandboxMode?: \"content\" | \"blackboard\";\n  beforeSend?: (param: OnSendContentParams) => boolean;\n  // tooltipMinLength?: number; // Control minimum character length for tooltip display, default 10\n}\n\n// Render svg string via Shadow DOM to avoid markdown wrapping\nconst SvgBlockInShadow: React.FC<{ svg: string }> = ({ svg }) => {\n  const hostRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: \"open\" });\n    const styleId = \"content-render-svg-style\";\n    let styleEl = shadowRoot.getElementById(styleId) as HTMLStyleElement | null;\n\n    if (!styleEl) {\n      styleEl = document.createElement(\"style\");\n      styleEl.id = styleId;\n      styleEl.textContent = `\n        :host { display: block; width: 100%; max-width: 100%; text-align: center; }\n        svg { max-width: 100%; height: auto; display: inline-block; }\n      `;\n      shadowRoot.appendChild(styleEl);\n    }\n\n    const nodesToRemove = Array.from(shadowRoot.childNodes).filter(\n      (node) => node !== styleEl\n    );\n    nodesToRemove.forEach((node) => shadowRoot.removeChild(node));\n\n    const template = document.createElement(\"template\");\n    template.innerHTML = svg;\n    shadowRoot.append(template.content.cloneNode(true));\n\n    shadowRoot.querySelectorAll(\"svg\").forEach((svgEl) => {\n      // Derive responsive sizing from viewBox so pure viewBox SVGs stay visible and fluid\n      const viewBox = svgEl.getAttribute(\"viewBox\");\n      if (!viewBox) return;\n\n      const dimensions = viewBox\n        .trim()\n        .split(/[\\s,]+/)\n        .map((value) => Number(value));\n\n      if (dimensions.length !== 4 || dimensions.some(Number.isNaN)) return;\n\n      const [, , viewBoxWidth, viewBoxHeight] = dimensions;\n      const widthAttr = svgEl.getAttribute(\"width\");\n      const heightAttr = svgEl.getAttribute(\"height\");\n      const hasWidth = !!widthAttr && widthAttr !== \"0\";\n      const hasHeight = !!heightAttr && heightAttr !== \"0\";\n      const shouldUseResponsiveSize = !hasWidth && !hasHeight;\n\n      if (shouldUseResponsiveSize) {\n        svgEl.style.width = \"100%\";\n        svgEl.style.height = \"auto\";\n        if (!svgEl.style.aspectRatio && viewBoxHeight > 0) {\n          svgEl.style.aspectRatio = `${viewBoxWidth} / ${viewBoxHeight}`;\n        }\n        return;\n      }\n\n      if (!hasWidth && viewBoxWidth > 0) {\n        svgEl.setAttribute(\"width\", `${viewBoxWidth}`);\n      }\n      if (!hasHeight && viewBoxHeight > 0) {\n        svgEl.setAttribute(\"height\", `${viewBoxHeight}`);\n      }\n    });\n  }, [svg]);\n\n  return (\n    <div className=\"content-render-svg-scroll\">\n      <div className=\"content-render-svg\" ref={hostRef} />\n    </div>\n  );\n};\n\n// Extended component interface\ntype CustomComponents = ComponentsWithCustomVariable & {\n  \"custom-button-after-content\"?: React.ComponentType<{\n    children: React.ReactNode;\n  }>;\n};\n\nconst remarkPlugins = [remarkGfm, remarkMath, remarkFlow, remarkBreaks];\n\nconst rehypePlugins = [\n  preserveCustomVariableProperties,\n  rehypeRaw,\n  restoreCustomVariableProperties,\n  [rehypeHighlight, { languages: highlightLanguages, subset: subsetLanguages }],\n  rehypeKatex,\n];\n\nconst MarkdownRenderer: React.FC<{\n  content: string;\n  components: CustomComponents;\n}> = ({ content: markdownContent, components }) => (\n  <div className=\"markdown-body\">\n    <ReactMarkdown\n      remarkPlugins={remarkPlugins}\n      rehypePlugins={rehypePlugins}\n      components={components}\n    >\n      {markdownContent}\n    </ReactMarkdown>\n  </div>\n);\n\nconst ContentRender: React.FC<ContentRenderProps> = ({\n  content,\n  customRenderBar,\n  onSend,\n  typingSpeed = 30,\n  enableTypewriter = false,\n  defaultButtonText,\n  defaultInputText,\n  defaultSelectedValues,\n  readonly = false,\n  onTypeFinished,\n  confirmButtonText,\n  copyButtonText,\n  copiedButtonText,\n  sandboxLoadingText,\n  sandboxStyleLoadingText,\n  sandboxScriptLoadingText,\n  sandboxFullscreenButtonText,\n  sandboxMode = \"content\",\n  onClickCustomButtonAfterContent,\n  beforeSend,\n  // tooltipMinLength,\n}) => {\n  const normalizedContent = useMemo(\n    () => normalizeInlineHtml(content),\n    [content]\n  );\n\n  // Use custom Hook to handle typewriter effect\n  const components: CustomComponents = {\n    \"custom-button-after-content\": ({\n      children,\n    }: {\n      children: React.ReactNode;\n    }) => {\n      return (\n        <button\n          className=\"content-render-custom-button-after-content\"\n          onClick={onClickCustomButtonAfterContent}\n        >\n          <span className=\"content-render-custom-button-after-content-inner\">\n            {children}\n          </span>\n        </button>\n      );\n    },\n    \"custom-variable\": (props) => (\n      <CustomButtonInputVariable\n        {...props}\n        readonly={readonly}\n        defaultButtonText={defaultButtonText}\n        defaultInputText={defaultInputText}\n        defaultSelectedValues={defaultSelectedValues}\n        onSend={onSend}\n        beforeSend={beforeSend}\n        confirmButtonText={confirmButtonText}\n        // tooltipMinLength={tooltipMinLength}\n      />\n    ),\n    code: (props) => {\n      const { className, children, ...rest } = props as {\n        className?: string;\n        children?: React.ReactNode;\n      };\n      const match = /language-(\\w+)/.exec(className || \"\");\n      const language = match?.[1];\n      if (language === \"mermaid\") {\n        const chartContent = children?.toString().replace(/\\n$/, \"\") || \"\";\n        const frozen = mermaidBlockIsComplete(content, chartContent);\n        return <MermaidChart chart={chartContent} frozen={frozen} />;\n      }\n\n      return (\n        <code className={className} {...rest}>\n          {children}\n        </code>\n      );\n    },\n    table: ({ ...props }) => (\n      <div className=\"content-render-table-container\">\n        <table className=\"content-render-table\" {...props} />\n      </div>\n    ),\n    th: ({ ...props }) => <th className=\"content-render-th\" {...props} />,\n    td: ({ ...props }) => <td className=\"content-render-td\" {...props} />,\n    tr: ({ ...props }) => <tr className=\"content-render-tr\" {...props} />,\n    li: ({ node, ...props }) => {\n      const className = node?.properties?.className;\n      const hasTaskListItem =\n        (typeof className === \"string\" &&\n          className.includes(\"task-list-item\")) ||\n        (Array.isArray(className) && className.includes(\"task-list-item\"));\n      if (hasTaskListItem) {\n        return <li className=\"content-render-task-list-item\" {...props} />;\n      }\n      return <li {...props} />;\n    },\n    ol: ({ ...props }) => <ol className=\"content-render-ol\" {...props} />,\n    ul: ({ ...props }) => <ul className=\"content-render-ul\" {...props} />,\n    input: ({ ...props }) => {\n      if (props.type === \"checkbox\") {\n        return (\n          <input\n            type=\"checkbox\"\n            className=\"content-render-checkbox\"\n            disabled\n            {...props}\n          />\n        );\n      }\n      return <input {...props} />;\n    },\n    a: ({ children, ...props }) => (\n      <a target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n        {children}\n      </a>\n    ),\n    pre: (props) => (\n      <CodeBlock\n        {...props}\n        copyButtonText={copyButtonText}\n        copiedButtonText={copiedButtonText}\n      />\n    ),\n  };\n\n  const { displayContent, isComplete } = useTypewriterStateMachine({\n    // processMarkdownText will let code block printf(\"You win!\\n\") become printf(\"You win!<br/>\");\n    // content: processMarkdownText(content),\n    content: normalizedContent,\n    typingSpeed,\n    disabled: !enableTypewriter,\n  });\n\n  const renderSegments = useMemo(\n    () => splitContentSegments(content),\n    [content]\n  );\n  const hasSandbox = renderSegments.some(\n    (segment) => segment.type === \"sandbox\"\n  );\n\n  const segments = useMemo(\n    () => parseMarkdownSegments(displayContent),\n    [displayContent]\n  );\n\n  const hasCompleted = useRef(false);\n\n  useEffect(() => {\n    if (hasSandbox) return;\n    if (isComplete && !hasCompleted.current) {\n      hasCompleted.current = true; // Mark as completed\n      onTypeFinished?.(); // Call the passed callback\n    }\n  }, [hasSandbox, isComplete, onTypeFinished]);\n\n  useEffect(() => {\n    if (hasSandbox) return;\n    hasCompleted.current = false; // Reset completion status when content changes\n  }, [hasSandbox, content]);\n\n  if (hasSandbox) {\n    return (\n      <div className=\"content-render\">\n        {renderSegments.map((segment, idx) =>\n          segment.type === \"sandbox\" ? (\n            <IframeSandbox\n              key={`sandbox-${idx}`}\n              content={segment.value}\n              className=\"content-render-iframe\"\n              loadingText={sandboxLoadingText}\n              styleLoadingText={sandboxStyleLoadingText}\n              scriptLoadingText={sandboxScriptLoadingText}\n              fullScreenButtonText={sandboxFullscreenButtonText}\n              mode={sandboxMode}\n            />\n          ) : (\n            <MarkdownRenderer\n              key={`md-${idx}`}\n              components={components}\n              content={normalizeInlineHtml(segment.value)}\n            />\n          )\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"content-render\">\n      {segments.map((seg, index) => {\n        if (seg.type === \"text\") {\n          return (\n            <MarkdownRenderer\n              key={index}\n              components={components}\n              content={seg.value}\n            />\n          );\n        }\n\n        if (seg.type === \"mermaid\") {\n          return (\n            <MermaidChart\n              key={index}\n              chart={seg.value}\n              frozen={!seg.complete}\n            />\n          );\n        }\n\n        if (seg.type === \"svg\") {\n          return <SvgBlockInShadow key={index} svg={seg.value} />;\n        }\n      })}\n\n      {customRenderBar && (\n        <div className=\"content-render-custom-bar\">\n          {React.createElement(customRenderBar, {\n            content,\n            displayContent,\n            onSend,\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ContentRender;\n"],"names":["SvgBlockInShadow","svg","hostRef","useRef","useEffect","host","shadowRoot","styleId","styleEl","node","template","svgEl","viewBox","dimensions","value","viewBoxWidth","viewBoxHeight","widthAttr","heightAttr","hasWidth","hasHeight","jsx","remarkPlugins","remarkGfm","remarkMath","remarkFlow","remarkBreaks","rehypePlugins","preserveCustomVariableProperties","rehypeRaw","restoreCustomVariableProperties","rehypeHighlight","highlightLanguages","subsetLanguages","rehypeKatex","MarkdownRenderer","markdownContent","components","ReactMarkdown","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","sandboxLoadingText","sandboxStyleLoadingText","sandboxScriptLoadingText","sandboxFullscreenButtonText","sandboxMode","onClickCustomButtonAfterContent","beforeSend","normalizedContent","useMemo","normalizeInlineHtml","children","props","CustomButtonInputVariable","className","rest","chartContent","frozen","mermaidBlockIsComplete","MermaidChart","CodeBlock","displayContent","isComplete","useTypewriterStateMachine","renderSegments","splitContentSegments","hasSandbox","segment","segments","parseMarkdownSegments","hasCompleted","idx","IframeSandbox","jsxs","seg","index","React"],"mappings":"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"}

package/dist/components/ContentRender/ContentRender.stories.d.ts

@@ -34,3 +34,4 @@ export declare const CodeBlockShowcase: Story;
 export declare const EnglishChineseTypographyPreview: Story;
 export declare const SVGDemo: Story;
 export declare const HTMLDemo: Story;
+export declare const HTMLDemoIframeOnly: Story;

package/dist/components/ContentRender/IframeSandbox.d.ts

@@ -2,6 +2,11 @@ import { default as React } from 'react';
 export interface IframeSandboxProps {
     content: string;
     className?: string;
+    loadingText?: string;
+    styleLoadingText?: string;
+    scriptLoadingText?: string;
+    fullScreenButtonText?: string;
+    mode?: "content" | "blackboard";
 }
 declare const IframeSandbox: React.FC<IframeSandboxProps>;
 export default IframeSandbox;

package/dist/components/ContentRender/IframeSandbox.js

@@ -1,15 +1,32 @@
-import { j as a } from "../../_virtual/jsx-runtime.js";
-import { useRef as r, useState as E, useEffect as h } from "react";
-import { createRoot as w } from "react-dom/client";
-import j from "./SandboxApp.js";
-const O = ({
-  content: d,
-  className: f
+import { j as y } from "../../_virtual/jsx-runtime.js";
+import B, { useRef as s, useState as C, useEffect as f } from "react";
+import { createRoot as D } from "react-dom/client";
+import F from "./SandboxApp.js";
+import { splitContentSegments as I } from "./utils/split-content.js";
+const $ = ({
+  content: i,
+  className: H,
+  loadingText: b,
+  styleLoadingText: g,
+  scriptLoadingText: p,
+  fullScreenButtonText: R,
+  mode: c = "content"
 }) => {
-  const n = r(null), i = r(null), l = r(null), c = r(() => {
-  }), [g, b] = E(480);
-  return h(() => {
-    const e = n.current;
+  const u = s(null), a = s(null), x = s(null), l = s(() => {
+  }), [w, E] = C(480), [v, S] = C(0), m = s(""), o = B.useMemo(() => {
+    const t = I(i).filter((r) => r.type === "sandbox");
+    return (c === "blackboard" ? t[t.length - 1]?.value || "" : t.map((r) => r.value).join(`
+`)) || "";
+  }, [i, c]);
+  return f(() => {
+    if (c !== "blackboard") {
+      m.current = o;
+      return;
+    }
+    const e = m.current;
+    !(e && o.startsWith(e)) && e && S((n) => n + 1), m.current = o;
+  }, [o, c]), f(() => {
+    const e = u.current;
     if (!e) return;
     const t = e.contentDocument;
     if (!t) return;
@@ -24,34 +41,56 @@ const O = ({
   <body>
     <div id="root"></div>
   </body>
-</html>`), t.close(), l.current = t;
-    const o = t.getElementById("root");
-    if (!o) return;
-    const m = w(o);
-    i.current = m;
-    const s = () => {
-      if (!n.current || !t.body) return;
-      const p = t.body.getBoundingClientRect(), x = t.documentElement?.getBoundingClientRect(), y = p.height, R = x?.height || 0, v = Math.max(y, R), H = Math.max(200, Math.ceil(v));
-      b(H);
+</html>`), t.close(), x.current = t;
+    const n = t.getElementById("root");
+    if (!n) return;
+    const r = D(n);
+    a.current = r;
+    const d = () => {
+      if (!u.current || !t.body) return;
+      const j = t.body.getBoundingClientRect(), M = t.documentElement?.getBoundingClientRect(), k = j.height, O = M?.height || 0, z = Math.max(k, O), A = Math.max(200, Math.ceil(z));
+      E(A);
     };
-    c.current = s, s();
-    const u = new ResizeObserver(() => s());
-    return u.observe(t.body), o && u.observe(o), () => {
-      u.disconnect(), m.unmount(), i.current = null, l.current = null, c.current = () => {
+    l.current = d, d();
+    const h = new ResizeObserver(() => d());
+    return h.observe(t.body), n && h.observe(n), () => {
+      h.disconnect(), r.unmount(), a.current = null, x.current = null, l.current = () => {
       };
     };
-  }, []), h(() => {
-    const e = i.current;
-    e && (e.render(/* @__PURE__ */ a.jsx(j, { html: d })), requestAnimationFrame(() => c.current?.()));
-  }, [d]), /* @__PURE__ */ a.jsx(
+  }, []), f(() => {
+    const e = a.current;
+    e && (e.render(
+      /* @__PURE__ */ y.jsx(
+        F,
+        {
+          html: o,
+          loadingText: b,
+          styleLoadingText: g,
+          scriptLoadingText: p,
+          fullScreenButtonText: R,
+          resetToken: v
+        }
+      )
+    ), requestAnimationFrame(() => l.current?.()));
+  }, [
+    i,
+    o,
+    b,
+    g,
+    p,
+    R,
+    v
+  ]), /* @__PURE__ */ y.jsx(
     "iframe",
     {
-      ref: n,
+      ref: u,
       sandbox: "allow-scripts allow-same-origin",
-      className: f,
+      allow: "fullscreen",
+      allowFullScreen: !0,
+      className: H,
       style: {
         width: "100%",
-        height: `${g}px`,
+        height: `${w}px`,
         margin: "16px 0"
       },
       title: "HTML Sandbox"
@@ -59,6 +98,6 @@ const O = ({
   );
 };
 export {
-  O as default
+  $ as default
 };
 //# sourceMappingURL=IframeSandbox.js.map

package/dist/components/ContentRender/IframeSandbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"IframeSandbox.js","sources":["../../../src/components/ContentRender/IframeSandbox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { createRoot, Root } from \"react-dom/client\";\nimport SandboxApp from \"./SandboxApp\";\n\nexport interface IframeSandboxProps {\n  content: string;\n  className?: string;\n}\n\nconst IframeSandbox: React.FC<IframeSandboxProps> = ({\n  content,\n  className,\n}) => {\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const rootRef = useRef<Root | null>(null);\n  const docRef = useRef<Document | null>(null);\n  const updateHeightRef = useRef<() => void>(() => {});\n  const [height, setHeight] = useState(480);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (!iframe) return undefined;\n\n    const doc = iframe.contentDocument;\n    if (!doc) return undefined;\n\n    doc.open();\n    doc.write(`<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <style>\n      html, body { margin: 0; padding: 0; }\n    </style>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>`);\n    doc.close();\n    docRef.current = doc;\n\n    const rootEl = doc.getElementById(\"root\");\n    if (!rootEl) return undefined;\n\n    const root = createRoot(rootEl);\n    rootRef.current = root;\n\n    const updateHeight = () => {\n      if (!iframeRef.current || !doc.body) return;\n      const bodyRect = doc.body.getBoundingClientRect();\n      const htmlRect = doc.documentElement?.getBoundingClientRect();\n      const bodyHeight = bodyRect.height;\n      const htmlHeight = htmlRect?.height || 0;\n      const contentHeight = Math.max(bodyHeight, htmlHeight);\n      const nextHeight = Math.max(200, Math.ceil(contentHeight));\n      setHeight(nextHeight);\n    };\n    updateHeightRef.current = updateHeight;\n\n    updateHeight();\n\n    const resizeObserver = new ResizeObserver(() => updateHeight());\n    resizeObserver.observe(doc.body);\n    if (rootEl) {\n      resizeObserver.observe(rootEl);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n      root.unmount();\n      rootRef.current = null;\n      docRef.current = null;\n      updateHeightRef.current = () => {};\n    };\n  }, []);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n\n    root.render(<SandboxApp html={content} />);\n    requestAnimationFrame(() => updateHeightRef.current?.());\n  }, [content]);\n\n  return (\n    <iframe\n      ref={iframeRef}\n      sandbox=\"allow-scripts allow-same-origin\"\n      className={className}\n      style={{\n        width: \"100%\",\n        height: `${height}px`,\n        margin: \"16px 0\",\n      }}\n      title=\"HTML Sandbox\"\n    />\n  );\n};\n\nexport default IframeSandbox;\n"],"names":["IframeSandbox","content","className","iframeRef","useRef","rootRef","docRef","updateHeightRef","height","setHeight","useState","useEffect","iframe","doc","rootEl","root","createRoot","updateHeight","bodyRect","htmlRect","bodyHeight","htmlHeight","contentHeight","nextHeight","resizeObserver","jsx","SandboxApp"],"mappings":";;;;AASA,MAAMA,IAA8C,CAAC;AAAA,EACnD,SAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAYC,EAA0B,IAAI,GAC1CC,IAAUD,EAAoB,IAAI,GAClCE,IAASF,EAAwB,IAAI,GACrCG,IAAkBH,EAAmB,MAAM;AAAA,EAAC,CAAC,GAC7C,CAACI,GAAQC,CAAS,IAAIC,EAAS,GAAG;AAExC,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAST,EAAU;AACzB,QAAI,CAACS,EAAQ;AAEb,UAAMC,IAAMD,EAAO;AACnB,QAAI,CAACC,EAAK;AAEV,IAAAA,EAAI,KAAA,GACJA,EAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWN,GACJA,EAAI,MAAA,GACJP,EAAO,UAAUO;AAEjB,UAAMC,IAASD,EAAI,eAAe,MAAM;AACxC,QAAI,CAACC,EAAQ;AAEb,UAAMC,IAAOC,EAAWF,CAAM;AAC9B,IAAAT,EAAQ,UAAUU;AAElB,UAAME,IAAe,MAAM;AACzB,UAAI,CAACd,EAAU,WAAW,CAACU,EAAI,KAAM;AACrC,YAAMK,IAAWL,EAAI,KAAK,sBAAA,GACpBM,IAAWN,EAAI,iBAAiB,sBAAA,GAChCO,IAAaF,EAAS,QACtBG,IAAaF,GAAU,UAAU,GACjCG,IAAgB,KAAK,IAAIF,GAAYC,CAAU,GAC/CE,IAAa,KAAK,IAAI,KAAK,KAAK,KAAKD,CAAa,CAAC;AACzD,MAAAb,EAAUc,CAAU;AAAA,IACtB;AACA,IAAAhB,EAAgB,UAAUU,GAE1BA,EAAA;AAEA,UAAMO,IAAiB,IAAI,eAAe,MAAMP,GAAc;AAC9D,WAAAO,EAAe,QAAQX,EAAI,IAAI,GAC3BC,KACFU,EAAe,QAAQV,CAAM,GAGxB,MAAM;AACX,MAAAU,EAAe,WAAA,GACfT,EAAK,QAAA,GACLV,EAAQ,UAAU,MAClBC,EAAO,UAAU,MACjBC,EAAgB,UAAU,MAAM;AAAA,MAAC;AAAA,IACnC;AAAA,EACF,GAAG,CAAA,CAAE,GAELI,EAAU,MAAM;AACd,UAAMI,IAAOV,EAAQ;AACrB,IAAKU,MAELA,EAAK,OAAOU,gBAAAA,MAACC,GAAA,EAAW,MAAMzB,GAAS,CAAE,GACzC,sBAAsB,MAAMM,EAAgB,WAAW;AAAA,EACzD,GAAG,CAACN,CAAO,CAAC,GAGVwB,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKtB;AAAA,MACL,SAAQ;AAAA,MACR,WAAAD;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ,GAAGM,CAAM;AAAA,QACjB,QAAQ;AAAA,MAAA;AAAA,MAEV,OAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"IframeSandbox.js","sources":["../../../src/components/ContentRender/IframeSandbox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { createRoot, Root } from \"react-dom/client\";\nimport SandboxApp from \"./SandboxApp\";\nimport { splitContentSegments } from \"./utils/split-content\";\n\nexport interface IframeSandboxProps {\n  content: string;\n  className?: string;\n  loadingText?: string;\n  styleLoadingText?: string;\n  scriptLoadingText?: string;\n  fullScreenButtonText?: string;\n  mode?: \"content\" | \"blackboard\";\n}\n\nconst IframeSandbox: React.FC<IframeSandboxProps> = ({\n  content,\n  className,\n  loadingText,\n  styleLoadingText,\n  scriptLoadingText,\n  fullScreenButtonText,\n  mode = \"content\",\n}) => {\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const rootRef = useRef<Root | null>(null);\n  const docRef = useRef<Document | null>(null);\n  const updateHeightRef = useRef<() => void>(() => {});\n  const [height, setHeight] = useState(480);\n  const [resetToken, setResetToken] = useState(0);\n  const prevHtmlRef = useRef<string>(\"\");\n  const htmlContent = React.useMemo(() => {\n    const segments = splitContentSegments(content);\n    const sandboxSegments = segments.filter((seg) => seg.type === \"sandbox\");\n    const sandboxContent =\n      mode === \"blackboard\"\n        ? sandboxSegments[sandboxSegments.length - 1]?.value || \"\"\n        : sandboxSegments.map((seg) => seg.value).join(\"\\n\");\n    return sandboxContent || \"\";\n  }, [content, mode]);\n\n  useEffect(() => {\n    if (mode !== \"blackboard\") {\n      prevHtmlRef.current = htmlContent;\n      return;\n    }\n    const prev = prevHtmlRef.current;\n    const isContinuation = prev && htmlContent.startsWith(prev);\n    if (!isContinuation && prev) {\n      setResetToken((token) => token + 1);\n    }\n    prevHtmlRef.current = htmlContent;\n  }, [htmlContent, mode]);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (!iframe) return undefined;\n\n    const doc = iframe.contentDocument;\n    if (!doc) return undefined;\n\n    doc.open();\n    doc.write(`<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <style>\n      html, body { margin: 0; padding: 0; }\n    </style>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>`);\n    doc.close();\n    docRef.current = doc;\n\n    const rootEl = doc.getElementById(\"root\");\n    if (!rootEl) return undefined;\n\n    const root = createRoot(rootEl);\n    rootRef.current = root;\n\n    const updateHeight = () => {\n      if (!iframeRef.current || !doc.body) return;\n      const bodyRect = doc.body.getBoundingClientRect();\n      const htmlRect = doc.documentElement?.getBoundingClientRect();\n      const bodyHeight = bodyRect.height;\n      const htmlHeight = htmlRect?.height || 0;\n      const contentHeight = Math.max(bodyHeight, htmlHeight);\n      const nextHeight = Math.max(200, Math.ceil(contentHeight));\n      setHeight(nextHeight);\n    };\n    updateHeightRef.current = updateHeight;\n\n    updateHeight();\n\n    const resizeObserver = new ResizeObserver(() => updateHeight());\n    resizeObserver.observe(doc.body);\n    if (rootEl) {\n      resizeObserver.observe(rootEl);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n      root.unmount();\n      rootRef.current = null;\n      docRef.current = null;\n      updateHeightRef.current = () => {};\n    };\n  }, []);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n\n    root.render(\n      <SandboxApp\n        html={htmlContent}\n        loadingText={loadingText}\n        styleLoadingText={styleLoadingText}\n        scriptLoadingText={scriptLoadingText}\n        fullScreenButtonText={fullScreenButtonText}\n        resetToken={resetToken}\n      />\n    );\n    requestAnimationFrame(() => updateHeightRef.current?.());\n  }, [\n    content,\n    htmlContent,\n    loadingText,\n    styleLoadingText,\n    scriptLoadingText,\n    fullScreenButtonText,\n    resetToken,\n  ]);\n\n  return (\n    <iframe\n      ref={iframeRef}\n      sandbox=\"allow-scripts allow-same-origin\"\n      allow=\"fullscreen\"\n      allowFullScreen\n      className={className}\n      style={{\n        width: \"100%\",\n        height: `${height}px`,\n        margin: \"16px 0\",\n      }}\n      title=\"HTML Sandbox\"\n    />\n  );\n};\n\nexport default IframeSandbox;\n"],"names":["IframeSandbox","content","className","loadingText","styleLoadingText","scriptLoadingText","fullScreenButtonText","mode","iframeRef","useRef","rootRef","docRef","updateHeightRef","height","setHeight","useState","resetToken","setResetToken","prevHtmlRef","htmlContent","React","sandboxSegments","splitContentSegments","seg","useEffect","prev","token","iframe","doc","rootEl","root","createRoot","updateHeight","bodyRect","htmlRect","bodyHeight","htmlHeight","contentHeight","nextHeight","resizeObserver","jsx","SandboxApp"],"mappings":"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"}

package/dist/components/ContentRender/SandboxApp.d.ts

@@ -1,6 +1,11 @@
 import { default as React } from 'react';
 export interface SandboxAppProps {
     html: string;
+    loadingText?: string;
+    styleLoadingText?: string;
+    scriptLoadingText?: string;
+    fullScreenButtonText?: string;
+    resetToken?: number;
 }
 declare const SandboxApp: React.FC<SandboxAppProps>;
 export default SandboxApp;

package/dist/components/ContentRender/SandboxApp.js

@@ -1,21 +1,199 @@
-import { j as s } from "../../_virtual/jsx-runtime.js";
-import { useRef as i, useEffect as u } from "react";
-const p = ({ html: o }) => {
-  const c = i(null);
-  return u(() => {
-    const e = c.current;
+import { j as u } from "../../_virtual/jsx-runtime.js";
+import { useRef as n, useState as b, useEffect as v } from "react";
+import Y from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+const re = ({
+  html: f,
+  loadingText: q,
+  styleLoadingText: B,
+  scriptLoadingText: H,
+  fullScreenButtonText: L,
+  resetToken: p = 0
+}) => {
+  const A = n(null), S = n(null), [k, N] = b(!0), [V, C] = b(!1), [_, w] = b(!1), [O, Q] = b(!1), R = n([]), F = n([]), j = n(0), M = n(0), d = n(null), m = n(null), h = n(!1), y = n(!1), I = n(!1), D = n(p), J = 200, o = (e) => {
+    e.current && (clearTimeout(e.current), e.current = null);
+  }, T = (e, s, c, x) => {
+    const a = performance.now() - c.current, E = Math.max(0, J - a);
+    o(s), s.current = window.setTimeout(() => {
+      e(!1), x?.(), s.current = null;
+    }, E);
+  };
+  v(() => {
+    const e = () => {
+      Q(!!document.fullscreenElement);
+    };
+    return document.addEventListener("fullscreenchange", e), () => {
+      document.removeEventListener("fullscreenchange", e);
+    };
+  }, []), v(() => {
+    const e = S.current?.ownerDocument;
     if (!e) return;
-    e.innerHTML = "";
-    const t = document.createElement("div");
-    t.innerHTML = o, t.querySelectorAll("script").forEach((r) => {
-      const n = document.createElement("script");
-      Array.from(r.attributes).forEach((a) => {
-        n.setAttribute(a.name, a.value);
-      }), n.textContent = r.textContent, r.replaceWith(n);
-    }), e.append(...Array.from(t.childNodes));
-  }, [o]), /* @__PURE__ */ s.jsx("div", { ref: c });
+    const s = "sandbox-spinner-style";
+    let c = e.getElementById(s);
+    c || (c = e.createElement("style"), c.id = s, c.textContent = "@keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }", e.head?.appendChild(c));
+  }, []), v(() => {
+    p !== D.current && (I.current = !1, D.current = p), o(d), o(m), h.current = !1, y.current = !1;
+    const e = S.current;
+    if (!e) return;
+    const s = e.ownerDocument, c = s?.body;
+    if (!c) return;
+    R.current.forEach((t) => t.remove()), R.current = [], F.current.forEach((t) => t.remove()), F.current = [];
+    const x = I.current;
+    N(!x), C(!1), w(!1), e.innerHTML = "";
+    const a = document.createElement("div");
+    a.innerHTML = f;
+    const E = (f.match(/<script[\s>]/gi) || []).length, P = (f.match(/<\/script>/gi) || []).length, U = E > 0 && E === P, l = [];
+    Array.from(a.querySelectorAll("style, script")).forEach((t) => {
+      if (t.tagName.toLowerCase() === "style") {
+        const r = s.createElement("style");
+        r.textContent = t.textContent || "", Array.from(t.attributes).forEach((i) => {
+          r.setAttribute(i.name, i.value);
+        }), l.push(r);
+      } else {
+        const r = s.createElement("script");
+        Array.from(t.attributes).forEach((i) => {
+          r.setAttribute(i.name, i.value);
+        }), r.textContent = t.textContent || "", l.push(r);
+      }
+      t.remove();
+    });
+    const z = l.some(
+      (t) => t.tagName.toLowerCase() === "style"
+    ), G = l.some(
+      (t) => t.tagName.toLowerCase() === "script"
+    );
+    z && (h.current = !0, j.current = performance.now(), o(d), C(!0)), G && (y.current = !0, M.current = performance.now(), o(m), w(!0));
+    const W = !!a.firstElementChild;
+    N(!W && !x), W && (I.current = !0);
+    const X = Array.from(a.childNodes);
+    e.append(...X), l.forEach((t) => {
+      if (t.tagName.toLowerCase() === "style") {
+        s.head?.appendChild(t), R.current.push(t);
+        return;
+      }
+      if (U) {
+        const r = t, i = r.textContent || "";
+        if (!r.src)
+          try {
+            new Function(i);
+          } catch {
+            r.remove();
+            return;
+          }
+        try {
+          c.appendChild(r), F.current.push(r);
+        } catch {
+          r.remove();
+        }
+      } else
+        t.remove();
+    }), requestAnimationFrame(() => {
+      z && T(
+        C,
+        d,
+        j,
+        () => {
+          h.current = !1;
+        }
+      ), G && T(
+        w,
+        m,
+        M,
+        () => {
+          y.current = !1;
+        }
+      );
+    });
+  }, [f, p]), v(
+    () => () => {
+      o(d), o(m);
+    },
+    []
+  );
+  const g = _ || y.current ? H || "Building scripts cache..." : V || h.current ? B || "Building styles..." : k ? q || "Loading..." : null, K = () => {
+    const e = A.current;
+    if (e) {
+      if (!document.fullscreenElement) {
+        e.requestFullscreen?.().catch(() => {
+        });
+        return;
+      }
+      document.exitFullscreen?.();
+    }
+  };
+  return /* @__PURE__ */ u.jsxs(
+    "div",
+    {
+      ref: A,
+      style: { position: "relative", minHeight: 120 },
+      "aria-busy": !!g,
+      children: [
+        /* @__PURE__ */ u.jsx(
+          "div",
+          {
+            ref: S,
+            style: {
+              pointerEvents: g ? "none" : void 0
+            }
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: K,
+            style: {
+              position: "absolute",
+              top: 8,
+              right: 8,
+              zIndex: 30,
+              padding: "6px 10px",
+              borderRadius: 6,
+              border: "1px solid #cbd5e1",
+              background: "#ffffffcc",
+              color: "#0f172a",
+              fontSize: 12,
+              fontWeight: 600,
+              cursor: "pointer",
+              boxShadow: "0 4px 10px rgba(15, 23, 42, 0.08)"
+            },
+            children: O ? L || "Exit Fullscreen" : L || "Fullscreen"
+          }
+        ),
+        g && /* @__PURE__ */ u.jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(51, 51, 51, 0.80)",
+              color: "#ffffff",
+              fontSize: 16,
+              fontWeight: 700,
+              gap: 10,
+              pointerEvents: "auto",
+              zIndex: 20
+            },
+            children: [
+              /* @__PURE__ */ u.jsx(
+                Y,
+                {
+                  "aria-hidden": !0,
+                  size: 20,
+                  style: { animation: "sandbox-spin 1s linear infinite" }
+                }
+              ),
+              g
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  p as default
+  re as default
 };
 //# sourceMappingURL=SandboxApp.js.map

package/dist/components/ContentRender/SandboxApp.js.map

@@ -1 +1 @@
-{"version":3,"file":"SandboxApp.js","sources":["../../../src/components/ContentRender/SandboxApp.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nexport interface SandboxAppProps {\n  html: string;\n}\n\nconst SandboxApp: React.FC<SandboxAppProps> = ({ html }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.innerHTML = \"\";\n    const wrapper = document.createElement(\"div\");\n    wrapper.innerHTML = html;\n\n    // Ensure inline scripts execute by recreating them after injection\n    wrapper.querySelectorAll(\"script\").forEach((script) => {\n      const replacement = document.createElement(\"script\");\n      Array.from(script.attributes).forEach((attr) => {\n        replacement.setAttribute(attr.name, attr.value);\n      });\n      replacement.textContent = script.textContent;\n      script.replaceWith(replacement);\n    });\n\n    container.append(...Array.from(wrapper.childNodes));\n  }, [html]);\n\n  return <div ref={containerRef} />;\n};\n\nexport default SandboxApp;\n"],"names":["SandboxApp","html","containerRef","useRef","useEffect","container","wrapper","script","replacement","attr","jsx"],"mappings":";;AAMA,MAAMA,IAAwC,CAAC,EAAE,MAAAC,QAAW;AAC1D,QAAMC,IAAeC,EAAuB,IAAI;AAEhD,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAYH,EAAa;AAC/B,QAAI,CAACG,EAAW;AAEhB,IAAAA,EAAU,YAAY;AACtB,UAAMC,IAAU,SAAS,cAAc,KAAK;AAC5C,IAAAA,EAAQ,YAAYL,GAGpBK,EAAQ,iBAAiB,QAAQ,EAAE,QAAQ,CAACC,MAAW;AACrD,YAAMC,IAAc,SAAS,cAAc,QAAQ;AACnD,YAAM,KAAKD,EAAO,UAAU,EAAE,QAAQ,CAACE,MAAS;AAC9C,QAAAD,EAAY,aAAaC,EAAK,MAAMA,EAAK,KAAK;AAAA,MAChD,CAAC,GACDD,EAAY,cAAcD,EAAO,aACjCA,EAAO,YAAYC,CAAW;AAAA,IAChC,CAAC,GAEDH,EAAU,OAAO,GAAG,MAAM,KAAKC,EAAQ,UAAU,CAAC;AAAA,EACpD,GAAG,CAACL,CAAI,CAAC,GAEFS,gBAAAA,EAAAA,IAAC,OAAA,EAAI,KAAKR,EAAA,CAAc;AACjC;"}
+{"version":3,"file":"SandboxApp.js","sources":["../../../src/components/ContentRender/SandboxApp.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nexport interface SandboxAppProps {\n  html: string;\n  loadingText?: string;\n  styleLoadingText?: string;\n  scriptLoadingText?: string;\n  fullScreenButtonText?: string;\n  resetToken?: number;\n}\n\nconst SandboxApp: React.FC<SandboxAppProps> = ({\n  html,\n  loadingText,\n  styleLoadingText,\n  scriptLoadingText,\n  fullScreenButtonText,\n  resetToken = 0,\n}) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isWaitingFirstDiv, setIsWaitingFirstDiv] = useState(true);\n  const [isGeneratingStyles, setIsGeneratingStyles] = useState(false);\n  const [isGeneratingScripts, setIsGeneratingScripts] = useState(false);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n  const appendedStylesRef = useRef<HTMLStyleElement[]>([]);\n  const appendedScriptsRef = useRef<HTMLScriptElement[]>([]);\n  const styleStartRef = useRef(0);\n  const scriptStartRef = useRef(0);\n  const styleTimerRef = useRef<number | null>(null);\n  const scriptTimerRef = useRef<number | null>(null);\n  const hasStylesRef = useRef(false);\n  const hasScriptsRef = useRef(false);\n  const hasRenderedContentRef = useRef(false);\n  const prevResetTokenRef = useRef(resetToken);\n  const MIN_LOADING_MS = 200;\n\n  const clearTimer = (timerRef: React.MutableRefObject<number | null>) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  const settleStateWithMinimumDelay = (\n    setter: React.Dispatch<React.SetStateAction<boolean>>,\n    timerRef: React.MutableRefObject<number | null>,\n    startRef: React.MutableRefObject<number>,\n    onDone?: () => void\n  ) => {\n    const elapsed = performance.now() - startRef.current;\n    const delay = Math.max(0, MIN_LOADING_MS - elapsed);\n    clearTimer(timerRef);\n    timerRef.current = window.setTimeout(() => {\n      setter(false);\n      onDone?.();\n      timerRef.current = null;\n    }, delay);\n  };\n\n  useEffect(() => {\n    const onFullscreenChange = () => {\n      setIsFullscreen(!!document.fullscreenElement);\n    };\n    document.addEventListener(\"fullscreenchange\", onFullscreenChange);\n    return () => {\n      document.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n    };\n  }, []);\n\n  useEffect(() => {\n    const doc = containerRef.current?.ownerDocument;\n    if (!doc) return;\n    const styleId = \"sandbox-spinner-style\";\n    let styleEl = doc.getElementById(styleId) as HTMLStyleElement | null;\n    if (!styleEl) {\n      styleEl = doc.createElement(\"style\");\n      styleEl.id = styleId;\n      styleEl.textContent =\n        \"@keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }\";\n      doc.head?.appendChild(styleEl);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (resetToken !== prevResetTokenRef.current) {\n      hasRenderedContentRef.current = false;\n      prevResetTokenRef.current = resetToken;\n    }\n    clearTimer(styleTimerRef);\n    clearTimer(scriptTimerRef);\n    hasStylesRef.current = false;\n    hasScriptsRef.current = false;\n\n    const container = containerRef.current;\n    if (!container) return;\n    const doc = container.ownerDocument;\n    const body = doc?.body;\n    if (!body) return;\n\n    appendedStylesRef.current.forEach((node) => node.remove());\n    appendedStylesRef.current = [];\n    appendedScriptsRef.current.forEach((node) => node.remove());\n    appendedScriptsRef.current = [];\n\n    const hasRenderedBefore = hasRenderedContentRef.current;\n    setIsWaitingFirstDiv(!hasRenderedBefore);\n    setIsGeneratingStyles(false);\n    setIsGeneratingScripts(false);\n    container.innerHTML = \"\";\n    const wrapper = document.createElement(\"div\");\n    wrapper.innerHTML = html;\n\n    const openScriptCount = (html.match(/<script[\\s>]/gi) || []).length;\n    const closeScriptCount = (html.match(/<\\/script>/gi) || []).length;\n    const shouldExecuteScripts =\n      openScriptCount > 0 && openScriptCount === closeScriptCount;\n\n    const resourceQueue: HTMLElement[] = [];\n\n    Array.from(wrapper.querySelectorAll(\"style, script\")).forEach((node) => {\n      if (node.tagName.toLowerCase() === \"style\") {\n        const cloned = doc.createElement(\"style\");\n        cloned.textContent = node.textContent || \"\";\n        Array.from(node.attributes).forEach((attr) => {\n          cloned.setAttribute(attr.name, attr.value);\n        });\n        resourceQueue.push(cloned);\n      } else {\n        const replacement = doc.createElement(\"script\");\n        Array.from(node.attributes).forEach((attr) => {\n          replacement.setAttribute(attr.name, attr.value);\n        });\n        replacement.textContent = node.textContent || \"\";\n        resourceQueue.push(replacement);\n      }\n      node.remove();\n    });\n\n    const hasStyles = resourceQueue.some(\n      (node) => node.tagName.toLowerCase() === \"style\"\n    );\n    const hasScripts = resourceQueue.some(\n      (node) => node.tagName.toLowerCase() === \"script\"\n    );\n    if (hasStyles) {\n      hasStylesRef.current = true;\n      styleStartRef.current = performance.now();\n      clearTimer(styleTimerRef);\n      setIsGeneratingStyles(true);\n    }\n    if (hasScripts) {\n      hasScriptsRef.current = true;\n      scriptStartRef.current = performance.now();\n      clearTimer(scriptTimerRef);\n      setIsGeneratingScripts(true);\n    }\n\n    const hasFirstElement = !!wrapper.firstElementChild;\n    setIsWaitingFirstDiv(!hasFirstElement && !hasRenderedBefore);\n    if (hasFirstElement) {\n      hasRenderedContentRef.current = true;\n    }\n\n    const contentNodes = Array.from(wrapper.childNodes);\n    container.append(...contentNodes);\n\n    resourceQueue.forEach((node) => {\n      if (node.tagName.toLowerCase() === \"style\") {\n        doc.head?.appendChild(node);\n        appendedStylesRef.current.push(node as HTMLStyleElement);\n        return;\n      }\n\n      if (shouldExecuteScripts) {\n        const scriptNode = node as HTMLScriptElement;\n        const scriptText = scriptNode.textContent || \"\";\n        const shouldValidate = !scriptNode.src;\n\n        if (shouldValidate) {\n          try {\n            // Validate script is syntactically complete before executing\n\n            new Function(scriptText);\n          } catch {\n            scriptNode.remove();\n            return;\n          }\n        }\n\n        try {\n          body.appendChild(scriptNode);\n          appendedScriptsRef.current.push(scriptNode);\n        } catch {\n          scriptNode.remove();\n        }\n      } else {\n        // Defer execution until all script tags are fully received\n        node.remove();\n      }\n    });\n    requestAnimationFrame(() => {\n      if (hasStyles) {\n        settleStateWithMinimumDelay(\n          setIsGeneratingStyles,\n          styleTimerRef,\n          styleStartRef,\n          () => {\n            hasStylesRef.current = false;\n          }\n        );\n      }\n      if (hasScripts) {\n        settleStateWithMinimumDelay(\n          setIsGeneratingScripts,\n          scriptTimerRef,\n          scriptStartRef,\n          () => {\n            hasScriptsRef.current = false;\n          }\n        );\n      }\n    });\n  }, [html, resetToken]);\n\n  useEffect(\n    () => () => {\n      clearTimer(styleTimerRef);\n      clearTimer(scriptTimerRef);\n    },\n    []\n  );\n\n  const overlayMessage = (() => {\n    if (isGeneratingScripts || hasScriptsRef.current)\n      return scriptLoadingText || \"Building scripts cache...\";\n    if (isGeneratingStyles || hasStylesRef.current)\n      return styleLoadingText || \"Building styles...\";\n    if (isWaitingFirstDiv) return loadingText || \"Loading...\";\n    return null;\n  })();\n\n  const handleToggleFullscreen = () => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    if (!document.fullscreenElement) {\n      wrapper.requestFullscreen?.().catch(() => {});\n      return;\n    }\n    document.exitFullscreen?.();\n  };\n\n  return (\n    <div\n      ref={wrapperRef}\n      style={{ position: \"relative\", minHeight: 120 }}\n      aria-busy={!!overlayMessage}\n    >\n      <div\n        ref={containerRef}\n        style={{\n          pointerEvents: overlayMessage ? \"none\" : undefined,\n        }}\n      />\n      <button\n        type=\"button\"\n        onClick={handleToggleFullscreen}\n        style={{\n          position: \"absolute\",\n          top: 8,\n          right: 8,\n          zIndex: 30,\n          padding: \"6px 10px\",\n          borderRadius: 6,\n          border: \"1px solid #cbd5e1\",\n          background: \"#ffffffcc\",\n          color: \"#0f172a\",\n          fontSize: 12,\n          fontWeight: 600,\n          cursor: \"pointer\",\n          boxShadow: \"0 4px 10px rgba(15, 23, 42, 0.08)\",\n        }}\n      >\n        {isFullscreen\n          ? fullScreenButtonText || \"Exit Fullscreen\"\n          : fullScreenButtonText || \"Fullscreen\"}\n      </button>\n      {overlayMessage && (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            background: \"rgba(51, 51, 51, 0.80)\",\n            color: \"#ffffff\",\n            fontSize: 16,\n            fontWeight: 700,\n            gap: 10,\n            pointerEvents: \"auto\",\n            zIndex: 20,\n          }}\n        >\n          <Loader2\n            aria-hidden\n            size={20}\n            style={{ animation: \"sandbox-spin 1s linear infinite\" }}\n          />\n          {overlayMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default SandboxApp;\n"],"names":["SandboxApp","html","loadingText","styleLoadingText","scriptLoadingText","fullScreenButtonText","resetToken","wrapperRef","useRef","containerRef","isWaitingFirstDiv","setIsWaitingFirstDiv","useState","isGeneratingStyles","setIsGeneratingStyles","isGeneratingScripts","setIsGeneratingScripts","isFullscreen","setIsFullscreen","appendedStylesRef","appendedScriptsRef","styleStartRef","scriptStartRef","styleTimerRef","scriptTimerRef","hasStylesRef","hasScriptsRef","hasRenderedContentRef","prevResetTokenRef","MIN_LOADING_MS","clearTimer","timerRef","settleStateWithMinimumDelay","setter","startRef","onDone","elapsed","delay","useEffect","onFullscreenChange","doc","styleId","styleEl","container","body","node","hasRenderedBefore","wrapper","openScriptCount","closeScriptCount","shouldExecuteScripts","resourceQueue","cloned","attr","replacement","hasStyles","hasScripts","hasFirstElement","contentNodes","scriptNode","scriptText","overlayMessage","handleToggleFullscreen","jsxs","jsx","Loader2"],"mappings":"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"}

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

@@ -1,5 +1,10 @@
 import { default as ContentRender } from './ContentRender';
 export default ContentRender;
+export { default as IframeSandbox } from './IframeSandbox';
+export type { IframeSandboxProps } from './IframeSandbox';
+export type { SandboxAppProps } from './SandboxApp';
+export type { RenderSegment } from './utils/split-content';
+export { splitContentSegments } from './utils/split-content';
 export { default as ContentRender } from './ContentRender';
 export { default as MarkdownFlowInput } from './MarkdownFlowInput';
 export { default as useTypewriter } from './useTypewriter';

package/dist/components/ContentRender/index.js

@@ -1,7 +1,8 @@
 import o from "./ContentRender.js";
 import "../../_virtual/jsx-runtime.js";
-import "../ui/inputGroup/input-group.js";
 import "react";
+import "react-dom/client";
+import "../ui/inputGroup/input-group.js";
 export {
   o as ContentRender,
   o as default

package/dist/components/ContentRender/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/ContentRender/utils/split-content.d.ts

@@ -0,0 +1,8 @@
+export type RenderSegment = {
+    type: "markdown";
+    value: string;
+} | {
+    type: "sandbox";
+    value: string;
+};
+export declare const splitContentSegments: (raw: string) => RenderSegment[];

package/dist/components/ContentRender/utils/split-content.js

@@ -0,0 +1,18 @@
+const m = (t) => {
+  const o = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)[\s>]/i, e = t.search(o);
+  if (e === -1)
+    return [{ type: "markdown", value: t }];
+  const a = /<\/[a-z][^>]*>\s*\n(?=[^\s<])/gi;
+  let i = t.length, n;
+  for (; n = a.exec(t); )
+    if (!(n.index <= e)) {
+      i = n.index + n[0].length - 1;
+      break;
+    }
+  const s = [], l = t.slice(0, e), r = t.slice(e, i), c = t.slice(i);
+  return l.trim() && s.push({ type: "markdown", value: l }), s.push({ type: "sandbox", value: r }), c.trim() && s.push(...m(c)), s;
+};
+export {
+  m as splitContentSegments
+};
+//# sourceMappingURL=split-content.js.map