markdown-flow-ui 0.1.129 → 0.2.1

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

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