markdown-flow-ui 0.1.83-beta.0 → 0.1.83-beta.10

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\";\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      // 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 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 markdown-body\">\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 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","ContentRender","content","customRenderBar","onSend","typingSpeed","enableTypewriter","defaultButtonText","defaultInputText","defaultSelectedValues","readonly","onTypeFinished","confirmButtonText","copyButtonText","copiedButtonText","sandboxLoadingText","sandboxStyleLoadingText","sandboxScriptLoadingText","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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"}
+{"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      // 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 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 markdown-body\">\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 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","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/IframeSandbox.d.ts

@@ -6,6 +6,7 @@ export interface IframeSandboxProps {
     styleLoadingText?: string;
     scriptLoadingText?: string;
     fullScreenButtonText?: string;
+    hideFullScreen?: boolean;
     mode?: "content" | "blackboard";
     type: "sandbox" | "markdown";
 }

package/dist/components/ContentRender/IframeSandbox.js

@@ -1,34 +1,35 @@
 import { j as l } from "../../_virtual/jsx-runtime.js";
-import D, { useRef as i, useState as y, useEffect as b } from "react";
-import { createRoot as F } from "react-dom/client";
-import I from "./SandboxApp.js";
-import { splitContentSegments as _ } from "./utils/split-content.js";
-import q from "./ContentRender.js";
-const J = ({
-  content: c,
-  type: w,
-  className: C,
-  loadingText: g,
-  styleLoadingText: p,
-  scriptLoadingText: x,
-  fullScreenButtonText: H,
-  mode: s = "content"
+import B, { useRef as s, useState as p, useEffect as a } from "react";
+import { createRoot as D } from "react-dom/client";
+import _ from "./SandboxApp.js";
+import { splitContentSegments as P } from "./utils/split-content.js";
+import W from "./ContentRender.js";
+const V = ({
+  content: u,
+  type: j,
+  className: Y,
+  loadingText: v,
+  styleLoadingText: x,
+  scriptLoadingText: R,
+  fullScreenButtonText: m,
+  hideFullScreen: y = !1,
+  mode: c = "content"
 }) => {
-  const u = i(null), a = i(null), R = i(null), m = i(() => {
-  }), [j, S] = y(480), [v, k] = y(0), d = i(""), o = D.useMemo(() => {
-    const t = _(c).filter((r) => r.type === "sandbox");
-    return (s === "blackboard" ? t[t.length - 1]?.value || "" : t.map((r) => r.value).join(`
+  const C = s(null), i = s(null), f = s(null), w = s(null), d = s(() => {
+  }), [, k] = p(480), [E, F] = p(0), [H, M] = p(!1), h = s(""), r = B.useMemo(() => {
+    const t = P(u).filter((o) => o.type === "sandbox");
+    return (c === "blackboard" ? t[t.length - 1]?.value || "" : t.map((o) => o.value).join(`
 `)) || "";
-  }, [c, s]);
-  return b(() => {
-    if (s !== "blackboard") {
-      d.current = o;
+  }, [u, c]);
+  a(() => {
+    if (c !== "blackboard") {
+      h.current = r;
       return;
     }
-    const e = d.current;
-    !(e && o.startsWith(e)) && e && k((n) => n + 1), d.current = o;
-  }, [o, s]), b(() => {
-    const e = u.current;
+    const e = h.current;
+    !(e && r.startsWith(e)) && e && F((n) => n + 1), h.current = r;
+  }, [r, c]), a(() => {
+    const e = i.current;
     if (!e) return;
     const t = e.contentDocument;
     if (!t) return;
@@ -43,62 +44,100 @@ const J = ({
   <body>
     <div id="root"></div>
   </body>
-</html>`), t.close(), R.current = t;
+</html>`), t.close(), w.current = t;
     const n = t.getElementById("root");
     if (!n) return;
-    const r = F(n);
-    a.current = r;
-    const h = () => {
-      if (!u.current || !t.body) return;
-      const E = t.body.getBoundingClientRect(), M = t.documentElement?.getBoundingClientRect(), B = E.height, O = M?.height || 0, z = Math.max(B, O), A = Math.max(200, Math.ceil(z));
-      S(A);
+    const o = D(n);
+    f.current = o;
+    const b = () => {
+      if (!i.current || !t.body) return;
+      const q = t.body.getBoundingClientRect(), z = t.documentElement?.getBoundingClientRect(), I = q.height, O = z?.height || 0, S = Math.max(I, O), A = Math.max(200, Math.ceil(S));
+      k(A);
     };
-    m.current = h, h();
-    const f = new ResizeObserver(() => h());
-    return f.observe(t.body), n && f.observe(n), () => {
-      f.disconnect(), r.unmount(), a.current = null, R.current = null, m.current = () => {
-      };
+    d.current = b, b();
+    const g = new ResizeObserver(() => b());
+    return g.observe(t.body), n && g.observe(n), () => {
+      g.disconnect(), setTimeout(() => {
+        o.unmount(), f.current = null, w.current = null, d.current = () => {
+        };
+      }, 0);
     };
-  }, []), b(() => {
-    const e = a.current;
+  }, []), 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(
-        I,
+        _,
         {
-          html: o,
-          loadingText: g,
-          styleLoadingText: p,
-          scriptLoadingText: x,
-          resetToken: v
+          html: r,
+          loadingText: v,
+          styleLoadingText: x,
+          scriptLoadingText: R,
+          fullScreenButtonText: m,
+          hideFullScreen: y,
+          resetToken: E
         }
       )
-    ), requestAnimationFrame(() => m.current?.()));
+    ), requestAnimationFrame(() => d.current?.()));
   }, [
-    c,
-    o,
-    g,
-    p,
+    u,
+    r,
+    v,
     x,
-    H,
-    v
-  ]), /* @__PURE__ */ l.jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, children: s === "blackboard" && w === "markdown" ? /* @__PURE__ */ l.jsx(q, { content: c }) : /* @__PURE__ */ l.jsx(
-    "iframe",
+    R,
+    m,
+    E
+  ]), /* @__PURE__ */ l.jsxs(
+    "div",
     {
-      ref: u,
-      sandbox: "allow-scripts allow-same-origin",
-      allow: "fullscreen",
-      allowFullScreen: !0,
-      className: C,
-      style: {
-        width: "100%",
-        height: `${j}px`
-        // margin: "16px 0",
-      },
-      title: "HTML Sandbox"
+      ref: C,
+      className: "w-full h-full overflow-auto relative flex flex-col justify-center",
+      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: H ? "退出全屏" : m || "全屏浏览"
+          }
+        ),
+        c === "blackboard" && j === "markdown" ? /* @__PURE__ */ l.jsx(W, { content: u }) : /* @__PURE__ */ l.jsx(
+          "iframe",
+          {
+            ref: i,
+            sandbox: "allow-scripts allow-same-origin",
+            allow: "fullscreen",
+            allowFullScreen: !0,
+            className: "w-full h-full",
+            style: {
+              // height: `${height}px`,
+              // margin: "16px 0",
+            }
+          }
+        )
+      ]
     }
-  ) });
+  );
 };
 export {
-  J as default
+  V 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\";\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  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  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    <div style={{ width: \"100%\", height: \"100%\", overflow: \"auto\" }}>\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}\n          style={{\n            width: \"100%\",\n            height: `${height}px`,\n            // margin: \"16px 0\",\n          }}\n          title=\"HTML Sandbox\"\n        />\n      )}\n    </div>\n  );\n};\n\nexport default IframeSandbox;\n"],"names":["IframeSandbox","content","type","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","ContentRender"],"mappings":";;;;;;AAgBA,MAAMA,IAA8C,CAAC;AAAA,EACnD,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,MAAAC,IAAO;AACT,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,GAClC,CAACC,GAAYC,CAAa,IAAIF,EAAS,CAAC,GACxCG,IAAcT,EAAe,EAAE,GAC/BU,IAAcC,EAAM,QAAQ,MAAM;AAEtC,UAAMC,IADWC,EAAqBtB,CAAO,EACZ,OAAO,CAACuB,MAAQA,EAAI,SAAS,SAAS;AAKvE,YAHEhB,MAAS,eACLc,EAAgBA,EAAgB,SAAS,CAAC,GAAG,SAAS,KACtDA,EAAgB,IAAI,CAACE,MAAQA,EAAI,KAAK,EAAE,KAAK;AAAA,CAAI,MAC9B;AAAA,EAC3B,GAAG,CAACvB,GAASO,CAAI,CAAC;AAElB,SAAAiB,EAAU,MAAM;AACd,QAAIjB,MAAS,cAAc;AACzB,MAAAW,EAAY,UAAUC;AACtB;AAAA,IACF;AACA,UAAMM,IAAOP,EAAY;AAEzB,IAAI,EADmBO,KAAQN,EAAY,WAAWM,CAAI,MACnCA,KACrBR,EAAc,CAACS,MAAUA,IAAQ,CAAC,GAEpCR,EAAY,UAAUC;AAAA,EACxB,GAAG,CAACA,GAAaZ,CAAI,CAAC,GAEtBiB,EAAU,MAAM;AACd,UAAMG,IAASnB,EAAU;AACzB,QAAI,CAACmB,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,GACJjB,EAAO,UAAUiB;AAEjB,UAAMC,IAASD,EAAI,eAAe,MAAM;AACxC,QAAI,CAACC,EAAQ;AAEb,UAAMC,IAAOC,EAAWF,CAAM;AAC9B,IAAAnB,EAAQ,UAAUoB;AAElB,UAAME,IAAe,MAAM;AACzB,UAAI,CAACxB,EAAU,WAAW,CAACoB,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,MAAAvB,EAAUwB,CAAU;AAAA,IACtB;AACA,IAAA1B,EAAgB,UAAUoB,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,GACLpB,EAAQ,UAAU,MAClBC,EAAO,UAAU,MACjBC,EAAgB,UAAU,MAAM;AAAA,MAAC;AAAA,IACnC;AAAA,EACF,GAAG,CAAA,CAAE,GAELY,EAAU,MAAM;AACd,UAAMM,IAAOpB,EAAQ;AACrB,IAAKoB,MAELA,EAAK;AAAA,MACHU,gBAAAA,EAAAA;AAAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAMtB;AAAA,UACN,aAAAhB;AAAA,UACA,kBAAAC;AAAA,UACA,mBAAAC;AAAA,UAEA,YAAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GAEF,sBAAsB,MAAMJ,EAAgB,WAAW;AAAA,EACzD,GAAG;AAAA,IACDZ;AAAA,IACAmB;AAAA,IACAhB;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAU;AAAA,EAAA,CACD,yBAGE,OAAA,EAAI,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAA,GACpD,gBAAS,gBAAgBf,MAAS,aACjCuC,gBAAAA,EAAAA,IAACE,GAAA,EAAc,SAAA1C,GAAkB,IAEjCwC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKhC;AAAA,MACL,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,iBAAe;AAAA,MACf,WAAAN;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ,GAAGW,CAAM;AAAA;AAAA,MAAA;AAAA,MAGnB,OAAM;AAAA,IAAA;AAAA,EAAA,GAGZ;AAEJ;"}
+{"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\";\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 [, 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    </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      />\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    <div\n      ref={containerRef}\n      className={\n        \"w-full h-full overflow-auto relative flex flex-col justify-center\"\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 h-full\")}\n          style={\n            {\n              // height: `${height}px`,\n              // margin: \"16px 0\",\n            }\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","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.d.ts

@@ -4,7 +4,6 @@ export interface SandboxAppProps {
     loadingText?: string;
     styleLoadingText?: string;
     scriptLoadingText?: string;
-    fullScreenButtonText?: string;
     resetToken?: number;
 }
 declare const SandboxApp: React.FC<SandboxAppProps>;

package/dist/components/ContentRender/SandboxApp.js

@@ -1,141 +1,124 @@
 import { j as v } from "../../_virtual/jsx-runtime.js";
-import { useRef as n, useState as E, useEffect as S } from "react";
-import X 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 = ({
+import { useRef as n, useState as A, useEffect as I } 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.js";
+const Z = ({
   html: u,
-  loadingText: W,
-  styleLoadingText: q,
+  loadingText: B,
+  styleLoadingText: W,
   scriptLoadingText: z,
-  fullScreenButtonText: H,
   resetToken: f = 0
 }) => {
-  const A = n(null), C = n(null), [V, I] = E(!0), [_, w] = E(!1), [O, b] = E(!1), [Q, k] = E(!1), R = n([]), F = n([]), N = n(0), T = n(0), p = n(null), d = n(null), m = n(!1), h = n(!1), L = n(!1), j = n(f), J = 200, o = (e) => {
-    e.current && (clearTimeout(e.current), e.current = null);
-  }, M = (e, s, c, g) => {
-    const i = performance.now() - c.current, x = Math.max(0, J - i);
-    o(s), s.current = window.setTimeout(() => {
-      e(!1), g?.(), s.current = null;
+  const q = n(null), S = n(null), [H, L] = A(!0), [V, C] = A(!1), [_, E] = A(!1), b = n([]), w = n([]), N = n(0), j = n(0), p = n(null), d = n(null), m = n(!1), h = n(!1), R = n(!1), D = n(f), O = 200, c = (t) => {
+    t.current && (clearTimeout(t.current), t.current = null);
+  }, M = (t, s, o, g) => {
+    const a = performance.now() - o.current, x = Math.max(0, O - a);
+    c(s), s.current = window.setTimeout(() => {
+      t(!1), g?.(), s.current = null;
     }, x);
   };
-  S(() => {
-    const e = () => {
-      k(!!document.fullscreenElement);
-    };
-    return document.addEventListener("fullscreenchange", e), () => {
-      document.removeEventListener("fullscreenchange", e);
-    };
-  }, []), S(() => {
-    const e = C.current?.ownerDocument;
-    if (!e) return;
+  I(() => {
+    const t = S.current?.ownerDocument;
+    if (!t) return;
     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));
-  }, []), S(() => {
-    f !== j.current && (L.current = !1, j.current = f), o(p), o(d), m.current = !1, h.current = !1;
-    const e = C.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 g = L.current;
-    I(!g), w(!1), b(!1), e.innerHTML = "";
-    const i = document.createElement("div");
-    i.innerHTML = u;
-    const x = (u.match(/<script[\s>]/gi) || []).length, K = (u.match(/<\/script>/gi) || []).length, P = x > 0 && x === K, l = [];
-    Array.from(i.querySelectorAll("style, script")).forEach((t) => {
-      if (t.tagName.toLowerCase() === "style") {
+    let o = t.getElementById(s);
+    o || (o = t.createElement("style"), o.id = s, o.textContent = "@keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }", t.head?.appendChild(o));
+  }, []), I(() => {
+    f !== D.current && (R.current = !1, D.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;
+    b.current.forEach((e) => e.remove()), b.current = [], w.current.forEach((e) => e.remove()), w.current = [];
+    const g = R.current;
+    L(!g), C(!1), E(!1), t.innerHTML = "";
+    const a = document.createElement("div");
+    a.innerHTML = u;
+    const x = (u.match(/<script[\s>]/gi) || []).length, Q = (u.match(/<\/script>/gi) || []).length, k = x > 0 && x === Q, l = [];
+    Array.from(a.querySelectorAll("style, script")).forEach((e) => {
+      if (e.tagName.toLowerCase() === "style") {
         const r = s.createElement("style");
-        r.textContent = t.textContent || "", Array.from(t.attributes).forEach((a) => {
-          r.setAttribute(a.name, a.value);
+        r.textContent = e.textContent || "", Array.from(e.attributes).forEach((i) => {
+          r.setAttribute(i.name, i.value);
         }), l.push(r);
       } else {
         const r = s.createElement("script");
-        Array.from(t.attributes).forEach((a) => {
-          r.setAttribute(a.name, a.value);
-        }), r.textContent = t.textContent || "", l.push(r);
+        Array.from(e.attributes).forEach((i) => {
+          r.setAttribute(i.name, i.value);
+        }), r.textContent = e.textContent || "", l.push(r);
       }
-      t.remove();
+      e.remove();
     });
-    const D = l.some(
-      (t) => t.tagName.toLowerCase() === "style"
-    ), B = l.some(
-      (t) => t.tagName.toLowerCase() === "script"
+    const T = l.some(
+      (e) => e.tagName.toLowerCase() === "style"
+    ), F = l.some(
+      (e) => e.tagName.toLowerCase() === "script"
     );
-    D && (m.current = !0, N.current = performance.now(), o(p), w(!0)), B && (h.current = !0, T.current = performance.now(), o(d), b(!0));
-    const G = !!i.firstElementChild;
-    I(!G && !g), G && (L.current = !0);
-    const U = Array.from(i.childNodes);
-    e.append(...U), l.forEach((t) => {
-      if (t.tagName.toLowerCase() === "style") {
-        s.head?.appendChild(t), R.current.push(t);
+    T && (m.current = !0, N.current = performance.now(), c(p), C(!0)), F && (h.current = !0, j.current = performance.now(), c(d), E(!0));
+    const G = !!a.firstElementChild;
+    L(!G && !g), G && (R.current = !0);
+    const J = Array.from(a.childNodes);
+    t.append(...J), l.forEach((e) => {
+      if (e.tagName.toLowerCase() === "style") {
+        s.head?.appendChild(e), b.current.push(e);
         return;
       }
-      if (P) {
-        const r = t, a = r.textContent || "";
+      if (k) {
+        const r = e, i = r.textContent || "";
         if (!r.src)
           try {
-            new Function(a);
+            new Function(i);
           } catch {
             r.remove();
             return;
           }
         try {
-          c.appendChild(r), F.current.push(r);
+          o.appendChild(r), w.current.push(r);
         } catch {
           r.remove();
         }
       } else
-        t.remove();
+        e.remove();
     }), requestAnimationFrame(() => {
-      D && M(
-        w,
+      T && M(
+        C,
         p,
         N,
         () => {
           m.current = !1;
         }
-      ), B && M(
-        b,
+      ), F && M(
+        E,
         d,
-        T,
+        j,
         () => {
           h.current = !1;
         }
       );
     });
-  }, [u, f]), S(
+  }, [u, f]), I(
     () => () => {
-      o(p), o(d);
+      c(p), c(d);
     },
     []
   );
-  const y = O || h.current ? z || "Building scripts cache..." : _ || m.current ? q || "Building styles..." : V ? W || "Loading..." : null;
-  return console.log(
-    "fullScreenButtonText",
-    H,
-    Q,
-    () => {
-      const e = A.current;
-      if (e) {
-        if (!document.fullscreenElement) {
-          e.requestFullscreen?.().catch(() => {
-          });
-          return;
-        }
-        document.exitFullscreen?.();
-      }
-    }
-  ), /* @__PURE__ */ v.jsxs(
+  const y = _ || h.current ? z || "Building scripts cache..." : V || m.current ? W || "Building styles..." : H ? B || "Loading..." : null;
+  return /* @__PURE__ */ v.jsxs(
     "div",
     {
-      ref: A,
-      style: { position: "relative", minHeight: 120 },
+      ref: q,
+      style: {
+        position: "relative",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center"
+      },
       "aria-busy": !!y,
       children: [
         /* @__PURE__ */ v.jsx(
           "div",
           {
-            ref: C,
+            ref: S,
             style: {
               pointerEvents: y ? "none" : void 0
             }
@@ -160,7 +143,7 @@ const re = ({
             },
             children: [
               /* @__PURE__ */ v.jsx(
-                X,
+                K,
                 {
                   "aria-hidden": !0,
                   size: 20,
@@ -176,6 +159,6 @@ const re = ({
   );
 };
 export {
-  re as default
+  Z as default
 };
 //# sourceMappingURL=SandboxApp.js.map