markdown-flow-ui 0.2.1 → 0.2.2

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

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