markdown-flow-ui 0.1.100-beta.13 → 0.1.100-beta.15

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

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