markdown-flow-ui 0.2.34 → 0.2.35-dev.2

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

@@ -1,92 +1,93 @@
-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";
+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 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 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(" "), Gt = (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, f, G = "") => {
     const x = G.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
     if (!x)
       return l;
-    const V = jt(x[2]);
-    return V === x[2] ? l : `${f}${G.replace(
+    const B = Yt(x[2]);
+    return B === x[2] ? l : `${f}${G.replace(
       x[0],
-      `class=${x[1]}${V}${x[1]}`
+      `class=${x[1]}${B}${x[1]}`
     )}>`;
   }
-), Yt = ({
+), Xt = ({
   content: i,
   type: r,
   className: l,
   locale: f,
   lang: G,
   dir: x,
-  loadingText: V,
-  styleLoadingText: Ee,
-  scriptLoadingText: Te,
-  fullScreenButtonText: ot,
-  exitFullScreenButtonText: it,
-  hideFullScreen: ke = !1,
+  loadingText: B,
+  styleLoadingText: Me,
+  scriptLoadingText: Ee,
+  fullScreenButtonText: it,
+  exitFullScreenButtonText: ct,
+  hideFullScreen: Te = !1,
   mode: a = "content",
-  replaceRootScreenHeightWithFull: ct = !1,
-  enableScaling: st = !1,
+  replaceRootScreenHeightWithFull: st = !1,
+  enableScaling: lt = !1,
   disableLoadingOverlay: oe = !1
 }) => {
-  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(
+  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) => {
-      De.current = t, Ie.current = t?.querySelector(".content-render") ?? null;
+      _e.current = t, De.current = t?.querySelector(".content-render") ?? null;
     },
     []
-  ), { resolvedDirection: dt } = nt(
-    Ie,
+  ), { resolvedDirection: ht } = rt(
+    De,
     R
-  ), Oe = R ?? ce, Ne = o(R);
-  Ne.current = R;
-  const [ht, ft] = k();
+  ), Ie = R ?? ce, Oe = o(R);
+  Oe.current = R;
+  const [ft, mt] = A();
   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 === "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 = j.useMemo(
-    () => Gt(
+    () => Ut(
       K,
       O
     ),
     [K, O]
-  ), $e = j.useMemo(
-    () => O ? et(K) : Ft,
+  ), We = j.useMemo(
+    () => O ? tt(K) : Dt,
     [K, O]
   ), me = j.useMemo(
-    () => O && $e.hasFullViewportHeight,
+    () => O && We.hasFullViewportHeight,
     [
-      $e.hasFullViewportHeight,
+      We.hasFullViewportHeight,
       O
     ]
-  ), [J, ze] = k(
+  ), [J, ze] = A(
     c
-  ), Pe = o(c), ge = o(c), z = o(null), M = o(null), qe = o(null), be = Ze((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 - Ve.current < Lt || (Ve.current = e, window.postMessage(
+    e - Ve.current < Gt || (Ve.current = e, window.postMessage(
       {
-        source: Ot,
-        type: It,
+        source: Vt,
+        type: Nt,
         eventType: t
       },
       window.location.origin
@@ -94,49 +95,49 @@ const rt = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Pt = /<
   }, []);
   H(() => {
     if (r !== "markdown" || a !== "blackboard") return;
-    const t = De.current;
+    const t = _e.current;
     if (!t) return;
     const e = () => be("click");
     return t.addEventListener("click", e), () => t.removeEventListener("click", e);
   }, [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);
+    $.current !== null && (window.clearTimeout($.current), $.current = null);
+  }, Rt = () => {
+    y.current !== null && (window.cancelAnimationFrame(y.current), y.current = null);
   };
   H(
     () => () => {
-      we(), xt();
+      we(), Rt();
     },
     []
   ), H(() => {
-    const t = Pe.current;
-    Pe.current = c;
-    const e = !!t && c.length > t.length && c.startsWith(t), u = Pt.test(
+    const t = $e.current;
+    $e.current = c;
+    const e = !!t && c.length > t.length && c.startsWith(t), u = Lt.test(
       c
     );
     if (!(e && u)) {
       we(), ge.current = c, ze(c);
       return;
     }
-    ge.current = c, we(), z.current = window.setTimeout(() => {
-      ze(ge.current), z.current = null;
-    }, qt);
+    ge.current = c, we(), $.current = window.setTimeout(() => {
+      ze(ge.current), $.current = null;
+    }, jt);
   }, [c]);
-  const Q = j.useMemo(() => $ ? et(J).viewportHeightCss : null, [J, $]);
+  const Q = j.useMemo(() => z ? tt(J).viewportHeightCss : null, [J, z]);
   H(() => {
     qe.current = Q;
   }, [Q]);
-  const pe = !!Q, P = C && r === "sandbox" ? S || me ? "100%" : Q ?? `${mt}px` : void 0;
+  const pe = !!Q, q = v && r === "sandbox" ? S || me ? "100%" : Q ?? `${gt}px` : void 0;
   H(() => {
     if (a !== "blackboard") {
       fe.current = c;
       return;
     }
     const t = fe.current;
-    !(t && c.startsWith(t)) && t && pt((u) => u + 1), fe.current = c;
+    !(t && c.startsWith(t)) && t && Ht((u) => u + 1), fe.current = c;
   }, [a, c]), H(() => {
-    const t = v.current;
+    const t = C.current;
     if (!t) return;
     const e = t.contentDocument;
     if (!e) return;
@@ -147,7 +148,7 @@ const rt = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Pt = /<
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
       :root { color-scheme: light; }
-      html, body, #root { width: 100%; font-family: ${zt}; }
+      html, body, #root { width: 100%; font-family: ${Pt}; }
       ${a === "blackboard" ? "html, body, #root { height: 100%; }" : ""}
       html, body { margin: 0; padding: 0; overflow: ${S ? "hidden auto" : a === "blackboard" ? "auto" : "hidden"}; }
       *, *::before, *::after { box-sizing: border-box; }
@@ -163,94 +164,96 @@ const rt = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Pt = /<
     <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 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);
+    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 Le = (n) => ({
+    const Pe = (n) => ({
       heightAttrValue: n.getAttribute("height"),
       styleAttrValue: n.getAttribute("style"),
       classAttrValue: n.getAttribute("class")
-    }), je = (n) => {
+    }), Le = (n) => {
       const s = Array.from(n.children);
       return s.length === 1 ? s[0] : null;
-    }, St = () => {
-      if (!$ || !v.current || !e.body) return null;
-      const n = v.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, s = qe.current, b = s ? tt(
+    }, 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 (b !== null)
         return Math.ceil(b);
-      const g = e.body.querySelector(
+      const E = e.body.querySelector(
         ".sandbox-wrapper"
       )?.firstElementChild;
-      if (!g) return null;
-      const w = Array.from(g.children), I = w.length === 1 ? w[0] : null, ne = _t(
-        I,
+      if (!E) return null;
+      const g = Array.from(E.children), w = g.length === 1 ? g[0] : null, P = It(
+        w,
         {
-          getNode: Le,
-          getSingleChild: je
+          getNode: Pe,
+          getSingleChild: Le
         }
       ).viewportHeightCss;
-      if (ne) {
-        const q = tt(
-          ne,
+      if (P) {
+        const h = nt(
+          P,
           n
         );
-        if (q !== null)
-          return Math.ceil(q);
+        if (h !== null)
+          return Math.ceil(h);
       }
-      const h = Dt(
-        I,
+      const ne = Ot(
+        w,
         n,
         {
-          getNode: Le,
-          getSingleChild: je
+          getNode: Pe,
+          getSingleChild: Le
         }
       );
-      return h !== null ? Math.ceil(h) : null;
+      return ne !== null ? Math.ceil(ne) : null;
     }, xe = () => {
-      if (!v.current || !e.body) return;
-      if (!C) {
+      if (!C.current || !e.body) return;
+      if (!v) {
         if (ae.current) {
           ue.current = !0;
           return;
         }
         ae.current = !0;
-        const g = v.current, w = A.current?.clientWidth || 0, I = g.style.height;
+        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 Me = Math.round(w * 9 / 16), ne = Math.max(8192, w * 20);
-          g.style.height = Me + "px", e.body.offsetHeight;
+          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 q = e.defaultView;
-          if (q) {
-            const L = (E) => {
+          const Ke = e.defaultView;
+          if (Ke) {
+            const L = (T) => {
               let p = 0;
-              const Ke = (T) => {
-                const Je = q.getComputedStyle(T);
-                if (Je.position === "fixed" && (p = Math.max(
+              const Je = (k) => {
+                const Qe = Ke.getComputedStyle(k);
+                if (Qe.position === "fixed" && (p = Math.max(
                   p,
-                  Math.ceil(T.getBoundingClientRect().bottom)
-                )), T !== E && T.scrollHeight > T.clientHeight + 1) {
-                  const re = Je.overflowY;
+                  Math.ceil(k.getBoundingClientRect().bottom)
+                )), k !== T && k.scrollHeight > k.clientHeight + 1) {
+                  const re = Qe.overflowY;
                   if (re === "auto" || re === "scroll") {
-                    const Qe = T.getBoundingClientRect();
-                    Qe.top >= 0 && (p = Math.max(
+                    const Ze = k.getBoundingClientRect();
+                    Ze.top >= 0 && (p = Math.max(
                       p,
-                      Math.ceil(Qe.top + T.scrollHeight)
+                      Math.ceil(Ze.top + k.scrollHeight)
                     ));
                   }
                 }
-                for (const re of T.children) Ke(re);
+                for (const re of k.children) Je(re);
               };
-              return Ke(E), p;
+              return Je(T), p;
             };
             h = Math.max(h, L(e.body));
-            for (let E = 0; E < 8 && h > Me; E++) {
+            for (let T = 0; T < 8 && h > P; T++) {
               g.style.height = h + "px", e.body.offsetHeight;
               const p = Math.max(
                 e.body.scrollHeight,
@@ -260,101 +263,101 @@ const rt = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Pt = /<
               h = p;
             }
           }
-          g.style.height = I, bt((L) => {
-            const E = Math.min(ne, Math.max(1, Math.ceil(h)));
-            return L === E ? L : E;
+          g.style.height = Xe, wt((L) => {
+            const T = Math.min(ne, Math.max(1, Math.ceil(h)));
+            return L === T ? L : T;
           });
         }
         setTimeout(() => {
-          ae.current = !1, ue.current && (ue.current = !1, _());
+          ae.current = !1, ue.current && (ue.current = !1, D());
         }, 50);
         return;
       }
       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(
+      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,
-          g ?? Math.ceil(D)
+          E ?? Math.ceil(I)
         );
-        gt(
-          (I) => I === w ? I : w
+        bt(
+          (w) => w === g ? w : g
         );
       }
-    }, _ = () => {
+    }, D = () => {
       requestAnimationFrame(() => {
         m || xe();
       });
     };
-    W.current = _, xe(), _(), he && rt().then(({ injectBlackboardLibraries: n }) => {
-      m || (n(e), S && Nt(e), requestAnimationFrame(() => {
-        m || _();
+    W.current = D, xe(), D(), he && ot().then(({ injectBlackboardLibraries: n }) => {
+      m || (n(e), S && Bt(e), requestAnimationFrame(() => {
+        m || D();
       }));
     }).catch(() => {
-      m || _();
+      m || D();
     });
-    const d = A.current;
+    const d = F.current;
     let Re = !!(d && (d.clientWidth <= 0 || d.clientHeight <= 0)), Z = !1, ee = null, te = null;
-    const Ge = () => {
+    const je = () => {
       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 }) => {
+      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");
-          m || !ve() || !s?.childNodes.length || !n(e) || (Re = !1, Ge(), te = window.setTimeout(() => {
-            te = null, Ge();
+          m || !Ce() || !s?.childNodes.length || !n(e) || (Re = !1, je(), te = window.setTimeout(() => {
+            te = null, je();
           }, 100));
         }));
       }).catch(() => {
         Z = !1;
       }));
-    }, 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();
+    }, 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;
-    Ce && d && Ce.observe(d);
-    const Se = Ue ? new ResizeObserver(() => xe()) : null;
-    Se?.observe(e.body), F && Se?.observe(F);
+    ve && d && ve.observe(d);
+    const Se = Ye ? new ResizeObserver(() => xe()) : null;
+    Se?.observe(e.body), _ && Se?.observe(_);
     const Mt = () => {
-      if (r !== "sandbox" || Ne.current !== "auto")
+      if (r !== "sandbox" || Oe.current !== "auto")
         return;
       const n = e.querySelector(".sandbox-wrapper"), s = e.defaultView;
       if (!n || !s) return;
       const b = s.getComputedStyle(n).direction === "rtl" ? "rtl" : "ltr";
-      ft(
-        (D) => D === b ? D : b
+      mt(
+        (I) => I === b ? I : b
       );
-    }, Xe = new MutationObserver(() => {
-      if (Mt(), _(), !ve()) {
+    }, Ue = new MutationObserver(() => {
+      if (Mt(), D(), !Ce()) {
         Re = !0;
         return;
       }
-      Ye();
+      Ge();
     });
-    return Xe.observe(e.body, {
+    return Ue.observe(e.body, {
       childList: !0,
       characterData: !0,
       subtree: !0,
       attributes: !0,
       attributeFilter: ["style", "class", "dir"]
     }), () => {
-      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 = () => {
+      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(() => {
         N.unmount();
       }, 0);
     };
   }, []), H(() => {
     const t = () => {
-      Ht(!!document.fullscreenElement);
+      xt(!!document.fullscreenElement);
     };
     return document.addEventListener("fullscreenchange", t), () => document.removeEventListener("fullscreenchange", t);
   }, []), H(() => {
-    const t = A.current;
+    const t = F.current;
     if (!t) return;
-    const e = Fe.current, u = () => {
-      wt(
+    const e = Ae.current, u = () => {
+      pt(
         e ? Math.ceil(e.offsetTop + e.offsetHeight) : 0
       );
     };
@@ -362,25 +365,25 @@ const rt = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Pt = /<
       le(t.clientWidth), u();
       return;
     }
-    const y = new ResizeObserver((F) => {
-      const N = F.find((m) => m.target === t);
+    const M = new ResizeObserver((_) => {
+      const N = _.find((m) => m.target === t);
       N && le(N.contentRect.width), u();
     });
-    return y.observe(t), e && y.observe(e), le(t.clientWidth), u(), () => y.disconnect();
-  }, [ke]);
-  const He = Et(() => {
-    if (C || X === 0 || de)
+    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(X * 9 / 16);
-    return { height: Math.max(se ?? t, Be) };
+    return { height: Math.max(se ?? t, Ne) };
   }, [
-    C,
+    v,
     X,
     se,
     de,
-    Be
-  ]), Rt = He ? Math.max(Math.round(X * 9 / 16), se ?? 0) : void 0, vt = () => {
-    const t = A.current || v.current;
+    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(() => {
@@ -395,76 +398,76 @@ const rt = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Pt = /<
     const t = U.current;
     if (!t) return;
     t.render(
-      /* @__PURE__ */ B(
-        kt,
+      /* @__PURE__ */ V(
+        At,
         {
           html: J,
           locale: f,
-          dir: Oe,
-          lang: _e,
-          loadingText: V,
-          styleLoadingText: Ee,
-          scriptLoadingText: Te,
+          dir: Ie,
+          lang: Fe,
+          loadingText: B,
+          styleLoadingText: Me,
+          scriptLoadingText: Ee,
           disableLoadingOverlay: oe,
-          resetToken: We,
+          resetToken: Be,
           hasRootVhHeight: pe,
           mode: a,
           stretchRootHeight: me,
           enableScaling: S
         }
       )
-    ), M.current = window.requestAnimationFrame(() => {
-      W.current?.(), S && v.current?.contentWindow?.__mdf_triggerFitContent?.(), M.current = null;
+    ), y.current = window.requestAnimationFrame(() => {
+      W.current?.(), S && C.current?.contentWindow?.__mdf_triggerFitContent?.(), y.current = null;
     });
     const e = setTimeout(() => W.current?.(), 100), u = setTimeout(() => W.current?.(), 500);
     return () => {
-      M.current !== null && (window.cancelAnimationFrame(M.current), M.current = null), clearTimeout(e), clearTimeout(u);
+      y.current !== null && (window.cancelAnimationFrame(y.current), y.current = null), clearTimeout(e), clearTimeout(u);
     };
   }, [
     J,
     f,
-    Oe,
-    _e,
-    V,
+    Ie,
+    Fe,
+    B,
+    Me,
     Ee,
-    Te,
-    We,
+    Be,
     oe,
     pe,
     a,
     me,
     S
   ]);
-  const Ct = [
+  const St = [
     `w-full relative content-render-iframe-sandbox content-render-iframe-sandbox--${r}`,
-    C ? "h-full overflow-auto flex flex-col" : He ? "overflow-hidden" : "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__ */ yt(
+  return /* @__PURE__ */ Et(
     "div",
     {
-      ref: A,
+      ref: F,
       dir: R,
       lang: ie,
       "data-root-vh": pe ? "true" : "false",
-      className: Ct,
-      style: P ? {
-        height: P,
-        minHeight: P
+      className: St,
+      style: q ? {
+        height: q,
+        minHeight: q
       } : He,
       children: [
-        !ke && /* @__PURE__ */ B(
+        !Te && /* @__PURE__ */ V(
           "button",
           {
-            ref: Fe,
+            ref: Ae,
             type: "button",
             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: de ? at : lt
+            children: de ? ut : at
           }
         ),
-        a === "blackboard" && r === "markdown" ? /* @__PURE__ */ B("div", { ref: ut, children: /* @__PURE__ */ B(
-          At,
+        a === "blackboard" && r === "markdown" ? /* @__PURE__ */ V("div", { ref: dt, children: /* @__PURE__ */ V(
+          _t,
           {
             content: i,
             locale: f,
@@ -472,17 +475,17 @@ const rt = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Pt = /<
             lang: ie,
             disableSandboxLoadingOverlay: oe
           }
-        ) }) : /* @__PURE__ */ B(
+        ) }) : /* @__PURE__ */ V(
           "iframe",
           {
-            ref: v,
+            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: P ?? Rt ?? "100%",
-              minHeight: P,
+              height: q ?? Ct ?? "100%",
+              minHeight: q,
               margin: "auto"
             }
           }
@@ -490,11 +493,11 @@ const rt = () => (ye || (ye = import("./blackboard-vendor.es.js")), ye), Pt = /<
       ]
     }
   );
-}, ln = (i) => {
+}, dn = (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);
+  return /* @__PURE__ */ V(Xt, { ...i }, f);
 };
 export {
-  ln as default
+  dn as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map