markdown-flow-ui 0.1.99-beta.3 → 0.1.100-beta.0

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

@@ -1,99 +1,119 @@
-import { j as H } from "../../_virtual/jsx-runtime.es.js";
-import J, { useRef as m, useState as k, useEffect as x } from "react";
-import { createRoot as at } from "react-dom/client";
-import ut from "./SandboxApp.es.js";
-import { splitContentSegments as ht } from "./utils/split-content.es.js";
-import dt from "./ContentRender.es.js";
-const mt = () => import("./blackboard-vendor.es.js").then((s) => s.injectBlackboardLibraries), ft = /<img\b[^>]*>/i, pt = 180, gt = "markdown-flow-ui:sandbox", bt = "interaction", wt = 240, tt = (s) => s.split(/\s+/).filter(Boolean).map((r) => r.split(":").pop() || r), K = (s) => {
-  const r = s.trim().toLowerCase();
-  if (!r) return null;
-  const f = r.match(/^([0-9.]+)(vh|dvh|svh|lvh)$/i);
-  return f ? `${f[1]}${f[2].toLowerCase()}` : null;
-}, Q = (s) => {
+import { j as u } from "../../_virtual/jsx-runtime.es.js";
+import se, { useRef as d, useState as A, useCallback as ve, useEffect as C } from "react";
+import { createRoot as xe } from "react-dom/client";
+import Ee from "./SandboxApp.es.js";
+import { splitContentSegments as ye } from "./utils/split-content.es.js";
+import Ce from "./ContentRender.es.js";
+import Re from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/loader-circle.es.js";
+let G = null;
+const ce = () => (G || (G = import("./blackboard-vendor.es.js").then(
+  (s) => s.injectBlackboardLibraries
+)), G);
+typeof window < "u" && ce();
+const He = /<img\b[^>]*>/i, Se = 180, Te = "markdown-flow-ui:sandbox", Ae = "interaction", Me = 240, ae = (s) => s.split(/\s+/).filter(Boolean).map((n) => n.split(":").pop() || n), ie = (s) => {
+  const n = s.trim().toLowerCase();
+  if (!n) return null;
+  const m = n.match(/^([0-9.]+)(vh|dvh|svh|lvh)$/i);
+  return m ? `${m[1]}${m[2].toLowerCase()}` : null;
+}, le = (s) => {
   if (!s.trim()) return null;
-  const r = tt(s);
-  if (r.includes("h-screen") || r.includes("h-dvh"))
+  const n = ae(s);
+  if (n.includes("h-screen") || n.includes("h-dvh"))
     return "100dvh";
-  if (r.includes("h-svh"))
+  if (n.includes("h-svh"))
     return "100svh";
-  if (r.includes("h-lvh"))
+  if (n.includes("h-lvh"))
     return "100lvh";
-  const f = r.find(
-    (R) => /^h-\[[0-9.]+(vh|dvh|svh|lvh)\]$/i.test(R)
+  const m = n.find(
+    (M) => /^h-\[[0-9.]+(vh|dvh|svh|lvh)\]$/i.test(M)
   );
-  if (!f) return null;
-  const w = f.match(/^h-\[([0-9.]+)(vh|dvh|svh|lvh)\]$/i);
-  return w ? `${w[1]}${w[2].toLowerCase()}` : null;
-}, Tt = ({
+  if (!m) return null;
+  const p = m.match(/^h-\[([0-9.]+)(vh|dvh|svh|lvh)\]$/i);
+  return p ? `${p[1]}${p[2].toLowerCase()}` : null;
+}, Oe = ({
   content: s,
-  type: r,
-  className: f,
-  loadingText: w,
-  styleLoadingText: R,
-  scriptLoadingText: $,
-  fullScreenButtonText: N,
-  hideFullScreen: L = !1,
-  mode: d = "content"
+  type: n,
+  className: m,
+  loadingText: p,
+  styleLoadingText: M,
+  scriptLoadingText: U,
+  fullScreenButtonText: j,
+  hideFullScreen: W = !1,
+  mode: h = "content"
 }) => {
-  const V = m(null), v = m(null), _ = m(null), P = m(null), I = m(() => {
-  }), [, et] = k(480), [q, nt] = k(0), [rt, ot] = k(!1), G = d === "blackboard", O = m(""), n = J.useMemo(() => {
-    const t = ht(s).filter((a) => a.type === "sandbox");
-    return (d === "blackboard" ? t[t.length - 1]?.value || "" : t.map((a) => a.value).join(`
+  const X = d(null), E = d(null), _ = d(null), Y = d(null), D = d(() => {
+  }), [ue, de] = A(480), Z = d(0), [J, he] = A(0), [me, fe] = A(!1), [L, O] = A(
+    n !== "sandbox"
+  ), B = h === "blackboard", F = d(""), r = se.useMemo(() => {
+    const e = ye(s).filter((l) => l.type === "sandbox");
+    return (h === "blackboard" ? e[e.length - 1]?.value || "" : e.map((l) => l.value).join(`
 `)) || "";
-  }, [s, d]), [T, U] = k(n), W = m(n), B = m(n), E = m(null), D = () => {
-    E.current !== null && (window.clearTimeout(E.current), E.current = null);
+  }, [s, h]), [k, K] = A(r), Q = d(r), z = d(r), R = d(null), y = ve((t) => {
+    if (typeof window > "u")
+      return;
+    const e = Date.now();
+    e - Z.current < Me || (Z.current = e, window.postMessage(
+      {
+        source: Te,
+        type: Ae,
+        eventType: t
+      },
+      window.location.origin
+    ));
+  }, []), $ = () => {
+    R.current !== null && (window.clearTimeout(R.current), R.current = null);
   };
-  x(
+  C(
     () => () => {
-      D();
+      $();
     },
     []
-  ), x(() => {
-    const e = W.current;
-    W.current = n;
-    const t = !!e && n.length > e.length && n.startsWith(e), l = ft.test(n);
-    if (!(t && l)) {
-      D(), B.current = n, U(n);
+  ), C(() => {
+    const t = Q.current;
+    Q.current = r;
+    const e = !!t && r.length > t.length && r.startsWith(t), i = He.test(r);
+    if (!(e && i)) {
+      $(), z.current = r, K(r);
       return;
     }
-    B.current = n, D(), E.current = window.setTimeout(() => {
-      U(B.current), E.current = null;
-    }, pt);
-  }, [n]);
-  const X = !!J.useMemo(() => {
-    const e = T.trim();
-    if (!e) return null;
-    const t = e.match(/^<([a-zA-Z][\w:-]*)(\s[^>]*?)?>/);
+    z.current = r, $(), R.current = window.setTimeout(() => {
+      K(z.current), R.current = null;
+    }, Se);
+  }, [r]);
+  const ee = se.useMemo(() => {
+    const t = k.trim();
     if (!t) return null;
-    const l = t[2] || "", a = l.match(/\bheight\s*=\s*["']([^"']+)["']/i);
-    if (a) {
-      const u = K(a[1]);
-      if (u) return u;
+    const e = t.match(/^<([a-zA-Z][\w:-]*)(\s[^>]*?)?>/);
+    if (!e) return null;
+    const i = e[2] || "", l = i.match(/\bheight\s*=\s*["']([^"']+)["']/i);
+    if (l) {
+      const f = ie(l[1]);
+      if (f) return f;
     }
-    const C = l.match(/\bstyle\s*=\s*["']([^"']+)["']/i)?.[1]?.match(
+    const S = i.match(/\bstyle\s*=\s*["']([^"']+)["']/i)?.[1]?.match(
       /\bheight\s*:\s*([^;]+)/i
     )?.[1];
-    if (C) {
-      const u = K(C);
-      if (u) return u;
+    if (S) {
+      const f = ie(S);
+      if (f) return f;
     }
-    const y = l.match(/\bclass\s*=\s*["']([^"']+)["']/i)?.[1];
-    return y ? Q(y) : null;
-  }, [T]);
-  x(() => {
-    if (d !== "blackboard") {
-      O.current = n;
+    const g = i.match(/\bclass\s*=\s*["']([^"']+)["']/i)?.[1];
+    return g ? le(g) : null;
+  }, [k]), te = !!ee, ne = n === "sandbox", H = B && n === "sandbox" ? ee ?? `${ue}px` : void 0;
+  C(() => {
+    if (h !== "blackboard") {
+      F.current = r;
       return;
     }
-    const e = O.current;
-    !(e && n.startsWith(e)) && e && nt((l) => l + 1), O.current = n;
-  }, [n, d]), x(() => {
-    const e = v.current;
-    if (!e) return;
-    const t = e.contentDocument;
+    const t = F.current;
+    !(t && r.startsWith(t)) && t && he((i) => i + 1), F.current = r;
+  }, [r, h]), C(() => {
+    const t = E.current;
     if (!t) return;
-    t.open(), t.write(`<!DOCTYPE html>
-<html${d === "blackboard" ? ' style="height: 100%;"' : ""}>
+    const e = t.contentDocument;
+    if (!e) return;
+    e.open(), e.write(`<!DOCTYPE html>
+<html${h === "blackboard" ? ' style="height: 100%;"' : ""}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -106,169 +126,182 @@ const mt = () => import("./blackboard-vendor.es.js").then((s) => s.injectBlackbo
   <body>
     <div id="root"></div>
   </body>
-</html>`), t.close(), P.current = t;
-    let l = 0;
-    const a = (i) => {
-      if (typeof window > "u")
-        return;
-      const c = Date.now();
-      c - l < wt || (l = c, window.postMessage(
-        {
-          source: gt,
-          type: bt,
-          eventType: i
-        },
-        window.location.origin
-      ));
-    }, j = G && r === "sandbox", C = () => a("pointerdown"), y = () => a("touchstart");
-    j && (t.addEventListener("pointerdown", C, !0), t.addEventListener("touchstart", y, !0));
-    const u = t.getElementById("root");
-    if (!u) return;
-    const Y = at(u);
-    _.current = Y;
-    let A = !1;
-    const Z = (i, c) => {
-      const o = i.trim().toLowerCase();
+</html>`), e.close(), Y.current = e;
+    const i = B && n === "sandbox", l = () => y("pointerdown"), V = () => y("mousedown"), S = () => y("touchstart");
+    i && (e.addEventListener("pointerdown", l, !0), e.addEventListener("mousedown", V, !0), e.addEventListener("touchstart", S, !0));
+    const g = e.getElementById("root");
+    if (!g) return;
+    const f = xe(g);
+    _.current = f;
+    let T = !1;
+    const oe = (c, b) => {
+      const o = c.trim().toLowerCase();
       if (!o) return null;
-      const h = Number.parseFloat(o);
-      return Number.isNaN(h) ? null : /(dvh|svh|lvh|vh)$/i.test(o) ? h / 100 * c : o.endsWith("px") || /^[0-9.]+$/.test(o) ? h : null;
-    }, lt = (i, c) => {
-      if (!i.trim()) return null;
-      const o = Q(i);
+      const a = Number.parseFloat(o);
+      return Number.isNaN(a) ? null : /(dvh|svh|lvh|vh)$/i.test(o) ? a / 100 * b : o.endsWith("px") || /^[0-9.]+$/.test(o) ? a : null;
+    }, ge = (c, b) => {
+      if (!c.trim()) return null;
+      const o = le(c);
       if (o)
-        return Z(o, c);
-      const p = tt(i).find(
-        (S) => /^h-\[[0-9.]+px\]$/i.test(S)
+        return oe(o, b);
+      const w = ae(c).find(
+        (I) => /^h-\[[0-9.]+px\]$/i.test(I)
       );
-      if (!p) return null;
-      const g = p.match(/^h-\[([0-9.]+)px\]$/i);
-      if (!g) return null;
-      const b = Number.parseFloat(g[1]);
-      return Number.isNaN(b) ? null : b;
-    }, ct = () => {
-      if (!v.current || !t.body) return null;
-      const c = t.body.querySelector(
+      if (!w) return null;
+      const v = w.match(/^h-\[([0-9.]+)px\]$/i);
+      if (!v) return null;
+      const x = Number.parseFloat(v[1]);
+      return Number.isNaN(x) ? null : x;
+    }, we = () => {
+      if (!E.current || !e.body) return null;
+      const b = e.body.querySelector(
         ".sandbox-wrapper"
       )?.firstElementChild;
-      if (!c) return null;
-      const o = Array.from(c.children);
+      if (!b) return null;
+      const o = Array.from(b.children);
       if (o.length !== 1) return null;
-      const h = o[0], p = h.style.height || h.getAttribute("height"), g = v.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, b = p ? Z(p, g) : null;
-      if (b !== null)
-        return Math.ceil(b);
-      const S = lt(
-        h.getAttribute("class") || "",
-        g
+      const a = o[0], w = a.style.height || a.getAttribute("height"), v = E.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, x = w ? oe(w, v) : null;
+      if (x !== null)
+        return Math.ceil(x);
+      const I = ge(
+        a.getAttribute("class") || "",
+        v
       );
-      return S !== null ? Math.ceil(S) : null;
-    }, z = () => {
-      if (!v.current || !t.body) return;
-      const i = t.body.getBoundingClientRect(), c = t.documentElement?.getBoundingClientRect(), o = i.height, h = c?.height || 0, p = Math.max(o, h), g = ct(), b = Math.max(
+      return I !== null ? Math.ceil(I) : null;
+    }, P = () => {
+      if (!E.current || !e.body) return;
+      const c = e.body.getBoundingClientRect(), b = e.documentElement?.getBoundingClientRect(), o = c.height, a = b?.height || 0, w = Math.max(o, a), v = we(), x = Math.max(
         200,
-        g ?? Math.ceil(p)
+        v ?? Math.ceil(w)
       );
-      et(b);
-    }, M = () => {
+      de(x);
+    }, N = () => {
       requestAnimationFrame(() => {
-        A || z();
+        T || P();
       });
     };
-    I.current = M, z(), M(), mt().then((i) => {
-      A || (i(t), M());
+    D.current = N, P(), N(), ne ? ce().then((c) => {
+      T || (c(e), requestAnimationFrame(() => {
+        T || (O(!0), N());
+      }));
     }).catch(() => {
-      A || M();
-    });
-    const F = new ResizeObserver(() => z());
-    return F.observe(t.body), u && F.observe(u), () => {
-      A = !0, F.disconnect(), j && (t.removeEventListener("pointerdown", C, !0), t.removeEventListener("touchstart", y, !0)), setTimeout(() => {
-        Y.unmount(), _.current = null, P.current = null, I.current = () => {
+      T || (O(!0), N());
+    }) : O(!0);
+    const q = new ResizeObserver(() => P());
+    return q.observe(e.body), g && q.observe(g), () => {
+      T = !0, q.disconnect(), i && (e.removeEventListener("pointerdown", l, !0), e.removeEventListener("mousedown", V, !0), e.removeEventListener("touchstart", S, !0)), setTimeout(() => {
+        f.unmount(), _.current = null, Y.current = null, D.current = () => {
         };
       }, 0);
     };
-  }, []), x(() => {
-    const e = () => {
-      ot(!!document.fullscreenElement);
+  }, []), C(() => {
+    const t = () => {
+      fe(!!document.fullscreenElement);
     };
-    return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
+    return document.addEventListener("fullscreenchange", t), () => document.removeEventListener("fullscreenchange", t);
   }, []);
-  const st = () => {
-    const e = V.current || v.current;
-    if (e) {
+  const be = () => {
+    const t = X.current || E.current;
+    if (t) {
       if (document.fullscreenElement) {
         document.exitFullscreen().catch(() => {
         });
         return;
       }
-      e.requestFullscreen && e.requestFullscreen().catch(() => {
+      t.requestFullscreen && t.requestFullscreen().catch(() => {
       });
     }
   };
-  x(() => {
-    const e = _.current;
-    e && (e.render(
-      /* @__PURE__ */ H.jsx(
-        ut,
+  C(() => {
+    const t = _.current;
+    !t || !L || (t.render(
+      /* @__PURE__ */ u.jsx(
+        Ee,
         {
-          html: T,
-          loadingText: w,
-          styleLoadingText: R,
-          scriptLoadingText: $,
-          fullScreenButtonText: N,
-          hideFullScreen: L,
-          resetToken: q,
-          hasRootVhHeight: X,
-          mode: d
+          html: k,
+          loadingText: p,
+          styleLoadingText: M,
+          scriptLoadingText: U,
+          fullScreenButtonText: j,
+          hideFullScreen: W,
+          resetToken: J,
+          hasRootVhHeight: te,
+          mode: h
         }
       )
-    ), requestAnimationFrame(() => I.current?.()));
+    ), requestAnimationFrame(() => D.current?.()));
   }, [
-    T,
-    w,
-    R,
-    $,
-    N,
-    q,
-    d
+    k,
+    p,
+    M,
+    U,
+    j,
+    J,
+    h,
+    L
   ]);
-  const it = [
+  const pe = [
     "w-full relative content-render-iframe-sandbox",
-    G ? "h-full overflow-auto flex flex-col" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ H.jsxs(
+    B ? "h-full overflow-auto flex flex-col" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
+  ].filter(Boolean).join(" "), re = ne && !L;
+  return /* @__PURE__ */ u.jsxs(
     "div",
     {
-      ref: V,
-      "data-root-vh": X ? "true" : "false",
-      className: it,
+      ref: X,
+      "data-root-vh": te ? "true" : "false",
+      className: pe,
+      style: H ? {
+        height: H,
+        minHeight: H
+      } : void 0,
       children: [
-        !L && /* @__PURE__ */ H.jsx(
+        !W && /* @__PURE__ */ u.jsx(
           "button",
           {
             type: "button",
-            onClick: st,
+            onClick: be,
             className: "absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
-            children: rt ? "退出全屏" : N || "全屏浏览"
+            children: me ? "退出全屏" : j || "全屏浏览"
           }
         ),
-        d === "blackboard" && r === "markdown" ? /* @__PURE__ */ H.jsx(dt, { content: s }) : /* @__PURE__ */ H.jsx(
-          "iframe",
+        h === "blackboard" && n === "markdown" ? /* @__PURE__ */ u.jsx(
+          "div",
           {
-            ref: v,
-            sandbox: "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox",
-            allow: "fullscreen",
-            allowFullScreen: !0,
-            className: [f, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
-            style: {
-              height: "100%",
-              margin: "auto"
-            }
+            onMouseDown: () => y("mousedown"),
+            onPointerDown: () => y("pointerdown"),
+            onTouchStart: () => y("touchstart"),
+            children: /* @__PURE__ */ u.jsx(Ce, { content: s })
           }
-        )
+        ) : /* @__PURE__ */ u.jsxs(u.Fragment, { children: [
+          /* @__PURE__ */ u.jsx(
+            "iframe",
+            {
+              ref: E,
+              sandbox: "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox",
+              allow: "fullscreen",
+              allowFullScreen: !0,
+              className: [m, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
+              style: {
+                height: H ?? "100%",
+                minHeight: H,
+                margin: "auto",
+                visibility: re ? "hidden" : "visible"
+              }
+            }
+          ),
+          re ? /* @__PURE__ */ u.jsx("div", { className: "pointer-events-none absolute inset-0 z-20 flex items-center justify-center", children: /* @__PURE__ */ u.jsx(
+            Re,
+            {
+              "aria-label": p || "Preparing sandbox styles",
+              className: "text-primary h-7 w-7 animate-spin"
+            }
+          ) }) : null
+        ] })
       ]
     }
   );
 };
 export {
-  Tt as default
+  Oe as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map