markdown-flow-ui 0.1.118-dev.1 → 0.1.118-dev.3

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

@@ -1,128 +1,128 @@
-import { j as C } from "../../_virtual/jsx-runtime.es.js";
-import j, { useRef as i, useState as M, useCallback as We, useEffect as H, useMemo as De } from "react";
-import { createRoot as Pe } from "react-dom/client";
-import $e from "./SandboxApp.es.js";
-import ze from "./ContentRender.es.js";
-import { inspectViewportHeightFromHtmlRootString as ye, EMPTY_ROOT_HEIGHT_META as qe, parseExplicitHeight as Ce, inspectViewportHeightFromNodeChain as Ge, resolveExplicitHeightFromNodeChain as Le } from "./utils/iframe-viewport-height.es.js";
-import { SANDBOX_INTERACTION_MESSAGE_TYPE as Ue, SANDBOX_INTERACTION_MESSAGE_SOURCE as Ye } from "../../lib/sandboxInteraction.es.js";
-import { injectScalingSystem as Xe } from "./utils/iframe-scaling.es.js";
-let oe = null;
-const Ze = () => (oe || (oe = import("./blackboard-vendor.es.js").then(
+import { j as y } from "../../_virtual/jsx-runtime.es.js";
+import j, { useRef as i, useState as C, useCallback as De, useEffect as p, useMemo as Pe } from "react";
+import { createRoot as $e } from "react-dom/client";
+import ze from "./SandboxApp.es.js";
+import qe from "./ContentRender.es.js";
+import { inspectViewportHeightFromHtmlRootString as Ce, EMPTY_ROOT_HEIGHT_META as Ge, parseExplicitHeight as Me, inspectViewportHeightFromNodeChain as Le, resolveExplicitHeightFromNodeChain as Ue } from "./utils/iframe-viewport-height.es.js";
+import { SANDBOX_INTERACTION_MESSAGE_TYPE as Ye, SANDBOX_INTERACTION_MESSAGE_SOURCE as Xe } from "../../lib/sandboxInteraction.es.js";
+import { injectScalingSystem as Ze } from "./utils/iframe-scaling.es.js";
+let ie = null;
+const Je = () => (ie || (ie = import("./blackboard-vendor.es.js").then(
   (c) => c.injectBlackboardLibraries
-)), oe), Je = /<img\b[^>]*>/i, Ke = 180, Qe = 240, et = (c) => c.split(/\s+/).filter(Boolean).map((o) => {
+)), ie), Ke = /<img\b[^>]*>/i, Qe = 180, et = 240, tt = (c) => c.split(/\s+/).filter(Boolean).map((o) => {
   const s = o.split(":");
   return s[s.length - 1] !== "h-screen" && s[s.length - 1] !== "min-h-screen" ? o : (s[s.length - 1] = "h-full", s.join(":"));
-}).join(" "), tt = (c, o) => !o || !c.trim() ? c : c.replace(
+}).join(" "), nt = (c, o) => !o || !c.trim() ? c : c.replace(
   /^(\s*<[a-zA-Z][\w:-]*)(\s[^>]*?)?>/,
-  (s, B, T = "") => {
-    const d = T.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
-    if (!d)
+  (s, B, M = "") => {
+    const m = M.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
+    if (!m)
       return s;
-    const W = et(d[2]);
-    return W === d[2] ? s : `${B}${T.replace(
-      d[0],
-      `class=${d[1]}${W}${d[1]}`
+    const W = tt(m[2]);
+    return W === m[2] ? s : `${B}${M.replace(
+      m[0],
+      `class=${m[1]}${W}${m[1]}`
     )}>`;
   }
-), ut = ({
+), ht = ({
   content: c,
   type: o,
   className: s,
   styleLoadingText: B,
-  scriptLoadingText: T,
-  fullScreenButtonText: d,
+  scriptLoadingText: M,
+  fullScreenButtonText: m,
   hideFullScreen: W = !1,
-  mode: l = "content",
-  replaceRootScreenHeightWithFull: Me = !1,
-  enableScaling: Te = !1,
-  disableLoadingOverlay: ie = !1
+  mode: a = "content",
+  replaceRootScreenHeightWithFull: Te = !1,
+  enableScaling: Ae = !1,
+  disableLoadingOverlay: se = !1
 }) => {
-  const D = i(null), m = i(null), U = i(null), A = i(() => {
-  }), [Ae, _e] = M(480), [se, ke] = M(0), [Y, ce] = M(0), X = i(!1), Z = i(!1), le = i(0), [ae, Fe] = M(0), [J, Ie] = M(!1), Ne = o === "sandbox", f = l === "blackboard", w = Te && f && o === "sandbox", _ = f && o === "sandbox", R = _ && Me, K = i(""), P = j.useMemo(
+  const D = i(null), f = i(null), Y = i(null), T = i(() => {
+  }), [ke, _e] = C(480), [ce, Fe] = C(0), [X, le] = C(0), Z = i(!1), J = i(!1), ae = i(0), [ue, Ie] = C(0), [K, Ne] = C(!1), Oe = o === "sandbox", g = a === "blackboard", H = Ae && g && o === "sandbox", A = g && o === "sandbox", R = A && Te, Q = i(""), P = j.useMemo(
     () => o === "sandbox" ? c : "",
     [c, o]
   ), n = j.useMemo(
-    () => tt(
+    () => nt(
       P,
       R
     ),
     [P, R]
-  ), ue = j.useMemo(
-    () => R ? ye(P) : qe,
-    [P, R]
   ), he = j.useMemo(
-    () => R && ue.hasFullViewportHeight,
+    () => R ? Ce(P) : Ge,
+    [P, R]
+  ), de = j.useMemo(
+    () => R && he.hasFullViewportHeight,
     [
-      ue.hasFullViewportHeight,
+      he.hasFullViewportHeight,
       R
     ]
-  ), [$, de] = M(
+  ), [$, me] = C(
     n
-  ), me = i(n), Q = i(n), k = i(null), F = i(null), fe = i(null), ge = We((t) => {
+  ), fe = i(n), ee = i(n), k = i(null), _ = i(null), ge = i(null), be = De((t) => {
     if (typeof window > "u")
       return;
     const e = Date.now();
-    e - le.current < Qe || (le.current = e, window.postMessage(
+    e - ae.current < et || (ae.current = e, window.postMessage(
       {
-        source: Ye,
-        type: Ue,
+        source: Xe,
+        type: Ye,
         eventType: t
       },
       window.location.origin
     ));
-  }, []), ee = () => {
+  }, []), te = () => {
     k.current !== null && (window.clearTimeout(k.current), k.current = null);
-  }, Oe = () => {
-    F.current !== null && (window.cancelAnimationFrame(F.current), F.current = null);
+  }, Ve = () => {
+    _.current !== null && (window.cancelAnimationFrame(_.current), _.current = null);
   };
-  H(
+  p(
     () => () => {
-      ee(), Oe();
+      te(), Ve();
     },
     []
-  ), H(() => {
-    const t = me.current;
-    me.current = n;
-    const e = !!t && n.length > t.length && n.startsWith(t), a = Je.test(
+  ), p(() => {
+    const t = fe.current;
+    fe.current = n;
+    const e = !!t && n.length > t.length && n.startsWith(t), u = Ke.test(
       n
     );
-    if (!(e && a)) {
-      ee(), Q.current = n, de(n);
+    if (!(e && u)) {
+      te(), ee.current = n, me(n);
       return;
     }
-    Q.current = n, ee(), k.current = window.setTimeout(() => {
-      de(Q.current), k.current = null;
-    }, Ke);
+    ee.current = n, te(), k.current = window.setTimeout(() => {
+      me(ee.current), k.current = null;
+    }, Qe);
   }, [n]);
-  const z = j.useMemo(() => _ ? ye($).viewportHeightCss : null, [$, _]);
-  H(() => {
-    fe.current = z;
+  const z = j.useMemo(() => A ? Ce($).viewportHeightCss : null, [$, A]);
+  p(() => {
+    ge.current = z;
   }, [z]);
-  const be = !!z, I = f && o === "sandbox" ? w || he ? "100%" : z ?? `${Ae}px` : void 0;
-  H(() => {
-    if (l !== "blackboard") {
-      K.current = n;
+  const pe = !!z, F = g && o === "sandbox" ? H || de ? "100%" : z ?? `${ke}px` : void 0;
+  p(() => {
+    if (a !== "blackboard") {
+      Q.current = n;
       return;
     }
-    const t = K.current;
-    !(t && n.startsWith(t)) && t && Fe((a) => a + 1), K.current = n;
-  }, [l, n]), H(() => {
-    const t = m.current;
+    const t = Q.current;
+    !(t && n.startsWith(t)) && t && Ie((u) => u + 1), Q.current = n;
+  }, [a, n]), p(() => {
+    const t = f.current;
     if (!t) return;
     const e = t.contentDocument;
     if (!e) return;
     e.open(), e.write(`<!DOCTYPE html>
-<html${l === "blackboard" ? ' style="height: 100%;"' : ""}>
+<html${a === "blackboard" ? ' style="height: 100%;"' : ""}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
       :root { color-scheme: light; }
       html, body, #root { width: 100%; }
-      ${l === "blackboard" ? "html, body, #root { height: 100%; }" : ""}
-      html, body { margin: 0; padding: 0; overflow: ${w ? "hidden auto" : l === "blackboard" ? "auto" : "hidden"}; }
+      ${a === "blackboard" ? "html, body, #root { height: 100%; }" : ""}
+      html, body { margin: 0; padding: 0; overflow: ${H ? "hidden auto" : a === "blackboard" ? "auto" : "hidden"}; }
       *, *::before, *::after { box-sizing: border-box; }
-      ${l !== "blackboard" ? `
+      ${a !== "blackboard" ? `
         .h-screen { height: auto !important; }
         .min-h-screen { min-height: auto !important; }
         .h-dvh, .h-svh, .h-lvh { height: auto !important; }
@@ -134,24 +134,24 @@ const Ze = () => (oe || (oe = import("./blackboard-vendor.es.js").then(
     <div id="root"></div>
   </body>
 </html>`), e.close(), e.documentElement.setAttribute("data-theme", "light"), e.documentElement.style.colorScheme = "light", e.body?.style.setProperty("color-scheme", "light");
-    const a = f && o === "sandbox", q = () => ge("click");
-    a && e.addEventListener("click", q, !0);
-    const N = e.getElementById("root");
-    if (!N) return;
-    const He = Pe(N);
-    U.current = He;
-    let O = !1;
-    const we = (r) => ({
+    const u = g && o === "sandbox", q = () => be("click");
+    u && e.addEventListener("click", q, !0);
+    const I = e.getElementById("root");
+    if (!I) return;
+    const we = $e(I);
+    Y.current = we;
+    let N = !1;
+    const xe = (r) => ({
       heightAttrValue: r.getAttribute("height"),
       styleAttrValue: r.getAttribute("style"),
       classAttrValue: r.getAttribute("class")
-    }), xe = (r) => {
-      const x = Array.from(r.children);
-      return x.length === 1 ? x[0] : null;
-    }, Be = () => {
-      if (!_ || !m.current || !e.body) return null;
-      const r = m.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, x = fe.current, G = x ? Ce(
-        x,
+    }), ve = (r) => {
+      const w = Array.from(r.children);
+      return w.length === 1 ? w[0] : null;
+    }, We = () => {
+      if (!A || !f.current || !e.body) return null;
+      const r = f.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, w = ge.current, G = w ? Me(
+        w,
         r
       ) : null;
       if (G !== null)
@@ -160,142 +160,142 @@ const Ze = () => (oe || (oe = import("./blackboard-vendor.es.js").then(
         ".sandbox-wrapper"
       )?.firstElementChild;
       if (!h) return null;
-      const g = Array.from(h.children), v = g.length === 1 ? g[0] : null, u = Ge(
-        v,
+      const d = Array.from(h.children), x = d.length === 1 ? d[0] : null, L = Le(
+        x,
         {
-          getNode: we,
-          getSingleChild: xe
+          getNode: xe,
+          getSingleChild: ve
         }
       ).viewportHeightCss;
-      if (u) {
-        const b = Ce(
-          u,
+      if (L) {
+        const O = Me(
+          L,
           r
         );
-        if (b !== null)
-          return Math.ceil(b);
+        if (O !== null)
+          return Math.ceil(O);
       }
-      const V = Le(
-        v,
+      const l = Ue(
+        x,
         r,
         {
-          getNode: we,
-          getSingleChild: xe
+          getNode: xe,
+          getSingleChild: ve
         }
       );
-      return V !== null ? Math.ceil(V) : null;
-    }, te = () => {
-      if (!m.current || !e.body) return;
-      if (!f) {
-        if (X.current) {
-          Z.current = !0;
+      return l !== null ? Math.ceil(l) : null;
+    }, ne = () => {
+      if (!f.current || !e.body) return;
+      if (!g) {
+        if (Z.current) {
+          J.current = !0;
           return;
         }
-        X.current = !0;
-        const h = m.current, g = D.current?.clientWidth || 0, v = h.style.height;
-        if (g > 0) {
-          const re = Math.round(g * 9 / 16);
-          h.style.height = re + "px", e.body.offsetHeight;
-          let u = e.body.scrollHeight;
-          const V = e.defaultView;
-          if (V) {
-            const b = (p) => {
-              let y = 0;
-              const Re = (E) => {
-                if (E !== p && E.scrollHeight > E.clientHeight + 1) {
-                  const L = V.getComputedStyle(E).overflowY;
-                  if (L === "auto" || L === "scroll") {
-                    const Se = E.getBoundingClientRect();
-                    Se.top >= 0 && (y = Math.max(
-                      y,
-                      Math.ceil(Se.top + E.scrollHeight)
+        Z.current = !0;
+        const h = f.current, d = D.current?.clientWidth || 0, x = h.style.height;
+        if (d > 0) {
+          const oe = Math.round(d * 9 / 16), L = Math.max(8192, d * 20);
+          h.style.height = oe + "px", e.body.offsetHeight;
+          let l = e.body.scrollHeight;
+          const O = e.defaultView;
+          if (O) {
+            const V = (b) => {
+              let v = 0;
+              const Se = (E) => {
+                if (E !== b && E.scrollHeight > E.clientHeight + 1) {
+                  const U = O.getComputedStyle(E).overflowY;
+                  if (U === "auto" || U === "scroll") {
+                    const ye = E.getBoundingClientRect();
+                    ye.top >= 0 && (v = Math.max(
+                      v,
+                      Math.ceil(ye.top + E.scrollHeight)
                     ));
                   }
                 }
-                for (const L of E.children) Re(L);
+                for (const U of E.children) Se(U);
               };
-              return Re(p), y;
+              return Se(b), v;
             };
-            u = Math.max(u, b(e.body));
-            for (let p = 0; p < 8 && u > re; p++) {
-              h.style.height = u + "px", e.body.offsetHeight;
-              const y = Math.max(
+            l = Math.max(l, V(e.body));
+            for (let b = 0; b < 8 && l > oe; b++) {
+              h.style.height = l + "px", e.body.offsetHeight;
+              const v = Math.max(
                 e.body.scrollHeight,
-                b(e.body)
+                V(e.body)
               );
-              if (y <= u + 1) break;
-              u = y;
+              if (v <= l + 1 || v >= l * 1.5) break;
+              l = v;
             }
           }
-          h.style.height = v, ke((b) => {
-            const p = Math.max(200, Math.ceil(u));
-            return b === p ? b : p;
+          h.style.height = x, Fe((V) => {
+            const b = Math.min(L, Math.max(200, Math.ceil(l)));
+            return V === b ? V : b;
           });
         }
         setTimeout(() => {
-          X.current = !1, Z.current && (Z.current = !1, S());
+          Z.current = !1, J.current && (J.current = !1, S());
         }, 50);
         return;
       }
-      if (w) return;
-      const r = e.body.scrollHeight, x = e.documentElement?.scrollHeight || 0, G = N?.scrollHeight || 0, Ee = Math.max(r, x, G);
-      if (_) {
-        const h = Be(), g = Math.max(
+      if (H) return;
+      const r = e.body.scrollHeight, w = e.documentElement?.scrollHeight || 0, G = I?.scrollHeight || 0, Re = Math.max(r, w, G);
+      if (A) {
+        const h = We(), d = Math.max(
           200,
-          h ?? Math.ceil(Ee)
+          h ?? Math.ceil(Re)
         );
         _e(
-          (v) => v === g ? v : g
+          (x) => x === d ? x : d
         );
       }
     }, S = () => {
       requestAnimationFrame(() => {
-        O || te();
+        N || ne();
       });
     };
-    A.current = S, te(), S(), Ne && Ze().then((r) => {
-      O || (r(e), w && Xe(e), requestAnimationFrame(() => {
-        O || S();
+    T.current = S, ne(), S(), Oe && Je().then((r) => {
+      N || (r(e), H && Ze(e), requestAnimationFrame(() => {
+        N || S();
       }));
     }).catch(() => {
-      O || S();
+      N || S();
     });
-    const ne = new ResizeObserver(() => te());
-    ne.observe(e.body), N && ne.observe(N);
-    const ve = new MutationObserver(() => {
+    const re = new ResizeObserver(() => ne());
+    re.observe(e.body), I && re.observe(I);
+    const Ee = new MutationObserver(() => {
       S();
     });
-    return ve.observe(e.body, {
+    return Ee.observe(e.body, {
       childList: !0,
       subtree: !0,
       attributes: !0,
       attributeFilter: ["style", "class"]
     }), () => {
-      O = !0, ne.disconnect(), ve.disconnect(), w && t.contentWindow?.__mdf_cleanupScaling?.(), a && e.removeEventListener("click", q, !0), setTimeout(() => {
-        He.unmount(), U.current = null, A.current = () => {
+      N = !0, re.disconnect(), Ee.disconnect(), H && t.contentWindow?.__mdf_cleanupScaling?.(), u && e.removeEventListener("click", q, !0), setTimeout(() => {
+        we.unmount(), Y.current = null, T.current = () => {
         };
       }, 0);
     };
-  }, []), H(() => {
+  }, []), p(() => {
     const t = () => {
-      Ie(!!document.fullscreenElement);
+      Ne(!!document.fullscreenElement);
     };
     return document.addEventListener("fullscreenchange", t), () => document.removeEventListener("fullscreenchange", t);
-  }, []), H(() => {
+  }, []), p(() => {
     const t = D.current;
     if (!t) return;
-    const e = new ResizeObserver((a) => {
-      ce(a[0]?.contentRect.width ?? t.clientWidth);
+    const e = new ResizeObserver((u) => {
+      le(u[0]?.contentRect.width ?? t.clientWidth);
     });
-    return e.observe(t), ce(t.clientWidth), () => e.disconnect();
+    return e.observe(t), le(t.clientWidth), () => e.disconnect();
   }, []);
-  const pe = De(() => {
-    if (f || Y === 0 || J)
+  const He = Pe(() => {
+    if (g || X === 0 || K)
       return;
-    const t = Math.round(Y * 9 / 16);
-    return { height: Math.max(t, se) };
-  }, [f, Y, se, J]), Ve = () => {
-    const t = D.current || m.current;
+    const t = Math.round(X * 9 / 16);
+    return { height: Math.max(t, ce) };
+  }, [g, X, ce, K]), je = () => {
+    const t = D.current || f.current;
     if (t) {
       if (document.fullscreenElement) {
         document.exitFullscreen().catch(() => {
@@ -306,79 +306,79 @@ const Ze = () => (oe || (oe = import("./blackboard-vendor.es.js").then(
       });
     }
   };
-  H(() => {
-    const t = U.current;
+  p(() => {
+    const t = Y.current;
     if (!t) return;
     t.render(
-      /* @__PURE__ */ C.jsx(
-        $e,
+      /* @__PURE__ */ y.jsx(
+        ze,
         {
           html: $,
           styleLoadingText: B,
-          scriptLoadingText: T,
-          disableLoadingOverlay: ie,
-          resetToken: ae,
-          hasRootVhHeight: be,
-          mode: l,
-          stretchRootHeight: he,
-          enableScaling: w
+          scriptLoadingText: M,
+          disableLoadingOverlay: se,
+          resetToken: ue,
+          hasRootVhHeight: pe,
+          mode: a,
+          stretchRootHeight: de,
+          enableScaling: H
         }
       )
-    ), F.current = window.requestAnimationFrame(() => {
-      A.current?.(), w && m.current?.contentWindow?.__mdf_triggerFitContent?.(), F.current = null;
+    ), _.current = window.requestAnimationFrame(() => {
+      T.current?.(), H && f.current?.contentWindow?.__mdf_triggerFitContent?.(), _.current = null;
     });
-    const e = setTimeout(() => A.current?.(), 100), a = setTimeout(() => A.current?.(), 500);
+    const e = setTimeout(() => T.current?.(), 100), u = setTimeout(() => T.current?.(), 500);
     return () => {
-      clearTimeout(e), clearTimeout(a);
+      clearTimeout(e), clearTimeout(u);
     };
   }, [
     $,
     B,
-    T,
-    ae,
-    l
+    M,
+    ue,
+    a
   ]);
-  const je = [
+  const Be = [
     "w-full relative content-render-iframe-sandbox",
-    f ? "h-full overflow-auto flex flex-col" : pe ? "overflow-hidden flex items-center justify-center" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
+    g ? "h-full overflow-auto flex flex-col" : He ? "overflow-hidden flex items-center justify-center" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C.jsxs(
+  return /* @__PURE__ */ y.jsxs(
     "div",
     {
       ref: D,
-      "data-root-vh": be ? "true" : "false",
-      className: je,
-      style: I ? {
-        height: I,
-        minHeight: I
-      } : pe,
+      "data-root-vh": pe ? "true" : "false",
+      className: Be,
+      style: F ? {
+        height: F,
+        minHeight: F
+      } : He,
       children: [
-        !W && /* @__PURE__ */ C.jsx(
+        !W && /* @__PURE__ */ y.jsx(
           "button",
           {
             type: "button",
-            onClick: Ve,
+            onClick: je,
             className: "absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
-            children: J ? "退出全屏" : d || "全屏浏览"
+            children: K ? "退出全屏" : m || "全屏浏览"
           }
         ),
-        l === "blackboard" && o === "markdown" ? /* @__PURE__ */ C.jsx("div", { onClick: () => ge("click"), children: /* @__PURE__ */ C.jsx(
-          ze,
+        a === "blackboard" && o === "markdown" ? /* @__PURE__ */ y.jsx("div", { onClick: () => be("click"), children: /* @__PURE__ */ y.jsx(
+          qe,
           {
             content: c,
-            disableSandboxLoadingOverlay: ie
+            disableSandboxLoadingOverlay: se
           }
-        ) }) : /* @__PURE__ */ C.jsx(
+        ) }) : /* @__PURE__ */ y.jsx(
           "iframe",
           {
-            ref: m,
+            ref: f,
             sandbox: "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox",
             allow: "fullscreen",
             allowFullScreen: !0,
             className: [s, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
             style: {
-              height: I ?? "100%",
-              minHeight: I,
+              height: F ?? "100%",
+              minHeight: F,
               margin: "auto"
             }
           }
@@ -388,6 +388,6 @@ const Ze = () => (oe || (oe = import("./blackboard-vendor.es.js").then(
   );
 };
 export {
-  ut as default
+  ht as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map