markdown-flow-ui 0.2.33 → 0.2.35-dev.1

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

@@ -1,142 +1,143 @@
-import { jsx as I, jsxs as Rt } from "react/jsx-runtime";
-import q, { useRef as o, useCallback as Xe, useState as _, useEffect as w, useMemo as vt } from "react";
-import { createRoot as St } from "react-dom/client";
-import Ct from "./SandboxApp.es.js";
-import yt from "./ContentRender.es.js";
-import { inspectViewportHeightFromHtmlRootString as Ke, EMPTY_ROOT_HEIGHT_META as Et, parseExplicitHeight as Je, inspectViewportHeightFromNodeChain as Mt, resolveExplicitHeightFromNodeChain as Tt } from "./utils/iframe-viewport-height.es.js";
-import { SANDBOX_INTERACTION_MESSAGE_TYPE as kt, SANDBOX_INTERACTION_MESSAGE_SOURCE as At } from "../../lib/sandboxInteraction.es.js";
-import { injectScalingSystem as Ft } from "./utils/iframe-scaling.es.js";
-import { getMarkdownFlowDirection as _t, getMarkdownFlowLanguage as Dt } from "../../lib/locale.es.js";
-import { useDetachedLanguage as It } from "../../lib/useDetachedLanguage.es.js";
-import { useResolvedDirection as Qe } from "../../lib/useResolvedDirection.es.js";
-import { getContentRenderLocaleTexts as Ot } from "./contentRenderI18n.es.js";
-import { CJK_SAFE_SANS_FONT_FAMILY as Nt } from "./cjkFontFamily.es.js";
-let Ce = null;
-const Ze = () => (Ce || (Ce = import("./blackboard-vendor.es.js")), Ce), Vt = /<img\b[^>]*>/i, Wt = 180, Bt = 240, $t = (i) => i.split(/\s+/).filter(Boolean).map((r) => {
+import { jsx as V, jsxs as Et } from "react/jsx-runtime";
+import j, { useRef as o, useCallback as et, useState as A, useEffect as H, useMemo as Tt } from "react";
+import { createRoot as kt } from "react-dom/client";
+import At from "./SandboxApp.es.js";
+import { normalizeContentViewportMinHeight as Ft } from "./utils/content-viewport-min-height.es.js";
+import _t from "./ContentRender.es.js";
+import { inspectViewportHeightFromHtmlRootString as tt, EMPTY_ROOT_HEIGHT_META as Dt, parseExplicitHeight as nt, inspectViewportHeightFromNodeChain as It, resolveExplicitHeightFromNodeChain as Ot } from "./utils/iframe-viewport-height.es.js";
+import { SANDBOX_INTERACTION_MESSAGE_TYPE as Nt, SANDBOX_INTERACTION_MESSAGE_SOURCE as Vt } from "../../lib/sandboxInteraction.es.js";
+import { injectScalingSystem as Bt } from "./utils/iframe-scaling.es.js";
+import { getMarkdownFlowDirection as Wt, getMarkdownFlowLanguage as zt } from "../../lib/locale.es.js";
+import { useDetachedLanguage as $t } from "../../lib/useDetachedLanguage.es.js";
+import { useResolvedDirection as rt } from "../../lib/useResolvedDirection.es.js";
+import { getContentRenderLocaleTexts as qt } from "./contentRenderI18n.es.js";
+import { CJK_SAFE_SANS_FONT_FAMILY as Pt } from "./cjkFontFamily.es.js";
+let ye = null;
+const ot = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Lt = /<img\b[^>]*>/i, jt = 180, Gt = 240, Yt = (i) => i.split(/\s+/).filter(Boolean).map((r) => {
   const l = r.split(":");
   return l[l.length - 1] !== "h-screen" && l[l.length - 1] !== "min-h-screen" ? r : (l[l.length - 1] = "h-full", l.join(":"));
-}).join(" "), zt = (i, r) => !r || !i.trim() ? i : i.replace(
+}).join(" "), Ut = (i, r) => !r || !i.trim() ? i : i.replace(
   /^(\s*<[a-zA-Z][\w:-]*)(\s[^>]*?)?>/,
-  (l, h, L = "") => {
-    const p = L.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
-    if (!p)
+  (l, f, G = "") => {
+    const x = G.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
+    if (!x)
       return l;
-    const O = $t(p[2]);
-    return O === p[2] ? l : `${h}${L.replace(
-      p[0],
-      `class=${p[1]}${O}${p[1]}`
+    const B = Yt(x[2]);
+    return B === x[2] ? l : `${f}${G.replace(
+      x[0],
+      `class=${x[1]}${B}${x[1]}`
     )}>`;
   }
-), Pt = ({
+), Xt = ({
   content: i,
   type: r,
   className: l,
-  locale: h,
-  lang: L,
-  dir: p,
-  loadingText: O,
-  styleLoadingText: ye,
+  locale: f,
+  lang: G,
+  dir: x,
+  loadingText: B,
+  styleLoadingText: Me,
   scriptLoadingText: Ee,
-  fullScreenButtonText: et,
-  exitFullScreenButtonText: tt,
-  hideFullScreen: nt = !1,
+  fullScreenButtonText: it,
+  exitFullScreenButtonText: ct,
+  hideFullScreen: Te = !1,
   mode: a = "content",
-  replaceRootScreenHeightWithFull: rt = !1,
-  enableScaling: ot = !1,
-  disableLoadingOverlay: ne = !1
+  replaceRootScreenHeightWithFull: st = !1,
+  enableScaling: lt = !1,
+  disableLoadingOverlay: oe = !1
 }) => {
-  const Me = Ot(h), H = p ?? _t(h), re = L ?? Dt(h), it = et || Me.sandboxFullscreenButtonText, ct = tt || Me.sandboxExitFullscreenButtonText, E = o(null), Te = It(E, re), { resolvedDirection: oe } = Qe(E, H), ke = o(null), Ae = o(null), st = Xe(
+  const ke = qt(f), R = x ?? Wt(f), ie = G ?? zt(f), at = it || ke.sandboxFullscreenButtonText, ut = ct || ke.sandboxExitFullscreenButtonText, F = o(null), Ae = o(null), Fe = $t(F, ie), { resolvedDirection: ce } = rt(F, R), _e = o(null), De = o(null), dt = et(
     (t) => {
-      ke.current = t, Ae.current = t?.querySelector(".content-render") ?? null;
+      _e.current = t, De.current = t?.querySelector(".content-render") ?? null;
     },
     []
-  ), { resolvedDirection: lt } = Qe(
-    Ae,
-    H
-  ), Fe = H ?? oe, _e = o(H);
-  _e.current = H;
-  const [at, ut] = _();
-  let j;
-  H === "auto" && (j = oe, r === "sandbox" ? j = at ?? oe : a === "blackboard" && (j = lt));
-  const x = o(null), G = o(null), N = o(() => {
-  }), [dt, ht] = _(480), [De, ft] = _(0), [ie, ce] = _(0), se = o(!1), le = o(!1), Ie = o(0), [Oe, mt] = _(0), [ae, gt] = _(!1), ue = r === "sandbox", R = a === "blackboard", v = ot && R && r === "sandbox", V = R && r === "sandbox", D = V && rt, de = o(""), Y = q.useMemo(
+  ), { resolvedDirection: ht } = rt(
+    De,
+    R
+  ), Ie = R ?? ce, Oe = o(R);
+  Oe.current = R;
+  const [ft, mt] = A();
+  let Y;
+  R === "auto" && (Y = ce, r === "sandbox" ? Y = ft ?? ce : a === "blackboard" && (Y = ht));
+  const C = o(null), U = o(null), W = o(() => {
+  }), [gt, bt] = A(480), [se, wt] = A(null), [X, le] = A(0), [Ne, pt] = A(0), ae = o(!1), ue = o(!1), Ve = o(0), [Be, Ht] = A(0), [de, xt] = A(!1), he = r === "sandbox", v = a === "blackboard", S = lt && v && r === "sandbox", z = v && r === "sandbox", O = z && st, fe = o(""), K = j.useMemo(
     () => r === "sandbox" ? i : "",
     [i, r]
-  ), c = q.useMemo(
-    () => zt(
-      Y,
-      D
+  ), c = j.useMemo(
+    () => Ut(
+      K,
+      O
     ),
-    [Y, D]
-  ), Ne = q.useMemo(
-    () => D ? Ke(Y) : Et,
-    [Y, D]
-  ), he = q.useMemo(
-    () => D && Ne.hasFullViewportHeight,
+    [K, O]
+  ), We = j.useMemo(
+    () => O ? tt(K) : Dt,
+    [K, O]
+  ), me = j.useMemo(
+    () => O && We.hasFullViewportHeight,
     [
-      Ne.hasFullViewportHeight,
-      D
+      We.hasFullViewportHeight,
+      O
     ]
-  ), [U, Ve] = _(
+  ), [J, ze] = A(
     c
-  ), We = o(c), fe = o(c), W = o(null), S = o(null), Be = o(null), me = Xe((t) => {
+  ), $e = o(c), ge = o(c), $ = o(null), y = o(null), qe = o(null), be = et((t) => {
     if (typeof window > "u")
       return;
     const e = Date.now();
-    e - Ie.current < Bt || (Ie.current = e, window.postMessage(
+    e - Ve.current < Gt || (Ve.current = e, window.postMessage(
       {
-        source: At,
-        type: kt,
+        source: Vt,
+        type: Nt,
         eventType: t
       },
       window.location.origin
     ));
   }, []);
-  w(() => {
+  H(() => {
     if (r !== "markdown" || a !== "blackboard") return;
-    const t = ke.current;
+    const t = _e.current;
     if (!t) return;
-    const e = () => me("click");
+    const e = () => be("click");
     return t.addEventListener("click", e), () => t.removeEventListener("click", e);
-  }, [me, a, r]);
-  const ge = () => {
-    W.current !== null && (window.clearTimeout(W.current), W.current = null);
-  }, bt = () => {
-    S.current !== null && (window.cancelAnimationFrame(S.current), S.current = null);
+  }, [be, a, r]);
+  const we = () => {
+    $.current !== null && (window.clearTimeout($.current), $.current = null);
+  }, Rt = () => {
+    y.current !== null && (window.cancelAnimationFrame(y.current), y.current = null);
   };
-  w(
+  H(
     () => () => {
-      ge(), bt();
+      we(), Rt();
     },
     []
-  ), w(() => {
-    const t = We.current;
-    We.current = c;
-    const e = !!t && c.length > t.length && c.startsWith(t), f = Vt.test(
+  ), H(() => {
+    const t = $e.current;
+    $e.current = c;
+    const e = !!t && c.length > t.length && c.startsWith(t), u = Lt.test(
       c
     );
-    if (!(e && f)) {
-      ge(), fe.current = c, Ve(c);
+    if (!(e && u)) {
+      we(), ge.current = c, ze(c);
       return;
     }
-    fe.current = c, ge(), W.current = window.setTimeout(() => {
-      Ve(fe.current), W.current = null;
-    }, Wt);
+    ge.current = c, we(), $.current = window.setTimeout(() => {
+      ze(ge.current), $.current = null;
+    }, jt);
   }, [c]);
-  const X = q.useMemo(() => V ? Ke(U).viewportHeightCss : null, [U, V]);
-  w(() => {
-    Be.current = X;
-  }, [X]);
-  const be = !!X, B = R && r === "sandbox" ? v || he ? "100%" : X ?? `${dt}px` : void 0;
-  w(() => {
+  const Q = j.useMemo(() => z ? tt(J).viewportHeightCss : null, [J, z]);
+  H(() => {
+    qe.current = Q;
+  }, [Q]);
+  const pe = !!Q, q = v && r === "sandbox" ? S || me ? "100%" : Q ?? `${gt}px` : void 0;
+  H(() => {
     if (a !== "blackboard") {
-      de.current = c;
+      fe.current = c;
       return;
     }
-    const t = de.current;
-    !(t && c.startsWith(t)) && t && mt((f) => f + 1), de.current = c;
-  }, [a, c]), w(() => {
-    const t = x.current;
+    const t = fe.current;
+    !(t && c.startsWith(t)) && t && Ht((u) => u + 1), fe.current = c;
+  }, [a, c]), H(() => {
+    const t = C.current;
     if (!t) return;
     const e = t.contentDocument;
     if (!e) return;
@@ -147,9 +148,9 @@ const Ze = () => (Ce || (Ce = import("./blackboard-vendor.es.js")), Ce), Vt = /<
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
       :root { color-scheme: light; }
-      html, body, #root { width: 100%; font-family: ${Nt}; }
+      html, body, #root { width: 100%; font-family: ${Pt}; }
       ${a === "blackboard" ? "html, body, #root { height: 100%; }" : ""}
-      html, body { margin: 0; padding: 0; overflow: ${v ? "hidden auto" : a === "blackboard" ? "auto" : "hidden"}; }
+      html, body { margin: 0; padding: 0; overflow: ${S ? "hidden auto" : a === "blackboard" ? "auto" : "hidden"}; }
       *, *::before, *::after { box-sizing: border-box; }
       ${a !== "blackboard" ? `
         .h-screen { height: auto !important; }
@@ -163,208 +164,226 @@ const Ze = () => (Ce || (Ce = import("./blackboard-vendor.es.js")), Ce), Vt = /<
     <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 f = R && r === "sandbox", K = () => me("click");
-    f && e.addEventListener("click", K, !0);
-    const $ = e.getElementById("root");
-    if (!$) return;
-    const we = St($);
-    G.current = we;
-    let C = !1;
-    const ze = (n) => ({
+    const u = v && r === "sandbox", M = () => be("click");
+    u && e.addEventListener("click", M, !0);
+    const _ = e.getElementById("root");
+    if (!_) return;
+    const N = kt(_);
+    U.current = N;
+    let m = !1;
+    const Pe = (n) => ({
       heightAttrValue: n.getAttribute("height"),
       styleAttrValue: n.getAttribute("style"),
       classAttrValue: n.getAttribute("class")
-    }), Pe = (n) => {
+    }), Le = (n) => {
       const s = Array.from(n.children);
       return s.length === 1 ? s[0] : null;
-    }, Ht = () => {
-      if (!V || !x.current || !e.body) return null;
-      const n = x.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, s = Be.current, g = s ? Je(
+    }, yt = () => {
+      if (!z || !C.current || !e.body) return null;
+      const n = C.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, s = qe.current, b = s ? nt(
         s,
         n
       ) : null;
-      if (g !== null)
-        return Math.ceil(g);
-      const m = e.body.querySelector(
+      if (b !== null)
+        return Math.ceil(b);
+      const E = e.body.querySelector(
         ".sandbox-wrapper"
       )?.firstElementChild;
-      if (!m) return null;
-      const b = Array.from(m.children), k = b.length === 1 ? b[0] : null, ee = Mt(
-        k,
+      if (!E) return null;
+      const g = Array.from(E.children), w = g.length === 1 ? g[0] : null, P = It(
+        w,
         {
-          getNode: ze,
-          getSingleChild: Pe
+          getNode: Pe,
+          getSingleChild: Le
         }
       ).viewportHeightCss;
-      if (ee) {
-        const z = Je(
-          ee,
+      if (P) {
+        const h = nt(
+          P,
           n
         );
-        if (z !== null)
-          return Math.ceil(z);
+        if (h !== null)
+          return Math.ceil(h);
       }
-      const d = Tt(
-        k,
+      const ne = Ot(
+        w,
         n,
         {
-          getNode: ze,
-          getSingleChild: Pe
+          getNode: Pe,
+          getSingleChild: Le
         }
       );
-      return d !== null ? Math.ceil(d) : null;
-    }, pe = () => {
-      if (!x.current || !e.body) return;
-      if (!R) {
-        if (se.current) {
-          le.current = !0;
+      return ne !== null ? Math.ceil(ne) : null;
+    }, xe = () => {
+      if (!C.current || !e.body) return;
+      if (!v) {
+        if (ae.current) {
+          ue.current = !0;
           return;
         }
-        se.current = !0;
-        const m = x.current, b = E.current?.clientWidth || 0, k = m.style.height;
-        if (b > 0) {
-          const Se = Math.round(b * 9 / 16), ee = Math.max(8192, b * 20);
-          m.style.height = Se + "px", e.body.offsetHeight;
-          let d = e.body.scrollHeight;
-          const z = e.defaultView;
-          if (z) {
-            const P = (y) => {
-              let A = 0;
-              const Ye = (F) => {
-                if (F !== y && F.scrollHeight > F.clientHeight + 1) {
-                  const te = z.getComputedStyle(F).overflowY;
-                  if (te === "auto" || te === "scroll") {
-                    const Ue = F.getBoundingClientRect();
-                    Ue.top >= 0 && (A = Math.max(
-                      A,
-                      Math.ceil(Ue.top + F.scrollHeight)
+        ae.current = !0;
+        const E = e.body.querySelector(".sandbox-container");
+        E && Ft(E);
+        const g = C.current, w = F.current?.clientWidth || 0, Xe = g.style.height;
+        if (w > 0) {
+          const P = Math.round(w * 9 / 16), ne = Math.max(8192, w * 20);
+          g.style.height = P + "px", e.body.offsetHeight;
+          let h = e.body.scrollHeight;
+          const Ke = e.defaultView;
+          if (Ke) {
+            const L = (T) => {
+              let p = 0;
+              const Je = (k) => {
+                const Qe = Ke.getComputedStyle(k);
+                if (Qe.position === "fixed" && (p = Math.max(
+                  p,
+                  Math.ceil(k.getBoundingClientRect().bottom)
+                )), k !== T && k.scrollHeight > k.clientHeight + 1) {
+                  const re = Qe.overflowY;
+                  if (re === "auto" || re === "scroll") {
+                    const Ze = k.getBoundingClientRect();
+                    Ze.top >= 0 && (p = Math.max(
+                      p,
+                      Math.ceil(Ze.top + k.scrollHeight)
                     ));
                   }
                 }
-                for (const te of F.children) Ye(te);
+                for (const re of k.children) Je(re);
               };
-              return Ye(y), A;
+              return Je(T), p;
             };
-            d = Math.max(d, P(e.body));
-            for (let y = 0; y < 8 && d > Se; y++) {
-              m.style.height = d + "px", e.body.offsetHeight;
-              const A = Math.max(
+            h = Math.max(h, L(e.body));
+            for (let T = 0; T < 8 && h > P; T++) {
+              g.style.height = h + "px", e.body.offsetHeight;
+              const p = Math.max(
                 e.body.scrollHeight,
-                P(e.body)
+                L(e.body)
               );
-              if (A <= d + 1 || A >= d * 1.5) break;
-              d = A;
+              if (p <= h + 1 || p >= h * 1.5) break;
+              h = p;
             }
           }
-          m.style.height = k, ft((P) => {
-            const y = Math.min(ee, Math.max(200, Math.ceil(d)));
-            return P === y ? P : y;
+          g.style.height = Xe, wt((L) => {
+            const T = Math.min(ne, Math.max(1, Math.ceil(h)));
+            return L === T ? L : T;
           });
         }
         setTimeout(() => {
-          se.current = !1, le.current && (le.current = !1, M());
+          ae.current = !1, ue.current && (ue.current = !1, D());
         }, 50);
         return;
       }
-      if (v) return;
-      const n = e.body.scrollHeight, s = e.documentElement?.scrollHeight || 0, g = $?.scrollHeight || 0, T = Math.max(n, s, g);
-      if (V) {
-        const m = Ht(), b = Math.max(
+      if (S) return;
+      const n = e.body.scrollHeight, s = e.documentElement?.scrollHeight || 0, b = _?.scrollHeight || 0, I = Math.max(n, s, b);
+      if (z) {
+        const E = yt(), g = Math.max(
           200,
-          m ?? Math.ceil(T)
+          E ?? Math.ceil(I)
         );
-        ht(
-          (k) => k === b ? k : b
+        bt(
+          (w) => w === g ? w : g
         );
       }
-    }, M = () => {
+    }, D = () => {
       requestAnimationFrame(() => {
-        C || pe();
+        m || xe();
       });
     };
-    N.current = M, pe(), M(), ue && Ze().then(({ injectBlackboardLibraries: n }) => {
-      C || (n(e), v && Ft(e), requestAnimationFrame(() => {
-        C || M();
+    W.current = D, xe(), D(), he && ot().then(({ injectBlackboardLibraries: n }) => {
+      m || (n(e), S && Bt(e), requestAnimationFrame(() => {
+        m || D();
       }));
     }).catch(() => {
-      C || M();
+      m || D();
     });
-    const u = E.current;
-    let He = !!(u && (u.clientWidth <= 0 || u.clientHeight <= 0)), J = !1, Q = null, Z = null;
-    const qe = () => {
-      if (C) return;
-      M(), t.contentWindow?.__mdf_triggerFitContent?.();
-    }, xe = () => !!(u && u.clientWidth > 0 && u.clientHeight > 0), Le = () => {
-      !ue || !u || !He || J || !xe() || (J = !0, Ze().then(({ refreshTailwindRuntime: n }) => {
-        C || (Q = window.requestAnimationFrame(() => {
-          Q = null, J = !1;
+    const d = F.current;
+    let Re = !!(d && (d.clientWidth <= 0 || d.clientHeight <= 0)), Z = !1, ee = null, te = null;
+    const je = () => {
+      if (m) return;
+      D(), t.contentWindow?.__mdf_triggerFitContent?.();
+    }, Ce = () => !!(d && d.clientWidth > 0 && d.clientHeight > 0), Ge = () => {
+      !he || !d || !Re || Z || !Ce() || (Z = !0, ot().then(({ refreshTailwindRuntime: n }) => {
+        m || (ee = window.requestAnimationFrame(() => {
+          ee = null, Z = !1;
           const s = e.querySelector(".sandbox-container");
-          C || !xe() || !s?.childNodes.length || !n(e) || (He = !1, qe(), Z = window.setTimeout(() => {
-            Z = null, qe();
+          m || !Ce() || !s?.childNodes.length || !n(e) || (Re = !1, je(), te = window.setTimeout(() => {
+            te = null, je();
           }, 100));
         }));
       }).catch(() => {
-        J = !1;
+        Z = !1;
       }));
-    }, je = typeof ResizeObserver < "u", Re = ue && u && je ? new ResizeObserver((n) => {
-      const s = n[0]?.contentRect, g = s?.width ?? u.clientWidth, T = s?.height ?? u.clientHeight;
-      g > 0 && T > 0 && Le();
+    }, Ye = typeof ResizeObserver < "u", ve = he && d && Ye ? new ResizeObserver((n) => {
+      const s = n[0]?.contentRect, b = s?.width ?? d.clientWidth, I = s?.height ?? d.clientHeight;
+      b > 0 && I > 0 && Ge();
     }) : null;
-    Re && u && Re.observe(u);
-    const ve = je ? new ResizeObserver(() => pe()) : null;
-    ve?.observe(e.body), $ && ve?.observe($);
-    const xt = () => {
-      if (r !== "sandbox" || _e.current !== "auto")
+    ve && d && ve.observe(d);
+    const Se = Ye ? new ResizeObserver(() => xe()) : null;
+    Se?.observe(e.body), _ && Se?.observe(_);
+    const Mt = () => {
+      if (r !== "sandbox" || Oe.current !== "auto")
         return;
       const n = e.querySelector(".sandbox-wrapper"), s = e.defaultView;
       if (!n || !s) return;
-      const g = s.getComputedStyle(n).direction === "rtl" ? "rtl" : "ltr";
-      ut(
-        (T) => T === g ? T : g
+      const b = s.getComputedStyle(n).direction === "rtl" ? "rtl" : "ltr";
+      mt(
+        (I) => I === b ? I : b
       );
-    }, Ge = new MutationObserver(() => {
-      if (xt(), M(), !xe()) {
-        He = !0;
+    }, Ue = new MutationObserver(() => {
+      if (Mt(), D(), !Ce()) {
+        Re = !0;
         return;
       }
-      Le();
+      Ge();
     });
-    return Ge.observe(e.body, {
+    return Ue.observe(e.body, {
       childList: !0,
       characterData: !0,
       subtree: !0,
       attributes: !0,
       attributeFilter: ["style", "class", "dir"]
     }), () => {
-      C = !0, Re?.disconnect(), ve?.disconnect(), Ge.disconnect(), Q !== null && window.cancelAnimationFrame(Q), Z !== null && window.clearTimeout(Z), v && t.contentWindow?.__mdf_cleanupScaling?.(), f && e.removeEventListener("click", K, !0), G.current === we && (G.current = null, N.current = () => {
+      m = !0, ve?.disconnect(), Se?.disconnect(), Ue.disconnect(), ee !== null && window.cancelAnimationFrame(ee), te !== null && window.clearTimeout(te), S && t.contentWindow?.__mdf_cleanupScaling?.(), u && e.removeEventListener("click", M, !0), U.current === N && (U.current = null, W.current = () => {
       }), setTimeout(() => {
-        we.unmount();
+        N.unmount();
       }, 0);
     };
-  }, []), w(() => {
+  }, []), H(() => {
     const t = () => {
-      gt(!!document.fullscreenElement);
+      xt(!!document.fullscreenElement);
     };
     return document.addEventListener("fullscreenchange", t), () => document.removeEventListener("fullscreenchange", t);
-  }, []), w(() => {
-    const t = E.current;
+  }, []), H(() => {
+    const t = F.current;
     if (!t) return;
+    const e = Ae.current, u = () => {
+      pt(
+        e ? Math.ceil(e.offsetTop + e.offsetHeight) : 0
+      );
+    };
     if (typeof ResizeObserver > "u") {
-      ce(t.clientWidth);
+      le(t.clientWidth), u();
       return;
     }
-    const e = new ResizeObserver((f) => {
-      ce(f[0]?.contentRect.width ?? t.clientWidth);
+    const M = new ResizeObserver((_) => {
+      const N = _.find((m) => m.target === t);
+      N && le(N.contentRect.width), u();
     });
-    return e.observe(t), ce(t.clientWidth), () => e.disconnect();
-  }, []);
-  const $e = vt(() => {
-    if (R || ie === 0 || ae)
+    return M.observe(t), e && M.observe(e), le(t.clientWidth), u(), () => M.disconnect();
+  }, [Te]);
+  const He = Tt(() => {
+    if (v || X === 0 || de)
       return;
-    const t = Math.round(ie * 9 / 16);
-    return { height: Math.max(t, De) };
-  }, [R, ie, De, ae]), wt = () => {
-    const t = E.current || x.current;
+    const t = Math.round(X * 9 / 16);
+    return { height: Math.max(se ?? t, Ne) };
+  }, [
+    v,
+    X,
+    se,
+    de,
+    Ne
+  ]), Ct = He ? Math.max(Math.round(X * 9 / 16), se ?? 0) : void 0, vt = () => {
+    const t = F.current || C.current;
     if (t) {
       if (document.fullscreenElement) {
         document.exitFullscreen().catch(() => {
@@ -375,97 +394,98 @@ const Ze = () => (Ce || (Ce = import("./blackboard-vendor.es.js")), Ce), Vt = /<
       });
     }
   };
-  w(() => {
-    const t = G.current;
+  H(() => {
+    const t = U.current;
     if (!t) return;
     t.render(
-      /* @__PURE__ */ I(
-        Ct,
+      /* @__PURE__ */ V(
+        At,
         {
-          html: U,
-          locale: h,
-          dir: Fe,
-          lang: Te,
-          loadingText: O,
-          styleLoadingText: ye,
+          html: J,
+          locale: f,
+          dir: Ie,
+          lang: Fe,
+          loadingText: B,
+          styleLoadingText: Me,
           scriptLoadingText: Ee,
-          disableLoadingOverlay: ne,
-          resetToken: Oe,
-          hasRootVhHeight: be,
+          disableLoadingOverlay: oe,
+          resetToken: Be,
+          hasRootVhHeight: pe,
           mode: a,
-          stretchRootHeight: he,
-          enableScaling: v
+          stretchRootHeight: me,
+          enableScaling: S
         }
       )
-    ), S.current = window.requestAnimationFrame(() => {
-      N.current?.(), v && x.current?.contentWindow?.__mdf_triggerFitContent?.(), S.current = null;
+    ), y.current = window.requestAnimationFrame(() => {
+      W.current?.(), S && C.current?.contentWindow?.__mdf_triggerFitContent?.(), y.current = null;
     });
-    const e = setTimeout(() => N.current?.(), 100), f = setTimeout(() => N.current?.(), 500);
+    const e = setTimeout(() => W.current?.(), 100), u = setTimeout(() => W.current?.(), 500);
     return () => {
-      S.current !== null && (window.cancelAnimationFrame(S.current), S.current = null), clearTimeout(e), clearTimeout(f);
+      y.current !== null && (window.cancelAnimationFrame(y.current), y.current = null), clearTimeout(e), clearTimeout(u);
     };
   }, [
-    U,
-    h,
+    J,
+    f,
+    Ie,
     Fe,
-    Te,
-    O,
-    ye,
+    B,
+    Me,
     Ee,
-    Oe,
-    ne,
-    be,
+    Be,
+    oe,
+    pe,
     a,
-    he,
-    v
+    me,
+    S
   ]);
-  const pt = [
+  const St = [
     `w-full relative content-render-iframe-sandbox content-render-iframe-sandbox--${r}`,
-    R ? "h-full overflow-auto flex flex-col" : $e ? "overflow-hidden flex items-center justify-center" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
+    v ? "h-full overflow-auto flex flex-col" : He ? "overflow-hidden" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ Rt(
+  return /* @__PURE__ */ Et(
     "div",
     {
-      ref: E,
-      dir: H,
-      lang: re,
-      "data-root-vh": be ? "true" : "false",
-      className: pt,
-      style: B ? {
-        height: B,
-        minHeight: B
-      } : $e,
+      ref: F,
+      dir: R,
+      lang: ie,
+      "data-root-vh": pe ? "true" : "false",
+      className: St,
+      style: q ? {
+        height: q,
+        minHeight: q
+      } : He,
       children: [
-        !nt && /* @__PURE__ */ I(
+        !Te && /* @__PURE__ */ V(
           "button",
           {
+            ref: Ae,
             type: "button",
-            dir: j,
-            onClick: wt,
+            dir: Y,
+            onClick: vt,
             className: "absolute top-2 end-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
-            children: ae ? ct : it
+            children: de ? ut : at
           }
         ),
-        a === "blackboard" && r === "markdown" ? /* @__PURE__ */ I("div", { ref: st, children: /* @__PURE__ */ I(
-          yt,
+        a === "blackboard" && r === "markdown" ? /* @__PURE__ */ V("div", { ref: dt, children: /* @__PURE__ */ V(
+          _t,
           {
             content: i,
-            locale: h,
-            dir: H,
-            lang: re,
-            disableSandboxLoadingOverlay: ne
+            locale: f,
+            dir: R,
+            lang: ie,
+            disableSandboxLoadingOverlay: oe
           }
-        ) }) : /* @__PURE__ */ I(
+        ) }) : /* @__PURE__ */ V(
           "iframe",
           {
-            ref: x,
+            ref: C,
             sandbox: "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox",
             allow: "fullscreen",
             allowFullScreen: !0,
             className: [l, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
             style: {
-              height: B ?? "100%",
-              minHeight: B,
+              height: q ?? Ct ?? "100%",
+              minHeight: q,
               margin: "auto"
             }
           }
@@ -473,11 +493,11 @@ const Ze = () => (Ce || (Ce = import("./blackboard-vendor.es.js")), Ce), Vt = /<
       ]
     }
   );
-}, nn = (i) => {
-  const r = i.mode ?? "content", l = !!(i.enableScaling && r === "blackboard" && i.type === "sandbox"), h = `${i.type}:${r}:${l ? "scaled" : "unscaled"}`;
-  return /* @__PURE__ */ I(Pt, { ...i }, h);
+}, dn = (i) => {
+  const r = i.mode ?? "content", l = !!(i.enableScaling && r === "blackboard" && i.type === "sandbox"), f = `${i.type}:${r}:${l ? "scaled" : "unscaled"}`;
+  return /* @__PURE__ */ V(Xt, { ...i }, f);
 };
 export {
-  nn as default
+  dn as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map