markdown-flow-ui 0.1.115-beta.0 → 0.1.115

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

@@ -1,89 +1,89 @@
 import { j as t } from "../../_virtual/jsx-runtime.es.js";
 /* empty css                                                                                                            */
 /* empty css                                                                                               */
-import Q, { useMemo as h, useRef as te, useEffect as G } from "react";
-import ae from "../../_virtual/index.es.js";
-import { sanitizeInvalidTagName as ie } from "./utils/sanitize-invalid-tag-name.es.js";
-import { stripSvgTextLineBreaks as le } from "./utils/strip-svg-text-line-breaks.es.js";
+import X, { useMemo as h, useRef as E, useEffect as F } from "react";
+import se from "../../_virtual/index.es.js";
+import { sanitizeInvalidTagName as oe } from "./utils/sanitize-invalid-tag-name.es.js";
+import { stripSvgTextLineBreaks as ae } from "./utils/strip-svg-text-line-breaks.es.js";
 /* empty css                     */
 /* empty css                             */
-import ce from "./CodeBlock.es.js";
-import me from "./plugins/CustomVariable.es.js";
-import F from "./plugins/MermaidChart.es.js";
-import de from "./useTypewriterStateMachine.es.js";
-import { preserveCustomVariableProperties as ue, restoreCustomVariableProperties as he } from "./utils/custom-variable-props.es.js";
-import { subsetLanguages as pe, highlightLanguages as fe } from "./utils/highlight-languages.es.js";
-import { mermaidBlockIsComplete as xe, parseMarkdownSegments as Y } from "./utils/mermaid-parse.es.js";
-import { normalizeInlineHtml as Z } from "./utils/normalize-inline-html.es.js";
-import ve from "./IframeSandbox.es.js";
-import { splitContentSegments as ge } from "./utils/split-content.es.js";
-import { getInteractionDefaultValues as be } from "../../lib/interaction-defaults.es.js";
-import { Markdown as ye } from "../../markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.es.js";
-import Ne from "../../markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.es.js";
-import je from "../../markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.es.js";
-import ke from "../../markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.es.js";
-import we from "../../markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.es.js";
-import Se from "../../markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.es.js";
-import Re from "../../markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.es.js";
-const Le = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)\b/i, E = ({ svg: r }) => {
-  const o = te(null);
-  return G(() => {
+import ie from "./CodeBlock.es.js";
+import le from "./plugins/CustomVariable.es.js";
+import W from "./plugins/MermaidChart.es.js";
+import ce from "./useTypewriterStateMachine.es.js";
+import { preserveCustomVariableProperties as me, restoreCustomVariableProperties as de } from "./utils/custom-variable-props.es.js";
+import { subsetLanguages as ue, highlightLanguages as pe } from "./utils/highlight-languages.es.js";
+import { parseMarkdownSegments as J, mermaidBlockIsComplete as he } from "./utils/mermaid-parse.es.js";
+import { normalizeInlineHtml as Q } from "./utils/normalize-inline-html.es.js";
+import fe from "./IframeSandbox.es.js";
+import { splitContentSegments as xe } from "./utils/split-content.es.js";
+import { getInteractionDefaultValues as ve } from "../../lib/interaction-defaults.es.js";
+import { Markdown as ge } from "../../markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.es.js";
+import be from "../../markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.es.js";
+import ye from "../../markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.es.js";
+import Ne from "../../markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.es.js";
+import je from "../../markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.es.js";
+import ke from "../../markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.es.js";
+import we from "../../markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.es.js";
+const Se = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)\b/i, Y = ({ svg: r }) => {
+  const o = E(null);
+  return F(() => {
     const a = o.current;
     if (!a) return;
-    const i = a.shadowRoot ?? a.attachShadow({ mode: "open" }), N = "content-render-svg-style";
-    let l = i.getElementById(N);
-    l || (l = document.createElement("style"), l.id = N, l.textContent = `
+    const i = a.shadowRoot ?? a.attachShadow({ mode: "open" }), y = "content-render-svg-style";
+    let l = i.getElementById(y);
+    l || (l = document.createElement("style"), l.id = y, l.textContent = `
         svg { height: auto; display: inline-block; }
         svg.content-render-svg-el--responsive { width: 100%; max-width: 100%; }
         svg.content-render-svg-el--fixed { max-width: none; }
       `, i.appendChild(l)), Array.from(i.childNodes).filter(
       (n) => n !== l
     ).forEach((n) => i.removeChild(n));
-    const C = document.createElement("template"), D = le(r);
-    C.innerHTML = D, i.append(C.content.cloneNode(!0));
-    let j = !1, k = !1;
+    const T = document.createElement("template"), z = ae(r);
+    T.innerHTML = z, i.append(T.content.cloneNode(!0));
+    let N = !1, C = !1;
     i.querySelectorAll("svg").forEach((n) => {
-      const S = n.getAttribute("viewBox");
-      if (!S) return;
-      const f = S.trim().split(/[\s,]+/).map((c) => Number(c));
-      if (f.length !== 4 || f.some(Number.isNaN)) return;
-      const [, , x, p] = f, v = n.getAttribute("width"), g = n.getAttribute("height"), A = (c) => {
+      const L = n.getAttribute("viewBox");
+      if (!L) return;
+      const k = L.trim().split(/[\s,]+/).map((c) => Number(c));
+      if (k.length !== 4 || k.some(Number.isNaN)) return;
+      const [, , f, p] = k, x = n.getAttribute("width"), v = n.getAttribute("height"), B = (c) => {
         if (!c) return !1;
         const m = c.trim().toLowerCase();
         return m === "auto" || m.endsWith("%");
-      }, B = (c) => {
+      }, A = (c) => {
         if (!c) return null;
         const m = c.trim().toLowerCase();
         if (m === "auto" || m.endsWith("%"))
           return null;
-        const L = Number.parseFloat(m);
-        return Number.isNaN(L) ? null : L;
-      }, $ = A(v), z = A(g), R = !v || v === "0", b = !g || g === "0", M = B(v), I = B(g);
-      if ($ || z || R && b || M === x && I === p) {
-        j = !0, n.classList.add("content-render-svg-el--responsive"), n.classList.remove("content-render-svg-el--fixed"), n.style.width = "100%", n.style.height = "auto", !n.style.aspectRatio && p > 0 && (n.style.aspectRatio = `${x} / ${p}`);
+        const S = Number.parseFloat(m);
+        return Number.isNaN(S) ? null : S;
+      }, M = B(x), I = B(v), w = !x || x === "0", g = !v || v === "0", V = A(x), H = A(v);
+      if (M || I || w && g || V === f && H === p) {
+        N = !0, n.classList.add("content-render-svg-el--responsive"), n.classList.remove("content-render-svg-el--fixed"), n.style.width = "100%", n.style.height = "auto", !n.style.aspectRatio && p > 0 && (n.style.aspectRatio = `${f} / ${p}`);
         return;
       }
-      k = !0, n.classList.add("content-render-svg-el--fixed"), n.classList.remove("content-render-svg-el--responsive"), R && x > 0 && n.setAttribute("width", `${x}`), b && p > 0 && n.setAttribute("height", `${p}`);
+      C = !0, n.classList.add("content-render-svg-el--fixed"), n.classList.remove("content-render-svg-el--responsive"), w && f > 0 && n.setAttribute("width", `${f}`), g && p > 0 && n.setAttribute("height", `${p}`);
     });
-    const w = j && !k;
-    a.classList.toggle("content-render-svg--responsive", w), a.classList.toggle("content-render-svg--fixed", !w);
+    const j = N && !C;
+    a.classList.toggle("content-render-svg--responsive", j), a.classList.toggle("content-render-svg--fixed", !j);
   }, [r]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: o }) });
-}, Te = [we, Se, ae, Re], Ce = [
-  ue,
-  Ne,
-  ie,
-  he,
-  [je, { languages: fe, subset: pe }],
-  ke
-], ee = ({ content: r, components: o }) => /* @__PURE__ */ t.jsx("div", { className: "markdown-renderer", children: /* @__PURE__ */ t.jsx(
-  ye,
+}, Re = [je, ke, se, we], Te = [
+  me,
+  be,
+  oe,
+  de,
+  [ye, { languages: pe, subset: ue }],
+  Ne
+], Z = ({ content: r, components: o }) => /* @__PURE__ */ t.jsx("div", { className: "markdown-renderer", children: /* @__PURE__ */ t.jsx(
+  ge,
   {
-    remarkPlugins: Te,
-    rehypePlugins: Ce,
+    remarkPlugins: Re,
+    rehypePlugins: Te,
     components: o,
     children: r
   }
-) }), Ae = (r) => {
+) }), Ce = (r) => {
   if (r.length <= 1) return r;
   const o = [];
   return r.forEach((a) => {
@@ -101,195 +101,176 @@ const Le = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
     }
     o.push({ type: "markdown", value: a.value });
   }), o;
-}, st = ({
+}, rt = ({
   content: r,
   customRenderBar: o,
   onSend: a,
   typingSpeed: i = 30,
-  enableTypewriter: N = !1,
+  enableTypewriter: y = !1,
   userInput: l,
-  interactionDefaultValueOptions: V,
-  defaultButtonText: C,
-  defaultInputText: D,
-  defaultSelectedValues: j,
-  readonly: k = !1,
-  onTypeFinished: w,
+  interactionDefaultValueOptions: $,
+  defaultButtonText: T,
+  defaultInputText: z,
+  defaultSelectedValues: N,
+  readonly: C = !1,
+  onTypeFinished: j,
   confirmButtonText: n,
-  copyButtonText: S,
-  copiedButtonText: f,
-  sandboxLoadingText: x,
+  copyButtonText: L,
+  copiedButtonText: k,
+  sandboxLoadingText: f,
   sandboxStyleLoadingText: p,
-  sandboxScriptLoadingText: v,
-  disableSandboxLoadingOverlay: g = !1,
-  sandboxFullscreenButtonText: A,
-  sandboxMode: B = "content",
-  onClickCustomButtonAfterContent: $,
-  beforeSend: z
+  sandboxScriptLoadingText: x,
+  disableSandboxLoadingOverlay: v = !1,
+  sandboxFullscreenButtonText: B,
+  sandboxMode: A = "content",
+  onClickCustomButtonAfterContent: M,
+  beforeSend: I
   // tooltipMinLength,
 }) => {
-  const R = h(
-    () => Z(r),
+  const w = h(
+    () => Q(r),
     [r]
-  ), b = h(
-    () => be(
+  ), g = h(
+    () => ve(
       r,
       l,
-      V
+      $
     ),
-    [r, V, l]
-  ), M = C?.trim() || b.buttonText, I = D?.trim() || b.inputText, K = h(
+    [r, $, l]
+  ), V = T?.trim() || g.buttonText, H = z?.trim() || g.inputText, G = h(
     () => l ? l.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
     [l]
-  ), H = j?.length ? j : b.selectedValues || K, c = H?.join("
") ?? "", m = h(
-    () => H,
-    // Preserve the same array reference when markdown is reparsed with equal values.
-    [c]
-  ), L = h(
-    () => ({
-      "custom-button-after-content": ({
-        children: e
-      }) => /* @__PURE__ */ t.jsx(
-        "button",
-        {
-          className: "content-render-custom-button-after-content",
-          onClick: $,
-          children: /* @__PURE__ */ t.jsx("span", { className: "content-render-custom-button-after-content-inner", children: e })
-        }
-      ),
-      "custom-variable": (e) => /* @__PURE__ */ t.jsx(
-        me,
-        {
-          ...e,
-          readonly: k,
-          defaultButtonText: M,
-          defaultInputText: I,
-          defaultSelectedValues: m,
-          onSend: a,
-          beforeSend: z,
-          confirmButtonText: n
-        }
-      ),
-      code: (e) => {
-        const { className: s, children: d, ...W } = e;
-        if (/language-(\w+)/.exec(s || "")?.[1] === "mermaid") {
-          const y = d?.toString().replace(/\n$/, "") || "", oe = xe(r, y);
-          return /* @__PURE__ */ t.jsx(F, { chart: y, frozen: oe });
-        }
-        return /* @__PURE__ */ t.jsx("code", { className: s, ...W, children: d });
-      },
-      table: ({ ...e }) => /* @__PURE__ */ t.jsx("div", { className: "content-render-table-container", children: /* @__PURE__ */ t.jsx("table", { className: "content-render-table", ...e }) }),
-      th: ({ ...e }) => /* @__PURE__ */ t.jsx("th", { className: "content-render-th", ...e }),
-      td: ({ ...e }) => /* @__PURE__ */ t.jsx("td", { className: "content-render-td", ...e }),
-      tr: ({ ...e }) => /* @__PURE__ */ t.jsx("tr", { className: "content-render-tr", ...e }),
-      li: ({ node: e, ...s }) => {
-        const d = e?.properties?.className;
-        return typeof d == "string" && d.includes("task-list-item") || Array.isArray(d) && d.includes("task-list-item") ? /* @__PURE__ */ t.jsx("li", { className: "content-render-task-list-item", ...s }) : /* @__PURE__ */ t.jsx("li", { ...s });
-      },
-      ol: ({ ...e }) => /* @__PURE__ */ t.jsx("ol", { className: "content-render-ol", ...e }),
-      ul: ({ ...e }) => /* @__PURE__ */ t.jsx("ul", { className: "content-render-ul", ...e }),
-      input: ({ ...e }) => e.type === "checkbox" ? /* @__PURE__ */ t.jsx(
-        "input",
-        {
-          type: "checkbox",
-          className: "content-render-checkbox",
-          disabled: !0,
-          ...e
-        }
-      ) : /* @__PURE__ */ t.jsx("input", { ...e }),
-      a: ({ children: e, ...s }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...s, children: e }),
-      pre: (e) => /* @__PURE__ */ t.jsx(
-        ce,
-        {
-          ...e,
-          copyButtonText: S,
-          copiedButtonText: f
-        }
-      )
-    }),
-    [
-      z,
-      n,
-      r,
-      f,
-      S,
-      $,
-      a,
-      k,
-      M,
-      I,
-      m
-    ]
-  ), { displayContent: U, isComplete: q } = de({
+  ), U = N?.length ? N : g.selectedValues || G, c = {
+    "custom-button-after-content": ({
+      children: e
+    }) => /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        className: "content-render-custom-button-after-content",
+        onClick: M,
+        children: /* @__PURE__ */ t.jsx("span", { className: "content-render-custom-button-after-content-inner", children: e })
+      }
+    ),
+    "custom-variable": (e) => /* @__PURE__ */ t.jsx(
+      le,
+      {
+        ...e,
+        readonly: C,
+        defaultButtonText: V,
+        defaultInputText: H,
+        defaultSelectedValues: U,
+        onSend: a,
+        beforeSend: I,
+        confirmButtonText: n
+      }
+    ),
+    code: (e) => {
+      const { className: s, children: d, ..._ } = e;
+      if (/language-(\w+)/.exec(s || "")?.[1] === "mermaid") {
+        const b = d?.toString().replace(/\n$/, "") || "", ne = he(r, b);
+        return /* @__PURE__ */ t.jsx(W, { chart: b, frozen: ne });
+      }
+      return /* @__PURE__ */ t.jsx("code", { className: s, ..._, children: d });
+    },
+    table: ({ ...e }) => /* @__PURE__ */ t.jsx("div", { className: "content-render-table-container", children: /* @__PURE__ */ t.jsx("table", { className: "content-render-table", ...e }) }),
+    th: ({ ...e }) => /* @__PURE__ */ t.jsx("th", { className: "content-render-th", ...e }),
+    td: ({ ...e }) => /* @__PURE__ */ t.jsx("td", { className: "content-render-td", ...e }),
+    tr: ({ ...e }) => /* @__PURE__ */ t.jsx("tr", { className: "content-render-tr", ...e }),
+    li: ({ node: e, ...s }) => {
+      const d = e?.properties?.className;
+      return typeof d == "string" && d.includes("task-list-item") || Array.isArray(d) && d.includes("task-list-item") ? /* @__PURE__ */ t.jsx("li", { className: "content-render-task-list-item", ...s }) : /* @__PURE__ */ t.jsx("li", { ...s });
+    },
+    ol: ({ ...e }) => /* @__PURE__ */ t.jsx("ol", { className: "content-render-ol", ...e }),
+    ul: ({ ...e }) => /* @__PURE__ */ t.jsx("ul", { className: "content-render-ul", ...e }),
+    input: ({ ...e }) => e.type === "checkbox" ? /* @__PURE__ */ t.jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "content-render-checkbox",
+        disabled: !0,
+        ...e
+      }
+    ) : /* @__PURE__ */ t.jsx("input", { ...e }),
+    a: ({ children: e, ...s }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...s, children: e }),
+    pre: (e) => /* @__PURE__ */ t.jsx(
+      ie,
+      {
+        ...e,
+        copyButtonText: L,
+        copiedButtonText: k
+      }
+    )
+  }, { displayContent: m, isComplete: S } = ce({
     // processMarkdownText will let code block printf("You win!\n") become printf("You win!<br/>");
     // content: processMarkdownText(content),
-    content: R,
+    content: w,
     typingSpeed: i,
-    disabled: !N
-  }), O = N ? U : R, X = h(
-    () => Le.test(r),
+    disabled: !y
+  }), q = y ? m : w, K = h(
+    () => Se.test(r),
     [r]
-  ), P = h(
-    () => X ? ge(r, !0) : [],
-    [r, X]
-  ), T = P.some(
+  ), D = h(
+    () => K ? xe(r, !0) : [],
+    [r, K]
+  ), R = D.some(
     (e) => e.type === "sandbox"
-  ), re = h(
-    () => Ae(P),
-    [P]
-  ), ne = h(
-    () => Y(O),
-    [O]
-  ), _ = te(!1);
-  G(() => {
-    T || q && !_.current && (_.current = !0, w?.());
-  }, [T, q, w]), G(() => {
-    T || (_.current = !1);
-  }, [T, r]);
-  const se = (e, s) => {
-    const d = Z(e);
-    return Y(d).map((u, J) => {
-      const y = `${s}-${u.type}-${J}`;
+  ), ee = h(
+    () => Ce(D),
+    [D]
+  ), te = h(
+    () => J(q),
+    [q]
+  ), P = E(!1);
+  F(() => {
+    R || S && !P.current && (P.current = !0, j?.());
+  }, [R, S, j]), F(() => {
+    R || (P.current = !1);
+  }, [R, r]);
+  const re = (e, s) => {
+    const d = Q(e);
+    return J(d).map((u, O) => {
+      const b = `${s}-${u.type}-${O}`;
       return u.type === "text" ? /* @__PURE__ */ t.jsx(
-        ee,
+        Z,
         {
-          components: L,
+          components: c,
           content: u.value
         },
-        y
-      ) : u.type === "mermaid" ? /* @__PURE__ */ t.jsx(F, { chart: u.value, frozen: !u.complete }, y) : u.type === "svg" ? /* @__PURE__ */ t.jsx(E, { svg: u.value }, y) : null;
+        b
+      ) : u.type === "mermaid" ? /* @__PURE__ */ t.jsx(W, { chart: u.value, frozen: !u.complete }, b) : u.type === "svg" ? /* @__PURE__ */ t.jsx(Y, { svg: u.value }, b) : null;
     });
   };
-  return T ? /* @__PURE__ */ t.jsx("div", { className: "content-render markdown-body", children: re.map(
+  return R ? /* @__PURE__ */ t.jsx("div", { className: "content-render markdown-body", children: ee.map(
     (e, s) => e.type === "sandbox" ? /* @__PURE__ */ t.jsx(
-      ve,
+      fe,
       {
         hideFullScreen: !0,
         type: "sandbox",
         content: e.value,
         className: "content-render-iframe",
-        loadingText: x,
+        loadingText: f,
         styleLoadingText: p,
-        scriptLoadingText: v,
-        disableLoadingOverlay: g,
-        fullScreenButtonText: A,
-        mode: B
+        scriptLoadingText: x,
+        disableLoadingOverlay: v,
+        fullScreenButtonText: B,
+        mode: A
       },
       `sandbox-${s}`
-    ) : /* @__PURE__ */ t.jsx(Q.Fragment, { children: se(e.value, `md-${s}`) }, `md-${s}`)
+    ) : /* @__PURE__ */ t.jsx(X.Fragment, { children: re(e.value, `md-${s}`) }, `md-${s}`)
   ) }) : /* @__PURE__ */ t.jsxs("div", { className: "content-render markdown-body", children: [
-    ne.map((e, s) => {
+    te.map((e, s) => {
       if (e.type === "text")
         return /* @__PURE__ */ t.jsx(
-          ee,
+          Z,
           {
-            components: L,
+            components: c,
             content: e.value
           },
           s
         );
       if (e.type === "mermaid")
         return /* @__PURE__ */ t.jsx(
-          F,
+          W,
           {
             chart: e.value,
             frozen: !e.complete
@@ -297,17 +278,17 @@ const Le = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
           s
         );
       if (e.type === "svg")
-        return /* @__PURE__ */ t.jsx(E, { svg: e.value }, s);
+        return /* @__PURE__ */ t.jsx(Y, { svg: e.value }, s);
     }),
-    o && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: Q.createElement(o, {
+    o && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: X.createElement(o, {
       content: r,
-      displayContent: U,
+      displayContent: m,
       onSend: a
     }) })
   ] });
 };
 export {
-  ee as MarkdownRenderer,
-  st as default
+  Z as MarkdownRenderer,
+  rt as default
 };
 //# sourceMappingURL=ContentRender.es.js.map