markdown-flow-ui 0.1.100 → 0.1.101

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

@@ -1,115 +1,120 @@
-import { j as C } from "../../_virtual/jsx-runtime.es.js";
-import K, { useRef as a, useState as N, useCallback as at, useEffect as R } from "react";
-import { createRoot as ht } from "react-dom/client";
-import dt from "./SandboxApp.es.js";
-import { splitContentSegments as mt } from "./utils/split-content.es.js";
-import ft from "./ContentRender.es.js";
-const pt = () => import("./blackboard-vendor.es.js").then((s) => s.injectBlackboardLibraries), bt = /<img\b[^>]*>/i, gt = 180, wt = "markdown-flow-ui:sandbox", vt = "interaction", xt = 240, et = (s) => s.split(/\s+/).filter(Boolean).map((r) => r.split(":").pop() || r), Q = (s) => {
-  const r = s.trim().toLowerCase();
-  if (!r) return null;
-  const d = r.match(/^([0-9.]+)(vh|dvh|svh|lvh)$/i);
-  return d ? `${d[1]}${d[2].toLowerCase()}` : null;
-}, tt = (s) => {
-  if (!s.trim()) return null;
-  const r = et(s);
-  if (r.includes("h-screen") || r.includes("h-dvh"))
-    return "100dvh";
-  if (r.includes("h-svh"))
-    return "100svh";
-  if (r.includes("h-lvh"))
-    return "100lvh";
-  const d = r.find(
-    (T) => /^h-\[[0-9.]+(vh|dvh|svh|lvh)\]$/i.test(T)
-  );
-  if (!d) return null;
-  const v = d.match(/^h-\[([0-9.]+)(vh|dvh|svh|lvh)\]$/i);
-  return v ? `${v[1]}${v[2].toLowerCase()}` : null;
-}, Mt = ({
+import { j as p } from "../../_virtual/jsx-runtime.es.js";
+import C, { useRef as l, useState as O, useCallback as Ce, useEffect as d } from "react";
+import { createRoot as Se } from "react-dom/client";
+import Ae from "./SandboxApp.es.js";
+import Me from "./ContentRender.es.js";
+import { inspectViewportHeightFromHtmlRootString as de, EMPTY_ROOT_HEIGHT_META as Te, parseExplicitHeight as he, inspectViewportHeightFromNodeChain as ye, resolveExplicitHeightFromNodeChain as Ie } from "./utils/iframe-viewport-height.es.js";
+import { SANDBOX_INTERACTION_MESSAGE_TYPE as Ne, SANDBOX_INTERACTION_MESSAGE_SOURCE as _e } from "../../lib/sandboxInteraction.es.js";
+let U = null;
+const Fe = () => (U || (U = import("./blackboard-vendor.es.js").then(
+  (s) => s.injectBlackboardLibraries
+)), U), Ve = /<img\b[^>]*>/i, De = 180, Oe = 240, Be = (s) => s.split(/\s+/).filter(Boolean).map((o) => {
+  const i = o.split(":");
+  return i[i.length - 1] !== "h-screen" && i[i.length - 1] !== "min-h-screen" ? o : (i[i.length - 1] = "h-full", i.join(":"));
+}).join(" "), je = (s, o) => !o || !s.trim() ? s : s.replace(
+  /^(\s*<[a-zA-Z][\w:-]*)(\s[^>]*?)?>/,
+  (i, S, b = "") => {
+    const c = b.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
+    if (!c)
+      return i;
+    const A = Be(c[2]);
+    return A === c[2] ? i : `${S}${b.replace(
+      c[0],
+      `class=${c[1]}${A}${c[1]}`
+    )}>`;
+  }
+), Ue = ({
   content: s,
-  type: r,
-  className: d,
-  loadingText: v,
-  styleLoadingText: T,
-  scriptLoadingText: $,
-  fullScreenButtonText: _,
-  hideFullScreen: V = !1,
-  mode: h = "content"
+  type: o,
+  className: i,
+  styleLoadingText: S,
+  scriptLoadingText: b,
+  fullScreenButtonText: c,
+  hideFullScreen: A = !1,
+  mode: u = "content",
+  replaceRootScreenHeightWithFull: me = !1
 }) => {
-  const P = a(null), x = a(null), I = a(null), q = a(null), D = a(() => {
-  }), G = a(0), [, nt] = N(480), [U, rt] = N(0), [ot, st] = N(!1), W = h === "blackboard", O = a(""), n = K.useMemo(() => {
-    const t = mt(s).filter((c) => c.type === "sandbox");
-    return (h === "blackboard" ? t[t.length - 1]?.value || "" : t.map((c) => c.value).join(`
-`)) || "";
-  }, [s, h]), [A, X] = N(n), Y = a(n), B = a(n), H = a(null), E = at((e) => {
+  const W = l(null), h = l(null), B = l(null), j = l(() => {
+  }), [fe, ge] = O(480), X = l(0), [Y, pe] = O(0), [be, we] = O(!1), He = o === "sandbox", M = u === "blackboard", w = M && o === "sandbox", m = w && me, k = l(""), T = C.useMemo(
+    () => o === "sandbox" ? s : "",
+    [s, o]
+  ), n = C.useMemo(
+    () => je(
+      T,
+      m
+    ),
+    [T, m]
+  ), Z = C.useMemo(
+    () => m ? de(T) : Te,
+    [T, m]
+  ), J = C.useMemo(
+    () => m && Z.hasFullViewportHeight,
+    [
+      Z.hasFullViewportHeight,
+      m
+    ]
+  ), [y, K] = O(
+    n
+  ), Q = l(n), P = l(n), H = l(null), E = l(null), ee = l(null), f = Ce((t) => {
     if (typeof window > "u")
       return;
-    const t = Date.now();
-    t - G.current < xt || (G.current = t, window.postMessage(
+    const e = Date.now();
+    e - X.current < Oe || (X.current = e, window.postMessage(
       {
-        source: wt,
-        type: vt,
-        eventType: e
+        source: _e,
+        type: Ne,
+        eventType: t
       },
       window.location.origin
     ));
-  }, []), j = () => {
+  }, []), L = () => {
     H.current !== null && (window.clearTimeout(H.current), H.current = null);
+  }, Ee = () => {
+    E.current !== null && (window.cancelAnimationFrame(E.current), E.current = null);
   };
-  R(
+  d(
     () => () => {
-      j();
+      L(), Ee();
     },
     []
-  ), R(() => {
-    const e = Y.current;
-    Y.current = n;
-    const t = !!e && n.length > e.length && n.startsWith(e), i = bt.test(n);
-    if (!(t && i)) {
-      j(), B.current = n, X(n);
+  ), d(() => {
+    const t = Q.current;
+    Q.current = n;
+    const e = !!t && n.length > t.length && n.startsWith(t), g = Ve.test(
+      n
+    );
+    if (!(e && g)) {
+      L(), P.current = n, K(n);
       return;
     }
-    B.current = n, j(), H.current = window.setTimeout(() => {
-      X(B.current), H.current = null;
-    }, gt);
+    P.current = n, L(), H.current = window.setTimeout(() => {
+      K(P.current), H.current = null;
+    }, De);
   }, [n]);
-  const Z = !!K.useMemo(() => {
-    const e = A.trim();
-    if (!e) return null;
-    const t = e.match(/^<([a-zA-Z][\w:-]*)(\s[^>]*?)?>/);
-    if (!t) return null;
-    const i = t[2] || "", c = i.match(/\bheight\s*=\s*["']([^"']+)["']/i);
-    if (c) {
-      const m = Q(c[1]);
-      if (m) return m;
-    }
-    const y = i.match(/\bstyle\s*=\s*["']([^"']+)["']/i)?.[1]?.match(
-      /\bheight\s*:\s*([^;]+)/i
-    )?.[1];
-    if (y) {
-      const m = Q(y);
-      if (m) return m;
-    }
-    const p = i.match(/\bclass\s*=\s*["']([^"']+)["']/i)?.[1];
-    return p ? tt(p) : null;
-  }, [A]);
-  R(() => {
-    if (h !== "blackboard") {
-      O.current = n;
+  const I = C.useMemo(() => w ? de(y).viewportHeightCss : null, [y, w]);
+  d(() => {
+    ee.current = I;
+  }, [I]);
+  const te = !!I, x = M && o === "sandbox" ? J ? "100%" : I ?? `${fe}px` : void 0;
+  d(() => {
+    if (u !== "blackboard") {
+      k.current = n;
       return;
     }
-    const e = O.current;
-    !(e && n.startsWith(e)) && e && rt((i) => i + 1), O.current = n;
-  }, [n, h]), R(() => {
-    const e = x.current;
-    if (!e) return;
-    const t = e.contentDocument;
+    const t = k.current;
+    !(t && n.startsWith(t)) && t && pe((g) => g + 1), k.current = n;
+  }, [u, n]), d(() => {
+    const t = h.current;
     if (!t) return;
-    t.open(), t.write(`<!DOCTYPE html>
-<html${h === "blackboard" ? ' style="height: 100%;"' : ""}>
+    const e = t.contentDocument;
+    if (!e) return;
+    e.open(), e.write(`<!DOCTYPE html>
+<html${u === "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%; height: 100%; }
       html, body { margin: 0; padding: 0; overflow: auto; }
       *, *::before, *::after { box-sizing: border-box; }
@@ -118,156 +123,173 @@ const pt = () => import("./blackboard-vendor.es.js").then((s) => s.injectBlackbo
   <body>
     <div id="root"></div>
   </body>
-</html>`), t.close(), q.current = t;
-    const i = W && r === "sandbox", c = () => E("pointerdown"), L = () => E("mousedown"), y = () => E("touchstart");
-    i && (t.addEventListener("pointerdown", c, !0), t.addEventListener("mousedown", L, !0), t.addEventListener("touchstart", y, !0));
-    const p = t.getElementById("root");
-    if (!p) return;
-    const m = ht(p);
-    I.current = m;
-    let M = !1;
-    const J = (l, f) => {
-      const o = l.trim().toLowerCase();
-      if (!o) return null;
-      const u = Number.parseFloat(o);
-      return Number.isNaN(u) ? null : /(dvh|svh|lvh|vh)$/i.test(o) ? u / 100 * f : o.endsWith("px") || /^[0-9.]+$/.test(o) ? u : null;
-    }, lt = (l, f) => {
-      if (!l.trim()) return null;
-      const o = tt(l);
-      if (o)
-        return J(o, f);
-      const b = et(l).find(
-        (k) => /^h-\[[0-9.]+px\]$/i.test(k)
-      );
-      if (!b) return null;
-      const g = b.match(/^h-\[([0-9.]+)px\]$/i);
-      if (!g) return null;
-      const w = Number.parseFloat(g[1]);
-      return Number.isNaN(w) ? null : w;
-    }, ut = () => {
-      if (!x.current || !t.body) return null;
-      const f = t.body.querySelector(
+</html>`), e.close(), e.documentElement.setAttribute("data-theme", "light"), e.documentElement.style.colorScheme = "light", e.body?.style.setProperty("color-scheme", "light");
+    const g = M && o === "sandbox", $ = () => f("pointerdown"), ne = () => f("mousedown"), re = () => f("touchstart");
+    g && (e.addEventListener("pointerdown", $, !0), e.addEventListener("mousedown", ne, !0), e.addEventListener("touchstart", re, !0));
+    const N = e.getElementById("root");
+    if (!N) return;
+    const oe = Se(N);
+    B.current = oe;
+    let R = !1;
+    const ie = (r) => ({
+      heightAttrValue: r.getAttribute("height"),
+      styleAttrValue: r.getAttribute("style"),
+      classAttrValue: r.getAttribute("class")
+    }), se = (r) => {
+      const a = Array.from(r.children);
+      return a.length === 1 ? a[0] : null;
+    }, ve = () => {
+      if (!w || !h.current || !e.body) return null;
+      const r = h.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, a = ee.current, F = a ? he(
+        a,
+        r
+      ) : null;
+      if (F !== null)
+        return Math.ceil(F);
+      const V = e.body.querySelector(
         ".sandbox-wrapper"
       )?.firstElementChild;
-      if (!f) return null;
-      const o = Array.from(f.children);
-      if (o.length !== 1) return null;
-      const u = o[0], b = u.style.height || u.getAttribute("height"), g = x.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, w = b ? J(b, g) : null;
-      if (w !== null)
-        return Math.ceil(w);
-      const k = lt(
-        u.getAttribute("class") || "",
-        g
+      if (!V) return null;
+      const D = Array.from(V.children), v = D.length === 1 ? D[0] : null, ce = ye(
+        v,
+        {
+          getNode: ie,
+          getSingleChild: se
+        }
+      ).viewportHeightCss;
+      if (ce) {
+        const ae = he(
+          ce,
+          r
+        );
+        if (ae !== null)
+          return Math.ceil(ae);
+      }
+      const ue = Ie(
+        v,
+        r,
+        {
+          getNode: ie,
+          getSingleChild: se
+        }
       );
-      return k !== null ? Math.ceil(k) : null;
-    }, z = () => {
-      if (!x.current || !t.body) return;
-      const l = t.body.getBoundingClientRect(), f = t.documentElement?.getBoundingClientRect(), o = l.height, u = f?.height || 0, b = Math.max(o, u), g = ut(), w = Math.max(
+      return ue !== null ? Math.ceil(ue) : null;
+    }, q = () => {
+      if (!w || !h.current || !e.body) return;
+      const r = e.body.getBoundingClientRect(), a = e.documentElement?.getBoundingClientRect(), F = r.height, le = a?.height || 0, V = Math.max(F, le), D = ve(), v = Math.max(
         200,
-        g ?? Math.ceil(b)
+        D ?? Math.ceil(V)
+      );
+      ge(
+        (G) => G === v ? G : v
       );
-      nt(w);
-    }, S = () => {
+    }, _ = () => {
       requestAnimationFrame(() => {
-        M || z();
+        R || q();
       });
     };
-    D.current = S, z(), S(), pt().then((l) => {
-      M || (l(t), S());
+    j.current = _, q(), _(), He && Fe().then((r) => {
+      R || (r(e), requestAnimationFrame(() => {
+        R || _();
+      }));
     }).catch(() => {
-      M || S();
+      R || _();
     });
-    const F = new ResizeObserver(() => z());
-    return F.observe(t.body), p && F.observe(p), () => {
-      M = !0, F.disconnect(), i && (t.removeEventListener("pointerdown", c, !0), t.removeEventListener("mousedown", L, !0), t.removeEventListener("touchstart", y, !0)), setTimeout(() => {
-        m.unmount(), I.current = null, q.current = null, D.current = () => {
+    const z = new ResizeObserver(() => q());
+    return z.observe(e.body), N && z.observe(N), () => {
+      R = !0, z.disconnect(), g && (e.removeEventListener("pointerdown", $, !0), e.removeEventListener("mousedown", ne, !0), e.removeEventListener("touchstart", re, !0)), setTimeout(() => {
+        oe.unmount(), B.current = null, j.current = () => {
         };
       }, 0);
     };
-  }, []), R(() => {
-    const e = () => {
-      st(!!document.fullscreenElement);
+  }, []), d(() => {
+    const t = () => {
+      we(!!document.fullscreenElement);
     };
-    return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
+    return document.addEventListener("fullscreenchange", t), () => document.removeEventListener("fullscreenchange", t);
   }, []);
-  const it = () => {
-    const e = P.current || x.current;
-    if (e) {
+  const xe = () => {
+    const t = W.current || h.current;
+    if (t) {
       if (document.fullscreenElement) {
         document.exitFullscreen().catch(() => {
         });
         return;
       }
-      e.requestFullscreen && e.requestFullscreen().catch(() => {
+      t.requestFullscreen && t.requestFullscreen().catch(() => {
       });
     }
   };
-  R(() => {
-    const e = I.current;
-    e && (e.render(
-      /* @__PURE__ */ C.jsx(
-        dt,
+  d(() => {
+    const t = B.current;
+    t && (t.render(
+      /* @__PURE__ */ p.jsx(
+        Ae,
         {
-          html: A,
-          loadingText: v,
-          styleLoadingText: T,
-          scriptLoadingText: $,
-          fullScreenButtonText: _,
-          hideFullScreen: V,
-          resetToken: U,
-          hasRootVhHeight: Z,
-          mode: h
+          html: y,
+          styleLoadingText: S,
+          scriptLoadingText: b,
+          resetToken: Y,
+          hasRootVhHeight: te,
+          mode: u,
+          stretchRootHeight: J
         }
       )
-    ), requestAnimationFrame(() => D.current?.()));
+    ), E.current = window.requestAnimationFrame(() => {
+      j.current?.(), E.current = null;
+    }));
   }, [
-    A,
-    v,
-    T,
-    $,
-    _,
-    U,
-    h
+    y,
+    S,
+    b,
+    Y,
+    u
   ]);
-  const ct = [
+  const Re = [
     "w-full relative content-render-iframe-sandbox",
-    W ? "h-full overflow-auto flex flex-col" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
+    M ? "h-full overflow-auto flex flex-col" : "aspect-[16/9] overflow-hidden flex items-center justify-center"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C.jsxs(
+  return /* @__PURE__ */ p.jsxs(
     "div",
     {
-      ref: P,
-      "data-root-vh": Z ? "true" : "false",
-      className: ct,
+      ref: W,
+      "data-root-vh": te ? "true" : "false",
+      className: Re,
+      style: x ? {
+        height: x,
+        minHeight: x
+      } : void 0,
       children: [
-        !V && /* @__PURE__ */ C.jsx(
+        !A && /* @__PURE__ */ p.jsx(
           "button",
           {
             type: "button",
-            onClick: it,
+            onClick: xe,
             className: "absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
-            children: ot ? "退出全屏" : _ || "全屏浏览"
+            children: be ? "退出全屏" : c || "全屏浏览"
           }
         ),
-        h === "blackboard" && r === "markdown" ? /* @__PURE__ */ C.jsx(
+        u === "blackboard" && o === "markdown" ? /* @__PURE__ */ p.jsx(
           "div",
           {
-            onMouseDown: () => E("mousedown"),
-            onPointerDown: () => E("pointerdown"),
-            onTouchStart: () => E("touchstart"),
-            children: /* @__PURE__ */ C.jsx(ft, { content: s })
+            onMouseDown: () => f("mousedown"),
+            onPointerDown: () => f("pointerdown"),
+            onTouchStart: () => f("touchstart"),
+            children: /* @__PURE__ */ p.jsx(Me, { content: s })
           }
-        ) : /* @__PURE__ */ C.jsx(
+        ) : /* @__PURE__ */ p.jsx(
           "iframe",
           {
-            ref: x,
+            ref: h,
             sandbox: "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox",
             allow: "fullscreen",
             allowFullScreen: !0,
-            className: [d, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
+            className: [i, "w-full h-full mx-auto my-auto block"].filter(Boolean).join(" "),
             style: {
-              height: "100%",
-              margin: "auto"
+              height: x ?? "100%",
+              minHeight: x,
+              margin: "auto",
+              visibility: "visible"
             }
           }
         )
@@ -276,6 +298,6 @@ const pt = () => import("./blackboard-vendor.es.js").then((s) => s.injectBlackbo
   );
 };
 export {
-  Mt as default
+  Ue as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map