markdown-flow-ui 0.2.32 → 0.2.34

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

@@ -1,142 +1,142 @@
-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 B, jsxs as yt } from "react/jsx-runtime";
+import j, { useRef as o, useCallback as Ze, useState as k, useEffect as H, useMemo as Et } from "react";
+import { createRoot as Tt } from "react-dom/client";
+import kt from "./SandboxApp.es.js";
+import At from "./ContentRender.es.js";
+import { inspectViewportHeightFromHtmlRootString as et, EMPTY_ROOT_HEIGHT_META as Ft, parseExplicitHeight as tt, inspectViewportHeightFromNodeChain as _t, resolveExplicitHeightFromNodeChain as Dt } from "./utils/iframe-viewport-height.es.js";
+import { SANDBOX_INTERACTION_MESSAGE_TYPE as It, SANDBOX_INTERACTION_MESSAGE_SOURCE as Ot } from "../../lib/sandboxInteraction.es.js";
+import { injectScalingSystem as Nt } from "./utils/iframe-scaling.es.js";
+import { getMarkdownFlowDirection as Bt, getMarkdownFlowLanguage as Vt } from "../../lib/locale.es.js";
+import { useDetachedLanguage as Wt } from "../../lib/useDetachedLanguage.es.js";
+import { useResolvedDirection as nt } from "../../lib/useResolvedDirection.es.js";
+import { getContentRenderLocaleTexts as $t } from "./contentRenderI18n.es.js";
+import { CJK_SAFE_SANS_FONT_FAMILY as zt } from "./cjkFontFamily.es.js";
+let ye = null;
+const rt = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Pt = /<img\b[^>]*>/i, qt = 180, Lt = 240, jt = (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(" "), Gt = (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 V = jt(x[2]);
+    return V === x[2] ? l : `${f}${G.replace(
+      x[0],
+      `class=${x[1]}${V}${x[1]}`
     )}>`;
   }
-), Pt = ({
+), Yt = ({
   content: i,
   type: r,
   className: l,
-  locale: h,
-  lang: L,
-  dir: p,
-  loadingText: O,
-  styleLoadingText: ye,
-  scriptLoadingText: Ee,
-  fullScreenButtonText: et,
-  exitFullScreenButtonText: tt,
-  hideFullScreen: nt = !1,
+  locale: f,
+  lang: G,
+  dir: x,
+  loadingText: V,
+  styleLoadingText: Ee,
+  scriptLoadingText: Te,
+  fullScreenButtonText: ot,
+  exitFullScreenButtonText: it,
+  hideFullScreen: ke = !1,
   mode: a = "content",
-  replaceRootScreenHeightWithFull: rt = !1,
-  enableScaling: ot = !1,
-  disableLoadingOverlay: ne = !1
+  replaceRootScreenHeightWithFull: ct = !1,
+  enableScaling: st = !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 Ae = $t(f), R = x ?? Bt(f), ie = G ?? Vt(f), lt = ot || Ae.sandboxFullscreenButtonText, at = it || Ae.sandboxExitFullscreenButtonText, A = o(null), Fe = o(null), _e = Wt(A, ie), { resolvedDirection: ce } = nt(A, R), De = o(null), Ie = o(null), ut = Ze(
     (t) => {
-      ke.current = t, Ae.current = t?.querySelector(".content-render") ?? null;
+      De.current = t, Ie.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: dt } = nt(
+    Ie,
+    R
+  ), Oe = R ?? ce, Ne = o(R);
+  Ne.current = R;
+  const [ht, ft] = k();
+  let Y;
+  R === "auto" && (Y = ce, r === "sandbox" ? Y = ht ?? ce : a === "blackboard" && (Y = dt));
+  const v = o(null), U = o(null), W = o(() => {
+  }), [mt, gt] = k(480), [se, bt] = k(null), [X, le] = k(0), [Be, wt] = k(0), ae = o(!1), ue = o(!1), Ve = o(0), [We, pt] = k(0), [de, Ht] = k(!1), he = r === "sandbox", C = a === "blackboard", S = st && C && r === "sandbox", $ = C && r === "sandbox", O = $ && ct, fe = o(""), K = j.useMemo(
     () => r === "sandbox" ? i : "",
     [i, r]
-  ), c = q.useMemo(
-    () => zt(
-      Y,
-      D
+  ), c = j.useMemo(
+    () => Gt(
+      K,
+      O
     ),
-    [Y, D]
-  ), Ne = q.useMemo(
-    () => D ? Ke(Y) : Et,
-    [Y, D]
-  ), he = q.useMemo(
-    () => D && Ne.hasFullViewportHeight,
+    [K, O]
+  ), $e = j.useMemo(
+    () => O ? et(K) : Ft,
+    [K, O]
+  ), me = j.useMemo(
+    () => O && $e.hasFullViewportHeight,
     [
-      Ne.hasFullViewportHeight,
-      D
+      $e.hasFullViewportHeight,
+      O
     ]
-  ), [U, Ve] = _(
+  ), [J, ze] = k(
     c
-  ), We = o(c), fe = o(c), W = o(null), S = o(null), Be = o(null), me = Xe((t) => {
+  ), Pe = o(c), ge = o(c), z = o(null), M = o(null), qe = o(null), be = Ze((t) => {
     if (typeof window > "u")
       return;
     const e = Date.now();
-    e - Ie.current < Bt || (Ie.current = e, window.postMessage(
+    e - Ve.current < Lt || (Ve.current = e, window.postMessage(
       {
-        source: At,
-        type: kt,
+        source: Ot,
+        type: It,
         eventType: t
       },
       window.location.origin
     ));
   }, []);
-  w(() => {
+  H(() => {
     if (r !== "markdown" || a !== "blackboard") return;
-    const t = ke.current;
+    const t = De.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 = () => {
+    z.current !== null && (window.clearTimeout(z.current), z.current = null);
+  }, xt = () => {
+    M.current !== null && (window.cancelAnimationFrame(M.current), M.current = null);
   };
-  w(
+  H(
     () => () => {
-      ge(), bt();
+      we(), xt();
     },
     []
-  ), w(() => {
-    const t = We.current;
-    We.current = c;
-    const e = !!t && c.length > t.length && c.startsWith(t), f = Vt.test(
+  ), H(() => {
+    const t = Pe.current;
+    Pe.current = c;
+    const e = !!t && c.length > t.length && c.startsWith(t), u = Pt.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(), z.current = window.setTimeout(() => {
+      ze(ge.current), z.current = null;
+    }, qt);
   }, [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(() => $ ? et(J).viewportHeightCss : null, [J, $]);
+  H(() => {
+    qe.current = Q;
+  }, [Q]);
+  const pe = !!Q, P = C && r === "sandbox" ? S || me ? "100%" : Q ?? `${mt}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 && pt((u) => u + 1), fe.current = c;
+  }, [a, c]), H(() => {
+    const t = v.current;
     if (!t) return;
     const e = t.contentDocument;
     if (!e) return;
@@ -147,9 +147,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: ${zt}; }
       ${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 +163,224 @@ 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 = C && r === "sandbox", y = () => be("click");
+    u && e.addEventListener("click", y, !0);
+    const F = e.getElementById("root");
+    if (!F) return;
+    const N = Tt(F);
+    U.current = N;
+    let m = !1;
+    const Le = (n) => ({
       heightAttrValue: n.getAttribute("height"),
       styleAttrValue: n.getAttribute("style"),
       classAttrValue: n.getAttribute("class")
-    }), Pe = (n) => {
+    }), je = (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(
+    }, St = () => {
+      if (!$ || !v.current || !e.body) return null;
+      const n = v.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, s = qe.current, b = s ? tt(
         s,
         n
       ) : null;
-      if (g !== null)
-        return Math.ceil(g);
-      const m = e.body.querySelector(
+      if (b !== null)
+        return Math.ceil(b);
+      const g = 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 (!g) return null;
+      const w = Array.from(g.children), I = w.length === 1 ? w[0] : null, ne = _t(
+        I,
         {
-          getNode: ze,
-          getSingleChild: Pe
+          getNode: Le,
+          getSingleChild: je
         }
       ).viewportHeightCss;
-      if (ee) {
-        const z = Je(
-          ee,
+      if (ne) {
+        const q = tt(
+          ne,
           n
         );
-        if (z !== null)
-          return Math.ceil(z);
+        if (q !== null)
+          return Math.ceil(q);
       }
-      const d = Tt(
-        k,
+      const h = Dt(
+        I,
         n,
         {
-          getNode: ze,
-          getSingleChild: Pe
+          getNode: Le,
+          getSingleChild: je
         }
       );
-      return d !== null ? Math.ceil(d) : null;
-    }, pe = () => {
-      if (!x.current || !e.body) return;
-      if (!R) {
-        if (se.current) {
-          le.current = !0;
+      return h !== null ? Math.ceil(h) : null;
+    }, xe = () => {
+      if (!v.current || !e.body) return;
+      if (!C) {
+        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 g = v.current, w = A.current?.clientWidth || 0, I = g.style.height;
+        if (w > 0) {
+          const Me = Math.round(w * 9 / 16), ne = Math.max(8192, w * 20);
+          g.style.height = Me + "px", e.body.offsetHeight;
+          let h = e.body.scrollHeight;
+          const q = e.defaultView;
+          if (q) {
+            const L = (E) => {
+              let p = 0;
+              const Ke = (T) => {
+                const Je = q.getComputedStyle(T);
+                if (Je.position === "fixed" && (p = Math.max(
+                  p,
+                  Math.ceil(T.getBoundingClientRect().bottom)
+                )), T !== E && T.scrollHeight > T.clientHeight + 1) {
+                  const re = Je.overflowY;
+                  if (re === "auto" || re === "scroll") {
+                    const Qe = T.getBoundingClientRect();
+                    Qe.top >= 0 && (p = Math.max(
+                      p,
+                      Math.ceil(Qe.top + T.scrollHeight)
                     ));
                   }
                 }
-                for (const te of F.children) Ye(te);
+                for (const re of T.children) Ke(re);
               };
-              return Ye(y), A;
+              return Ke(E), 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 E = 0; E < 8 && h > Me; E++) {
+              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 = I, bt((L) => {
+            const E = Math.min(ne, Math.max(1, Math.ceil(h)));
+            return L === E ? L : E;
           });
         }
         setTimeout(() => {
-          se.current = !1, le.current && (le.current = !1, M());
+          ae.current = !1, ue.current && (ue.current = !1, _());
         }, 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 = F?.scrollHeight || 0, D = Math.max(n, s, b);
+      if ($) {
+        const g = St(), w = Math.max(
           200,
-          m ?? Math.ceil(T)
+          g ?? Math.ceil(D)
         );
-        ht(
-          (k) => k === b ? k : b
+        gt(
+          (I) => I === w ? I : w
         );
       }
-    }, M = () => {
+    }, _ = () => {
       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 = _, xe(), _(), he && rt().then(({ injectBlackboardLibraries: n }) => {
+      m || (n(e), S && Nt(e), requestAnimationFrame(() => {
+        m || _();
       }));
     }).catch(() => {
-      C || M();
+      m || _();
     });
-    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 = A.current;
+    let Re = !!(d && (d.clientWidth <= 0 || d.clientHeight <= 0)), Z = !1, ee = null, te = null;
+    const Ge = () => {
+      if (m) return;
+      _(), t.contentWindow?.__mdf_triggerFitContent?.();
+    }, ve = () => !!(d && d.clientWidth > 0 && d.clientHeight > 0), Ye = () => {
+      !he || !d || !Re || Z || !ve() || (Z = !0, rt().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 || !ve() || !s?.childNodes.length || !n(e) || (Re = !1, Ge(), te = window.setTimeout(() => {
+            te = null, Ge();
           }, 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();
+    }, Ue = typeof ResizeObserver < "u", Ce = he && d && Ue ? new ResizeObserver((n) => {
+      const s = n[0]?.contentRect, b = s?.width ?? d.clientWidth, D = s?.height ?? d.clientHeight;
+      b > 0 && D > 0 && Ye();
     }) : 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")
+    Ce && d && Ce.observe(d);
+    const Se = Ue ? new ResizeObserver(() => xe()) : null;
+    Se?.observe(e.body), F && Se?.observe(F);
+    const Mt = () => {
+      if (r !== "sandbox" || Ne.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";
+      ft(
+        (D) => D === b ? D : b
       );
-    }, Ge = new MutationObserver(() => {
-      if (xt(), M(), !xe()) {
-        He = !0;
+    }, Xe = new MutationObserver(() => {
+      if (Mt(), _(), !ve()) {
+        Re = !0;
         return;
       }
-      Le();
+      Ye();
     });
-    return Ge.observe(e.body, {
+    return Xe.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, Ce?.disconnect(), Se?.disconnect(), Xe.disconnect(), ee !== null && window.cancelAnimationFrame(ee), te !== null && window.clearTimeout(te), S && t.contentWindow?.__mdf_cleanupScaling?.(), u && e.removeEventListener("click", y, !0), U.current === N && (U.current = null, W.current = () => {
       }), setTimeout(() => {
-        we.unmount();
+        N.unmount();
       }, 0);
     };
-  }, []), w(() => {
+  }, []), H(() => {
     const t = () => {
-      gt(!!document.fullscreenElement);
+      Ht(!!document.fullscreenElement);
     };
     return document.addEventListener("fullscreenchange", t), () => document.removeEventListener("fullscreenchange", t);
-  }, []), w(() => {
-    const t = E.current;
+  }, []), H(() => {
+    const t = A.current;
     if (!t) return;
+    const e = Fe.current, u = () => {
+      wt(
+        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 y = new ResizeObserver((F) => {
+      const N = F.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 y.observe(t), e && y.observe(e), le(t.clientWidth), u(), () => y.disconnect();
+  }, [ke]);
+  const He = Et(() => {
+    if (C || 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, Be) };
+  }, [
+    C,
+    X,
+    se,
+    de,
+    Be
+  ]), Rt = He ? Math.max(Math.round(X * 9 / 16), se ?? 0) : void 0, vt = () => {
+    const t = A.current || v.current;
     if (t) {
       if (document.fullscreenElement) {
         document.exitFullscreen().catch(() => {
@@ -375,97 +391,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__ */ B(
+        kt,
         {
-          html: U,
-          locale: h,
-          dir: Fe,
-          lang: Te,
-          loadingText: O,
-          styleLoadingText: ye,
-          scriptLoadingText: Ee,
-          disableLoadingOverlay: ne,
-          resetToken: Oe,
-          hasRootVhHeight: be,
+          html: J,
+          locale: f,
+          dir: Oe,
+          lang: _e,
+          loadingText: V,
+          styleLoadingText: Ee,
+          scriptLoadingText: Te,
+          disableLoadingOverlay: oe,
+          resetToken: We,
+          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;
+    ), M.current = window.requestAnimationFrame(() => {
+      W.current?.(), S && v.current?.contentWindow?.__mdf_triggerFitContent?.(), M.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);
+      M.current !== null && (window.cancelAnimationFrame(M.current), M.current = null), clearTimeout(e), clearTimeout(u);
     };
   }, [
-    U,
-    h,
-    Fe,
-    Te,
-    O,
-    ye,
-    Ee,
+    J,
+    f,
     Oe,
-    ne,
-    be,
+    _e,
+    V,
+    Ee,
+    Te,
+    We,
+    oe,
+    pe,
     a,
-    he,
-    v
+    me,
+    S
   ]);
-  const pt = [
+  const Ct = [
     `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"
+    C ? "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__ */ yt(
     "div",
     {
-      ref: E,
-      dir: H,
-      lang: re,
-      "data-root-vh": be ? "true" : "false",
-      className: pt,
-      style: B ? {
-        height: B,
-        minHeight: B
-      } : $e,
+      ref: A,
+      dir: R,
+      lang: ie,
+      "data-root-vh": pe ? "true" : "false",
+      className: Ct,
+      style: P ? {
+        height: P,
+        minHeight: P
+      } : He,
       children: [
-        !nt && /* @__PURE__ */ I(
+        !ke && /* @__PURE__ */ B(
           "button",
           {
+            ref: Fe,
             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 ? at : lt
           }
         ),
-        a === "blackboard" && r === "markdown" ? /* @__PURE__ */ I("div", { ref: st, children: /* @__PURE__ */ I(
-          yt,
+        a === "blackboard" && r === "markdown" ? /* @__PURE__ */ B("div", { ref: ut, children: /* @__PURE__ */ B(
+          At,
           {
             content: i,
-            locale: h,
-            dir: H,
-            lang: re,
-            disableSandboxLoadingOverlay: ne
+            locale: f,
+            dir: R,
+            lang: ie,
+            disableSandboxLoadingOverlay: oe
           }
-        ) }) : /* @__PURE__ */ I(
+        ) }) : /* @__PURE__ */ B(
           "iframe",
           {
-            ref: x,
+            ref: v,
             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: P ?? Rt ?? "100%",
+              minHeight: P,
               margin: "auto"
             }
           }
@@ -473,11 +490,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);
+}, ln = (i) => {
+  const r = i.mode ?? "content", l = !!(i.enableScaling && r === "blackboard" && i.type === "sandbox"), f = `${i.type}:${r}:${l ? "scaled" : "unscaled"}`;
+  return /* @__PURE__ */ B(Yt, { ...i }, f);
 };
 export {
-  nn as default
+  ln as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map