markdown-flow-ui 0.1.113 → 0.1.114-beta.0

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

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