markdown-flow-ui 0.2.5 → 0.2.7-dev.1

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

@@ -1,7 +1,7 @@
 import { j as t } from "../../_virtual/jsx-runtime.es.js";
 /* empty css                                                   */
 /* empty css                                             */
-import se, { useState as be, useRef as D, useEffect as A, useMemo as g } from "react";
+import ce, { useState as be, useRef as W, useEffect as A, useMemo as h } from "react";
 import Te from "../../_virtual/index.es.js";
 import { sanitizeInvalidTagName as we } from "./utils/sanitize-invalid-tag-name.es.js";
 import { stripSvgTextLineBreaks as ke } from "./utils/strip-svg-text-line-breaks.es.js";
@@ -9,11 +9,11 @@ import { stripSvgTextLineBreaks as ke } from "./utils/strip-svg-text-line-breaks
 /* empty css                             */
 import je from "./CodeBlock.es.js";
 import Ne from "./plugins/CustomVariable.es.js";
-import X from "./plugins/MermaidChart.es.js";
+import J from "./plugins/MermaidChart.es.js";
 import { preserveCustomVariableProperties as Be, restoreCustomVariableProperties as Ce } from "./utils/custom-variable-props.es.js";
 import { subsetLanguages as Se, highlightLanguages as Re } from "./utils/highlight-languages.es.js";
-import { parseMarkdownSegments as ie, mermaidBlockIsComplete as Le } from "./utils/mermaid-parse.es.js";
-import { normalizeInlineHtml as ae } from "./utils/normalize-inline-html.es.js";
+import { mermaidBlockIsComplete as Le, parseMarkdownSegments as le } from "./utils/mermaid-parse.es.js";
+import { normalizeInlineHtml as de } from "./utils/normalize-inline-html.es.js";
 import Ae from "./IframeSandbox.es.js";
 import { splitContentSegments as $e } from "./utils/split-content.es.js";
 import { getInteractionDefaultValues as ze } from "../../lib/interaction-defaults.es.js";
@@ -25,269 +25,290 @@ import He from "../../node_modules/rehype-katex/lib/index.es.js";
 import De from "../../node_modules/remark-gfm/lib/index.es.js";
 import Pe from "../../node_modules/remark-math/lib/index.es.js";
 import We from "../../node_modules/remark-breaks/lib/index.es.js";
-const _e = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)\b/i, ce = ({ svg: r }) => {
-  const s = D(null);
+const _e = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)\b/i, me = ({ svg: r }) => {
+  const i = W(null);
   return A(() => {
-    const i = s.current;
-    if (!i) return;
-    const a = i.shadowRoot ?? i.attachShadow({ mode: "open" }), B = "content-render-svg-style";
-    let p = a.getElementById(B);
-    p || (p = document.createElement("style"), p.id = B, p.textContent = `
+    const s = i.current;
+    if (!s) return;
+    const a = s.shadowRoot ?? s.attachShadow({ mode: "open" }), T = "content-render-svg-style";
+    let f = a.getElementById(T);
+    f || (f = document.createElement("style"), f.id = T, f.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; }
-      `, a.appendChild(p)), Array.from(a.childNodes).filter(
-      (o) => o !== p
+      `, a.appendChild(f)), Array.from(a.childNodes).filter(
+      (o) => o !== f
     ).forEach((o) => a.removeChild(o));
-    const C = document.createElement("template"), $ = ke(r);
-    C.innerHTML = $, a.append(C.content.cloneNode(!0));
-    let h = !1, S = !1;
+    const S = document.createElement("template"), $ = ke(r);
+    S.innerHTML = $, a.append(S.content.cloneNode(!0));
+    let x = !1, R = !1;
     a.querySelectorAll("svg").forEach((o) => {
-      const R = o.getAttribute("viewBox");
-      if (!R) return;
-      const L = R.trim().split(/[\s,]+/).map((m) => Number(m));
-      if (L.length !== 4 || L.some(Number.isNaN)) return;
-      const [, , T, v] = L, w = o.getAttribute("width"), k = o.getAttribute("height"), M = (m) => {
+      const L = o.getAttribute("viewBox");
+      if (!L) return;
+      const w = L.trim().split(/[\s,]+/).map((m) => Number(m));
+      if (w.length !== 4 || w.some(Number.isNaN)) return;
+      const [, , k, y] = w, j = o.getAttribute("width"), N = o.getAttribute("height"), M = (m) => {
         if (!m) return !1;
-        const f = m.trim().toLowerCase();
-        return f === "auto" || f.endsWith("%");
+        const p = m.trim().toLowerCase();
+        return p === "auto" || p.endsWith("%");
       }, F = (m) => {
         if (!m) return null;
-        const f = m.trim().toLowerCase();
-        if (f === "auto" || f.endsWith("%"))
+        const p = m.trim().toLowerCase();
+        if (p === "auto" || p.endsWith("%"))
           return null;
-        const H = Number.parseFloat(f);
-        return Number.isNaN(H) ? null : H;
-      }, P = M(w), W = M(k), I = !w || w === "0", V = !k || k === "0", _ = F(w), E = F(k);
-      if (P || W || I && V || _ === T && E === v) {
-        h = !0, o.classList.add("content-render-svg-el--responsive"), o.classList.remove("content-render-svg-el--fixed"), o.style.width = "100%", o.style.height = "auto", !o.style.aspectRatio && v > 0 && (o.style.aspectRatio = `${T} / ${v}`);
+        const P = Number.parseFloat(p);
+        return Number.isNaN(P) ? null : P;
+      }, _ = M(j), E = M(N), I = !j || j === "0", V = !N || N === "0", H = F(j), D = F(N);
+      if (_ || E || I && V || H === k && D === y) {
+        x = !0, o.classList.add("content-render-svg-el--responsive"), o.classList.remove("content-render-svg-el--fixed"), o.style.width = "100%", o.style.height = "auto", !o.style.aspectRatio && y > 0 && (o.style.aspectRatio = `${k} / ${y}`);
         return;
       }
-      S = !0, o.classList.add("content-render-svg-el--fixed"), o.classList.remove("content-render-svg-el--responsive"), I && T > 0 && o.setAttribute("width", `${T}`), V && v > 0 && o.setAttribute("height", `${v}`);
+      R = !0, o.classList.add("content-render-svg-el--fixed"), o.classList.remove("content-render-svg-el--responsive"), I && k > 0 && o.setAttribute("width", `${k}`), V && y > 0 && o.setAttribute("height", `${y}`);
     });
-    const z = h && !S;
-    i.classList.toggle("content-render-svg--responsive", z), i.classList.toggle("content-render-svg--fixed", !z);
-  }, [r]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: s }) });
-}, Ee = [De, Pe, Te, We], Ge = [
+    const z = x && !R;
+    s.classList.toggle("content-render-svg--responsive", z), s.classList.toggle("content-render-svg--fixed", !z);
+  }, [r]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: i }) });
+}, Ee = [
+  De,
+  Pe,
+  Te,
+  We
+], Ge = [
   Be,
   Ie,
   we,
   Ce,
   [Ve, { languages: Re, subset: Se }],
   He
-], le = ({ content: r, components: s }) => /* @__PURE__ */ t.jsx("div", { className: "markdown-renderer", children: /* @__PURE__ */ t.jsx(
+], ue = ({ content: r, components: i }) => /* @__PURE__ */ t.jsx("div", { className: "markdown-renderer", children: /* @__PURE__ */ t.jsx(
   Fe,
   {
     remarkPlugins: Ee,
     rehypePlugins: Ge,
-    components: s,
+    components: i,
     children: r
   }
 ) }), Ue = (r) => {
   if (r.length <= 1) return r;
-  const s = [];
-  return r.forEach((i) => {
-    if (i.type === "sandbox") {
-      s.push(i);
+  const i = [];
+  return r.forEach((s) => {
+    if (s.type === "sandbox") {
+      i.push(s);
       return;
     }
-    const a = s[s.length - 1];
+    const a = i[i.length - 1];
     if (a && a.type !== "sandbox") {
-      s[s.length - 1] = {
+      i[i.length - 1] = {
         type: "markdown",
-        value: `${a.value}${i.value}`
+        value: `${a.value}${s.value}`
       };
       return;
     }
-    s.push({ type: "markdown", value: i.value });
-  }), s;
-}, qe = (r, s) => {
-  const i = Math.max(1, s), a = Array.from(r);
+    i.push({ type: "markdown", value: s.value });
+  }), i;
+}, qe = (r, i) => {
+  const s = Math.max(1, i), a = Array.from(r);
   return {
-    chunk: a.slice(0, i).join(""),
-    rest: a.slice(i).join("")
+    chunk: a.slice(0, s).join(""),
+    rest: a.slice(s).join("")
   };
 }, Tt = ({
   content: r,
-  contentType: s,
-  locale: i,
+  contentType: i,
+  locale: s,
   customRenderBar: a,
-  onSend: B,
-  typingSpeed: p = 40,
-  enableTypewriter: J = !1,
-  onTypeFinished: C,
+  onSend: T,
+  typingSpeed: f = 40,
+  enableTypewriter: Q = !1,
+  onTypeFinished: S,
   onTypewriterStateChange: $,
-  userInput: h,
-  interactionDefaultValueOptions: S,
+  userInput: x,
+  interactionDefaultValueOptions: R,
   defaultButtonText: z,
   defaultInputText: o,
-  defaultSelectedValues: R,
-  readonly: L = !1,
-  confirmButtonText: T,
-  copyButtonText: v,
-  copiedButtonText: w,
-  sandboxLoadingText: k,
+  defaultSelectedValues: L,
+  readonly: w = !1,
+  confirmButtonText: k,
+  copyButtonText: y,
+  copiedButtonText: j,
+  sandboxLoadingText: N,
   sandboxStyleLoadingText: M,
   sandboxScriptLoadingText: F,
-  disableSandboxLoadingOverlay: P = !1,
-  sandboxFullscreenButtonText: W,
+  disableSandboxLoadingOverlay: _ = !1,
+  sandboxFullscreenButtonText: E,
   sandboxExitFullscreenButtonText: I,
   sandboxMode: V = "content",
-  onClickCustomButtonAfterContent: _,
-  beforeSend: E
+  onClickCustomButtonAfterContent: H,
+  beforeSend: D
   // tooltipMinLength,
 }) => {
-  const j = Me(i), Q = T || j.confirmButtonText, m = v || j.copyButtonText, f = w || j.copiedButtonText, H = W || j.sandboxFullscreenButtonText, de = I || j.sandboxExitFullscreenButtonText, l = !!J && (!s || s === "text"), Y = 2, Z = Math.max(0, p), [x, G] = be(
+  const B = Me(s), G = k || B.confirmButtonText, m = y || B.copyButtonText, p = j || B.copiedButtonText, P = E || B.sandboxFullscreenButtonText, pe = I || B.sandboxExitFullscreenButtonText, l = !!Q && (!i || i === "text"), Y = 2, Z = Math.max(0, f), [g, U] = be(
     () => l ? "" : r
-  ), b = D(""), ee = D(l), U = D(!1);
+  ), b = W(""), ee = W(l), q = W(!1);
   A(() => {
     const e = ee.current;
-    if (ee.current = l, U.current = !1, !l) {
-      b.current = "", G(r);
+    if (ee.current = l, q.current = !1, !l) {
+      b.current = "", U(r);
       return;
     }
-    G((n) => {
-      const c = !e, y = r.startsWith(n);
-      if (!c && !y)
+    U((n) => {
+      const c = !e, v = r.startsWith(n);
+      if (!c && !v)
         return b.current = "", r;
-      const d = c || !y ? "" : n;
+      const d = c || !v ? "" : n;
       return b.current = r.slice(d.length), d;
     });
   }, [r, l]), A(() => {
-    l && (U.current || b.current || x !== r || (U.current = !0, C?.()));
-  }, [r, x, l, C]), A(() => {
+    l && (q.current || b.current || g !== r || (q.current = !0, S?.()));
+  }, [r, g, l, S]), A(() => {
     if (!l || !b.current)
       return;
     const e = window.setTimeout(() => {
-      G((n) => {
-        const { chunk: c, rest: y } = qe(
+      U((n) => {
+        const { chunk: c, rest: v } = qe(
           b.current,
           Y
         );
-        return c ? (b.current = y, `${n}${c}`) : n;
+        return c ? (b.current = v, `${n}${c}`) : n;
       });
     }, Z);
     return () => window.clearTimeout(e);
   }, [
     r,
-    x,
+    g,
     l,
     Y,
     Z
   ]);
-  const te = g(
+  const te = h(
     () => ({
       isTypewriterEnabled: l,
-      isTyping: l && x !== r,
-      isComplete: x === r,
-      renderedLength: x.length,
+      isTyping: l && g !== r,
+      isComplete: g === r,
+      renderedLength: g.length,
       totalLength: r.length
     }),
-    [r, x, l]
+    [r, g, l]
   );
   A(() => {
     $?.(te);
   }, [$, te]);
-  const u = l ? x : r, q = g(
-    () => ae(u),
+  const u = l ? g : r, K = h(
+    () => de(u),
     [u]
-  ), K = g(
+  ), O = h(
     () => ze(
       u,
-      h,
-      S
+      x,
+      R
     ),
-    [S, u, h]
-  ), me = z?.trim() || K.buttonText, ue = o?.trim() || K.inputText, pe = g(
-    () => h ? h.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
-    [h]
-  ), he = R?.length ? R : K.selectedValues || pe, re = {
-    "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(
-      Ne,
-      {
-        ...e,
-        readonly: L,
-        defaultButtonText: me,
-        defaultInputText: ue,
-        defaultSelectedValues: he,
-        onSend: B,
-        beforeSend: E,
-        locale: i,
-        confirmButtonText: Q
-      }
-    ),
-    code: (e) => {
-      const { className: n, children: c, ...y } = e;
-      if (/language-(\w+)/.exec(n || "")?.[1] === "mermaid") {
-        const N = c?.toString().replace(/\n$/, "") || "", ve = Le(u, N);
-        return /* @__PURE__ */ t.jsx(X, { chart: N, frozen: ve });
-      }
-      return /* @__PURE__ */ t.jsx("code", { className: n, ...y, 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, ...n }) => {
-      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", ...n }) : /* @__PURE__ */ t.jsx("li", { ...n });
-    },
-    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, ...n }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...n, children: e }),
-    pre: (e) => /* @__PURE__ */ t.jsx(
-      je,
-      {
-        ...e,
-        copyButtonText: m,
-        copiedButtonText: f
-      }
-    )
-  }, ne = g(
+    [R, u, x]
+  ), re = z?.trim() || O.buttonText, ne = o?.trim() || O.inputText, he = h(
+    () => x ? x.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
+    [x]
+  ), oe = L?.length ? L : O.selectedValues || he, se = h(
+    () => ({
+      "custom-button-after-content": ({
+        children: e
+      }) => /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          className: "content-render-custom-button-after-content",
+          onClick: H,
+          children: /* @__PURE__ */ t.jsx("span", { className: "content-render-custom-button-after-content-inner", children: e })
+        }
+      ),
+      "custom-variable": (e) => /* @__PURE__ */ t.jsx(
+        Ne,
+        {
+          ...e,
+          readonly: w,
+          defaultButtonText: re,
+          defaultInputText: ne,
+          defaultSelectedValues: oe,
+          onSend: T,
+          beforeSend: D,
+          locale: s,
+          confirmButtonText: G
+        }
+      ),
+      code: (e) => {
+        const { className: n, children: c, ...v } = e;
+        if (/language-(\w+)/.exec(n || "")?.[1] === "mermaid") {
+          const C = c?.toString().replace(/\n$/, "") || "", ye = Le(u, C);
+          return /* @__PURE__ */ t.jsx(J, { chart: C, frozen: ye });
+        }
+        return /* @__PURE__ */ t.jsx("code", { className: n, ...v, 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, ...n }) => {
+        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", ...n }) : /* @__PURE__ */ t.jsx("li", { ...n });
+      },
+      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, ...n }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...n, children: e }),
+      pre: (e) => /* @__PURE__ */ t.jsx(
+        je,
+        {
+          ...e,
+          copyButtonText: m,
+          copiedButtonText: p
+        }
+      )
+    }),
+    [
+      D,
+      s,
+      H,
+      T,
+      w,
+      u,
+      G,
+      p,
+      m,
+      re,
+      ne,
+      oe
+    ]
+  ), ie = h(
     () => _e.test(u),
     [u]
-  ), O = g(
-    () => ne ? $e(u, !0) : [],
-    [u, ne]
-  ), fe = O.some(
+  ), X = h(
+    () => ie ? $e(u, !0) : [],
+    [u, ie]
+  ), fe = X.some(
     (e) => e.type === "sandbox"
-  ), xe = g(
-    () => Ue(O),
-    [O]
-  ), ye = g(
-    () => ie(q),
-    [q]
-  ), ge = (e, n) => {
-    const c = ae(e);
-    return ie(c).map((d, oe) => {
-      const N = `${n}-${d.type}-${oe}`;
+  ), xe = h(
+    () => Ue(X),
+    [X]
+  ), ge = h(
+    () => le(K),
+    [K]
+  ), ve = (e, n) => {
+    const c = de(e);
+    return le(c).map((d, ae) => {
+      const C = `${n}-${d.type}-${ae}`;
       return d.type === "text" ? /* @__PURE__ */ t.jsx(
-        le,
+        ue,
         {
-          components: re,
+          components: se,
           content: d.value
         },
-        N
-      ) : d.type === "mermaid" ? /* @__PURE__ */ t.jsx(X, { chart: d.value, frozen: !d.complete }, N) : d.type === "svg" ? /* @__PURE__ */ t.jsx(ce, { svg: d.value }, N) : null;
+        C
+      ) : d.type === "mermaid" ? /* @__PURE__ */ t.jsx(J, { chart: d.value, frozen: !d.complete }, C) : d.type === "svg" ? /* @__PURE__ */ t.jsx(me, { svg: d.value }, C) : null;
     });
   };
   return fe ? /* @__PURE__ */ t.jsx("div", { className: "content-render markdown-body", children: xe.map(
@@ -298,31 +319,31 @@ const _e = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
         type: "sandbox",
         content: e.value,
         className: "content-render-iframe",
-        locale: i,
-        loadingText: k,
+        locale: s,
+        loadingText: N,
         styleLoadingText: M,
         scriptLoadingText: F,
-        disableLoadingOverlay: P,
-        fullScreenButtonText: H,
-        exitFullScreenButtonText: de,
+        disableLoadingOverlay: _,
+        fullScreenButtonText: P,
+        exitFullScreenButtonText: pe,
         mode: V
       },
       `sandbox-${n}`
-    ) : /* @__PURE__ */ t.jsx(se.Fragment, { children: ge(e.value, `md-${n}`) }, `md-${n}`)
+    ) : /* @__PURE__ */ t.jsx(ce.Fragment, { children: ve(e.value, `md-${n}`) }, `md-${n}`)
   ) }) : /* @__PURE__ */ t.jsxs("div", { className: "content-render markdown-body", children: [
-    ye.map((e, n) => {
+    ge.map((e, n) => {
       if (e.type === "text")
         return /* @__PURE__ */ t.jsx(
-          le,
+          ue,
           {
-            components: re,
+            components: se,
             content: e.value
           },
           n
         );
       if (e.type === "mermaid")
         return /* @__PURE__ */ t.jsx(
-          X,
+          J,
           {
             chart: e.value,
             frozen: !e.complete
@@ -330,17 +351,17 @@ const _e = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
           n
         );
       if (e.type === "svg")
-        return /* @__PURE__ */ t.jsx(ce, { svg: e.value }, n);
+        return /* @__PURE__ */ t.jsx(me, { svg: e.value }, n);
     }),
-    a && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: se.createElement(a, {
+    a && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: ce.createElement(a, {
       content: r,
-      displayContent: q,
-      onSend: B
+      displayContent: K,
+      onSend: T
     }) })
   ] });
 };
 export {
-  le as MarkdownRenderer,
+  ue as MarkdownRenderer,
   Tt as default
 };
 //# sourceMappingURL=ContentRender.es.js.map