markdown-flow-ui 0.1.116 → 0.1.117-beta.0

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

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