markdown-flow-ui 0.1.129 → 0.2.0

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

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