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

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 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";
+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";
 /* empty css                     */
 /* empty css                             */
-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(() => {
+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(() => {
     const a = o.current;
     if (!a) return;
-    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 = `
+    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 = `
         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 T = document.createElement("template"), z = ae(r);
-    T.innerHTML = z, i.append(T.content.cloneNode(!0));
-    let N = !1, C = !1;
+    const C = document.createElement("template"), D = le(r);
+    C.innerHTML = D, i.append(C.content.cloneNode(!0));
+    let j = !1, k = !1;
     i.querySelectorAll("svg").forEach((n) => {
-      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) => {
+      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) => {
         if (!c) return !1;
         const m = c.trim().toLowerCase();
         return m === "auto" || m.endsWith("%");
-      }, A = (c) => {
+      }, B = (c) => {
         if (!c) return null;
         const m = c.trim().toLowerCase();
         if (m === "auto" || m.endsWith("%"))
           return null;
-        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}`);
+        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}`);
         return;
       }
-      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}`);
+      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}`);
     });
-    const j = N && !C;
-    a.classList.toggle("content-render-svg--responsive", j), a.classList.toggle("content-render-svg--fixed", !j);
+    const w = j && !k;
+    a.classList.toggle("content-render-svg--responsive", w), a.classList.toggle("content-render-svg--fixed", !w);
   }, [r]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: o }) });
-}, 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,
+}, 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,
   {
-    remarkPlugins: Re,
-    rehypePlugins: Te,
+    remarkPlugins: Te,
+    rehypePlugins: Ce,
     components: o,
     children: r
   }
-) }), Ce = (r) => {
+) }), Ae = (r) => {
   if (r.length <= 1) return r;
   const o = [];
   return r.forEach((a) => {
@@ -101,176 +101,195 @@ const Se = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
     }
     o.push({ type: "markdown", value: a.value });
   }), o;
-}, rt = ({
+}, st = ({
   content: r,
   customRenderBar: o,
   onSend: a,
   typingSpeed: i = 30,
-  enableTypewriter: y = !1,
+  enableTypewriter: N = !1,
   userInput: l,
-  interactionDefaultValueOptions: $,
-  defaultButtonText: T,
-  defaultInputText: z,
-  defaultSelectedValues: N,
-  readonly: C = !1,
-  onTypeFinished: j,
+  interactionDefaultValueOptions: V,
+  defaultButtonText: C,
+  defaultInputText: D,
+  defaultSelectedValues: j,
+  readonly: k = !1,
+  onTypeFinished: w,
   confirmButtonText: n,
-  copyButtonText: L,
-  copiedButtonText: k,
-  sandboxLoadingText: f,
+  copyButtonText: S,
+  copiedButtonText: f,
+  sandboxLoadingText: x,
   sandboxStyleLoadingText: p,
-  sandboxScriptLoadingText: x,
-  disableSandboxLoadingOverlay: v = !1,
-  sandboxFullscreenButtonText: B,
-  sandboxMode: A = "content",
-  onClickCustomButtonAfterContent: M,
-  beforeSend: I
+  sandboxScriptLoadingText: v,
+  disableSandboxLoadingOverlay: g = !1,
+  sandboxFullscreenButtonText: A,
+  sandboxMode: B = "content",
+  onClickCustomButtonAfterContent: $,
+  beforeSend: z
   // tooltipMinLength,
 }) => {
-  const w = h(
-    () => Q(r),
+  const R = h(
+    () => Z(r),
     [r]
-  ), g = h(
-    () => ve(
+  ), b = h(
+    () => be(
       r,
       l,
-      $
+      V
     ),
-    [r, $, l]
-  ), V = T?.trim() || g.buttonText, H = z?.trim() || g.inputText, G = h(
+    [r, V, l]
+  ), M = C?.trim() || b.buttonText, I = D?.trim() || b.inputText, K = h(
     () => l ? l.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
     [l]
-  ), 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({
+  ), 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({
     // processMarkdownText will let code block printf("You win!\n") become printf("You win!<br/>");
     // content: processMarkdownText(content),
-    content: w,
+    content: R,
     typingSpeed: i,
-    disabled: !y
-  }), q = y ? m : w, K = h(
-    () => Se.test(r),
+    disabled: !N
+  }), O = N ? U : R, X = h(
+    () => Le.test(r),
     [r]
-  ), D = h(
-    () => K ? xe(r, !0) : [],
-    [r, K]
-  ), R = D.some(
+  ), P = h(
+    () => X ? ge(r, !0) : [],
+    [r, X]
+  ), T = P.some(
     (e) => e.type === "sandbox"
-  ), 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}`;
+  ), 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}`;
       return u.type === "text" ? /* @__PURE__ */ t.jsx(
-        Z,
+        ee,
         {
-          components: c,
+          components: L,
           content: u.value
         },
-        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;
+        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;
     });
   };
-  return R ? /* @__PURE__ */ t.jsx("div", { className: "content-render markdown-body", children: ee.map(
+  return T ? /* @__PURE__ */ t.jsx("div", { className: "content-render markdown-body", children: re.map(
     (e, s) => e.type === "sandbox" ? /* @__PURE__ */ t.jsx(
-      fe,
+      ve,
       {
         hideFullScreen: !0,
         type: "sandbox",
         content: e.value,
         className: "content-render-iframe",
-        loadingText: f,
+        loadingText: x,
         styleLoadingText: p,
-        scriptLoadingText: x,
-        disableLoadingOverlay: v,
-        fullScreenButtonText: B,
-        mode: A
+        scriptLoadingText: v,
+        disableLoadingOverlay: g,
+        fullScreenButtonText: A,
+        mode: B
       },
       `sandbox-${s}`
-    ) : /* @__PURE__ */ t.jsx(X.Fragment, { children: re(e.value, `md-${s}`) }, `md-${s}`)
+    ) : /* @__PURE__ */ t.jsx(Q.Fragment, { children: se(e.value, `md-${s}`) }, `md-${s}`)
   ) }) : /* @__PURE__ */ t.jsxs("div", { className: "content-render markdown-body", children: [
-    te.map((e, s) => {
+    ne.map((e, s) => {
       if (e.type === "text")
         return /* @__PURE__ */ t.jsx(
-          Z,
+          ee,
           {
-            components: c,
+            components: L,
             content: e.value
           },
           s
         );
       if (e.type === "mermaid")
         return /* @__PURE__ */ t.jsx(
-          W,
+          F,
           {
             chart: e.value,
             frozen: !e.complete
@@ -278,17 +297,17 @@ const Se = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
           s
         );
       if (e.type === "svg")
-        return /* @__PURE__ */ t.jsx(Y, { svg: e.value }, s);
+        return /* @__PURE__ */ t.jsx(E, { svg: e.value }, s);
     }),
-    o && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: X.createElement(o, {
+    o && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: Q.createElement(o, {
       content: r,
-      displayContent: m,
+      displayContent: U,
       onSend: a
     }) })
   ] });
 };
 export {
-  Z as MarkdownRenderer,
-  rt as default
+  ee as MarkdownRenderer,
+  st as default
 };
 //# sourceMappingURL=ContentRender.es.js.map