markdown-flow-ui 0.1.100-beta.44 → 0.1.100-beta.45

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

@@ -1,34 +1,20 @@
 import { j as A } from "../../_virtual/jsx-runtime.es.js";
-import D, { useRef as a, useState as j, useCallback as Rt, useEffect as E } from "react";
-import { createRoot as Ct } from "react-dom/client";
-import Mt from "./SandboxApp.es.js";
-import Tt from "./ContentRender.es.js";
-import { SANDBOX_INTERACTION_MESSAGE_TYPE as At, SANDBOX_INTERACTION_MESSAGE_SOURCE as yt } from "../../lib/sandboxInteraction.es.js";
+import I, { useRef as u, useState as P, useCallback as Ct, useEffect as R } from "react";
+import { createRoot as Tt } from "react-dom/client";
+import yt from "./SandboxApp.es.js";
+import Mt from "./ContentRender.es.js";
+import { SANDBOX_INTERACTION_MESSAGE_TYPE as At, SANDBOX_INTERACTION_MESSAGE_SOURCE as St } from "../../lib/sandboxInteraction.es.js";
 let Q = null;
 const Ft = () => (Q || (Q = import("./blackboard-vendor.es.js").then(
   (n) => n.injectBlackboardLibraries
-)), Q), It = () => {
-  const n = performance.now(), t = (/* @__PURE__ */ new Date()).toISOString();
-  return console.log("[IframeSandbox][SandboxLoad] start", { startedAt: t }), Ft().then((r) => (console.log("[IframeSandbox][SandboxLoad] done", {
-    startedAt: t,
-    endedAt: (/* @__PURE__ */ new Date()).toISOString(),
-    durationMs: Number((performance.now() - n).toFixed(2))
-  }), r)).catch((r) => {
-    throw console.error("[IframeSandbox][SandboxLoad] failed", {
-      startedAt: t,
-      endedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      durationMs: Number((performance.now() - n).toFixed(2)),
-      error: r
-    }), r;
-  });
-}, Vt = /<img\b[^>]*>/i, Nt = 180, kt = 240, Dt = {
+)), Q), Vt = /<img\b[^>]*>/i, Nt = 180, _t = 240, kt = {
   viewportHeightCss: null,
   hasFullViewportHeight: !1
-}, dt = (n) => n.split(/\s+/).filter(Boolean).map((t) => t.split(":").pop() || t), P = (n) => {
+}, dt = (n) => n.split(/\s+/).filter(Boolean).map((t) => t.split(":").pop() || t), L = (n) => {
   const t = n.trim().toLowerCase();
   if (!t) return null;
-  const r = t.match(/^([0-9.]+)(vh|dvh|svh|lvh)$/i);
-  return r ? `${r[1]}${r[2].toLowerCase()}` : null;
+  const o = t.match(/^([0-9.]+)(vh|dvh|svh|lvh)$/i);
+  return o ? `${o[1]}${o[2].toLowerCase()}` : null;
 }, tt = (n) => {
   if (!n.trim()) return null;
   const t = dt(n);
@@ -38,101 +24,101 @@ const Ft = () => (Q || (Q = import("./blackboard-vendor.es.js").then(
     return "100svh";
   if (t.includes("h-lvh") || t.includes("min-h-lvh"))
     return "100lvh";
-  const r = t.find(
-    (u) => /^(h|min-h)-\[[0-9.]+(vh|dvh|svh|lvh)\]$/i.test(u)
+  const o = t.find(
+    (a) => /^(h|min-h)-\[[0-9.]+(vh|dvh|svh|lvh)\]$/i.test(a)
   );
-  if (!r) return null;
-  const c = r.match(
+  if (!o) return null;
+  const c = o.match(
     /^(h|min-h)-\[([0-9.]+)(vh|dvh|svh|lvh)\]$/i
   );
   return c ? `${c[2]}${c[3].toLowerCase()}` : null;
-}, Ot = (n) => n === "100vh" || n === "100dvh" || n === "100svh" || n === "100lvh", _t = (n) => {
+}, It = (n) => n === "100vh" || n === "100dvh" || n === "100svh" || n === "100lvh", $t = (n) => {
   const t = n.trim();
   if (!t)
     return {
       viewportHeightCss: null,
       hasFullViewportHeight: !1
     };
-  const c = t.match(/^<([a-zA-Z][\w:-]*)(\s[^>]*?)?>/)?.[2] || "", u = c.match(/\bheight\s*=\s*["']([^"']+)["']/i)?.[1], b = c.match(/\bstyle\s*=\s*["']([^"']+)["']/i)?.[1]?.match(
+  const c = t.match(/^<([a-zA-Z][\w:-]*)(\s[^>]*?)?>/)?.[2] || "", a = c.match(/\bheight\s*=\s*["']([^"']+)["']/i)?.[1], b = c.match(/\bstyle\s*=\s*["']([^"']+)["']/i)?.[1]?.match(
     /\bheight\s*:\s*([^;]+)/i
-  )?.[1], h = c.match(/\bclass\s*=\s*["']([^"']+)["']/i)?.[1], O = (u ? P(u) : null) || (b ? P(b) : null) || (h ? tt(h) : null);
+  )?.[1], h = c.match(/\bclass\s*=\s*["']([^"']+)["']/i)?.[1], $ = (a ? L(a) : null) || (b ? L(b) : null) || (h ? tt(h) : null);
   return {
-    viewportHeightCss: O,
-    hasFullViewportHeight: Ot(O)
+    viewportHeightCss: $,
+    hasFullViewportHeight: It($)
   };
 }, Bt = (n) => n.split(/\s+/).filter(Boolean).map((t) => {
-  const r = t.split(":");
-  return r[r.length - 1] !== "h-screen" && r[r.length - 1] !== "min-h-screen" ? t : (r[r.length - 1] = "h-full", r.join(":"));
-}).join(" "), $t = (n, t) => !t || !n.trim() ? n : n.replace(
+  const o = t.split(":");
+  return o[o.length - 1] !== "h-screen" && o[o.length - 1] !== "min-h-screen" ? t : (o[o.length - 1] = "h-full", o.join(":"));
+}).join(" "), Dt = (n, t) => !t || !n.trim() ? n : n.replace(
   /^(\s*<[a-zA-Z][\w:-]*)(\s[^>]*?)?>/,
-  (r, c, u = "") => {
-    const m = u.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
+  (o, c, a = "") => {
+    const m = a.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
     if (!m)
-      return r;
+      return o;
     const b = Bt(m[2]);
-    return b === m[2] ? r : `${c}${u.replace(
+    return b === m[2] ? o : `${c}${a.replace(
       m[0],
       `class=${m[1]}${b}${m[1]}`
     )}>`;
   }
-), Wt = ({
+), Gt = ({
   content: n,
   type: t,
-  className: r,
+  className: o,
   styleLoadingText: c,
-  scriptLoadingText: u,
+  scriptLoadingText: a,
   fullScreenButtonText: m,
   hideFullScreen: b = !1,
   mode: h = "content",
-  replaceRootScreenHeightWithFull: O = !1
+  replaceRootScreenHeightWithFull: $ = !1
 }) => {
-  const et = a(null), R = a(null), q = a(null), G = a(() => {
-  }), [mt, ft] = j(480), nt = a(0), [rt, gt] = j(0), [pt, bt] = j(!1), wt = t === "sandbox", _ = h === "blackboard", y = _ && t === "sandbox", C = y && O, W = a(""), B = D.useMemo(
+  const et = u(null), C = u(null), q = u(null), G = u(() => {
+  }), [mt, ft] = P(480), nt = u(0), [rt, gt] = P(0), [pt, bt] = P(!1), wt = t === "sandbox", B = h === "blackboard", S = B && t === "sandbox", T = S && $, W = u(""), D = I.useMemo(
     () => t === "sandbox" ? n : "",
     [n, t]
-  ), s = D.useMemo(
-    () => $t(
-      B,
-      C
+  ), s = I.useMemo(
+    () => Dt(
+      D,
+      T
     ),
-    [B, C]
-  ), ot = D.useMemo(
-    () => C ? _t(B) : Dt,
-    [B, C]
-  ), st = D.useMemo(
-    () => C && ot.hasFullViewportHeight,
+    [D, T]
+  ), ot = I.useMemo(
+    () => T ? $t(D) : kt,
+    [D, T]
+  ), st = I.useMemo(
+    () => T && ot.hasFullViewportHeight,
     [
       ot.hasFullViewportHeight,
-      C
+      T
     ]
-  ), [$, it] = j(
+  ), [O, it] = P(
     s
-  ), lt = a(s), U = a(s), F = a(null), I = a(null), ct = a(null), M = Rt((o) => {
+  ), lt = u(s), U = u(s), F = u(null), V = u(null), ct = u(null), y = Ct((r) => {
     if (typeof window > "u")
       return;
     const e = Date.now();
-    e - nt.current < kt || (nt.current = e, window.postMessage(
+    e - nt.current < _t || (nt.current = e, window.postMessage(
       {
-        source: yt,
+        source: St,
         type: At,
-        eventType: o
+        eventType: r
       },
       window.location.origin
     ));
   }, []), X = () => {
     F.current !== null && (window.clearTimeout(F.current), F.current = null);
   }, vt = () => {
-    I.current !== null && (window.cancelAnimationFrame(I.current), I.current = null);
+    V.current !== null && (window.cancelAnimationFrame(V.current), V.current = null);
   };
-  E(
+  R(
     () => () => {
       X(), vt();
     },
     []
-  ), E(() => {
-    const o = lt.current;
+  ), R(() => {
+    const r = lt.current;
     lt.current = s;
-    const e = !!o && s.length > o.length && s.startsWith(o), d = Vt.test(
+    const e = !!r && s.length > r.length && s.startsWith(r), d = Vt.test(
       s
     );
     if (!(e && d)) {
@@ -143,43 +129,43 @@ const Ft = () => (Q || (Q = import("./blackboard-vendor.es.js").then(
       it(U.current), F.current = null;
     }, Nt);
   }, [s]);
-  const z = D.useMemo(() => {
-    if (!y)
+  const z = I.useMemo(() => {
+    if (!S)
       return null;
-    const o = $.trim();
-    if (!o) return null;
-    const e = o.match(/^<([a-zA-Z][\w:-]*)(\s[^>]*?)?>/);
+    const r = O.trim();
+    if (!r) return null;
+    const e = r.match(/^<([a-zA-Z][\w:-]*)(\s[^>]*?)?>/);
     if (!e) return null;
-    const d = e[2] || "", T = d.match(/\bheight\s*=\s*["']([^"']+)["']/i);
-    if (T) {
-      const g = P(T[1]);
+    const d = e[2] || "", M = d.match(/\bheight\s*=\s*["']([^"']+)["']/i);
+    if (M) {
+      const g = L(M[1]);
       if (g) return g;
     }
-    const N = d.match(/\bstyle\s*=\s*["']([^"']+)["']/i)?.[1]?.match(
+    const _ = d.match(/\bstyle\s*=\s*["']([^"']+)["']/i)?.[1]?.match(
       /\bheight\s*:\s*([^;]+)/i
     )?.[1];
-    if (N) {
-      const g = P(N);
+    if (_) {
+      const g = L(_);
       if (g) return g;
     }
     const w = d.match(/\bclass\s*=\s*["']([^"']+)["']/i)?.[1];
     return w ? tt(w) : null;
-  }, [$, y]);
-  E(() => {
+  }, [O, S]);
+  R(() => {
     ct.current = z;
   }, [z]);
-  const at = !!z, V = _ && t === "sandbox" ? st ? "100%" : z ?? `${mt}px` : void 0;
-  E(() => {
+  const ut = !!z, N = B && t === "sandbox" ? st ? "100%" : z ?? `${mt}px` : void 0;
+  R(() => {
     if (h !== "blackboard") {
       W.current = s;
       return;
     }
-    const o = W.current;
-    !(o && s.startsWith(o)) && o && gt((d) => d + 1), W.current = s;
-  }, [h, s]), E(() => {
-    const o = R.current;
-    if (!o) return;
-    const e = o.contentDocument;
+    const r = W.current;
+    !(r && s.startsWith(r)) && r && gt((d) => d + 1), W.current = s;
+  }, [h, s]), R(() => {
+    const r = C.current;
+    if (!r) return;
+    const e = r.contentDocument;
     if (!e) return;
     e.open(), e.write(`<!DOCTYPE html>
 <html${h === "blackboard" ? ' style="height: 100%;"' : ""}>
@@ -197,11 +183,11 @@ const Ft = () => (Q || (Q = 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 d = _ && t === "sandbox", T = () => M("pointerdown"), Y = () => M("mousedown"), N = () => M("touchstart");
-    d && (e.addEventListener("pointerdown", T, !0), e.addEventListener("mousedown", Y, !0), e.addEventListener("touchstart", N, !0));
+    const d = B && t === "sandbox", M = () => y("pointerdown"), Y = () => y("mousedown"), _ = () => y("touchstart");
+    d && (e.addEventListener("pointerdown", M, !0), e.addEventListener("mousedown", Y, !0), e.addEventListener("touchstart", _, !0));
     const w = e.getElementById("root");
     if (!w) return;
-    const g = Ct(w);
+    const g = Tt(w);
     q.current = g;
     let k = !1;
     const Z = (i, p) => {
@@ -209,22 +195,22 @@ const Ft = () => (Q || (Q = import("./blackboard-vendor.es.js").then(
       if (!l) return null;
       const v = Number.parseFloat(l);
       return Number.isNaN(v) ? null : /(dvh|svh|lvh|vh)$/i.test(l) ? v / 100 * p : l.endsWith("px") || /^[0-9.]+$/.test(l) ? v : null;
-    }, St = (i, p) => {
+    }, Et = (i, p) => {
       if (!i.trim()) return null;
       const l = tt(i);
       if (l)
         return Z(l, p);
       const H = dt(i).find(
-        (S) => /^h-\[[0-9.]+px\]$/i.test(S)
+        (E) => /^h-\[[0-9.]+px\]$/i.test(E)
       );
       if (!H) return null;
       const x = H.match(/^h-\[([0-9.]+)px\]$/i);
       if (!x) return null;
       const f = Number.parseFloat(x[1]);
       return Number.isNaN(f) ? null : f;
-    }, Et = () => {
-      if (!y || !R.current || !e.body) return null;
-      const i = R.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, p = ct.current, l = p ? Z(
+    }, Rt = () => {
+      if (!S || !C.current || !e.body) return null;
+      const i = C.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, p = ct.current, l = p ? Z(
         p,
         i
       ) : null;
@@ -236,98 +222,98 @@ const Ft = () => (Q || (Q = import("./blackboard-vendor.es.js").then(
       if (!H) return null;
       const x = Array.from(H.children);
       if (x.length !== 1) return null;
-      const f = x[0], S = f.style.height || f.getAttribute("height"), ut = S ? Z(S, i) : null;
-      if (ut !== null)
-        return Math.ceil(ut);
-      const ht = St(
+      const f = x[0], E = f.style.height || f.getAttribute("height"), at = E ? Z(E, i) : null;
+      if (at !== null)
+        return Math.ceil(at);
+      const ht = Et(
         f.getAttribute("class") || "",
         i
       );
       return ht !== null ? Math.ceil(ht) : null;
     }, J = () => {
-      if (!y || !R.current || !e.body) return;
-      const i = e.body.getBoundingClientRect(), p = e.documentElement?.getBoundingClientRect(), l = i.height, v = p?.height || 0, H = Math.max(l, v), x = Et(), f = Math.max(
+      if (!S || !C.current || !e.body) return;
+      const i = e.body.getBoundingClientRect(), p = e.documentElement?.getBoundingClientRect(), l = i.height, v = p?.height || 0, H = Math.max(l, v), x = Rt(), f = Math.max(
         200,
         x ?? Math.ceil(H)
       );
       ft(
-        (S) => S === f ? S : f
+        (E) => E === f ? E : f
       );
-    }, L = () => {
+    }, j = () => {
       requestAnimationFrame(() => {
         k || J();
       });
     };
-    G.current = L, J(), L(), wt && It().then((i) => {
+    G.current = j, J(), j(), wt && Ft().then((i) => {
       k || (i(e), requestAnimationFrame(() => {
-        k || L();
+        k || j();
       }));
     }).catch(() => {
-      k || L();
+      k || j();
     });
     const K = new ResizeObserver(() => J());
     return K.observe(e.body), w && K.observe(w), () => {
-      k = !0, K.disconnect(), d && (e.removeEventListener("pointerdown", T, !0), e.removeEventListener("mousedown", Y, !0), e.removeEventListener("touchstart", N, !0)), setTimeout(() => {
+      k = !0, K.disconnect(), d && (e.removeEventListener("pointerdown", M, !0), e.removeEventListener("mousedown", Y, !0), e.removeEventListener("touchstart", _, !0)), setTimeout(() => {
         g.unmount(), q.current = null, G.current = () => {
         };
       }, 0);
     };
-  }, []), E(() => {
-    const o = () => {
+  }, []), R(() => {
+    const r = () => {
       bt(!!document.fullscreenElement);
     };
-    return document.addEventListener("fullscreenchange", o), () => document.removeEventListener("fullscreenchange", o);
+    return document.addEventListener("fullscreenchange", r), () => document.removeEventListener("fullscreenchange", r);
   }, []);
   const Ht = () => {
-    const o = et.current || R.current;
-    if (o) {
+    const r = et.current || C.current;
+    if (r) {
       if (document.fullscreenElement) {
         document.exitFullscreen().catch(() => {
         });
         return;
       }
-      o.requestFullscreen && o.requestFullscreen().catch(() => {
+      r.requestFullscreen && r.requestFullscreen().catch(() => {
       });
     }
   };
-  E(() => {
-    const o = q.current;
-    o && (o.render(
+  R(() => {
+    const r = q.current;
+    r && (r.render(
       /* @__PURE__ */ A.jsx(
-        Mt,
+        yt,
         {
-          html: $,
+          html: O,
           styleLoadingText: c,
-          scriptLoadingText: u,
+          scriptLoadingText: a,
           resetToken: rt,
-          hasRootVhHeight: at,
+          hasRootVhHeight: ut,
           mode: h,
           stretchRootHeight: st
         }
       )
-    ), I.current = window.requestAnimationFrame(() => {
-      G.current?.(), I.current = null;
+    ), V.current = window.requestAnimationFrame(() => {
+      G.current?.(), V.current = null;
     }));
   }, [
-    $,
+    O,
     c,
-    u,
+    a,
     rt,
     h
   ]);
   const xt = [
     "w-full relative content-render-iframe-sandbox",
-    _ ? "h-full overflow-auto flex flex-col" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
+    B ? "h-full overflow-auto flex flex-col" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ A.jsxs(
     "div",
     {
       ref: et,
-      "data-root-vh": at ? "true" : "false",
+      "data-root-vh": ut ? "true" : "false",
       className: xt,
-      style: V ? {
-        height: V,
-        minHeight: V
+      style: N ? {
+        height: N,
+        minHeight: N
       } : void 0,
       children: [
         !b && /* @__PURE__ */ A.jsx(
@@ -342,22 +328,22 @@ const Ft = () => (Q || (Q = import("./blackboard-vendor.es.js").then(
         h === "blackboard" && t === "markdown" ? /* @__PURE__ */ A.jsx(
           "div",
           {
-            onMouseDown: () => M("mousedown"),
-            onPointerDown: () => M("pointerdown"),
-            onTouchStart: () => M("touchstart"),
-            children: /* @__PURE__ */ A.jsx(Tt, { content: n })
+            onMouseDown: () => y("mousedown"),
+            onPointerDown: () => y("pointerdown"),
+            onTouchStart: () => y("touchstart"),
+            children: /* @__PURE__ */ A.jsx(Mt, { content: n })
           }
         ) : /* @__PURE__ */ A.jsx(
           "iframe",
           {
-            ref: R,
+            ref: C,
             sandbox: "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox",
             allow: "fullscreen",
             allowFullScreen: !0,
-            className: [r, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
+            className: [o, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
             style: {
-              height: V ?? "100%",
-              minHeight: V,
+              height: N ?? "100%",
+              minHeight: N,
               margin: "auto",
               visibility: "visible"
             }
@@ -368,6 +354,6 @@ const Ft = () => (Q || (Q = import("./blackboard-vendor.es.js").then(
   );
 };
 export {
-  Wt as default
+  Gt as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map