markdown-flow-ui 0.1.84 → 0.1.85

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

@@ -1 +1 @@
-{"version":3,"file":"ContentRender.es.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\";\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      // Keep intrinsic SVG width so the wrapper can scroll horizontally when needed\n      styleEl.textContent = `\n        svg { height: auto; display: inline-block; }\n        svg.content-render-svg-el--responsive { width: 100%; max-width: 100%; }\n        svg.content-render-svg-el--fixed { max-width: none; }\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    let hasResponsiveSvg = false;\n    let hasFixedSvg = false;\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        hasResponsiveSvg = true;\n        svgEl.classList.add(\"content-render-svg-el--responsive\");\n        svgEl.classList.remove(\"content-render-svg-el--fixed\");\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      hasFixedSvg = true;\n      svgEl.classList.add(\"content-render-svg-el--fixed\");\n      svgEl.classList.remove(\"content-render-svg-el--responsive\");\n      if (!hasWidth && viewBoxWidth > 0) {\n        svgEl.setAttribute(\"width\", `${viewBoxWidth}`);\n      }\n      if (!hasHeight && viewBoxHeight > 0) {\n        svgEl.setAttribute(\"height\", `${viewBoxHeight}`);\n      }\n    });\n\n    const hostResponsive = hasResponsiveSvg && !hasFixedSvg;\n    host.classList.toggle(\"content-render-svg--responsive\", hostResponsive);\n    host.classList.toggle(\"content-render-svg--fixed\", !hostResponsive);\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 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 { 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 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 hasCompleted = useRef(false);\n\n  useEffect(() => {\n    if (isComplete && !hasCompleted.current) {\n      hasCompleted.current = true; // Mark as completed\n      onTypeFinished?.(); // Call the passed callback\n    }\n  }, [isComplete, onTypeFinished]);\n  useEffect(() => {\n    hasCompleted.current = false; // Reset completion status when content changes\n  }, [content]);\n\n  const segments = parseMarkdownSegments(displayContent);\n\n  return (\n    <div className={`content-render markdown-body`}>\n      {segments.map((seg, index) => {\n        if (seg.type === \"text\") {\n          return (\n            <ReactMarkdown\n              key={index}\n              remarkPlugins={[remarkGfm, remarkMath, remarkFlow, remarkBreaks]}\n              rehypePlugins={[\n                preserveCustomVariableProperties,\n                rehypeRaw,\n                restoreCustomVariableProperties,\n                [\n                  rehypeHighlight,\n                  { languages: highlightLanguages, subset: subsetLanguages },\n                ],\n                rehypeKatex,\n              ]}\n              components={components}\n            >\n              {seg.value}\n            </ReactMarkdown>\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","hasResponsiveSvg","hasFixedSvg","svgEl","viewBox","dimensions","value","viewBoxWidth","viewBoxHeight","widthAttr","heightAttr","hasWidth","hasHeight","hostResponsive","jsx","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","onClickCustomButtonAfterContent","beforeSend","normalizedContent","useMemo","normalizeInlineHtml","displayContent","isComplete","useTypewriterStateMachine","components","children","props","CustomButtonInputVariable","className","rest","chartContent","frozen","mermaidBlockIsComplete","MermaidChart","CodeBlock","hasCompleted","segments","parseMarkdownSegments","jsxs","seg","index","ReactMarkdown","remarkGfm","remarkMath","remarkFlow","remarkBreaks","preserveCustomVariableProperties","rehypeRaw","restoreCustomVariableProperties","rehypeHighlight","highlightLanguages","subsetLanguages","rehypeKatex","React"],"mappings":"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"}
+{"version":3,"file":"ContentRender.es.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 {\n  splitContentSegments,\n  type RenderSegment,\n} 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      // Keep intrinsic SVG width so the wrapper can scroll horizontally when needed\n      styleEl.textContent = `\n        svg { height: auto; display: inline-block; }\n        svg.content-render-svg-el--responsive { width: 100%; max-width: 100%; }\n        svg.content-render-svg-el--fixed { max-width: none; }\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    let hasResponsiveSvg = false;\n    let hasFixedSvg = false;\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        hasResponsiveSvg = true;\n        svgEl.classList.add(\"content-render-svg-el--responsive\");\n        svgEl.classList.remove(\"content-render-svg-el--fixed\");\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      hasFixedSvg = true;\n      svgEl.classList.add(\"content-render-svg-el--fixed\");\n      svgEl.classList.remove(\"content-render-svg-el--responsive\");\n      if (!hasWidth && viewBoxWidth > 0) {\n        svgEl.setAttribute(\"width\", `${viewBoxWidth}`);\n      }\n      if (!hasHeight && viewBoxHeight > 0) {\n        svgEl.setAttribute(\"height\", `${viewBoxHeight}`);\n      }\n    });\n\n    const hostResponsive = hasResponsiveSvg && !hasFixedSvg;\n    host.classList.toggle(\"content-render-svg--responsive\", hostResponsive);\n    host.classList.toggle(\"content-render-svg--fixed\", !hostResponsive);\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\nexport const MarkdownRenderer: React.FC<{\n  content: string;\n  components: CustomComponents;\n}> = ({ content: markdownContent, components }) => (\n  <div className=\"markdown-renderer\">\n    <ReactMarkdown\n      remarkPlugins={remarkPlugins}\n      rehypePlugins={rehypePlugins}\n      components={components}\n    >\n      {markdownContent}\n    </ReactMarkdown>\n  </div>\n);\n\nconst mergeNonSandboxSegments = (segments: RenderSegment[]) => {\n  if (segments.length <= 1) return segments;\n  const merged: RenderSegment[] = [];\n\n  segments.forEach((segment) => {\n    if (segment.type === \"sandbox\") {\n      merged.push(segment);\n      return;\n    }\n\n    const last = merged[merged.length - 1];\n    if (last && last.type !== \"sandbox\") {\n      merged[merged.length - 1] = {\n        type: \"markdown\",\n        value: `${last.value}${segment.value}`,\n      };\n      return;\n    }\n\n    merged.push({ type: \"markdown\", value: segment.value });\n  });\n\n  return merged;\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, true),\n    [content]\n  );\n\n  const hasSandbox = renderSegments.some(\n    (segment) => segment.type === \"sandbox\"\n  );\n  const mergedRenderSegments = useMemo(\n    () => mergeNonSandboxSegments(renderSegments),\n    [renderSegments]\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 markdown-body\">\n        {mergedRenderSegments.map((segment, idx) =>\n          segment.type === \"sandbox\" ? (\n            <IframeSandbox\n              key={`sandbox-${idx}`}\n              hideFullScreen\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 markdown-body\">\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","hasResponsiveSvg","hasFixedSvg","svgEl","viewBox","dimensions","value","viewBoxWidth","viewBoxHeight","widthAttr","heightAttr","hasWidth","hasHeight","hostResponsive","jsx","remarkPlugins","remarkGfm","remarkMath","remarkFlow","remarkBreaks","rehypePlugins","preserveCustomVariableProperties","rehypeRaw","restoreCustomVariableProperties","rehypeHighlight","highlightLanguages","subsetLanguages","rehypeKatex","MarkdownRenderer","markdownContent","components","ReactMarkdown","mergeNonSandboxSegments","segments","merged","segment","last","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","mergedRenderSegments","parseMarkdownSegments","hasCompleted","idx","IframeSandbox","jsxs","seg","index","React"],"mappings":"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"}

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

@@ -33,3 +33,5 @@ export declare const NativeHtmlElements: Story;
 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.cjs.js

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("../../_virtual/jsx-runtime.cjs.js"),n=require("react"),A=require("react-dom/client"),B=require("./SandboxApp.cjs.js"),D=require("./utils/split-content.cjs.js"),P=require("./ContentRender.cjs.js"),_=({content:l,type:j,className:W,loadingText:g,styleLoadingText:x,scriptLoadingText:R,fullScreenButtonText:a,hideFullScreen:p=!1,mode:r="content"})=>{const v=n.useRef(null),i=n.useRef(null),f=n.useRef(null),E=n.useRef(null),d=n.useRef(()=>{}),[C,w]=n.useState(480),[y,k]=n.useState(0),[q,F]=n.useState(!1),m=n.useRef(""),o=n.useMemo(()=>{const t=D.splitContentSegments(l).filter(c=>c.type==="sandbox");return(r==="blackboard"?t[t.length-1]?.value||"":t.map(c=>c.value).join(`
+`))||""},[l,r]);n.useEffect(()=>{if(r!=="blackboard"){m.current=o;return}const e=m.current;!(e&&o.startsWith(e))&&e&&k(s=>s+1),m.current=o},[o,r]),n.useEffect(()=>{const e=i.current;if(!e)return;const t=e.contentDocument;if(!t)return;t.open(),t.write(`<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      html, body { margin: 0; padding: 0; }
+      *, *::before, *::after { box-sizing: border-box; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>`),t.close(),E.current=t;const s=t.getElementById("root");if(!s)return;const c=A.createRoot(s);f.current=c;const h=()=>{if(!i.current||!t.body)return;const S=t.body.getBoundingClientRect(),M=t.documentElement?.getBoundingClientRect(),z=S.height,N=M?.height||0,O=Math.max(z,N),I=Math.max(200,Math.ceil(O));w(I)};d.current=h,h();const b=new ResizeObserver(()=>h());return b.observe(t.body),s&&b.observe(s),()=>{b.disconnect(),setTimeout(()=>{c.unmount(),f.current=null,E.current=null,d.current=()=>{}},0)}},[]),n.useEffect(()=>{const e=()=>{F(!!document.fullscreenElement)};return document.addEventListener("fullscreenchange",e),()=>document.removeEventListener("fullscreenchange",e)},[]);const H=()=>{const e=v.current||i.current;if(e){if(document.fullscreenElement){document.exitFullscreen().catch(()=>{});return}e.requestFullscreen&&e.requestFullscreen().catch(()=>{})}};return n.useEffect(()=>{const e=f.current;e&&(e.render(u.jsxRuntimeExports.jsx(B.default,{html:o,loadingText:g,styleLoadingText:x,scriptLoadingText:R,fullScreenButtonText:a,hideFullScreen:p,resetToken:y,mode:r})),requestAnimationFrame(()=>d.current?.()))},[l,o,g,x,R,a,y,r]),u.jsxRuntimeExports.jsxs("div",{ref:v,className:"w-full h-full overflow-auto relative flex flex-col justify-center content-render-iframe-sandbox",children:[!p&&u.jsxRuntimeExports.jsx("button",{type:"button",onClick:H,className:"absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",children:q?"退出全屏":a||"全屏浏览"}),r==="blackboard"&&j==="markdown"?u.jsxRuntimeExports.jsx(P.default,{content:l}):u.jsxRuntimeExports.jsx("iframe",{ref:i,sandbox:"allow-scripts allow-same-origin",allow:"fullscreen",allowFullScreen:!0,className:"w-full",style:{height:r==="blackboard"?"100%":`${C}px`}})]})};exports.default=_;
+//# sourceMappingURL=IframeSandbox.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IframeSandbox.cjs.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\";\nimport ContentRender from \"./ContentRender\";\nexport interface IframeSandboxProps {\n  content: string;\n  className?: string;\n  loadingText?: string;\n  styleLoadingText?: string;\n  scriptLoadingText?: string;\n  fullScreenButtonText?: string;\n  hideFullScreen?: boolean;\n  mode?: \"content\" | \"blackboard\";\n  type: \"sandbox\" | \"markdown\";\n}\n\nconst IframeSandbox: React.FC<IframeSandboxProps> = ({\n  content,\n  type,\n  className,\n  loadingText,\n  styleLoadingText,\n  scriptLoadingText,\n  fullScreenButtonText,\n  hideFullScreen = false,\n  mode = \"content\",\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\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 [isFullscreen, setIsFullscreen] = useState(false);\n  const prevHtmlRef = useRef<string>(\"\");\n  const htmlContent = React.useMemo(() => {\n    const segments = splitContentSegments(content);\n    // console.log('segments=====', segments);\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      *, *::before, *::after { box-sizing: border-box; }\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      // Defer unmount to avoid React warning when parent is mid-render\n      setTimeout(() => {\n        root.unmount();\n        rootRef.current = null;\n        docRef.current = null;\n        updateHeightRef.current = () => {};\n      }, 0);\n    };\n  }, []);\n\n  useEffect(() => {\n    const onFullscreenChange = () => {\n      setIsFullscreen(Boolean(document.fullscreenElement));\n    };\n    document.addEventListener(\"fullscreenchange\", onFullscreenChange);\n    return () =>\n      document.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n  }, []);\n\n  const toggleFullscreen = () => {\n    const target = containerRef.current || iframeRef.current;\n    if (!target) return;\n    if (document.fullscreenElement) {\n      document.exitFullscreen().catch(() => {});\n      return;\n    }\n    if (target.requestFullscreen) {\n      target.requestFullscreen().catch(() => {});\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        hideFullScreen={hideFullScreen}\n        resetToken={resetToken}\n        mode={mode}\n      />\n    );\n    requestAnimationFrame(() => updateHeightRef.current?.());\n  }, [\n    content,\n    htmlContent,\n    loadingText,\n    styleLoadingText,\n    scriptLoadingText,\n    fullScreenButtonText,\n    resetToken,\n    mode,\n  ]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={\n        \"w-full h-full overflow-auto relative flex flex-col justify-center content-render-iframe-sandbox\"\n      }\n    >\n      {!hideFullScreen && (\n        <button\n          type=\"button\"\n          onClick={toggleFullscreen}\n          className={\n            \"absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer\"\n          }\n        >\n          {isFullscreen ? \"退出全屏\" : fullScreenButtonText || \"全屏浏览\"}\n        </button>\n      )}\n      {mode === \"blackboard\" && type === \"markdown\" ? (\n        <ContentRender content={content} />\n      ) : (\n        <iframe\n          ref={iframeRef}\n          sandbox=\"allow-scripts allow-same-origin\"\n          allow=\"fullscreen\"\n          allowFullScreen\n          className={(className, \"w-full\")}\n          style={{\n            height: mode === \"blackboard\" ? \"100%\" : `${height}px`,\n            // height: `${height}px`,\n            // margin: \"16px 0\",\n          }}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default IframeSandbox;\n"],"names":["IframeSandbox","content","type","className","loadingText","styleLoadingText","scriptLoadingText","fullScreenButtonText","hideFullScreen","mode","containerRef","useRef","iframeRef","rootRef","docRef","updateHeightRef","height","setHeight","useState","resetToken","setResetToken","isFullscreen","setIsFullscreen","prevHtmlRef","htmlContent","React","sandboxSegments","splitContentSegments","seg","useEffect","prev","token","iframe","doc","rootEl","root","createRoot","updateHeight","bodyRect","htmlRect","bodyHeight","htmlHeight","contentHeight","nextHeight","resizeObserver","onFullscreenChange","toggleFullscreen","target","jsx","SandboxApp","jsxs","ContentRender"],"mappings":"iUAiBMA,EAA8C,CAAC,CACnD,QAAAC,EACA,KAAAC,EACA,UAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,qBAAAC,EACA,eAAAC,EAAiB,GACjB,KAAAC,EAAO,SACT,IAAM,CACJ,MAAMC,EAAeC,EAAAA,OAAuB,IAAI,EAC1CC,EAAYD,EAAAA,OAA0B,IAAI,EAC1CE,EAAUF,EAAAA,OAAoB,IAAI,EAClCG,EAASH,EAAAA,OAAwB,IAAI,EACrCI,EAAkBJ,EAAAA,OAAmB,IAAM,CAAC,CAAC,EAC7C,CAACK,EAAQC,CAAS,EAAIC,EAAAA,SAAS,GAAG,EAClC,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAS,CAAC,EACxC,CAACG,EAAcC,CAAe,EAAIJ,EAAAA,SAAS,EAAK,EAChDK,EAAcZ,EAAAA,OAAe,EAAE,EAC/Ba,EAAcC,EAAM,QAAQ,IAAM,CAGtC,MAAMC,EAFWC,EAAAA,qBAAqB1B,CAAO,EAEZ,OAAQ2B,GAAQA,EAAI,OAAS,SAAS,EAKvE,OAHEnB,IAAS,aACLiB,EAAgBA,EAAgB,OAAS,CAAC,GAAG,OAAS,GACtDA,EAAgB,IAAKE,GAAQA,EAAI,KAAK,EAAE,KAAK;AAAA,CAAI,IAC9B,EAC3B,EAAG,CAAC3B,EAASQ,CAAI,CAAC,EAElBoB,EAAAA,UAAU,IAAM,CACd,GAAIpB,IAAS,aAAc,CACzBc,EAAY,QAAUC,EACtB,MACF,CACA,MAAMM,EAAOP,EAAY,QAErB,EADmBO,GAAQN,EAAY,WAAWM,CAAI,IACnCA,GACrBV,EAAeW,GAAUA,EAAQ,CAAC,EAEpCR,EAAY,QAAUC,CACxB,EAAG,CAACA,EAAaf,CAAI,CAAC,EAEtBoB,EAAAA,UAAU,IAAM,CACd,MAAMG,EAASpB,EAAU,QACzB,GAAI,CAACoB,EAAQ,OAEb,MAAMC,EAAMD,EAAO,gBACnB,GAAI,CAACC,EAAK,OAEVA,EAAI,KAAA,EACJA,EAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAYN,EACJA,EAAI,MAAA,EACJnB,EAAO,QAAUmB,EAEjB,MAAMC,EAASD,EAAI,eAAe,MAAM,EACxC,GAAI,CAACC,EAAQ,OAEb,MAAMC,EAAOC,EAAAA,WAAWF,CAAM,EAC9BrB,EAAQ,QAAUsB,EAElB,MAAME,EAAe,IAAM,CACzB,GAAI,CAACzB,EAAU,SAAW,CAACqB,EAAI,KAAM,OACrC,MAAMK,EAAWL,EAAI,KAAK,sBAAA,EACpBM,EAAWN,EAAI,iBAAiB,sBAAA,EAChCO,EAAaF,EAAS,OACtBG,EAAaF,GAAU,QAAU,EACjCG,EAAgB,KAAK,IAAIF,EAAYC,CAAU,EAC/CE,EAAa,KAAK,IAAI,IAAK,KAAK,KAAKD,CAAa,CAAC,EACzDzB,EAAU0B,CAAU,CACtB,EACA5B,EAAgB,QAAUsB,EAE1BA,EAAA,EAEA,MAAMO,EAAiB,IAAI,eAAe,IAAMP,GAAc,EAC9D,OAAAO,EAAe,QAAQX,EAAI,IAAI,EAC3BC,GACFU,EAAe,QAAQV,CAAM,EAGxB,IAAM,CACXU,EAAe,WAAA,EAEf,WAAW,IAAM,CACfT,EAAK,QAAA,EACLtB,EAAQ,QAAU,KAClBC,EAAO,QAAU,KACjBC,EAAgB,QAAU,IAAM,CAAC,CACnC,EAAG,CAAC,CACN,CACF,EAAG,CAAA,CAAE,EAELc,EAAAA,UAAU,IAAM,CACd,MAAMgB,EAAqB,IAAM,CAC/BvB,EAAgB,EAAQ,SAAS,iBAAkB,CACrD,EACA,gBAAS,iBAAiB,mBAAoBuB,CAAkB,EACzD,IACL,SAAS,oBAAoB,mBAAoBA,CAAkB,CACvE,EAAG,CAAA,CAAE,EAEL,MAAMC,EAAmB,IAAM,CAC7B,MAAMC,EAASrC,EAAa,SAAWE,EAAU,QACjD,GAAKmC,EACL,IAAI,SAAS,kBAAmB,CAC9B,SAAS,iBAAiB,MAAM,IAAM,CAAC,CAAC,EACxC,MACF,CACIA,EAAO,mBACTA,EAAO,oBAAoB,MAAM,IAAM,CAAC,CAAC,EAE7C,EAEAlB,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMM,EAAOtB,EAAQ,QAChBsB,IAELA,EAAK,OACHa,EAAAA,kBAAAA,IAACC,EAAAA,QAAA,CACC,KAAMzB,EACN,YAAApB,EACA,iBAAAC,EACA,kBAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,WAAAW,EACA,KAAAV,CAAA,CAAA,CACF,EAEF,sBAAsB,IAAMM,EAAgB,WAAW,EACzD,EAAG,CACDd,EACAuB,EACApB,EACAC,EACAC,EACAC,EACAY,EACAV,CAAA,CACD,EAGCyC,EAAAA,kBAAAA,KAAC,MAAA,CACC,IAAKxC,EACL,UACE,kGAGD,SAAA,CAAA,CAACF,GACAwC,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAASF,EACT,UACE,qFAGD,SAAAzB,EAAe,OAASd,GAAwB,MAAA,CAAA,EAGpDE,IAAS,cAAgBP,IAAS,WACjC8C,EAAAA,kBAAAA,IAACG,UAAA,CAAc,QAAAlD,EAAkB,EAEjC+C,EAAAA,kBAAAA,IAAC,SAAA,CACC,IAAKpC,EACL,QAAQ,kCACR,MAAM,aACN,gBAAe,GACf,UAAuB,SACvB,MAAO,CACL,OAAQH,IAAS,aAAe,OAAS,GAAGO,CAAM,IAAA,CAGpD,CAAA,CACF,CAAA,CAAA,CAIR"}

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface IframeSandboxProps {
+    content: string;
+    className?: string;
+    loadingText?: string;
+    styleLoadingText?: string;
+    scriptLoadingText?: string;
+    fullScreenButtonText?: string;
+    hideFullScreen?: boolean;
+    mode?: "content" | "blackboard";
+    type: "sandbox" | "markdown";
+}
+declare const IframeSandbox: React.FC<IframeSandboxProps>;
+export default IframeSandbox;

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

@@ -0,0 +1,147 @@
+import { j as l } from "../../_virtual/jsx-runtime.es.js";
+import D, { useRef as c, useState as p, useEffect as a } from "react";
+import { createRoot as _ } from "react-dom/client";
+import P from "./SandboxApp.es.js";
+import { splitContentSegments as W } from "./utils/split-content.es.js";
+import Y from "./ContentRender.es.js";
+const V = ({
+  content: u,
+  type: j,
+  className: $,
+  loadingText: x,
+  styleLoadingText: v,
+  scriptLoadingText: R,
+  fullScreenButtonText: m,
+  hideFullScreen: y = !1,
+  mode: n = "content"
+}) => {
+  const C = c(null), i = c(null), f = c(null), w = c(null), d = c(() => {
+  }), [k, F] = p(480), [E, H] = p(0), [z, M] = p(!1), h = c(""), o = D.useMemo(() => {
+    const t = W(u).filter((s) => s.type === "sandbox");
+    return (n === "blackboard" ? t[t.length - 1]?.value || "" : t.map((s) => s.value).join(`
+`)) || "";
+  }, [u, n]);
+  a(() => {
+    if (n !== "blackboard") {
+      h.current = o;
+      return;
+    }
+    const e = h.current;
+    !(e && o.startsWith(e)) && e && H((r) => r + 1), h.current = o;
+  }, [o, n]), a(() => {
+    const e = i.current;
+    if (!e) return;
+    const t = e.contentDocument;
+    if (!t) return;
+    t.open(), t.write(`<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      html, body { margin: 0; padding: 0; }
+      *, *::before, *::after { box-sizing: border-box; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>`), t.close(), w.current = t;
+    const r = t.getElementById("root");
+    if (!r) return;
+    const s = _(r);
+    f.current = s;
+    const b = () => {
+      if (!i.current || !t.body) return;
+      const q = t.body.getBoundingClientRect(), I = t.documentElement?.getBoundingClientRect(), O = q.height, S = I?.height || 0, A = Math.max(O, S), B = Math.max(200, Math.ceil(A));
+      F(B);
+    };
+    d.current = b, b();
+    const g = new ResizeObserver(() => b());
+    return g.observe(t.body), r && g.observe(r), () => {
+      g.disconnect(), setTimeout(() => {
+        s.unmount(), f.current = null, w.current = null, d.current = () => {
+        };
+      }, 0);
+    };
+  }, []), a(() => {
+    const e = () => {
+      M(!!document.fullscreenElement);
+    };
+    return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
+  }, []);
+  const N = () => {
+    const e = C.current || i.current;
+    if (e) {
+      if (document.fullscreenElement) {
+        document.exitFullscreen().catch(() => {
+        });
+        return;
+      }
+      e.requestFullscreen && e.requestFullscreen().catch(() => {
+      });
+    }
+  };
+  return a(() => {
+    const e = f.current;
+    e && (e.render(
+      /* @__PURE__ */ l.jsx(
+        P,
+        {
+          html: o,
+          loadingText: x,
+          styleLoadingText: v,
+          scriptLoadingText: R,
+          fullScreenButtonText: m,
+          hideFullScreen: y,
+          resetToken: E,
+          mode: n
+        }
+      )
+    ), requestAnimationFrame(() => d.current?.()));
+  }, [
+    u,
+    o,
+    x,
+    v,
+    R,
+    m,
+    E,
+    n
+  ]), /* @__PURE__ */ l.jsxs(
+    "div",
+    {
+      ref: C,
+      className: "w-full h-full overflow-auto relative flex flex-col justify-center content-render-iframe-sandbox",
+      children: [
+        !y && /* @__PURE__ */ l.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: N,
+            className: "absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
+            children: z ? "退出全屏" : m || "全屏浏览"
+          }
+        ),
+        n === "blackboard" && j === "markdown" ? /* @__PURE__ */ l.jsx(Y, { content: u }) : /* @__PURE__ */ l.jsx(
+          "iframe",
+          {
+            ref: i,
+            sandbox: "allow-scripts allow-same-origin",
+            allow: "fullscreen",
+            allowFullScreen: !0,
+            className: "w-full",
+            style: {
+              height: n === "blackboard" ? "100%" : `${k}px`
+              // height: `${height}px`,
+              // margin: "16px 0",
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as default
+};
+//# sourceMappingURL=IframeSandbox.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IframeSandbox.es.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\";\nimport ContentRender from \"./ContentRender\";\nexport interface IframeSandboxProps {\n  content: string;\n  className?: string;\n  loadingText?: string;\n  styleLoadingText?: string;\n  scriptLoadingText?: string;\n  fullScreenButtonText?: string;\n  hideFullScreen?: boolean;\n  mode?: \"content\" | \"blackboard\";\n  type: \"sandbox\" | \"markdown\";\n}\n\nconst IframeSandbox: React.FC<IframeSandboxProps> = ({\n  content,\n  type,\n  className,\n  loadingText,\n  styleLoadingText,\n  scriptLoadingText,\n  fullScreenButtonText,\n  hideFullScreen = false,\n  mode = \"content\",\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\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 [isFullscreen, setIsFullscreen] = useState(false);\n  const prevHtmlRef = useRef<string>(\"\");\n  const htmlContent = React.useMemo(() => {\n    const segments = splitContentSegments(content);\n    // console.log('segments=====', segments);\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      *, *::before, *::after { box-sizing: border-box; }\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      // Defer unmount to avoid React warning when parent is mid-render\n      setTimeout(() => {\n        root.unmount();\n        rootRef.current = null;\n        docRef.current = null;\n        updateHeightRef.current = () => {};\n      }, 0);\n    };\n  }, []);\n\n  useEffect(() => {\n    const onFullscreenChange = () => {\n      setIsFullscreen(Boolean(document.fullscreenElement));\n    };\n    document.addEventListener(\"fullscreenchange\", onFullscreenChange);\n    return () =>\n      document.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n  }, []);\n\n  const toggleFullscreen = () => {\n    const target = containerRef.current || iframeRef.current;\n    if (!target) return;\n    if (document.fullscreenElement) {\n      document.exitFullscreen().catch(() => {});\n      return;\n    }\n    if (target.requestFullscreen) {\n      target.requestFullscreen().catch(() => {});\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        hideFullScreen={hideFullScreen}\n        resetToken={resetToken}\n        mode={mode}\n      />\n    );\n    requestAnimationFrame(() => updateHeightRef.current?.());\n  }, [\n    content,\n    htmlContent,\n    loadingText,\n    styleLoadingText,\n    scriptLoadingText,\n    fullScreenButtonText,\n    resetToken,\n    mode,\n  ]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={\n        \"w-full h-full overflow-auto relative flex flex-col justify-center content-render-iframe-sandbox\"\n      }\n    >\n      {!hideFullScreen && (\n        <button\n          type=\"button\"\n          onClick={toggleFullscreen}\n          className={\n            \"absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer\"\n          }\n        >\n          {isFullscreen ? \"退出全屏\" : fullScreenButtonText || \"全屏浏览\"}\n        </button>\n      )}\n      {mode === \"blackboard\" && type === \"markdown\" ? (\n        <ContentRender content={content} />\n      ) : (\n        <iframe\n          ref={iframeRef}\n          sandbox=\"allow-scripts allow-same-origin\"\n          allow=\"fullscreen\"\n          allowFullScreen\n          className={(className, \"w-full\")}\n          style={{\n            height: mode === \"blackboard\" ? \"100%\" : `${height}px`,\n            // height: `${height}px`,\n            // margin: \"16px 0\",\n          }}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default IframeSandbox;\n"],"names":["IframeSandbox","content","type","className","loadingText","styleLoadingText","scriptLoadingText","fullScreenButtonText","hideFullScreen","mode","containerRef","useRef","iframeRef","rootRef","docRef","updateHeightRef","height","setHeight","useState","resetToken","setResetToken","isFullscreen","setIsFullscreen","prevHtmlRef","htmlContent","React","sandboxSegments","splitContentSegments","seg","useEffect","prev","token","iframe","doc","rootEl","root","createRoot","updateHeight","bodyRect","htmlRect","bodyHeight","htmlHeight","contentHeight","nextHeight","resizeObserver","onFullscreenChange","toggleFullscreen","target","jsx","SandboxApp","jsxs","ContentRender"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("../../_virtual/jsx-runtime.cjs.js"),t=require("react"),P=require("../../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.cjs.js"),Q=({html:l,styleLoadingText:q,scriptLoadingText:B,resetToken:f=0,mode:G="content"})=>{const F=t.useRef(null),S=t.useRef(null),[,j]=t.useState(!0),[_,E]=t.useState(!1),[z,v]=t.useState(!1),b=t.useRef([]),C=t.useRef([]),A=t.useRef(0),N=t.useRef(0),p=t.useRef(null),d=t.useRef(null),m=t.useRef(!1),h=t.useRef(!1),w=t.useRef(!1),I=t.useRef(f),W=200,o=r=>{r.current&&(clearTimeout(r.current),r.current=null)},M=(r,n,c,x)=>{const i=performance.now()-c.current,g=Math.max(0,W-i);o(n),n.current=window.setTimeout(()=>{r(!1),x?.(),n.current=null},g)};t.useEffect(()=>{const r=S.current?.ownerDocument;if(!r)return;const n="sandbox-spinner-style";let c=r.getElementById(n);c||(c=r.createElement("style"),c.id=n,r.head?.appendChild(c)),c.textContent=`
+      @keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
+      .sandbox-wrapper { align-items: center; }
+      @media (max-width: 640px) {
+        .sandbox-wrapper { align-items: stretch; }
+      }
+    `},[]),t.useEffect(()=>{f!==I.current&&(w.current=!1,I.current=f),o(p),o(d),m.current=!1,h.current=!1;const r=S.current;if(!r)return;const n=r.ownerDocument,c=n?.body;if(!c)return;b.current.forEach(e=>e.remove()),b.current=[],C.current.forEach(e=>e.remove()),C.current=[];const x=w.current;j(!x),E(!1),v(!1),r.innerHTML="";const i=document.createElement("div");i.innerHTML=l;const g=(l.match(/<script[\s>]/gi)||[]).length,H=(l.match(/<\/script>/gi)||[]).length,O=g>0&&g===H,u=[];Array.from(i.querySelectorAll("style, script")).forEach(e=>{if(e.tagName.toLowerCase()==="style"){const s=n.createElement("style");s.textContent=e.textContent||"",Array.from(e.attributes).forEach(a=>{s.setAttribute(a.name,a.value)}),u.push(s)}else{const s=n.createElement("script");Array.from(e.attributes).forEach(a=>{s.setAttribute(a.name,a.value)}),s.textContent=e.textContent||"",u.push(s)}e.remove()});const L=u.some(e=>e.tagName.toLowerCase()==="style"),T=u.some(e=>e.tagName.toLowerCase()==="script");L&&(m.current=!0,A.current=performance.now(),o(p),E(!0)),T&&(h.current=!0,N.current=performance.now(),o(d),v(!0));const D=!!i.firstElementChild;j(!D&&!x),D&&(w.current=!0);const V=Array.from(i.childNodes);r.append(...V),u.forEach(e=>{if(e.tagName.toLowerCase()==="style"){n.head?.appendChild(e),b.current.push(e);return}if(O){const s=e,a=s.textContent||"";if(!s.src)try{new Function(a)}catch{s.remove();return}try{c.appendChild(s),C.current.push(s)}catch{s.remove()}}else e.remove()}),requestAnimationFrame(()=>{L&&M(E,p,A,()=>{m.current=!1}),T&&M(v,d,N,()=>{h.current=!1})})},[l,f]),t.useEffect(()=>()=>{o(p),o(d)},[]);const y=z||h.current?B||"Building scripts cache...":_||m.current?q||"Building styles...":null,k=G==="blackboard";return R.jsxRuntimeExports.jsxs("div",{ref:F,className:"sandbox-wrapper",style:{position:"relative",width:"100%",height:k?"100vh":void 0,display:"flex",flexDirection:"column",justifyContent:"space-around"},"aria-busy":!!y,children:[R.jsxRuntimeExports.jsx("div",{ref:S,style:{pointerEvents:y?"none":void 0}}),y&&R.jsxRuntimeExports.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:[R.jsxRuntimeExports.jsx(P.default,{"aria-hidden":!0,size:20,style:{animation:"sandbox-spin 1s linear infinite"}}),y]})]})};exports.default=Q;
+//# sourceMappingURL=SandboxApp.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SandboxApp.cjs.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  styleLoadingText?: string;\n  scriptLoadingText?: string;\n  resetToken?: number;\n  mode?: \"content\" | \"blackboard\";\n}\n\nconst SandboxApp: React.FC<SandboxAppProps> = ({\n  html,\n  styleLoadingText,\n  scriptLoadingText,\n  resetToken = 0,\n  mode = \"content\",\n}) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [, setIsWaitingFirstDiv] = useState(true);\n  const [isGeneratingStyles, setIsGeneratingStyles] = useState(false);\n  const [isGeneratingScripts, setIsGeneratingScripts] = 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 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      doc.head?.appendChild(styleEl);\n    }\n    styleEl.textContent = `\n      @keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }\n      .sandbox-wrapper { align-items: center; }\n      @media (max-width: 640px) {\n        .sandbox-wrapper { align-items: stretch; }\n      }\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    return null;\n  })();\n\n  const isBlackboard = mode === \"blackboard\";\n\n  return (\n    <div\n      ref={wrapperRef}\n      className=\"sandbox-wrapper\"\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        height: isBlackboard ? \"100vh\" : undefined,\n        display: \"flex\",\n        flexDirection: \"column\",\n        // if use center, too long iframe wont see header\n        justifyContent: \"space-around\",\n      }}\n      aria-busy={!!overlayMessage}\n    >\n      <div\n        ref={containerRef}\n        style={{\n          pointerEvents: overlayMessage ? \"none\" : undefined,\n        }}\n      />\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","styleLoadingText","scriptLoadingText","resetToken","mode","wrapperRef","useRef","containerRef","setIsWaitingFirstDiv","useState","isGeneratingStyles","setIsGeneratingStyles","isGeneratingScripts","setIsGeneratingScripts","appendedStylesRef","appendedScriptsRef","styleStartRef","scriptStartRef","styleTimerRef","scriptTimerRef","hasStylesRef","hasScriptsRef","hasRenderedContentRef","prevResetTokenRef","MIN_LOADING_MS","clearTimer","timerRef","settleStateWithMinimumDelay","setter","startRef","onDone","elapsed","delay","useEffect","doc","styleId","styleEl","container","body","node","hasRenderedBefore","wrapper","openScriptCount","closeScriptCount","shouldExecuteScripts","resourceQueue","cloned","attr","replacement","hasStyles","hasScripts","hasFirstElement","contentNodes","scriptNode","scriptText","overlayMessage","isBlackboard","jsxs","jsx","Loader2"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface SandboxAppProps {
+    html: string;
+    styleLoadingText?: string;
+    scriptLoadingText?: string;
+    resetToken?: number;
+    mode?: "content" | "blackboard";
+}
+declare const SandboxApp: React.FC<SandboxAppProps>;
+export default SandboxApp;

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

@@ -0,0 +1,173 @@
+import { j as v } from "../../_virtual/jsx-runtime.es.js";
+import { useRef as n, useState as A, useEffect as N } from "react";
+import K 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.es.js";
+const Z = ({
+  html: u,
+  styleLoadingText: F,
+  scriptLoadingText: z,
+  resetToken: f = 0,
+  mode: W = "content"
+}) => {
+  const k = n(null), S = n(null), [, I] = A(!0), [q, b] = A(!1), [H, C] = A(!1), w = n([]), E = n([]), j = n(0), L = n(0), p = n(null), d = n(null), m = n(!1), h = n(!1), R = n(!1), M = n(f), V = 200, c = (t) => {
+    t.current && (clearTimeout(t.current), t.current = null);
+  }, D = (t, s, o, x) => {
+    const i = performance.now() - o.current, g = Math.max(0, V - i);
+    c(s), s.current = window.setTimeout(() => {
+      t(!1), x?.(), s.current = null;
+    }, g);
+  };
+  N(() => {
+    const t = S.current?.ownerDocument;
+    if (!t) return;
+    const s = "sandbox-spinner-style";
+    let o = t.getElementById(s);
+    o || (o = t.createElement("style"), o.id = s, t.head?.appendChild(o)), o.textContent = `
+      @keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
+      .sandbox-wrapper { align-items: center; }
+      @media (max-width: 640px) {
+        .sandbox-wrapper { align-items: stretch; }
+      }
+    `;
+  }, []), N(() => {
+    f !== M.current && (R.current = !1, M.current = f), c(p), c(d), m.current = !1, h.current = !1;
+    const t = S.current;
+    if (!t) return;
+    const s = t.ownerDocument, o = s?.body;
+    if (!o) return;
+    w.current.forEach((e) => e.remove()), w.current = [], E.current.forEach((e) => e.remove()), E.current = [];
+    const x = R.current;
+    I(!x), b(!1), C(!1), t.innerHTML = "";
+    const i = document.createElement("div");
+    i.innerHTML = u;
+    const g = (u.match(/<script[\s>]/gi) || []).length, O = (u.match(/<\/script>/gi) || []).length, Q = g > 0 && g === O, l = [];
+    Array.from(i.querySelectorAll("style, script")).forEach((e) => {
+      if (e.tagName.toLowerCase() === "style") {
+        const r = s.createElement("style");
+        r.textContent = e.textContent || "", Array.from(e.attributes).forEach((a) => {
+          r.setAttribute(a.name, a.value);
+        }), l.push(r);
+      } else {
+        const r = s.createElement("script");
+        Array.from(e.attributes).forEach((a) => {
+          r.setAttribute(a.name, a.value);
+        }), r.textContent = e.textContent || "", l.push(r);
+      }
+      e.remove();
+    });
+    const T = l.some(
+      (e) => e.tagName.toLowerCase() === "style"
+    ), B = l.some(
+      (e) => e.tagName.toLowerCase() === "script"
+    );
+    T && (m.current = !0, j.current = performance.now(), c(p), b(!0)), B && (h.current = !0, L.current = performance.now(), c(d), C(!0));
+    const G = !!i.firstElementChild;
+    I(!G && !x), G && (R.current = !0);
+    const J = Array.from(i.childNodes);
+    t.append(...J), l.forEach((e) => {
+      if (e.tagName.toLowerCase() === "style") {
+        s.head?.appendChild(e), w.current.push(e);
+        return;
+      }
+      if (Q) {
+        const r = e, a = r.textContent || "";
+        if (!r.src)
+          try {
+            new Function(a);
+          } catch {
+            r.remove();
+            return;
+          }
+        try {
+          o.appendChild(r), E.current.push(r);
+        } catch {
+          r.remove();
+        }
+      } else
+        e.remove();
+    }), requestAnimationFrame(() => {
+      T && D(
+        b,
+        p,
+        j,
+        () => {
+          m.current = !1;
+        }
+      ), B && D(
+        C,
+        d,
+        L,
+        () => {
+          h.current = !1;
+        }
+      );
+    });
+  }, [u, f]), N(
+    () => () => {
+      c(p), c(d);
+    },
+    []
+  );
+  const y = H || h.current ? z || "Building scripts cache..." : q || m.current ? F || "Building styles..." : null, _ = W === "blackboard";
+  return /* @__PURE__ */ v.jsxs(
+    "div",
+    {
+      ref: k,
+      className: "sandbox-wrapper",
+      style: {
+        position: "relative",
+        width: "100%",
+        height: _ ? "100vh" : void 0,
+        display: "flex",
+        flexDirection: "column",
+        // if use center, too long iframe wont see header
+        justifyContent: "space-around"
+      },
+      "aria-busy": !!y,
+      children: [
+        /* @__PURE__ */ v.jsx(
+          "div",
+          {
+            ref: S,
+            style: {
+              pointerEvents: y ? "none" : void 0
+            }
+          }
+        ),
+        y && /* @__PURE__ */ v.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__ */ v.jsx(
+                K,
+                {
+                  "aria-hidden": !0,
+                  size: 20,
+                  style: { animation: "sandbox-spin 1s linear infinite" }
+                }
+              ),
+              y
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Z as default
+};
+//# sourceMappingURL=SandboxApp.es.js.map