digi-mathchem-editor 1.0.5 → 1.0.7

package/dist/digi-mathchem-editor.es.js

@@ -1,5 +1,5 @@
-import e, { useState as W, useEffect as O, useMemo as we, useRef as te, useCallback as ce } from "react";
-import { createPortal as le } from "react-dom";
+import e, { useState as W, useEffect as O, useMemo as we, useRef as le, useCallback as ce } from "react";
+import { createPortal as Q } from "react-dom";
 import { FontAwesomeIcon as ie } from "@fortawesome/react-fontawesome";
 import { faBold as fe, faItalic as ve } from "@fortawesome/free-solid-svg-icons";
 import { MathfieldElement as xe } from "mathlive";
@@ -3752,15 +3752,15 @@ function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: r, onMouseLe
       onMouseLeave: h
     },
     /* @__PURE__ */ e.createElement("div", { className: "cme-matrix-hover-grid" }, Array.from({ length: x }).map((p, f) => /* @__PURE__ */ e.createElement("div", { key: f, className: "cme-matrix-hover-row" }, Array.from({ length: B }).map((C, M) => {
-      const P = parseInt(m.r, 10) || 0, Q = parseInt(m.c, 10) || 0, J = f < P && M < Q;
+      const P = parseInt(m.r, 10) || 0, X = parseInt(m.c, 10) || 0, J = f < P && M < X;
       return /* @__PURE__ */ e.createElement(
         "div",
         {
           key: `${f}-${M}`,
           className: `cme-matrix-hover-cell${J ? " selected" : ""}`,
           onMouseEnter: () => k({ r: f + 1, c: M + 1 }),
-          onClick: (X) => {
-            X.preventDefault(), X.stopPropagation(), s(f + 1, M + 1);
+          onClick: (K) => {
+            K.preventDefault(), K.stopPropagation(), s(f + 1, M + 1);
           }
         }
       );
@@ -3804,9 +3804,9 @@ function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: r, onMouseLe
 }
 let Z = !1, de = null, U = null;
 function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r }) {
-  const h = te(null), [m, k] = W(0), [x, B] = W(null), [E, D] = W(null), [g, y] = W(null), [p, f] = W(null);
-  te(null);
-  const [C, M] = W({ x: 0, y: 0 }), [P, Q] = W(!1), J = te({ x: 0, y: 0 }), [X, be] = W(!1), [Te, ge] = W(!1), [We, K] = W(!1), oe = te(null);
+  const h = le(null), [m, k] = W(0), [x, B] = W(null), [E, D] = W(null), [g, y] = W(null), [p, f] = W(null);
+  le(null);
+  const [C, M] = W({ x: 0, y: 0 }), [P, X] = W(!1), J = le({ x: 0, y: 0 }), [K, be] = W(!1), [Te, ge] = W(!1), [We, Y] = W(!1), oe = le(null);
   O(() => {
     const t = (a) => {
       if (!P) return;
@@ -3816,14 +3816,14 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
         d < c && (d = c), d > T && (d = T), b < L && (b = L), b > R && (b = R);
       }
       M({ x: d, y: b });
-    }, i = () => Q(!1);
+    }, i = () => X(!1);
     return P && (window.addEventListener("mousemove", t), window.addEventListener("mouseup", i)), () => {
       window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", i);
     };
   }, [P]);
   const Ie = (t) => {
     if (t.target.closest(".cme-popup-controls")) return;
-    Q(!0), J.current = {
+    X(!0), J.current = {
       x: t.clientX - C.x,
       y: t.clientY - C.y
     };
@@ -3945,8 +3945,8 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
         let R = L;
         const z = u.fontSize === "auto" ? 5 : parseInt(u.fontSize, 10);
         if (z !== 5) {
-          const Y = { 1: "\\tiny", 2: "\\scriptsize", 3: "\\footnotesize", 4: "\\small", 5: "\\normalsize", 6: "\\large", 7: "\\Large", 8: "\\LARGE", 9: "\\huge", 10: "\\Huge" };
-          Y[z] && (R = `{${Y[z]} ${R}}`);
+          const _ = { 1: "\\tiny", 2: "\\scriptsize", 3: "\\footnotesize", 4: "\\small", 5: "\\normalsize", 6: "\\large", 7: "\\Large", 8: "\\LARGE", 9: "\\huge", 10: "\\Huge" };
+          _[z] && (R = `{${_[z]} ${R}}`);
         }
         u.color !== "none" && (R = `\\textcolor{${u.color}}{${R}}`), t.executeCommand(["insert", R]);
         return;
@@ -4000,7 +4000,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
       return;
     }
     const a = i.getValue ? i.getValue("latex") : i.value, d = s || "";
-    !a || a.trim() === "" || a === d ? n && n() : K(!0);
+    !a || a.trim() === "" || a === d ? n && n() : Y(!0);
   }, Re = () => {
     const t = U;
     if (!t) return;
@@ -4011,450 +4011,453 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
     }
     l === "chem" && (i = _e(i)), i = ne(i), o && o(i), t.setValue ? t.setValue("") : t.value = "", n && n();
   };
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: `cme-editor-popup ${X ? "maximized" : ""} ${Te ? "minimized" : ""}`,
-      style: { transform: `translate(${C.x}px, ${C.y}px)` },
-      onMouseDown: (t) => t.stopPropagation()
-    },
-    /* @__PURE__ */ e.createElement("div", { className: "cme-popup-topbar" }, /* @__PURE__ */ e.createElement(
+  return Q(
+    /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: "cme-popup-header",
-        onMouseDown: Ie,
-        style: { cursor: P ? "grabbing" : "grab" }
+        className: `cme-editor-popup ${K ? "maximized" : ""} ${Te ? "minimized" : ""}`,
+        style: { transform: `translate(${C.x}px, ${C.y}px)` },
+        onMouseDown: (t) => t.stopPropagation()
       },
-      /* @__PURE__ */ e.createElement("span", null, r ? l === "math" ? "Edit Math Formula" : "Edit Chemistry Formula" : l === "math" ? "Math Editor" : "Chemistry Editor")
-    ), /* @__PURE__ */ e.createElement("div", { className: "cme-popup-controls" }, /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-popup-btn", onClick: Ne, title: "Minimize" }, "—"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-popup-btn", onClick: De, title: "Maximize" }, "⤢"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-popup-btn", onClick: ke, title: "Close" }, "✕"))),
-    /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar", role: "toolbar", "aria-label": "Symbol palette" }, /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar-groups" }, q.map((t, i) => {
-      const a = m === i;
-      return /* @__PURE__ */ e.createElement(
-        "button",
-        {
-          key: t.isMatrix ? "matrix-tab" : t.label,
-          className: `cme-group-tab${a ? " active" : ""}`,
-          type: "button",
-          onMouseDown: (d) => {
-            d.preventDefault(), k(i), B(null);
-          }
-        },
-        t.mathLabel ? /* @__PURE__ */ e.createElement(
-          "math-field",
-          {
-            "read-only": !0,
-            tabIndex: -1,
-            style: {
-              pointerEvents: "none",
-              background: "transparent",
-              border: "none",
-              outline: "none",
-              fontSize: t.fontSize || (t.isMatrix ? "8px" : "11px"),
-              display: "inline-block",
-              width: "auto",
-              minHeight: "auto",
-              padding: "0",
-              margin: "0",
-              boxShadow: "none",
-              color: a ? "#333333" : "#ffffff"
-            }
-          },
-          t.mathLabel
-        ) : t.label
-      );
-    })), /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar-items" }, (() => {
-      var d;
-      const t = ((d = q[m]) == null ? void 0 : d.items) || [], i = t.some((b) => b.type === "sep"), a = [];
-      if (i) {
-        let b = { cols: 2, small: !1, cls: "", items: [], moreItems: null };
-        for (const w of t)
-          w.type === "sep" ? (b.items.length > 0 && a.push(b), b = { cols: w.cols || 2, small: !!w.small, cls: w.cls || "", items: [], moreItems: w.moreItems || null, moreCols: w.moreCols || 1 }) : b.items.push(w);
-        b.items.length > 0 && a.push(b);
-      } else
-        for (let w = 0; w < t.length; w += 4)
-          a.push({
-            cols: 2,
-            small: !1,
-            cls: "",
-            items: t.slice(w, w + 4)
-          });
-      return a.map((b, w) => /* @__PURE__ */ e.createElement(
+      /* @__PURE__ */ e.createElement("div", { className: "cme-popup-topbar" }, /* @__PURE__ */ e.createElement(
         "div",
         {
-          key: w,
-          className: `cme-symbol-subgroup${b.small ? " cme-symbol-subgroup--small" : ""}${b.cls ? ` ${b.cls}` : ""}${b.moreItems ? " cme-subgroup-has-more" : ""}`,
-          style: { gridTemplateColumns: `repeat(${b.cols}, auto)`, position: "relative" }
+          className: "cme-popup-header",
+          onMouseDown: Ie,
+          style: { cursor: P ? "grabbing" : "grab" }
         },
-        b.moreItems && /* @__PURE__ */ e.createElement(
+        /* @__PURE__ */ e.createElement("span", null, r ? l === "math" ? "Edit Math Formula" : "Edit Chemistry Formula" : l === "math" ? "Math Editor" : "Chemistry Editor")
+      ), /* @__PURE__ */ e.createElement("div", { className: "cme-popup-controls" }, /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-popup-btn", onClick: Ne, title: "Minimize" }, "—"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-popup-btn", onClick: De, title: "Maximize" }, "⤢"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-popup-btn", onClick: ke, title: "Close" }, "✕"))),
+      /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar", role: "toolbar", "aria-label": "Symbol palette" }, /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar-groups" }, q.map((t, i) => {
+        const a = m === i;
+        return /* @__PURE__ */ e.createElement(
           "button",
           {
+            key: t.isMatrix ? "matrix-tab" : t.label,
+            className: `cme-group-tab${a ? " active" : ""}`,
             type: "button",
-            className: "cme-more-trigger-btn",
-            title: "more",
-            onMouseDown: (c) => {
-              if (c.preventDefault(), p && p.items === b.moreItems)
-                f(null);
-              else {
-                const T = c.currentTarget.getBoundingClientRect();
-                f({ cx: T.left + T.width / 2, y: T.bottom, items: b.moreItems, cols: b.moreCols, isTemplate: q[m].isTemplate || q[m].label === "√(□)" || q[m].isMatrix });
-              }
+            onMouseDown: (d) => {
+              d.preventDefault(), k(i), B(null);
             }
           },
-          "▶"
-        ),
-        b.items.map((c, T) => {
-          const L = q[m];
-          if (c.type === "dropdown") {
-            const N = c.label === "Font...", v = c.label === "Size", _ = N && u.fontFamily !== "none", G = v && u.fontSize !== "auto" && u.fontSize !== "5", $ = N ? u.fontFamily === "none" ? "" : u.fontFamily : v ? u.fontSize === "auto" || u.fontSize === "5" ? "" : u.fontSize : "";
-            return /* @__PURE__ */ e.createElement(
-              "select",
-              {
-                key: T,
-                className: `cme-btn template${_ || G ? " active" : ""}`,
-                value: $,
-                style: {
-                  width: c.width || "60px",
-                  height: "18px",
-                  minHeight: "18px",
-                  maxHeight: "18px",
-                  lineHeight: "18px",
-                  boxSizing: "border-box",
-                  marginTop: "10px",
-                  fontSize: "10px",
-                  padding: "0",
-                  margin: "2px 0",
-                  gridColumn: b.cols === 3 || b.cols === 1 ? "span 1" : "span 2"
-                },
-                onChange: (ee) => {
-                  const F = ee.target.value, H = U;
-                  !H || typeof H.applyStyle != "function" || (H.focus(), N ? H.applyStyle({ fontFamily: F || "none" }) : v && H.applyStyle({ fontSize: F ? parseInt(F, 10) : "auto" }), V());
+          t.mathLabel ? /* @__PURE__ */ e.createElement(
+            "math-field",
+            {
+              "read-only": !0,
+              tabIndex: -1,
+              style: {
+                pointerEvents: "none",
+                background: "transparent",
+                border: "none",
+                outline: "none",
+                fontSize: t.fontSize || (t.isMatrix ? "8px" : "11px"),
+                display: "inline-block",
+                width: "auto",
+                minHeight: "auto",
+                padding: "0",
+                margin: "0",
+                boxShadow: "none",
+                color: a ? "#333333" : "#ffffff"
+              }
+            },
+            t.mathLabel
+          ) : t.label
+        );
+      })), /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar-items" }, (() => {
+        var d;
+        const t = ((d = q[m]) == null ? void 0 : d.items) || [], i = t.some((b) => b.type === "sep"), a = [];
+        if (i) {
+          let b = { cols: 2, small: !1, cls: "", items: [], moreItems: null };
+          for (const w of t)
+            w.type === "sep" ? (b.items.length > 0 && a.push(b), b = { cols: w.cols || 2, small: !!w.small, cls: w.cls || "", items: [], moreItems: w.moreItems || null, moreCols: w.moreCols || 1 }) : b.items.push(w);
+          b.items.length > 0 && a.push(b);
+        } else
+          for (let w = 0; w < t.length; w += 4)
+            a.push({
+              cols: 2,
+              small: !1,
+              cls: "",
+              items: t.slice(w, w + 4)
+            });
+        return a.map((b, w) => /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            key: w,
+            className: `cme-symbol-subgroup${b.small ? " cme-symbol-subgroup--small" : ""}${b.cls ? ` ${b.cls}` : ""}${b.moreItems ? " cme-subgroup-has-more" : ""}`,
+            style: { gridTemplateColumns: `repeat(${b.cols}, auto)`, position: "relative" }
+          },
+          b.moreItems && /* @__PURE__ */ e.createElement(
+            "button",
+            {
+              type: "button",
+              className: "cme-more-trigger-btn",
+              title: "more",
+              onMouseDown: (c) => {
+                if (c.preventDefault(), p && p.items === b.moreItems)
+                  f(null);
+                else {
+                  const T = c.currentTarget.getBoundingClientRect();
+                  f({ cx: T.left + T.width / 2, y: T.bottom, items: b.moreItems, cols: b.moreCols, isTemplate: q[m].isTemplate || q[m].label === "√(□)" || q[m].isMatrix });
                 }
-              },
-              /* @__PURE__ */ e.createElement("option", { value: "" }, c.label),
-              N && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("option", { value: "roman" }, "Times"), /* @__PURE__ */ e.createElement("option", { value: "sans-serif" }, "Helvetica"), /* @__PURE__ */ e.createElement("option", { value: "monospace" }, "Courier")),
-              v && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("option", { value: "5" }, "12px"), /* @__PURE__ */ e.createElement("option", { value: "7" }, "16px"), /* @__PURE__ */ e.createElement("option", { value: "9" }, "20px"))
-            );
-          }
-          if (L.isMatrix && !c.directInsert)
-            return /* @__PURE__ */ e.createElement(
-              "div",
-              {
-                key: T,
-                className: "cme-matrix-btn-wrapper"
-              },
-              /* @__PURE__ */ e.createElement(
-                "button",
+              }
+            },
+            "▶"
+          ),
+          b.items.map((c, T) => {
+            const L = q[m];
+            if (c.type === "dropdown") {
+              const N = c.label === "Font...", v = c.label === "Size", G = N && u.fontFamily !== "none", $ = v && u.fontSize !== "auto" && u.fontSize !== "5", ee = N ? u.fontFamily === "none" ? "" : u.fontFamily : v ? u.fontSize === "auto" || u.fontSize === "5" ? "" : u.fontSize : "";
+              return /* @__PURE__ */ e.createElement(
+                "select",
                 {
-                  type: "button",
-                  className: `cme-btn template${c.cls ? ` ${c.cls}` : ""}${L.isMatrix ? " cme-matrix-btn-small" : ""}`,
-                  title: c.title || c.label || c.insert,
-                  onMouseDown: (N) => {
-                    if (N.preventDefault(), N.stopPropagation(), (x == null ? void 0 : x.type) === c.insert)
-                      B(null);
-                    else {
-                      Z || (window.__cmeManualBold = void 0, window.__cmeManualItalic = void 0, window.__cmeManualFontFamily = void 0, window.__cmeManualFontSize = void 0);
-                      const v = N.currentTarget.getBoundingClientRect();
-                      B({
-                        type: c.insert,
-                        x: v.left + v.width / 2,
-                        y: v.bottom
-                      });
-                    }
+                  key: T,
+                  className: `cme-btn template${G || $ ? " active" : ""}`,
+                  value: ee,
+                  style: {
+                    width: c.width || "60px",
+                    height: "18px",
+                    minHeight: "18px",
+                    maxHeight: "18px",
+                    lineHeight: "18px",
+                    boxSizing: "border-box",
+                    marginTop: "10px",
+                    fontSize: "10px",
+                    padding: "0",
+                    margin: "2px 0",
+                    gridColumn: b.cols === 3 || b.cols === 1 ? "span 1" : "span 2"
+                  },
+                  onChange: (te) => {
+                    const F = te.target.value, H = U;
+                    !H || typeof H.applyStyle != "function" || (H.focus(), N ? H.applyStyle({ fontFamily: F || "none" }) : v && H.applyStyle({ fontSize: F ? parseInt(F, 10) : "auto" }), V());
                   }
                 },
-                typeof c.label == "object" ? c.label : /* @__PURE__ */ e.createElement(
-                  "math-field",
+                /* @__PURE__ */ e.createElement("option", { value: "" }, c.label),
+                N && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("option", { value: "roman" }, "Times"), /* @__PURE__ */ e.createElement("option", { value: "sans-serif" }, "Helvetica"), /* @__PURE__ */ e.createElement("option", { value: "monospace" }, "Courier")),
+                v && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("option", { value: "5" }, "12px"), /* @__PURE__ */ e.createElement("option", { value: "7" }, "16px"), /* @__PURE__ */ e.createElement("option", { value: "9" }, "20px"))
+              );
+            }
+            if (L.isMatrix && !c.directInsert)
+              return /* @__PURE__ */ e.createElement(
+                "div",
+                {
+                  key: T,
+                  className: "cme-matrix-btn-wrapper"
+                },
+                /* @__PURE__ */ e.createElement(
+                  "button",
                   {
-                    "read-only": !0,
-                    style: {
-                      pointerEvents: "none",
-                      background: "transparent",
-                      border: "none",
-                      outline: "none",
-                      fontSize: "12px",
-                      display: "inline-block",
-                      width: "auto",
-                      minHeight: "auto",
-                      padding: "0",
-                      margin: "0",
-                      boxShadow: "none",
-                      cursor: "pointer"
+                    type: "button",
+                    className: `cme-btn template${c.cls ? ` ${c.cls}` : ""}${L.isMatrix ? " cme-matrix-btn-small" : ""}`,
+                    title: c.title || c.label || c.insert,
+                    onMouseDown: (N) => {
+                      if (N.preventDefault(), N.stopPropagation(), (x == null ? void 0 : x.type) === c.insert)
+                        B(null);
+                      else {
+                        Z || (window.__cmeManualBold = void 0, window.__cmeManualItalic = void 0, window.__cmeManualFontFamily = void 0, window.__cmeManualFontSize = void 0);
+                        const v = N.currentTarget.getBoundingClientRect();
+                        B({
+                          type: c.insert,
+                          x: v.left + v.width / 2,
+                          y: v.bottom
+                        });
+                      }
                     }
                   },
-                  me(c.mathLabel != null ? c.mathLabel : c.insert)
+                  typeof c.label == "object" ? c.label : /* @__PURE__ */ e.createElement(
+                    "math-field",
+                    {
+                      "read-only": !0,
+                      style: {
+                        pointerEvents: "none",
+                        background: "transparent",
+                        border: "none",
+                        outline: "none",
+                        fontSize: "12px",
+                        display: "inline-block",
+                        width: "auto",
+                        minHeight: "auto",
+                        padding: "0",
+                        margin: "0",
+                        boxShadow: "none",
+                        cursor: "pointer"
+                      }
+                    },
+                    me(c.mathLabel != null ? c.mathLabel : c.insert)
+                  )
                 )
-              )
-            );
-          const R = c.action === "BOLD", z = c.action === "ITALIC", Y = c.action === "TEXT_COLOR", Oe = R && u.bold || z && u.italic || Y && u.color !== "none" && u.color !== "black";
-          return /* @__PURE__ */ e.createElement(
-            "button",
-            {
-              key: `${L.label}-${w * 4 + T}`,
-              type: "button",
-              className: `cme-btn${L.isTemplate ? " template" : ""}${c.cls ? ` ${c.cls}` : ""}${Oe ? " active" : ""}`,
-              title: c.title || c.label || c.insert,
-              onMouseDown: (N) => {
-                var _, G, $, ee, F, H, ue;
-                N.preventDefault();
-                const v = h.current;
-                if (c.action === "SPECIAL_CHARS") {
-                  const A = N.currentTarget.getBoundingClientRect();
-                  D({ x: A.left, y: A.bottom + 4 });
-                } else if (c.action === "TEXT_COLOR") {
-                  const A = N.currentTarget.getBoundingClientRect();
-                  y({ x: A.left, y: A.bottom + 4 });
-                } else if (c.action === "BOLD") {
-                  if (v) {
-                    v.focus();
-                    const A = !u.bold;
-                    window.__cmeManualBold = A;
-                    const I = v.selection;
-                    if (I && !I.isCollapsed) {
-                      let S = v.getValue(I);
-                      S = S.replace(/\\mathrm{([^}]*)}/g, "$1").replace(/\\mathbf{([^}]*)}/g, "$1").replace(/\\mathit{([^}]*)}/g, "$1").replace(/\\mathbfit{([^}]*)}/g, "$1"), A && u.italic ? v.executeCommand(["insert", `\\mathbfit{${S}}`]) : A ? v.executeCommand(["insert", `\\mathbf{${S}}`]) : u.italic ? v.executeCommand(["insert", `\\mathit{${S}}`]) : v.executeCommand(["insert", `\\mathrm{${S}}`]);
+              );
+            const R = c.action === "BOLD", z = c.action === "ITALIC", _ = c.action === "TEXT_COLOR", Oe = R && u.bold || z && u.italic || _ && u.color !== "none" && u.color !== "black";
+            return /* @__PURE__ */ e.createElement(
+              "button",
+              {
+                key: `${L.label}-${w * 4 + T}`,
+                type: "button",
+                className: `cme-btn${L.isTemplate ? " template" : ""}${c.cls ? ` ${c.cls}` : ""}${Oe ? " active" : ""}`,
+                title: c.title || c.label || c.insert,
+                onMouseDown: (N) => {
+                  var G, $, ee, te, F, H, ue;
+                  N.preventDefault();
+                  const v = h.current;
+                  if (c.action === "SPECIAL_CHARS") {
+                    const A = N.currentTarget.getBoundingClientRect();
+                    D({ x: A.left, y: A.bottom + 4 });
+                  } else if (c.action === "TEXT_COLOR") {
+                    const A = N.currentTarget.getBoundingClientRect();
+                    y({ x: A.left, y: A.bottom + 4 });
+                  } else if (c.action === "BOLD") {
+                    if (v) {
+                      v.focus();
+                      const A = !u.bold;
+                      window.__cmeManualBold = A;
+                      const I = v.selection;
+                      if (I && !I.isCollapsed) {
+                        let S = v.getValue(I);
+                        S = S.replace(/\\mathrm{([^}]*)}/g, "$1").replace(/\\mathbf{([^}]*)}/g, "$1").replace(/\\mathit{([^}]*)}/g, "$1").replace(/\\mathbfit{([^}]*)}/g, "$1"), A && u.italic ? v.executeCommand(["insert", `\\mathbfit{${S}}`]) : A ? v.executeCommand(["insert", `\\mathbf{${S}}`]) : u.italic ? v.executeCommand(["insert", `\\mathit{${S}}`]) : v.executeCommand(["insert", `\\mathrm{${S}}`]);
+                      }
+                      se((S) => ({ ...S, bold: A }));
                     }
-                    se((S) => ({ ...S, bold: A }));
-                  }
-                } else if (c.action === "ITALIC") {
-                  if (v) {
-                    v.focus();
-                    const A = !u.italic;
-                    window.__cmeManualItalic = A;
-                    const I = v.selection;
-                    if (I && !I.isCollapsed) {
-                      let S = v.getValue(I);
-                      S = S.replace(/\\mathrm{([^}]*)}/g, "$1").replace(/\\mathbf{([^}]*)}/g, "$1").replace(/\\mathit{([^}]*)}/g, "$1").replace(/\\mathbfit{([^}]*)}/g, "$1"), u.bold && A ? v.executeCommand(["insert", `\\mathbfit{${S}}`]) : u.bold ? v.executeCommand(["insert", `\\mathbf{${S}}`]) : A ? v.executeCommand(["insert", `\\mathit{${S}}`]) : v.executeCommand(["insert", `\\mathrm{${S}}`]);
+                  } else if (c.action === "ITALIC") {
+                    if (v) {
+                      v.focus();
+                      const A = !u.italic;
+                      window.__cmeManualItalic = A;
+                      const I = v.selection;
+                      if (I && !I.isCollapsed) {
+                        let S = v.getValue(I);
+                        S = S.replace(/\\mathrm{([^}]*)}/g, "$1").replace(/\\mathbf{([^}]*)}/g, "$1").replace(/\\mathit{([^}]*)}/g, "$1").replace(/\\mathbfit{([^}]*)}/g, "$1"), u.bold && A ? v.executeCommand(["insert", `\\mathbfit{${S}}`]) : u.bold ? v.executeCommand(["insert", `\\mathbf{${S}}`]) : A ? v.executeCommand(["insert", `\\mathit{${S}}`]) : v.executeCommand(["insert", `\\mathrm{${S}}`]);
+                      }
+                      se((S) => ({ ...S, italic: A }));
                     }
-                    se((S) => ({ ...S, italic: A }));
-                  }
-                } else c.action === "UNDO" ? (_ = h.current) == null || _.executeCommand("undo") : c.action === "REDO" ? (G = h.current) == null || G.executeCommand("redo") : c.action === "CUT" ? (($ = h.current) == null || $.focus(), (ee = h.current) == null || ee.executeCommand("cutToClipboard")) : c.action === "COPY" ? ((F = h.current) == null || F.focus(), (H = h.current) == null || H.executeCommand("copyToClipboard")) : c.action === "PASTE" ? ((ue = h.current) == null || ue.focus(), navigator.clipboard.readText().then((A) => {
-                  var I;
-                  (I = h.current) == null || I.executeCommand(["insert", A]);
-                }).catch((A) => {
-                  var I;
-                  (I = h.current) == null || I.executeCommand("pasteFromClipboard");
-                })) : j(c.insert);
-              }
-            },
-            (L.isTemplate || L.label === "√(□)" || L.isMatrix || c.isWidget) && c.insert && !c.action && !c.forceLabel ? /* @__PURE__ */ e.createElement(
-              "math-field",
-              {
-                "read-only": !0,
-                style: {
-                  pointerEvents: "none",
-                  background: "transparent",
-                  border: "none",
-                  outline: "none",
-                  fontSize: "12px",
-                  display: "inline-block",
-                  width: "auto",
-                  minHeight: "auto",
-                  padding: "0",
-                  margin: "0",
-                  boxShadow: "none",
-                  cursor: "pointer"
+                  } else c.action === "UNDO" ? (G = h.current) == null || G.executeCommand("undo") : c.action === "REDO" ? ($ = h.current) == null || $.executeCommand("redo") : c.action === "CUT" ? ((ee = h.current) == null || ee.focus(), (te = h.current) == null || te.executeCommand("cutToClipboard")) : c.action === "COPY" ? ((F = h.current) == null || F.focus(), (H = h.current) == null || H.executeCommand("copyToClipboard")) : c.action === "PASTE" ? ((ue = h.current) == null || ue.focus(), navigator.clipboard.readText().then((A) => {
+                    var I;
+                    (I = h.current) == null || I.executeCommand(["insert", A]);
+                  }).catch((A) => {
+                    var I;
+                    (I = h.current) == null || I.executeCommand("pasteFromClipboard");
+                  })) : j(c.insert);
                 }
               },
-              me(c.insert)
-            ) : c.label
-          );
-        })
-      ));
-    })())),
-    p && le(/* @__PURE__ */ e.createElement(
-      "div",
-      {
-        ref: (t) => {
-          t && requestAnimationFrame(() => {
-            const i = t.getBoundingClientRect(), a = document.querySelector(".cme-editor-popup");
-            let d = p.cx - i.width / 2, b = p.y;
-            if (a) {
-              const w = a.getBoundingClientRect();
-              d + i.width > w.right - 4 && (d = w.right - i.width - 4), d < w.left + 4 && (d = w.left + 4), b + i.height > w.bottom - 4 && (b = w.bottom - i.height - 4);
-            }
-            d + i.width > window.innerWidth - 4 && (d = window.innerWidth - i.width - 4), b + i.height > window.innerHeight - 4 && (b = window.innerHeight - i.height - 4), d < 4 && (d = 4), t.style.left = `${d}px`, t.style.top = `${b}px`, t.style.transform = "none", t.style.visibility = "visible";
-          });
-        },
-        className: "cme-more-popup",
-        style: {
-          position: "fixed",
-          left: `${p.cx}px`,
-          top: `${p.y}px`,
-          transform: "translateX(-50%)",
-          visibility: "hidden",
-          zIndex: 1e5,
-          gridTemplateColumns: `repeat(${p.cols || 1}, auto)`
-        }
-      },
-      p.items.map((t, i) => /* @__PURE__ */ e.createElement(
-        "button",
+              (L.isTemplate || L.label === "√(□)" || L.isMatrix || c.isWidget) && c.insert && !c.action && !c.forceLabel ? /* @__PURE__ */ e.createElement(
+                "math-field",
+                {
+                  "read-only": !0,
+                  style: {
+                    pointerEvents: "none",
+                    background: "transparent",
+                    border: "none",
+                    outline: "none",
+                    fontSize: "12px",
+                    display: "inline-block",
+                    width: "auto",
+                    minHeight: "auto",
+                    padding: "0",
+                    margin: "0",
+                    boxShadow: "none",
+                    cursor: "pointer"
+                  }
+                },
+                me(c.insert)
+              ) : c.label
+            );
+          })
+        ));
+      })())),
+      p && Q(/* @__PURE__ */ e.createElement(
+        "div",
         {
-          key: i,
-          type: "button",
-          className: `cme-more-popup-btn ${t.cls || ""}`,
-          title: t.title || t.label || t.insert,
-          onMouseDown: (a) => {
-            a.preventDefault(), j(t.insert), f(null);
+          ref: (t) => {
+            t && requestAnimationFrame(() => {
+              const i = t.getBoundingClientRect(), a = document.querySelector(".cme-editor-popup");
+              let d = p.cx - i.width / 2, b = p.y;
+              if (a) {
+                const w = a.getBoundingClientRect();
+                d + i.width > w.right - 4 && (d = w.right - i.width - 4), d < w.left + 4 && (d = w.left + 4), b + i.height > w.bottom - 4 && (b = w.bottom - i.height - 4);
+              }
+              d + i.width > window.innerWidth - 4 && (d = window.innerWidth - i.width - 4), b + i.height > window.innerHeight - 4 && (b = window.innerHeight - i.height - 4), d < 4 && (d = 4), t.style.left = `${d}px`, t.style.top = `${b}px`, t.style.transform = "none", t.style.visibility = "visible";
+            });
+          },
+          className: "cme-more-popup",
+          style: {
+            position: "fixed",
+            left: `${p.cx}px`,
+            top: `${p.y}px`,
+            transform: "translateX(-50%)",
+            visibility: "hidden",
+            zIndex: 1e5,
+            gridTemplateColumns: `repeat(${p.cols || 1}, auto)`
           }
         },
-        t.insert && !t.action && (t.cls === "template" || t.isWidget) ? /* @__PURE__ */ e.createElement(
-          "math-field",
+        p.items.map((t, i) => /* @__PURE__ */ e.createElement(
+          "button",
           {
-            "read-only": !0,
-            style: {
-              pointerEvents: "none",
-              background: "transparent",
-              border: "none",
-              outline: "none",
-              fontSize: "12px",
-              display: "inline-block",
-              width: "auto",
-              minHeight: "auto",
-              padding: "0",
-              margin: "0",
-              boxShadow: "none",
-              cursor: "pointer"
+            key: i,
+            type: "button",
+            className: `cme-more-popup-btn ${t.cls || ""}`,
+            title: t.title || t.label || t.insert,
+            onMouseDown: (a) => {
+              a.preventDefault(), j(t.insert), f(null);
             }
           },
-          me(t.mathLabel != null ? t.mathLabel : t.insert)
-        ) : t.label
-      ))
-    ), document.body),
-    /* @__PURE__ */ e.createElement(
-      "div",
-      {
-        className: "cme-mathfield-container",
-        onMouseDown: (t) => {
-          h.current && (t.target === h.current || h.current.contains(t.target)) || (t.preventDefault(), requestAnimationFrame(() => {
-            var i, a;
-            (a = (i = h.current) == null ? void 0 : i.focus) == null || a.call(i);
-          }));
-        }
-      },
-      /* @__PURE__ */ e.createElement(
-        "math-field",
-        {
-          ref: (t) => {
-            h.current = t, U = t;
-          },
-          class: "cme-mathfield",
-          tabIndex: 0,
-          "math-virtual-keyboard-policy": "manual",
-          placeholder: ""
-        }
-      )
-    ),
-    /* @__PURE__ */ e.createElement("div", { className: "cme-popup-footer" }, /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-insert-btn", onClick: Re }, r ? "Update" : "Insert"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-cancel-btn", onClick: ke }, "Cancel")),
-    We && /* @__PURE__ */ e.createElement("div", { className: "cme-confirm-overlay", onMouseDown: (t) => {
-      t.stopPropagation(), K(!1);
-    } }, /* @__PURE__ */ e.createElement("div", { className: "cme-confirm-modal", onMouseDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement("p", null, "Are you sure you want to leave? The changes you made will be lost."), /* @__PURE__ */ e.createElement("div", { className: "cme-confirm-actions" }, /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-confirm-close-btn", onClick: (t) => {
-      t.stopPropagation(), K(!1), n && n();
-    } }, "Close"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-confirm-cancel-btn", onClick: (t) => {
-      t.stopPropagation(), K(!1);
-    } }, "Cancel")))),
-    x && le(
+          t.insert && !t.action && (t.cls === "template" || t.isWidget) ? /* @__PURE__ */ e.createElement(
+            "math-field",
+            {
+              "read-only": !0,
+              style: {
+                pointerEvents: "none",
+                background: "transparent",
+                border: "none",
+                outline: "none",
+                fontSize: "12px",
+                display: "inline-block",
+                width: "auto",
+                minHeight: "auto",
+                padding: "0",
+                margin: "0",
+                boxShadow: "none",
+                cursor: "pointer"
+              }
+            },
+            me(t.mathLabel != null ? t.mathLabel : t.insert)
+          ) : t.label
+        ))
+      ), document.body),
       /* @__PURE__ */ e.createElement(
-        Ge,
+        "div",
         {
-          matrixType: x.type,
-          x: x.x,
-          y: x.y,
-          onSelect: (t, i) => {
-            Be(x.type, t, i), B(null);
-          },
-          onMouseEnter: () => {
-          },
-          onMouseLeave: () => {
+          className: "cme-mathfield-container",
+          onMouseDown: (t) => {
+            h.current && (t.target === h.current || h.current.contains(t.target)) || (t.preventDefault(), requestAnimationFrame(() => {
+              var i, a;
+              (a = (i = h.current) == null ? void 0 : i.focus) == null || a.call(i);
+            }));
           }
-        }
-      ),
-      document.body
-    ),
-    E && le(
-      /* @__PURE__ */ e.createElement(
-        je,
-        {
-          isOpen: !!E,
-          position: E,
-          onClose: () => D(null),
-          onInsert: (t) => {
-            j(t), D(null);
+        },
+        /* @__PURE__ */ e.createElement(
+          "math-field",
+          {
+            ref: (t) => {
+              h.current = t, U = t;
+            },
+            class: "cme-mathfield",
+            tabIndex: 0,
+            "math-virtual-keyboard-policy": "manual",
+            placeholder: ""
           }
-        }
+        )
       ),
-      document.body
-    ),
-    g && le(
-      /* @__PURE__ */ e.createElement(
-        "div",
-        {
-          className: "cme-color-picker-popup",
-          style: {
-            position: "fixed",
-            left: Math.min(g.x, window.innerWidth - 160) + "px",
-            top: Math.min(g.y, window.innerHeight - 100) + "px",
-            zIndex: 1e5,
-            background: "#fff",
-            border: "1px solid #ccc",
-            padding: "6px",
-            display: "grid",
-            gridTemplateColumns: "repeat(6, 1fr)",
-            gap: "4px",
-            borderRadius: "4px",
-            boxShadow: "0 2px 5px rgba(0,0,0,0.2)"
+      /* @__PURE__ */ e.createElement("div", { className: "cme-popup-footer" }, /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-insert-btn", onClick: Re }, r ? "Update" : "Insert"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-cancel-btn", onClick: ke }, "Cancel")),
+      We && /* @__PURE__ */ e.createElement("div", { className: "cme-confirm-overlay", onMouseDown: (t) => {
+        t.stopPropagation(), Y(!1);
+      } }, /* @__PURE__ */ e.createElement("div", { className: "cme-confirm-modal", onMouseDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement("p", null, "Are you sure you want to leave? The changes you made will be lost."), /* @__PURE__ */ e.createElement("div", { className: "cme-confirm-actions" }, /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-confirm-close-btn", onClick: (t) => {
+        t.stopPropagation(), Y(!1), n && n();
+      } }, "Close"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-confirm-cancel-btn", onClick: (t) => {
+        t.stopPropagation(), Y(!1);
+      } }, "Cancel")))),
+      x && Q(
+        /* @__PURE__ */ e.createElement(
+          Ge,
+          {
+            matrixType: x.type,
+            x: x.x,
+            y: x.y,
+            onSelect: (t, i) => {
+              Be(x.type, t, i), B(null);
+            },
+            onMouseEnter: () => {
+            },
+            onMouseLeave: () => {
+            }
           }
-        },
-        [
-          "black",
-          "dimgray",
-          "gray",
-          "darkgray",
-          "silver",
-          "white",
-          "red",
-          "orange",
-          "yellow",
-          "lime",
-          "cyan",
-          "blue",
-          "purple",
-          "magenta",
-          "pink",
-          "brown",
-          "maroon",
-          "olive",
-          "green",
-          "teal",
-          "navy",
-          "indigo",
-          "violet",
-          "gold"
-        ].map((t) => {
-          const i = u.color === t || t === "black" && (u.color === "none" || !u.color);
-          return /* @__PURE__ */ e.createElement(
-            "div",
-            {
-              key: t,
-              title: t,
-              style: {
-                width: "16px",
-                height: "16px",
-                backgroundColor: t,
-                cursor: "pointer",
-                border: i ? "2px solid #e6c229" : "1px solid #000",
-                boxSizing: "border-box"
-              },
-              onMouseDown: (a) => {
-                a.preventDefault(), a.stopPropagation();
-                const d = h.current;
-                d && typeof d.applyStyle == "function" && (d.focus(), d.applyStyle({ color: t === "black" ? "none" : t }), V()), y(null);
-              }
+        ),
+        document.body
+      ),
+      E && Q(
+        /* @__PURE__ */ e.createElement(
+          je,
+          {
+            isOpen: !!E,
+            position: E,
+            onClose: () => D(null),
+            onInsert: (t) => {
+              j(t), D(null);
             }
-          );
-        })
+          }
+        ),
+        document.body
       ),
-      document.body
-    )
+      g && Q(
+        /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            className: "cme-color-picker-popup",
+            style: {
+              position: "fixed",
+              left: Math.min(g.x, window.innerWidth - 160) + "px",
+              top: Math.min(g.y, window.innerHeight - 100) + "px",
+              zIndex: 1e5,
+              background: "#fff",
+              border: "1px solid #ccc",
+              padding: "6px",
+              display: "grid",
+              gridTemplateColumns: "repeat(6, 1fr)",
+              gap: "4px",
+              borderRadius: "4px",
+              boxShadow: "0 2px 5px rgba(0,0,0,0.2)"
+            }
+          },
+          [
+            "black",
+            "dimgray",
+            "gray",
+            "darkgray",
+            "silver",
+            "white",
+            "red",
+            "orange",
+            "yellow",
+            "lime",
+            "cyan",
+            "blue",
+            "purple",
+            "magenta",
+            "pink",
+            "brown",
+            "maroon",
+            "olive",
+            "green",
+            "teal",
+            "navy",
+            "indigo",
+            "violet",
+            "gold"
+          ].map((t) => {
+            const i = u.color === t || t === "black" && (u.color === "none" || !u.color);
+            return /* @__PURE__ */ e.createElement(
+              "div",
+              {
+                key: t,
+                title: t,
+                style: {
+                  width: "16px",
+                  height: "16px",
+                  backgroundColor: t,
+                  cursor: "pointer",
+                  border: i ? "2px solid #e6c229" : "1px solid #000",
+                  boxSizing: "border-box"
+                },
+                onMouseDown: (a) => {
+                  a.preventDefault(), a.stopPropagation();
+                  const d = h.current;
+                  d && typeof d.applyStyle == "function" && (d.focus(), d.applyStyle({ color: t === "black" ? "none" : t }), V()), y(null);
+                }
+              }
+            );
+          })
+        ),
+        document.body
+      )
+    ),
+    document.body
   );
 }
 const ot = ({ isOpen: l, mode: o, initialValue: n, onInsert: s, onClose: r }) => l ? /* @__PURE__ */ e.createElement(