markdown-flow-ui 0.2.14 → 0.2.16-dev.1

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

@@ -1,131 +1,157 @@
-import { j as M } from "../../_virtual/jsx-runtime.es.js";
-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(
+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) => {
+  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(
   /^(\s*<[a-zA-Z][\w:-]*)(\s[^>]*?)?>/,
-  (s, b, k = "") => {
-    const f = k.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
-    if (!f)
-      return s;
-    const I = Ht(f[2]);
-    return I === f[2] ? s : `${b}${k.replace(
-      f[0],
-      `class=${f[1]}${I}${f[1]}`
+  (l, h, L = "") => {
+    const p = L.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
+    if (!p)
+      return l;
+    const O = $t(p[2]);
+    return O === p[2] ? l : `${h}${L.replace(
+      p[0],
+      `class=${p[1]}${O}${p[1]}`
     )}>`;
   }
-), Rt = ({
-  content: o,
+), Pt = ({
+  content: i,
   type: r,
-  className: s,
-  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
+  className: l,
+  locale: h,
+  lang: L,
+  dir: p,
+  loadingText: O,
+  styleLoadingText: ye,
+  scriptLoadingText: Ee,
+  fullScreenButtonText: et,
+  exitFullScreenButtonText: tt,
+  hideFullScreen: nt = !1,
+  mode: a = "content",
+  replaceRootScreenHeightWithFull: rt = !1,
+  enableScaling: ot = !1,
+  disableLoadingOverlay: ne = !1
 }) => {
-  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
+  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(
+    (t) => {
+      ke.current = t, Ae.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(
+    () => r === "sandbox" ? i : "",
+    [i, r]
+  ), c = q.useMemo(
+    () => zt(
+      Y,
+      D
     ),
-    [q, A]
-  ), ye = D.useMemo(
-    () => A ? Be(q) : ct,
-    [q, A]
-  ), ce = D.useMemo(
-    () => A && ye.hasFullViewportHeight,
+    [Y, D]
+  ), Ne = q.useMemo(
+    () => D ? Ke(Y) : Et,
+    [Y, D]
+  ), he = q.useMemo(
+    () => D && Ne.hasFullViewportHeight,
     [
-      ye.hasFullViewportHeight,
-      A
+      Ne.hasFullViewportHeight,
+      D
     ]
-  ), [L, Ee] = _(
-    i
-  ), Ce = l(i), ae = l(i), V = l(null), x = l(null), Te = l(null), Me = rt((t) => {
+  ), [U, Ve] = _(
+    c
+  ), We = o(c), fe = o(c), W = o(null), S = o(null), Be = o(null), me = Xe((t) => {
     if (typeof window > "u")
       return;
     const e = Date.now();
-    e - Se.current < wt || (Se.current = e, window.postMessage(
+    e - Ie.current < Bt || (Ie.current = e, window.postMessage(
       {
-        source: dt,
-        type: ht,
+        source: At,
+        type: kt,
         eventType: t
       },
       window.location.origin
     ));
-  }, []), ue = () => {
-    V.current !== null && (window.clearTimeout(V.current), V.current = null);
-  }, Ze = () => {
-    x.current !== null && (window.cancelAnimationFrame(x.current), x.current = null);
+  }, []);
+  w(() => {
+    if (r !== "markdown" || a !== "blackboard") return;
+    const t = ke.current;
+    if (!t) return;
+    const e = () => me("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);
   };
-  v(
+  w(
     () => () => {
-      ue(), Ze();
+      ge(), bt();
     },
     []
-  ), v(() => {
-    const t = Ce.current;
-    Ce.current = i;
-    const e = !!t && i.length > t.length && i.startsWith(t), d = bt.test(
-      i
+  ), w(() => {
+    const t = We.current;
+    We.current = c;
+    const e = !!t && c.length > t.length && c.startsWith(t), f = Vt.test(
+      c
     );
-    if (!(e && d)) {
-      ue(), ae.current = i, Ee(i);
+    if (!(e && f)) {
+      ge(), fe.current = c, Ve(c);
       return;
     }
-    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;
+    fe.current = c, ge(), W.current = window.setTimeout(() => {
+      Ve(fe.current), W.current = null;
+    }, Wt);
+  }, [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(() => {
+    if (a !== "blackboard") {
+      de.current = c;
       return;
     }
-    const t = le.current;
-    !(t && i.startsWith(t)) && t && Je((d) => d + 1), le.current = i;
-  }, [h, i]), v(() => {
-    const t = p.current;
+    const t = de.current;
+    !(t && c.startsWith(t)) && t && mt((f) => f + 1), de.current = c;
+  }, [a, c]), w(() => {
+    const t = x.current;
     if (!t) return;
     const e = t.contentDocument;
     if (!e) return;
     e.open(), e.write(`<!DOCTYPE html>
-<html${h === "blackboard" ? ' style="height: 100%;"' : ""}>
+<html${a === "blackboard" ? ' style="height: 100%;"' : ""}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
       :root { color-scheme: light; }
-      html, body, #root { width: 100%; font-family: ${gt}; }
-      ${h === "blackboard" ? "html, body, #root { height: 100%; }" : ""}
-      html, body { margin: 0; padding: 0; overflow: ${H ? "hidden auto" : h === "blackboard" ? "auto" : "hidden"}; }
+      html, body, #root { width: 100%; font-family: ${Nt}; }
+      ${a === "blackboard" ? "html, body, #root { height: 100%; }" : ""}
+      html, body { margin: 0; padding: 0; overflow: ${v ? "hidden auto" : a === "blackboard" ? "auto" : "hidden"}; }
       *, *::before, *::after { box-sizing: border-box; }
-      ${h !== "blackboard" ? `
+      ${a !== "blackboard" ? `
         .h-screen { height: auto !important; }
         .min-h-screen { min-height: auto !important; }
         .h-dvh, .h-svh, .h-lvh { height: auto !important; }
@@ -137,198 +163,208 @@ const $e = () => (He || (He = import("./blackboard-vendor.es.js")), He), bt = /<
     <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 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) => ({
+    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) => ({
       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,
+    }), Pe = (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(
+        s,
         n
       ) : null;
-      if (F !== null)
-        return Math.ceil(F);
+      if (g !== null)
+        return Math.ceil(g);
       const m = e.body.querySelector(
         ".sandbox-wrapper"
       )?.firstElementChild;
       if (!m) return null;
-      const g = Array.from(m.children), E = g.length === 1 ? g[0] : null, Q = at(
-        E,
+      const b = Array.from(m.children), k = b.length === 1 ? b[0] : null, ee = Mt(
+        k,
         {
-          getNode: Fe,
-          getSingleChild: _e
+          getNode: ze,
+          getSingleChild: Pe
         }
       ).viewportHeightCss;
-      if (Q) {
-        const $ = je(
-          Q,
+      if (ee) {
+        const z = Je(
+          ee,
           n
         );
-        if ($ !== null)
-          return Math.ceil($);
+        if (z !== null)
+          return Math.ceil(z);
       }
-      const u = ut(
-        E,
+      const d = Tt(
+        k,
         n,
         {
-          getNode: Fe,
-          getSingleChild: _e
+          getNode: ze,
+          getSingleChild: Pe
         }
       );
-      return u !== null ? Math.ceil(u) : null;
-    }, me = () => {
-      if (!p.current || !e.body) return;
-      if (!w) {
-        if (re.current) {
-          oe.current = !0;
+      return d !== null ? Math.ceil(d) : null;
+    }, pe = () => {
+      if (!x.current || !e.body) return;
+      if (!R) {
+        if (se.current) {
+          le.current = !0;
           return;
         }
-        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)
+        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)
                     ));
                   }
                 }
-                for (const Z of T.children) We(Z);
+                for (const te of F.children) Ye(te);
               };
-              return We(S), C;
+              return Ye(y), A;
             };
-            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(
+            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(
                 e.body.scrollHeight,
-                z(e.body)
+                P(e.body)
               );
-              if (C <= u + 1 || C >= u * 1.5) break;
-              u = C;
+              if (A <= d + 1 || A >= d * 1.5) break;
+              d = A;
             }
           }
-          m.style.height = E, Ke((z) => {
-            const S = Math.min(Q, Math.max(200, Math.ceil(u)));
-            return z === S ? z : S;
+          m.style.height = k, ft((P) => {
+            const y = Math.min(ee, Math.max(200, Math.ceil(d)));
+            return P === y ? P : y;
           });
         }
         setTimeout(() => {
-          re.current = !1, oe.current && (oe.current = !1, y());
+          se.current = !1, le.current && (le.current = !1, M());
         }, 50);
         return;
       }
-      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(
+      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(
           200,
-          m ?? Math.ceil(J)
+          m ?? Math.ceil(T)
         );
-        Xe(
-          (E) => E === g ? E : g
+        ht(
+          (k) => k === b ? k : b
         );
       }
-    }, y = () => {
+    }, M = () => {
       requestAnimationFrame(() => {
-        R || me();
+        C || pe();
       });
     };
-    N.current = y, me(), y(), se && $e().then(({ injectBlackboardLibraries: n }) => {
-      R || (n(e), H && mt(e), requestAnimationFrame(() => {
-        R || y();
+    N.current = M, pe(), M(), ue && Ze().then(({ injectBlackboardLibraries: n }) => {
+      C || (n(e), v && Ft(e), requestAnimationFrame(() => {
+        C || M();
       }));
     }).catch(() => {
-      R || y();
+      C || M();
     });
-    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();
+    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 s = e.querySelector(".sandbox-container");
+          C || !xe() || !s?.childNodes.length || !n(e) || (He = !1, qe(), Z = window.setTimeout(() => {
+            Z = null, qe();
           }, 100));
         }));
       }).catch(() => {
-        U = !1;
+        J = !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();
+    }, 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();
     }) : 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;
+    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")
+        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
+      );
+    }, Ge = new MutationObserver(() => {
+      if (xt(), M(), !xe()) {
+        He = !0;
         return;
       }
-      Ie();
+      Le();
     });
-    return Ne.observe(e.body, {
+    return Ge.observe(e.body, {
       childList: !0,
+      characterData: !0,
       subtree: !0,
       attributes: !0,
-      attributeFilter: ["style", "class"]
+      attributeFilter: ["style", "class", "dir"]
     }), () => {
-      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 = () => {
+      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 = () => {
       }), setTimeout(() => {
-        de.unmount();
+        we.unmount();
       }, 0);
     };
-  }, []), v(() => {
+  }, []), w(() => {
     const t = () => {
-      Qe(!!document.fullscreenElement);
+      gt(!!document.fullscreenElement);
     };
     return document.addEventListener("fullscreenchange", t), () => document.removeEventListener("fullscreenchange", t);
-  }, []), v(() => {
-    const t = O.current;
+  }, []), w(() => {
+    const t = E.current;
     if (!t) return;
     if (typeof ResizeObserver > "u") {
-      ne(t.clientWidth);
+      ce(t.clientWidth);
       return;
     }
-    const e = new ResizeObserver((d) => {
-      ne(d[0]?.contentRect.width ?? t.clientWidth);
+    const e = new ResizeObserver((f) => {
+      ce(f[0]?.contentRect.width ?? t.clientWidth);
     });
-    return e.observe(t), ne(t.clientWidth), () => e.disconnect();
+    return e.observe(t), ce(t.clientWidth), () => e.disconnect();
   }, []);
-  const Ae = ot(() => {
-    if (w || te === 0 || ie)
+  const $e = vt(() => {
+    if (R || ie === 0 || ae)
       return;
-    const t = Math.round(te * 9 / 16);
-    return { height: Math.max(t, Re) };
-  }, [w, te, Re, ie]), et = () => {
-    const t = O.current || p.current;
+    const t = Math.round(ie * 9 / 16);
+    return { height: Math.max(t, De) };
+  }, [R, ie, De, ae]), wt = () => {
+    const t = E.current || x.current;
     if (t) {
       if (document.fullscreenElement) {
         document.exitFullscreen().catch(() => {
@@ -339,85 +375,94 @@ const $e = () => (He || (He = import("./blackboard-vendor.es.js")), He), bt = /<
       });
     }
   };
-  v(() => {
-    const t = P.current;
+  w(() => {
+    const t = G.current;
     if (!t) return;
     t.render(
-      /* @__PURE__ */ M.jsx(
-        st,
+      /* @__PURE__ */ I(
+        Ct,
         {
-          html: L,
-          locale: b,
-          loadingText: k,
-          styleLoadingText: f,
-          scriptLoadingText: I,
-          disableLoadingOverlay: ee,
-          resetToken: ve,
-          hasRootVhHeight: he,
-          mode: h,
-          stretchRootHeight: ce,
-          enableScaling: H
+          html: U,
+          locale: h,
+          dir: Fe,
+          lang: Te,
+          loadingText: O,
+          styleLoadingText: ye,
+          scriptLoadingText: Ee,
+          disableLoadingOverlay: ne,
+          resetToken: Oe,
+          hasRootVhHeight: be,
+          mode: a,
+          stretchRootHeight: he,
+          enableScaling: v
         }
       )
-    ), x.current = window.requestAnimationFrame(() => {
-      N.current?.(), H && p.current?.contentWindow?.__mdf_triggerFitContent?.(), x.current = null;
+    ), S.current = window.requestAnimationFrame(() => {
+      N.current?.(), v && x.current?.contentWindow?.__mdf_triggerFitContent?.(), S.current = null;
     });
-    const e = setTimeout(() => N.current?.(), 100), d = setTimeout(() => N.current?.(), 500);
+    const e = setTimeout(() => N.current?.(), 100), f = setTimeout(() => N.current?.(), 500);
     return () => {
-      x.current !== null && (window.cancelAnimationFrame(x.current), x.current = null), clearTimeout(e), clearTimeout(d);
+      S.current !== null && (window.cancelAnimationFrame(S.current), S.current = null), clearTimeout(e), clearTimeout(f);
     };
   }, [
-    L,
-    b,
-    k,
-    f,
-    I,
-    ve,
-    ee,
-    he,
+    U,
     h,
-    ce,
-    H
+    Fe,
+    Te,
+    O,
+    ye,
+    Ee,
+    Oe,
+    ne,
+    be,
+    a,
+    he,
+    v
   ]);
-  const tt = [
+  const pt = [
     `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"
+    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"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ M.jsxs(
+  return /* @__PURE__ */ Rt(
     "div",
     {
-      ref: O,
-      "data-root-vh": he ? "true" : "false",
-      className: tt,
+      ref: E,
+      dir: H,
+      lang: re,
+      "data-root-vh": be ? "true" : "false",
+      className: pt,
       style: B ? {
         height: B,
         minHeight: B
-      } : Ae,
+      } : $e,
       children: [
-        !Pe && /* @__PURE__ */ M.jsx(
+        !nt && /* @__PURE__ */ I(
           "button",
           {
             type: "button",
-            onClick: et,
-            className: "absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
-            children: ie ? Ye : Ge
+            dir: j,
+            onClick: wt,
+            className: "absolute top-2 end-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
+            children: ae ? ct : it
           }
         ),
-        h === "blackboard" && r === "markdown" ? /* @__PURE__ */ M.jsx("div", { onClick: () => Me("click"), children: /* @__PURE__ */ M.jsx(
-          lt,
+        a === "blackboard" && r === "markdown" ? /* @__PURE__ */ I("div", { ref: st, children: /* @__PURE__ */ I(
+          yt,
           {
-            content: o,
-            locale: b,
-            disableSandboxLoadingOverlay: ee
+            content: i,
+            locale: h,
+            dir: H,
+            lang: re,
+            disableSandboxLoadingOverlay: ne
           }
-        ) }) : /* @__PURE__ */ M.jsx(
+        ) }) : /* @__PURE__ */ I(
           "iframe",
           {
-            ref: p,
+            ref: x,
             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(" "),
+            className: [l, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
             style: {
               height: B ?? "100%",
               minHeight: B,
@@ -428,11 +473,11 @@ const $e = () => (He || (He = import("./blackboard-vendor.es.js")), He), bt = /<
       ]
     }
   );
-}, 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);
+}, 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);
 };
 export {
-  kt as default
+  nn as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map