digi-mathchem-editor 1.0.4 → 1.0.5

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

@@ -1,5 +1,5 @@
-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 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 { 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, X = parseInt(m.c, 10) || 0, J = f < P && M < X;
+      const P = parseInt(m.r, 10) || 0, Q = parseInt(m.c, 10) || 0, J = f < P && M < Q;
       return /* @__PURE__ */ e.createElement(
         "div",
         {
           key: `${f}-${M}`,
           className: `cme-matrix-hover-cell${J ? " selected" : ""}`,
           onMouseEnter: () => k({ r: f + 1, c: M + 1 }),
-          onClick: (K) => {
-            K.preventDefault(), K.stopPropagation(), s(f + 1, M + 1);
+          onClick: (X) => {
+            X.preventDefault(), X.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 = 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);
+  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);
   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 = () => X(!1);
+    }, i = () => Q(!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;
-    X(!0), J.current = {
+    Q(!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 _ = { 1: "\\tiny", 2: "\\scriptsize", 3: "\\footnotesize", 4: "\\small", 5: "\\normalsize", 6: "\\large", 7: "\\Large", 8: "\\LARGE", 9: "\\huge", 10: "\\Huge" };
-          _[z] && (R = `{${_[z]} ${R}}`);
+          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}}`);
         }
         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() : Y(!0);
+    !a || a.trim() === "" || a === d ? n && n() : K(!0);
   }, Re = () => {
     const t = U;
     if (!t) return;
@@ -4014,7 +4014,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: `cme-editor-popup ${K ? "maximized" : ""} ${Te ? "minimized" : ""}`,
+      className: `cme-editor-popup ${X ? "maximized" : ""} ${Te ? "minimized" : ""}`,
       style: { transform: `translate(${C.x}px, ${C.y}px)` },
       onMouseDown: (t) => t.stopPropagation()
     },
@@ -4105,13 +4105,13 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
         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 : "";
+            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: ee,
+                className: `cme-btn template${_ || G ? " active" : ""}`,
+                value: $,
                 style: {
                   width: c.width || "60px",
                   height: "18px",
@@ -4125,8 +4125,8 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
                   margin: "2px 0",
                   gridColumn: b.cols === 3 || b.cols === 1 ? "span 1" : "span 2"
                 },
-                onChange: (te) => {
-                  const F = te.target.value, H = U;
+                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());
                 }
               },
@@ -4185,7 +4185,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
                 )
               )
             );
-          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";
+          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",
             {
@@ -4194,7 +4194,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
               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;
+                var _, G, $, ee, F, H, ue;
                 N.preventDefault();
                 const v = h.current;
                 if (c.action === "SPECIAL_CHARS") {
@@ -4227,7 +4227,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
                     }
                     se((S) => ({ ...S, italic: A }));
                   }
-                } 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) => {
+                } 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) => {
@@ -4261,7 +4261,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
         })
       ));
     })())),
-    p && Q(/* @__PURE__ */ e.createElement(
+    p && le(/* @__PURE__ */ e.createElement(
       "div",
       {
         ref: (t) => {
@@ -4345,17 +4345,14 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
       )
     ),
     /* @__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 && Q(
-      /* @__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")))),
-      document.body
-    ),
-    x && Q(
+    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(
       /* @__PURE__ */ e.createElement(
         Ge,
         {
@@ -4373,7 +4370,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
       ),
       document.body
     ),
-    E && Q(
+    E && le(
       /* @__PURE__ */ e.createElement(
         je,
         {
@@ -4387,7 +4384,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: r })
       ),
       document.body
     ),
-    g && Q(
+    g && le(
       /* @__PURE__ */ e.createElement(
         "div",
         {