markdown-flow-ui 0.2.0 → 0.2.1

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

@@ -1,72 +1,73 @@
 import { j as M } from "../../_virtual/jsx-runtime.es.js";
-import W, { useRef as i, useState as y, useCallback as Le, useEffect as H, useMemo as Ue } from "react";
-import { createRoot as Ye } from "react-dom/client";
+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 Ze from "./ContentRender.es.js";
-import { inspectViewportHeightFromHtmlRootString as ye, EMPTY_ROOT_HEIGHT_META as Je, parseExplicitHeight as Te, inspectViewportHeightFromNodeChain as Ke, resolveExplicitHeightFromNodeChain as Qe } from "./utils/iframe-viewport-height.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 ot = () => (le || (le = import("./blackboard-vendor.es.js").then(
+const it = () => (le || (le = import("./blackboard-vendor.es.js").then(
   (c) => c.injectBlackboardLibraries
-)), le), it = /<img\b[^>]*>/i, st = 180, ct = 240, lt = (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(" "), at = (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, S, T = "") => {
+  (s, E, T = "") => {
     const h = T.match(/\bclass\s*=\s*(["'])([^"']*)\1/i);
     if (!h)
       return s;
-    const A = lt(h[2]);
-    return A === h[2] ? s : `${S}${T.replace(
+    const A = at(h[2]);
+    return A === h[2] ? s : `${E}${T.replace(
       h[0],
       `class=${h[1]}${A}${h[1]}`
     )}>`;
   }
-), xt = ({
+), St = ({
   content: c,
   type: o,
   className: s,
-  locale: S,
+  locale: E,
   loadingText: T,
   styleLoadingText: h,
   scriptLoadingText: A,
   fullScreenButtonText: Ae,
-  exitFullScreenButtonText: ke,
-  hideFullScreen: _e = !1,
+  exitFullScreenButtonText: _e,
+  hideFullScreen: Fe = !1,
   mode: a = "content",
-  replaceRootScreenHeightWithFull: Fe = !1,
+  replaceRootScreenHeightWithFull: ke = !1,
   enableScaling: Ie = !1,
-  disableLoadingOverlay: Y = !1
+  disableLoadingOverlay: U = !1
 }) => {
-  const ae = rt(S), Ne = Ae || ae.sandboxFullscreenButtonText, Be = ke || ae.sandboxExitFullscreenButtonText, D = i(null), f = i(null), X = i(null), k = i(() => {
-  }), [Oe, Ve] = y(480), [ue, je] = y(0), [Z, he] = y(0), J = i(!1), K = i(!1), de = i(0), [me, We] = y(0), [Q, De] = y(!1), Pe = o === "sandbox", g = a === "blackboard", b = Ie && g && o === "sandbox", _ = g && o === "sandbox", R = _ && Fe, ee = i(""), P = W.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 = W.useMemo(
-    () => at(
+    () => ut(
       P,
-      R
+      C
     ),
-    [P, R]
+    [P, C]
   ), fe = W.useMemo(
-    () => R ? ye(P) : Je,
-    [P, R]
+    () => C ? ye(P) : Ke,
+    [P, C]
   ), te = W.useMemo(
-    () => R && fe.hasFullViewportHeight,
+    () => C && fe.hasFullViewportHeight,
     [
       fe.hasFullViewportHeight,
-      R
+      C
     ]
   ), [$, ge] = y(
     n
-  ), be = i(n), ne = i(n), F = i(null), I = i(null), pe = i(null), He = Le((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 - de.current < ct || (de.current = e, window.postMessage(
+    e - de.current < lt || (de.current = e, window.postMessage(
       {
         source: tt,
         type: et,
@@ -75,7 +76,7 @@ const ot = () => (le || (le = import("./blackboard-vendor.es.js").then(
       window.location.origin
     ));
   }, []), re = () => {
-    F.current !== null && (window.clearTimeout(F.current), F.current = null);
+    k.current !== null && (window.clearTimeout(k.current), k.current = null);
   }, $e = () => {
     I.current !== null && (window.cancelAnimationFrame(I.current), I.current = null);
   };
@@ -87,22 +88,22 @@ const ot = () => (le || (le = import("./blackboard-vendor.es.js").then(
   ), H(() => {
     const t = be.current;
     be.current = n;
-    const e = !!t && n.length > t.length && n.startsWith(t), u = it.test(
+    const e = !!t && n.length > t.length && n.startsWith(t), u = st.test(
       n
     );
     if (!(e && u)) {
       re(), ne.current = n, ge(n);
       return;
     }
-    ne.current = n, re(), F.current = window.setTimeout(() => {
-      ge(ne.current), F.current = null;
-    }, st);
+    ne.current = n, re(), k.current = window.setTimeout(() => {
+      ge(ne.current), k.current = null;
+    }, ct);
   }, [n]);
-  const z = W.useMemo(() => _ ? ye($).viewportHeightCss : null, [$, _]);
+  const z = W.useMemo(() => F ? ye($).viewportHeightCss : null, [$, F]);
   H(() => {
     pe.current = z;
   }, [z]);
-  const oe = !!z, N = g && o === "sandbox" ? b || te ? "100%" : z ?? `${Oe}px` : void 0;
+  const oe = !!z, N = g && o === "sandbox" ? b || te ? "100%" : z ?? `${Be}px` : void 0;
   H(() => {
     if (a !== "blackboard") {
       ee.current = n;
@@ -122,7 +123,7 @@ const ot = () => (le || (le = 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: ${b ? "hidden auto" : a === "blackboard" ? "auto" : "hidden"}; }
       *, *::before, *::after { box-sizing: border-box; }
@@ -138,42 +139,42 @@ const ot = () => (le || (le = 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 = () => He("click");
-    u && e.addEventListener("click", q, !0);
-    const B = e.getElementById("root");
-    if (!B) return;
-    const we = Ye(B);
+    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 O = !1;
-    const ve = (r) => ({
+    let B = !1;
+    const Se = (r) => ({
       heightAttrValue: r.getAttribute("height"),
       styleAttrValue: r.getAttribute("style"),
       classAttrValue: r.getAttribute("class")
-    }), Ee = (r) => {
+    }), ve = (r) => {
       const x = Array.from(r.children);
       return x.length === 1 ? x[0] : null;
-    }, Ge = () => {
-      if (!_ || !f.current || !e.body) return null;
-      const r = f.current.ownerDocument?.documentElement?.clientHeight || window.innerHeight, x = pe.current, G = x ? Te(
+    }, 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);
+      if (q !== null)
+        return Math.ceil(q);
       const d = e.body.querySelector(
         ".sandbox-wrapper"
       )?.firstElementChild;
       if (!d) return null;
-      const m = Array.from(d.children), w = m.length === 1 ? m[0] : null, L = Ke(
+      const m = Array.from(d.children), w = m.length === 1 ? m[0] : null, G = Ze(
         w,
         {
-          getNode: ve,
-          getSingleChild: Ee
+          getNode: Se,
+          getSingleChild: ve
         }
       ).viewportHeightCss;
-      if (L) {
+      if (G) {
         const V = Te(
-          L,
+          G,
           r
         );
         if (V !== null)
@@ -183,100 +184,100 @@ const ot = () => (le || (le = import("./blackboard-vendor.es.js").then(
         w,
         r,
         {
-          getNode: ve,
-          getSingleChild: Ee
+          getNode: Se,
+          getSingleChild: ve
         }
       );
       return l !== null ? Math.ceil(l) : null;
     }, ie = () => {
       if (!f.current || !e.body) return;
       if (!g) {
-        if (J.current) {
-          K.current = !0;
+        if (K.current) {
+          Z.current = !0;
           return;
         }
-        J.current = !0;
+        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), L = Math.max(8192, m * 20);
+          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 V = e.defaultView;
           if (V) {
             const j = (p) => {
-              let v = 0;
-              const Ce = (E) => {
-                if (E !== p && E.scrollHeight > E.clientHeight + 1) {
-                  const U = V.getComputedStyle(E).overflowY;
-                  if (U === "auto" || U === "scroll") {
-                    const Me = E.getBoundingClientRect();
-                    Me.top >= 0 && (v = Math.max(
-                      v,
-                      Math.ceil(Me.top + E.scrollHeight)
+              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) Ce(U);
+                for (const Y of v.children) Re(Y);
               };
-              return Ce(p), v;
+              return Re(p), S;
             };
             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 v = Math.max(
+              const S = Math.max(
                 e.body.scrollHeight,
                 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;
             }
           }
           d.style.height = w, je((j) => {
-            const p = Math.min(L, Math.max(200, Math.ceil(l)));
+            const p = Math.min(G, Math.max(200, Math.ceil(l)));
             return j === p ? j : p;
           });
         }
         setTimeout(() => {
-          J.current = !1, K.current && (K.current = !1, C());
+          K.current = !1, Z.current && (Z.current = !1, R());
         }, 50);
         return;
       }
       if (b) return;
-      const r = e.body.scrollHeight, x = e.documentElement?.scrollHeight || 0, G = B?.scrollHeight || 0, Re = Math.max(r, x, G);
-      if (_) {
-        const d = Ge(), m = Math.max(
+      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,
-          d ?? Math.ceil(Re)
+          d ?? Math.ceil(Ce)
         );
         Ve(
           (w) => w === m ? w : m
         );
       }
-    }, C = () => {
+    }, R = () => {
       requestAnimationFrame(() => {
-        O || ie();
+        B || ie();
       });
     };
-    k.current = C, ie(), C(), Pe && ot().then((r) => {
-      O || (r(e), b && nt(e), requestAnimationFrame(() => {
-        O || C();
+    _.current = R, ie(), R(), Pe && it().then((r) => {
+      B || (r(e), b && nt(e), requestAnimationFrame(() => {
+        B || R();
       }));
     }).catch(() => {
-      O || C();
+      B || R();
     });
     const se = new ResizeObserver(() => ie());
-    se.observe(e.body), B && se.observe(B);
-    const Se = new MutationObserver(() => {
-      C();
+    se.observe(e.body), O && se.observe(O);
+    const Ee = new MutationObserver(() => {
+      R();
     });
-    return Se.observe(e.body, {
+    return Ee.observe(e.body, {
       childList: !0,
       subtree: !0,
       attributes: !0,
       attributeFilter: ["style", "class"]
     }), () => {
-      O = !0, se.disconnect(), Se.disconnect(), b && t.contentWindow?.__mdf_cleanupScaling?.(), u && e.removeEventListener("click", q, !0), setTimeout(() => {
-        we.unmount(), X.current = null, k.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);
     };
@@ -293,12 +294,12 @@ const ot = () => (le || (le = import("./blackboard-vendor.es.js").then(
     });
     return e.observe(t), he(t.clientWidth), () => e.disconnect();
   }, []);
-  const xe = Ue(() => {
-    if (g || Z === 0 || Q)
+  const xe = Ye(() => {
+    if (g || J === 0 || Q)
       return;
-    const t = Math.round(Z * 9 / 16);
+    const t = Math.round(J * 9 / 16);
     return { height: Math.max(t, ue) };
-  }, [g, Z, ue, Q]), ze = () => {
+  }, [g, J, ue, Q]), ze = () => {
     const t = D.current || f.current;
     if (t) {
       if (document.fullscreenElement) {
@@ -318,11 +319,11 @@ const ot = () => (le || (le = import("./blackboard-vendor.es.js").then(
         Xe,
         {
           html: $,
-          locale: S,
+          locale: E,
           loadingText: T,
           styleLoadingText: h,
           scriptLoadingText: A,
-          disableLoadingOverlay: Y,
+          disableLoadingOverlay: U,
           resetToken: me,
           hasRootVhHeight: oe,
           mode: a,
@@ -331,26 +332,26 @@ const ot = () => (le || (le = import("./blackboard-vendor.es.js").then(
         }
       )
     ), I.current = window.requestAnimationFrame(() => {
-      k.current?.(), b && f.current?.contentWindow?.__mdf_triggerFitContent?.(), I.current = null;
+      _.current?.(), b && f.current?.contentWindow?.__mdf_triggerFitContent?.(), I.current = null;
     });
-    const e = setTimeout(() => k.current?.(), 100), u = setTimeout(() => k.current?.(), 500);
+    const e = setTimeout(() => _.current?.(), 100), u = setTimeout(() => _.current?.(), 500);
     return () => {
       clearTimeout(e), clearTimeout(u);
     };
   }, [
     $,
-    S,
+    E,
     T,
     h,
     A,
     me,
-    Y,
+    U,
     oe,
     a,
     te,
     b
   ]);
-  const qe = [
+  const Le = [
     "w-full relative content-render-iframe-sandbox",
     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(" ");
@@ -359,27 +360,27 @@ const ot = () => (le || (le = import("./blackboard-vendor.es.js").then(
     {
       ref: D,
       "data-root-vh": oe ? "true" : "false",
-      className: qe,
+      className: Le,
       style: N ? {
         height: N,
         minHeight: N
       } : xe,
       children: [
-        !_e && /* @__PURE__ */ M.jsx(
+        !Fe && /* @__PURE__ */ M.jsx(
           "button",
           {
             type: "button",
             onClick: ze,
             className: "absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
-            children: Q ? Be : Ne
+            children: Q ? Oe : Ne
           }
         ),
         a === "blackboard" && o === "markdown" ? /* @__PURE__ */ M.jsx("div", { onClick: () => He("click"), children: /* @__PURE__ */ M.jsx(
-          Ze,
+          Je,
           {
             content: c,
-            locale: S,
-            disableSandboxLoadingOverlay: Y
+            locale: E,
+            disableSandboxLoadingOverlay: U
           }
         ) }) : /* @__PURE__ */ M.jsx(
           "iframe",
@@ -401,6 +402,6 @@ const ot = () => (le || (le = import("./blackboard-vendor.es.js").then(
   );
 };
 export {
-  xt as default
+  St as default
 };
 //# sourceMappingURL=IframeSandbox.es.js.map