digi-mathchem-editor 1.0.8 → 1.0.9

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

@@ -1,5 +1,5 @@
 import e, { useState as B, useEffect as O, useMemo as xe, useRef as re, useCallback as he } from "react";
-import { createPortal as z } from "react-dom";
+import { createPortal as Q } from "react-dom";
 import { FontAwesomeIcon as ae } from "@fortawesome/react-fontawesome";
 import { faBold as fe, faItalic as ve } from "@fortawesome/free-solid-svg-icons";
 import { MathfieldElement as Ee } from "mathlive";
@@ -326,7 +326,7 @@ function Fe() {
       }
       if (i.addedNodes)
         for (const c of i.addedNodes)
-          c instanceof Element && (((n = c.tagName) == null ? void 0 : n.toLowerCase()) === "math-field" && requestAnimationFrame(() => ie(c)), (s = c.querySelectorAll) == null || s.call(c, "math-field").forEach((h) => requestAnimationFrame(() => ie(h))));
+          c instanceof Element && (((n = c.tagName) == null ? void 0 : n.toLowerCase()) === "math-field" && requestAnimationFrame(() => ie(c)), (s = c.querySelectorAll) == null || s.call(c, "math-field").forEach((m) => requestAnimationFrame(() => ie(m))));
     }
   }), me.observe(document.body, {
     childList: !0,
@@ -361,36 +361,36 @@ const Ce = [
   }), l;
 }, Je = Ze();
 function je({ isOpen: l, onClose: o, onInsert: n, position: s }) {
-  const [i, c] = B(""), [h, u] = B("All");
+  const [i, c] = B(""), [m, u] = B("All");
   O(() => {
     l && (c(""), u("All"));
   }, [l]);
   const x = xe(() => {
     let k = Je;
-    if (h !== "All" && (k = k.filter((E) => E.category === h)), i.trim()) {
+    if (m !== "All" && (k = k.filter((E) => E.category === m)), i.trim()) {
       const E = i.trim().toUpperCase();
       k = k.filter((b) => b.code.includes(E));
     }
     return k;
-  }, [h, i]), I = xe(() => {
-    if (h !== "All" && !i.trim())
-      return { [h]: x };
+  }, [m, i]), I = xe(() => {
+    if (m !== "All" && !i.trim())
+      return { [m]: x };
     const k = {};
     return x.forEach((E) => {
       k[E.category] || (k[E.category] = []), k[E.category].push(E);
     }), k;
-  }, [x, h, i]), p = (k) => {
+  }, [x, m, i]), p = (k) => {
     k.key === "Escape" && o();
   };
   if (O(() => (l && window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p)), [l]), !l) return null;
-  let M = { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+  let A = { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
   if (s) {
     let k = s.x - 120, E = s.y;
-    k < 10 && (k = 10), k + 230 > window.innerWidth && (k = window.innerWidth - 240), E + 200 > window.innerHeight && (E = window.innerHeight - 210), M = { top: `${E}px`, left: `${k}px` };
+    k < 10 && (k = 10), k + 230 > window.innerWidth && (k = window.innerWidth - 240), E + 200 > window.innerHeight && (E = window.innerHeight - 210), A = { top: `${E}px`, left: `${k}px` };
   }
   return /* @__PURE__ */ e.createElement("div", { className: "scm-overlay", onMouseDown: (k) => {
     k.stopPropagation(), o();
-  } }, /* @__PURE__ */ e.createElement("div", { className: "scm-modal", style: M, onMouseDown: (k) => k.stopPropagation() }, /* @__PURE__ */ e.createElement("div", { className: "scm-toolbar" }, /* @__PURE__ */ e.createElement(
+  } }, /* @__PURE__ */ e.createElement("div", { className: "scm-modal", style: A, onMouseDown: (k) => k.stopPropagation() }, /* @__PURE__ */ e.createElement("div", { className: "scm-toolbar" }, /* @__PURE__ */ e.createElement(
     "input",
     {
       type: "text",
@@ -402,7 +402,7 @@ function je({ isOpen: l, onClose: o, onInsert: n, position: s }) {
   ), /* @__PURE__ */ e.createElement(
     "select",
     {
-      value: h,
+      value: m,
       onChange: (k) => u(k.target.value),
       className: "scm-category-select"
     },
@@ -449,13 +449,13 @@ typeof window < "u" && (window.MathfieldElement ? window.MathfieldElement.fontsD
 window.__ckMathWidgets = window.__ckMathWidgets || /* @__PURE__ */ new Map();
 window.__ckMathWidgetClickHandler = null;
 function Qe(l) {
-  var n, s, i, c, h;
+  var n, s, i, c, m;
   if (!l) return null;
   const o = typeof l.composedPath == "function" ? l.composedPath() : [l];
   for (const u of o)
     if (u instanceof HTMLElement && ((n = u.classList) != null && n.contains("ck-math-widget") || (s = u.dataset) != null && s.mathId || (i = u.classList) != null && i.contains("ck-widget") && ((c = u.querySelector) != null && c.call(u, ".ck-math-widget-inner"))))
       return u;
-  return l instanceof Element ? (h = l.closest) == null ? void 0 : h.call(l, ".ck-math-widget, [data-math-id]") : null;
+  return l instanceof Element ? (m = l.closest) == null ? void 0 : m.call(l, ".ck-math-widget, [data-math-id]") : null;
 }
 function de(l) {
   if (!l) return "";
@@ -475,13 +475,13 @@ function de(l) {
       let i = 1, c = n + 1;
       for (n++; n < l.length && i > 0; )
         l[n] === "{" ? i++ : l[n] === "}" && i--, n++;
-      let h = l.slice(c, n - 1);
-      h.trim() === "" ? o += "\\quad " : o += h;
+      let m = l.slice(c, n - 1);
+      m.trim() === "" ? o += "\\quad " : o += m;
     }
   }
   return o;
 }
-function X(l) {
+function z(l) {
   let o = "", n = 0;
   const s = "\\text{";
   for (; n < l.length; ) {
@@ -491,10 +491,10 @@ function X(l) {
       break;
     }
     o += l.slice(n, i);
-    let c = 1, h = i + s.length;
-    for (; h < l.length && c > 0; )
-      l[h] === "{" ? c++ : l[h] === "}" && c--, h++;
-    o += l.slice(i + s.length, h - 1), n = h;
+    let c = 1, m = i + s.length;
+    for (; m < l.length && c > 0; )
+      l[m] === "{" ? c++ : l[m] === "}" && c--, m++;
+    o += l.slice(i + s.length, m - 1), n = m;
   }
   return o;
 }
@@ -533,8 +533,8 @@ function ze(l, o) {
   }
   const c = oe(o);
   if (!c) return null;
-  const h = l.model.document.getRoot();
-  for (const { item: x } of l.model.createRangeIn(h))
+  const m = l.model.document.getRoot();
+  for (const { item: x } of l.model.createRangeIn(m))
     if ((u = x.is) != null && u.call(x, "element", "mathInline") && x.getAttribute("latex") === c)
       return x;
   return null;
@@ -549,8 +549,8 @@ function Se(l, o, n, s) {
   i && l.model.change((u) => {
     u.setSelection(i, "on");
   });
-  const h = l.mathWidgetClickHandler || window.__ckMathWidgetClickHandler;
-  h && h(i, c), window.dispatchEvent(new CustomEvent("editAneesWidget", {
+  const m = l.mathWidgetClickHandler || window.__ckMathWidgetClickHandler;
+  m && m(i, c), window.dispatchEvent(new CustomEvent("editAneesWidget", {
     detail: {
       editor: l,
       modelElement: i,
@@ -687,7 +687,7 @@ const Ke = [
       { label: "÷", insert: "\\div", title: "Divide sign" },
       { label: "/", insert: "/", title: "Slash" },
       { label: "±", insert: "\\pm", title: "Plus-minus" },
-      { label: "*", insert: "\\ast", title: "Asterisk" },
+      { label: "*", insert: "*", title: "Asterisk" },
       { label: "○", insert: "\\circ", title: "Circle" },
       // Group 3 – Constants & Symbols (3 cols × 3 rows)
       {
@@ -2288,7 +2288,7 @@ const Ke = [
       { label: "÷", insert: "\\div", title: "Divide sign" },
       { label: "/", insert: "/", title: "Slash" },
       { label: "±", insert: "\\pm", title: "Plus-minus" },
-      { label: "*", insert: "\\ast", title: "Asterisk" },
+      { label: "*", insert: "*", title: "Asterisk" },
       { label: "○", insert: "\\circ", title: "Circle" },
       // Group 3 – Constants & Symbols (3 cols × 3 rows)
       {
@@ -3634,12 +3634,12 @@ class at extends He {
     }), o.conversion.for("editingDowncast").elementToElement({
       model: "mathInline",
       view: (s, { writer: i }) => {
-        const c = s.getAttribute("latex") || "", h = "math-" + Math.random().toString(36).substr(2, 9);
-        window.__ckMathWidgets.set(h, s);
+        const c = s.getAttribute("latex") || "", m = "math-" + Math.random().toString(36).substr(2, 9);
+        window.__ckMathWidgets.set(m, s);
         const u = i.createContainerElement("span", {
           class: "ck-math-widget ck-math-inline-word",
           contenteditable: "false",
-          "data-math-id": h,
+          "data-math-id": m,
           "data-latex": c
         }), x = i.createRawElement(
           "span",
@@ -3650,14 +3650,14 @@ class at extends He {
           (I) => {
             const p = document.createElement("math-field");
             p.setAttribute("math-virtual-keyboard-policy", "manual"), p.setAttribute("tabindex", "-1"), p.style.display = "inline-block", p.style.width = "auto", p.style.maxWidth = "100%", p.style.verticalAlign = "middle", p.style.border = "none", p.style.background = "transparent", p.style.outline = "none", p.style.fontSize = "inherit", p.style.minHeight = "auto", p.style.padding = "0 2px", p.style.margin = "0", p.style.pointerEvents = "none";
-            const M = () => {
+            const A = () => {
               if (!p.isConnected) {
-                requestAnimationFrame(M);
+                requestAnimationFrame(A);
                 return;
               }
               window.__cme_macros && (p.macros = { ...p.macros, ...window.__cme_macros });
               let E = ne(
-                X(
+                z(
                   de(c)
                 )
               );
@@ -3674,7 +3674,7 @@ class at extends He {
               }
               p.setAttribute("read-only", "");
             };
-            customElements.get("math-field") ? requestAnimationFrame(M) : customElements.whenDefined("math-field").then(() => requestAnimationFrame(M)), I.appendChild(p);
+            customElements.get("math-field") ? requestAnimationFrame(A) : customElements.whenDefined("math-field").then(() => requestAnimationFrame(A)), I.appendChild(p);
             const k = () => {
               const E = I.parentElement;
               E && Xe(o, E);
@@ -3695,22 +3695,22 @@ class at extends He {
         c
       ));
     }, { priority: "high" }), o.conversion.for("editingDowncast").add((s) => {
-      s.on("attribute:latex:mathInline", (i, c, h) => {
-        if (!h.consumable.consume(c.item, i.name))
+      s.on("attribute:latex:mathInline", (i, c, m) => {
+        if (!m.consumable.consume(c.item, i.name))
           return;
-        const u = h.writer, x = h.mapper.toViewElement(c.item);
+        const u = m.writer, x = m.mapper.toViewElement(c.item);
         if (x) {
           u.setAttribute("data-latex", c.attributeNewValue, x);
           const I = o.editing.view.domConverter.mapViewToDom(x);
           if (I) {
             const p = I.querySelector("math-field");
             if (p) {
-              let M = ne(X(de(c.attributeNewValue)));
-              M.includes("\\enclose") && /^\\ce\{[\s\S]*\}$/i.test(M.trim()) && (M = M.trim().replace(/^\\ce\{([\s\S]*)\}$/i, "$1")), p.removeAttribute("read-only");
+              let A = ne(z(de(c.attributeNewValue)));
+              A.includes("\\enclose") && /^\\ce\{[\s\S]*\}$/i.test(A.trim()) && (A = A.trim().replace(/^\\ce\{([\s\S]*)\}$/i, "$1")), p.removeAttribute("read-only");
               try {
-                p.setValue ? p.setValue("", { silenceNotifications: !0 }) : p.value = "", p.executeCommand(["insert", M, { insertionMode: "replaceAll" }]);
+                p.setValue ? p.setValue("", { silenceNotifications: !0 }) : p.value = "", p.executeCommand(["insert", A, { insertionMode: "replaceAll" }]);
               } catch {
-                p.setValue ? p.setValue(M, { silenceNotifications: !0 }) : p.value = M;
+                p.setValue ? p.setValue(A, { silenceNotifications: !0 }) : p.value = A;
               }
               p.setAttribute("read-only", "");
             }
@@ -3721,18 +3721,18 @@ class at extends He {
     }), o.conversion.for("dataDowncast").elementToElement({
       model: "mathInline",
       view: (s, { writer: i }) => {
-        const c = s.getAttribute("latex") || "", h = i.createContainerElement("span", {
+        const c = s.getAttribute("latex") || "", m = i.createContainerElement("span", {
           class: "math-tex",
           "data-latex": c,
           // Keep raw latex in data-latex for restoring
           style: "display:inline;"
         });
         let u = ne(
-          X(
+          z(
             de(c)
           )
         );
-        return u.includes("\\enclose") && /^\\ce\{[\s\S]*\}$/i.test(u.trim()) && (u = u.trim().replace(/^\\ce\{([\s\S]*)\}$/i, "$1")), i.insert(i.createPositionAt(h, 0), i.createText(u)), h;
+        return u.includes("\\enclose") && /^\\ce\{[\s\S]*\}$/i.test(u.trim()) && (u = u.trim().replace(/^\\ce\{([\s\S]*)\}$/i, "$1")), i.insert(i.createPositionAt(m, 0), i.createText(u)), m;
       }
     }), o.conversion.for("upcast").elementToElement({
       view: {
@@ -3747,37 +3747,37 @@ class at extends He {
   }
 }
 function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: i, onMouseLeave: c }) {
-  const [h, u] = B({ r: 2, c: 2 }), x = Math.max(10, parseInt(h.r, 10) || 0), I = Math.max(10, parseInt(h.c, 10) || 0), p = (b) => {
+  const [m, u] = B({ r: 2, c: 2 }), x = Math.max(10, parseInt(m.r, 10) || 0), I = Math.max(10, parseInt(m.c, 10) || 0), p = (b) => {
     const y = b.target.value;
     if (y === "") {
-      u((A) => ({ ...A, r: "" }));
+      u((C) => ({ ...C, r: "" }));
       return;
     }
-    const S = parseInt(y, 10);
-    isNaN(S) || u((A) => ({ ...A, r: Math.max(1, Math.min(10, S)) }));
-  }, M = () => {
-    (h.r === "" || isNaN(parseInt(h.r, 10))) && u((b) => ({ ...b, r: 1 }));
+    const T = parseInt(y, 10);
+    isNaN(T) || u((C) => ({ ...C, r: Math.max(1, Math.min(10, T)) }));
+  }, A = () => {
+    (m.r === "" || isNaN(parseInt(m.r, 10))) && u((b) => ({ ...b, r: 1 }));
   }, k = (b) => {
     const y = b.target.value;
     if (y === "") {
-      u((A) => ({ ...A, c: "" }));
+      u((C) => ({ ...C, c: "" }));
       return;
     }
-    const S = parseInt(y, 10);
-    isNaN(S) || u((A) => ({ ...A, c: Math.max(1, Math.min(10, S)) }));
+    const T = parseInt(y, 10);
+    isNaN(T) || u((C) => ({ ...C, c: Math.max(1, Math.min(10, T)) }));
   }, E = () => {
-    (h.c === "" || isNaN(parseInt(h.c, 10))) && u((b) => ({ ...b, c: 1 }));
+    (m.c === "" || isNaN(parseInt(m.c, 10))) && u((b) => ({ ...b, c: 1 }));
   };
   return O(() => {
     const b = (y) => {
       if (y.key === "Enter") {
         y.preventDefault(), y.stopPropagation();
-        const S = parseInt(h.r, 10) || 1, A = parseInt(h.c, 10) || 1;
-        s(S, A);
+        const T = parseInt(m.r, 10) || 1, C = parseInt(m.c, 10) || 1;
+        s(T, C);
       }
     };
     return window.addEventListener("keydown", b, !0), () => window.removeEventListener("keydown", b, !0);
-  }, [h.r, h.c, s]), /* @__PURE__ */ e.createElement(
+  }, [m.r, m.c, s]), /* @__PURE__ */ e.createElement(
     "div",
     {
       className: "cme-matrix-hover-popover ck-only",
@@ -3786,16 +3786,16 @@ function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: i, onMouseLe
       onMouseEnter: i,
       onMouseLeave: c
     },
-    /* @__PURE__ */ e.createElement("div", { className: "cme-matrix-hover-grid" }, Array.from({ length: x }).map((b, y) => /* @__PURE__ */ e.createElement("div", { key: y, className: "cme-matrix-hover-row" }, Array.from({ length: I }).map((S, A) => {
-      const U = parseInt(h.r, 10) || 0, K = parseInt(h.c, 10) || 0, J = y < U && A < K;
+    /* @__PURE__ */ e.createElement("div", { className: "cme-matrix-hover-grid" }, Array.from({ length: x }).map((b, y) => /* @__PURE__ */ e.createElement("div", { key: y, className: "cme-matrix-hover-row" }, Array.from({ length: I }).map((T, C) => {
+      const U = parseInt(m.r, 10) || 0, X = parseInt(m.c, 10) || 0, Z = y < U && C < X;
       return /* @__PURE__ */ e.createElement(
         "div",
         {
-          key: `${y}-${A}`,
-          className: `cme-matrix-hover-cell${J ? " selected" : ""}`,
-          onMouseEnter: () => u({ r: y + 1, c: A + 1 }),
-          onClick: (Y) => {
-            Y.preventDefault(), Y.stopPropagation(), s(y + 1, A + 1);
+          key: `${y}-${C}`,
+          className: `cme-matrix-hover-cell${Z ? " selected" : ""}`,
+          onMouseEnter: () => u({ r: y + 1, c: C + 1 }),
+          onClick: (K) => {
+            K.preventDefault(), K.stopPropagation(), s(y + 1, C + 1);
           }
         }
       );
@@ -3805,9 +3805,9 @@ function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: i, onMouseLe
       {
         type: "number",
         className: "cme-counter-val",
-        value: h.r,
+        value: m.r,
         onChange: p,
-        onBlur: M,
+        onBlur: A,
         min: "1",
         max: "10"
       }
@@ -3822,7 +3822,7 @@ function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: i, onMouseLe
       {
         type: "number",
         className: "cme-counter-val",
-        value: h.c,
+        value: m.c,
         onChange: k,
         onBlur: E,
         min: "1",
@@ -3837,58 +3837,58 @@ function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: i, onMouseLe
     }) }, "▼"))))
   );
 }
-let Z = !1, be = null, V = null;
+let F = !1, be = null, V = null;
 function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i }) {
-  const c = re(null), [h, u] = B(0), [x, I] = B(null), [p, M] = B(null), [k, E] = B(null), [b, y] = B(null);
+  const c = re(null), [m, u] = B(0), [x, I] = B(null), [p, A] = B(null), [k, E] = B(null), [b, y] = B(null);
   re(null);
-  const [S, A] = B({ x: 0, y: 0 }), [U, K] = B(!1), J = re({ x: 0, y: 0 }), [Y, ge] = B(!1), [Te, ke] = B(!1), [We, _] = B(!1), se = re(null);
+  const [T, C] = B({ x: 0, y: 0 }), [U, X] = B(!1), Z = re({ x: 0, y: 0 }), [K, ge] = B(!1), [Te, ke] = B(!1), [We, Y] = B(!1), se = re(null);
   O(() => {
     const t = (a) => {
       if (!U) return;
-      let d = a.clientX - J.current.x, g = a.clientY - J.current.y;
+      let d = a.clientX - Z.current.x, g = a.clientY - Z.current.y;
       if (se.current) {
-        const w = se.current, m = -w.left, C = window.innerWidth - w.right, T = -w.top, R = window.innerHeight - w.bottom;
-        d < m && (d = m), d > C && (d = C), g < T && (g = T), g > R && (g = R);
+        const w = se.current, h = -w.left, L = window.innerWidth - w.right, M = -w.top, R = window.innerHeight - w.bottom;
+        d < h && (d = h), d > L && (d = L), g < M && (g = M), g > R && (g = R);
       }
-      A({ x: d, y: g });
-    }, r = () => K(!1);
+      C({ x: d, y: g });
+    }, r = () => X(!1);
     return U && (window.addEventListener("mousemove", t), window.addEventListener("mouseup", r)), () => {
       window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", r);
     };
   }, [U]);
   const Ie = (t) => {
     if (t.target.closest(".cme-popup-controls")) return;
-    K(!0), J.current = {
-      x: t.clientX - S.x,
-      y: t.clientY - S.y
+    X(!0), Z.current = {
+      x: t.clientX - T.x,
+      y: t.clientY - T.y
     };
     const r = document.querySelector(".cme-editor-popup");
     if (r) {
       const a = r.getBoundingClientRect();
       se.current = {
-        left: a.left - S.x,
-        top: a.top - S.y,
-        right: a.right - S.x,
-        bottom: a.bottom - S.y,
+        left: a.left - T.x,
+        top: a.top - T.y,
+        right: a.right - T.x,
+        bottom: a.bottom - T.y,
         width: a.width,
         height: a.height
       };
     }
-  }, P = l === "math" ? Ke : Ye, [f, ce] = B({
+  }, _ = l === "math" ? Ke : Ye, [f, ce] = B({
     bold: !1,
     italic: !1,
     color: "none",
     fontFamily: "none",
     fontSize: "auto"
-  }), q = he(() => {
-    if (Z || window.__cmeIgnoreStyleUpdate && Date.now() - window.__cmeIgnoreStyleUpdate < 150) return;
+  }), P = he(() => {
+    if (F || window.__cmeIgnoreStyleUpdate && Date.now() - window.__cmeIgnoreStyleUpdate < 150) return;
     const t = c.current;
     if (!(!t || typeof t.queryStyle != "function"))
       try {
         const r = window.__cmeManualBold !== void 0 ? window.__cmeManualBold : t.queryStyle({ fontSeries: "b" }) === "all" || t.queryStyle({ variantStyle: "bold" }) === "all", a = window.__cmeManualItalic !== void 0 ? window.__cmeManualItalic : t.queryStyle({ variantStyle: "italic" }) === "all" || t.queryStyle({ shape: "it" }) === "all", d = window.__cmeManualFontFamily !== void 0 ? window.__cmeManualFontFamily : ["roman", "sans-serif", "monospace"].find(
-          (m) => t.queryStyle({ fontFamily: m }) === "all"
+          (h) => t.queryStyle({ fontFamily: h }) === "all"
         ) || "none", g = window.__cmeManualFontSize !== void 0 ? window.__cmeManualFontSize : [5, 7, 9].find(
-          (m) => t.queryStyle({ fontSize: m }) === "all"
+          (h) => t.queryStyle({ fontSize: h }) === "all"
         ) || "auto", w = [
           "black",
           "dimgray",
@@ -3915,9 +3915,9 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
           "violet",
           "gold"
         ].find(
-          (m) => t.queryStyle({ color: m }) === "all"
+          (h) => t.queryStyle({ color: h }) === "all"
         ) || "none";
-        ce((m) => ({
+        ce((h) => ({
           bold: r,
           italic: a,
           fontFamily: d,
@@ -3947,8 +3947,8 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
   }, [b]), O(() => {
     const t = setTimeout(() => Fe(), 50);
     return () => clearTimeout(t);
-  }, [h]), O(() => {
-    if (Z) return;
+  }, [m]), O(() => {
+    if (F) return;
     const t = V;
     if (!t) return;
     t.macros = { ...t.macros, ...window.__cme_macros || {} }, t.defaultMode = "math";
@@ -3959,7 +3959,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
           const d = a.match(/^\\ce\{([\s\S]*)\}$/i);
           d && (a = d[1]);
         }
-        a = X(a), a = ne(a), t.setValue ? t.setValue("", { silenceNotifications: !0 }) : t.value = "", t.executeCommand(["insert", a, { insertionMode: "replaceAll" }]);
+        a = z(a), a = ne(a), t.setValue ? t.setValue("", { silenceNotifications: !0 }) : t.value = "", t.executeCommand(["insert", a, { insertionMode: "replaceAll" }]);
       }
       requestAnimationFrame(() => t.focus());
     };
@@ -3968,20 +3968,20 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
     const t = V;
     if (!t) return;
     const r = (a) => {
-      if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(a.key) ? (Z = !1, clearTimeout(be), window.__cmeManualBold = void 0, window.__cmeManualItalic = void 0, window.__cmeManualFontFamily = void 0, window.__cmeManualFontSize = void 0) : (a.key.length === 1 || a.key === " ") && (Z = !0, clearTimeout(be), be = setTimeout(() => {
-        Z = !1;
+      if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(a.key) ? (F = !1, clearTimeout(be), window.__cmeManualBold = void 0, window.__cmeManualItalic = void 0, window.__cmeManualFontFamily = void 0, window.__cmeManualFontSize = void 0) : (a.key.length === 1 || a.key === " ") && (F = !0, clearTimeout(be), be = setTimeout(() => {
+        F = !1;
       }, 500)), a.key.length === 1 && !a.ctrlKey && !a.metaKey && !a.altKey && /[a-zA-Z0-9]/.test(a.key)) {
         a.preventDefault(), a.stopPropagation();
-        const d = f.fontFamily === "sans-serif", g = f.fontFamily === "monospace", w = f.bold, m = f.italic;
-        let C = "\\mathrm";
-        d ? C = "\\mathsf" : g ? C = "\\mathtt" : m && !w ? C = "\\mathit" : w && !m && (C = "\\mathbf");
-        let T = `${C}{${a.key}}`;
-        w && m ? (T = `\\mathbfit{${a.key}}`, d && (T = `\\boldsymbol{\\mathsf{${a.key}}}`), g && (T = `\\boldsymbol{\\mathtt{${a.key}}}`)) : w && (d || g) && (T = `\\boldsymbol{${T}}`);
-        let R = T;
-        const Q = f.fontSize === "auto" ? 5 : parseInt(f.fontSize, 10);
-        if (Q !== 5) {
+        const d = f.fontFamily === "sans-serif", g = f.fontFamily === "monospace", w = f.bold, h = f.italic;
+        let L = "\\mathrm";
+        d ? L = "\\mathsf" : g ? L = "\\mathtt" : h && !w ? L = "\\mathit" : w && !h && (L = "\\mathbf");
+        let M = `${L}{${a.key}}`;
+        w && h ? (M = `\\mathbfit{${a.key}}`, d && (M = `\\boldsymbol{\\mathsf{${a.key}}}`), g && (M = `\\boldsymbol{\\mathtt{${a.key}}}`)) : w && (d || g) && (M = `\\boldsymbol{${M}}`);
+        let R = M;
+        const j = f.fontSize === "auto" ? 5 : parseInt(f.fontSize, 10);
+        if (j !== 5) {
           const G = { 1: "\\tiny", 2: "\\scriptsize", 3: "\\footnotesize", 4: "\\small", 5: "\\normalsize", 6: "\\large", 7: "\\Large", 8: "\\LARGE", 9: "\\huge", 10: "\\Huge" };
-          G[Q] && (R = `{${G[Q]} ${R}}`);
+          G[j] && (R = `{${G[j]} ${R}}`);
         }
         f.color !== "none" && (R = `\\textcolor{${f.color}}{${R}}`), t.executeCommand(["insert", R]);
         return;
@@ -3989,7 +3989,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
       a.key === " " ? (a.preventDefault(), t.executeCommand(["insert", "\\, "])) : a.key === "Enter" && (a.preventDefault(), a.stopImmediatePropagation(), t.executeCommand("addRowAfter"));
     };
     return t.addEventListener("keydown", r, !0), () => t.removeEventListener("keydown", r, !0);
-  }, [l, f, q]), O(() => {
+  }, [l, f, P]), O(() => {
     const t = V;
     if (!t) return;
     const r = () => {
@@ -3997,14 +3997,14 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
         const a = t.shadowRoot;
         if (!a) return;
         const d = a.querySelector(".ML__caret") || a.querySelector('[class*="caret"]');
-        d && d.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" }), q();
+        d && d.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" }), P();
       }, 0);
     };
-    return t.addEventListener("selection-change", r), t.addEventListener("input", r), t.addEventListener("keydown", r), setTimeout(q, 50), () => {
+    return t.addEventListener("selection-change", r), t.addEventListener("input", r), t.addEventListener("keydown", r), setTimeout(P, 50), () => {
       t.removeEventListener("selection-change", r), t.removeEventListener("input", r), t.removeEventListener("keydown", r);
     };
-  }, [q]);
-  const j = he((t) => {
+  }, [P]);
+  const J = he((t) => {
     const r = V;
     r && (r.focus(), r.executeCommand(["insert", t]));
   }, []), Be = he((t, r, a) => {
@@ -4014,11 +4014,11 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
         d += "#?", w < a - 1 && (d += " & ");
       g < r - 1 && (d += " \\\\ ");
     }
-    d += ` \\end{${t}}`, j(d);
-  }, [j]), De = (t) => {
-    t.stopPropagation(), ge((r) => !r), ke(!1), A({ x: 0, y: 0 });
+    d += ` \\end{${t}}`, J(d);
+  }, [J]), De = (t) => {
+    t.stopPropagation(), ge((r) => !r), ke(!1), C({ x: 0, y: 0 });
   }, Ne = (t) => {
-    t.stopPropagation(), ke((r) => !r), ge(!1), A({ x: 0, y: 0 });
+    t.stopPropagation(), ke((r) => !r), ge(!1), C({ x: 0, y: 0 });
   }, ue = (t) => {
     t && t.stopPropagation();
     const r = V;
@@ -4027,7 +4027,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
       return;
     }
     const a = r.getValue ? r.getValue("latex") : r.value, d = s || "";
-    !a || a.trim() === "" || a === d ? n && n() : _(!0);
+    !a || a.trim() === "" || a === d ? n && n() : Y(!0);
   }, Re = () => {
     const t = V;
     if (!t) return;
@@ -4036,20 +4036,20 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
       n && n();
       return;
     }
-    l === "chem" && (r = _e(r)), r = X(r);
+    l === "chem" && (r = _e(r)), r = z(r);
     const a = r.match(/^\\(mathrm|mathit|mathbf|mathsf|text)\{\\displaylines\{([\s\S]*)\}\}$/);
     if (a) {
       const d = a[1];
-      r = `\\displaylines{${a[2].split("\\\\").map((C) => `\\${d}{${C.trim()}}`).join(" \\\\ ")}}`;
+      r = `\\displaylines{${a[2].split("\\\\").map((L) => `\\${d}{${L.trim()}}`).join(" \\\\ ")}}`;
     }
     r = r.replace(/[\r\n]+/g, " "), o && o(r), t.setValue ? t.setValue("") : t.value = "", n && n();
   };
-  return z(
+  return Q(
     /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: `cme-editor-popup ${Y ? "maximized" : ""} ${Te ? "minimized" : ""}`,
-        style: { transform: `translate(${S.x}px, ${S.y}px)` },
+        className: `cme-editor-popup ${K ? "maximized" : ""} ${Te ? "minimized" : ""}`,
+        style: { transform: `translate(${T.x}px, ${T.y}px)` },
         onMouseDown: (t) => t.stopPropagation()
       },
       /* @__PURE__ */ e.createElement("div", { className: "cme-popup-topbar" }, /* @__PURE__ */ e.createElement(
@@ -4061,8 +4061,8 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
         },
         /* @__PURE__ */ e.createElement("span", null, i ? 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: ue, title: "Close" }, "✕"))),
-      /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar", role: "toolbar", "aria-label": "Symbol palette" }, /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar-groups" }, P.map((t, r) => {
-        const a = h === r;
+      /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar", role: "toolbar", "aria-label": "Symbol palette" }, /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar-groups" }, _.map((t, r) => {
+        const a = m === r;
         return /* @__PURE__ */ e.createElement(
           "button",
           {
@@ -4098,7 +4098,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
         );
       })), /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar-items" }, (() => {
         var d;
-        const t = ((d = P[h]) == null ? void 0 : d.items) || [], r = t.some((g) => g.type === "sep"), a = [];
+        const t = ((d = _[m]) == null ? void 0 : d.items) || [], r = t.some((g) => g.type === "sep"), a = [];
         if (r) {
           let g = { cols: 2, small: !1, cls: "", items: [], moreItems: null };
           for (const w of t)
@@ -4125,29 +4125,32 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
               type: "button",
               className: "cme-more-trigger-btn",
               title: "more",
-              onMouseDown: (m) => {
-                if (m.preventDefault(), b && b.items === g.moreItems)
+              onMouseDown: (h) => {
+                h.preventDefault();
+              },
+              onClick: (h) => {
+                if (h.stopPropagation(), b && b.items === g.moreItems)
                   y(null);
                 else {
-                  const C = m.currentTarget.getBoundingClientRect();
-                  y({ cx: C.left + C.width / 2, y: C.bottom, items: g.moreItems, cols: g.moreCols, isTemplate: P[h].isTemplate || P[h].label === "√(□)" || P[h].isMatrix });
+                  const L = h.currentTarget.getBoundingClientRect(), M = _[m] || {};
+                  y({ cx: L.left + L.width / 2, y: L.bottom, items: g.moreItems, cols: g.moreCols, isTemplate: M.isTemplate || M.label === "√(□)" || M.isMatrix });
                 }
               }
             },
             "▶"
           ),
-          g.items.map((m, C) => {
-            const T = P[h];
-            if (m.type === "dropdown") {
-              const N = m.label === "Font...", v = m.label === "Size", $ = N && f.fontFamily !== "none", ee = v && f.fontSize !== "auto" && f.fontSize !== "5", te = N ? f.fontFamily === "none" ? "" : f.fontFamily : v ? f.fontSize === "auto" || f.fontSize === "5" ? "" : f.fontSize : "";
+          g.items.map((h, L) => {
+            const M = _[m];
+            if (h.type === "dropdown") {
+              const N = h.label === "Font...", v = h.label === "Size", $ = N && f.fontFamily !== "none", ee = v && f.fontSize !== "auto" && f.fontSize !== "5", te = N ? f.fontFamily === "none" ? "" : f.fontFamily : v ? f.fontSize === "auto" || f.fontSize === "5" ? "" : f.fontSize : "";
               return /* @__PURE__ */ e.createElement(
                 "select",
                 {
-                  key: C,
+                  key: L,
                   className: `cme-btn template${$ || ee ? " active" : ""}`,
                   value: te,
                   style: {
-                    width: m.width || "60px",
+                    width: h.width || "60px",
                     height: "18px",
                     minHeight: "18px",
                     maxHeight: "18px",
@@ -4160,43 +4163,43 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
                     gridColumn: g.cols === 3 || g.cols === 1 ? "span 1" : "span 2"
                   },
                   onChange: (le) => {
-                    const F = le.target.value, H = V;
-                    !H || typeof H.applyStyle != "function" || (H.focus(), N ? H.applyStyle({ fontFamily: F || "none" }) : v && H.applyStyle({ fontSize: F ? parseInt(F, 10) : "auto" }), q());
+                    const q = le.target.value, H = V;
+                    !H || typeof H.applyStyle != "function" || (H.focus(), N ? H.applyStyle({ fontFamily: q || "none" }) : v && H.applyStyle({ fontSize: q ? parseInt(q, 10) : "auto" }), P());
                   }
                 },
-                /* @__PURE__ */ e.createElement("option", { value: "" }, m.label),
+                /* @__PURE__ */ e.createElement("option", { value: "" }, h.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 (T.isMatrix && !m.directInsert)
+            if (M.isMatrix && !h.directInsert)
               return /* @__PURE__ */ e.createElement(
                 "div",
                 {
-                  key: C,
+                  key: L,
                   className: "cme-matrix-btn-wrapper"
                 },
                 /* @__PURE__ */ e.createElement(
                   "button",
                   {
                     type: "button",
-                    className: `cme-btn template${m.cls ? ` ${m.cls}` : ""}${T.isMatrix ? " cme-matrix-btn-small" : ""}`,
-                    title: m.title || m.label || m.insert,
+                    className: `cme-btn template${h.cls ? ` ${h.cls}` : ""}${M.isMatrix ? " cme-matrix-btn-small" : ""}`,
+                    title: h.title || h.label || h.insert,
                     onMouseDown: (N) => {
-                      if (N.preventDefault(), N.stopPropagation(), (x == null ? void 0 : x.type) === m.insert)
+                      if (N.preventDefault(), N.stopPropagation(), (x == null ? void 0 : x.type) === h.insert)
                         I(null);
                       else {
-                        Z || (window.__cmeManualBold = void 0, window.__cmeManualItalic = void 0, window.__cmeManualFontFamily = void 0, window.__cmeManualFontSize = void 0);
+                        F || (window.__cmeManualBold = void 0, window.__cmeManualItalic = void 0, window.__cmeManualFontFamily = void 0, window.__cmeManualFontSize = void 0);
                         const v = N.currentTarget.getBoundingClientRect();
                         I({
-                          type: m.insert,
+                          type: h.insert,
                           x: v.left + v.width / 2,
                           y: v.bottom
                         });
                       }
                     }
                   },
-                  typeof m.label == "object" ? m.label : /* @__PURE__ */ e.createElement(
+                  typeof h.label == "object" ? h.label : /* @__PURE__ */ e.createElement(
                     "math-field",
                     {
                       "read-only": !0,
@@ -4215,62 +4218,62 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
                         cursor: "pointer"
                       }
                     },
-                    pe(m.mathLabel != null ? m.mathLabel : m.insert)
+                    pe(h.mathLabel != null ? h.mathLabel : h.insert)
                   )
                 )
               );
-            const R = m.action === "BOLD", Q = m.action === "ITALIC", G = m.action === "TEXT_COLOR", Oe = R && f.bold || Q && f.italic || G && f.color !== "none" && f.color !== "black";
+            const R = h.action === "BOLD", j = h.action === "ITALIC", G = h.action === "TEXT_COLOR", Oe = R && f.bold || j && f.italic || G && f.color !== "none" && f.color !== "black";
             return /* @__PURE__ */ e.createElement(
               "button",
               {
-                key: `${T.label}-${w * 4 + C}`,
+                key: `${M.label}-${w * 4 + L}`,
                 type: "button",
-                className: `cme-btn${T.isTemplate ? " template" : ""}${m.cls ? ` ${m.cls}` : ""}${Oe ? " active" : ""}`,
-                title: m.title || m.label || m.insert,
+                className: `cme-btn${M.isTemplate ? " template" : ""}${h.cls ? ` ${h.cls}` : ""}${Oe ? " active" : ""}`,
+                title: h.title || h.label || h.insert,
                 onMouseDown: (N) => {
-                  var $, ee, te, le, F, H, we;
+                  var $, ee, te, le, q, H, we;
                   N.preventDefault();
                   const v = c.current;
-                  if (m.action === "SPECIAL_CHARS") {
-                    const L = N.currentTarget.getBoundingClientRect();
-                    M({ x: L.left, y: L.bottom + 4 });
-                  } else if (m.action === "TEXT_COLOR") {
-                    const L = N.currentTarget.getBoundingClientRect();
-                    E({ x: L.left, y: L.bottom + 4 });
-                  } else if (m.action === "BOLD") {
+                  if (h.action === "SPECIAL_CHARS") {
+                    const S = N.currentTarget.getBoundingClientRect();
+                    A({ x: S.left, y: S.bottom + 4 });
+                  } else if (h.action === "TEXT_COLOR") {
+                    const S = N.currentTarget.getBoundingClientRect();
+                    E({ x: S.left, y: S.bottom + 4 });
+                  } else if (h.action === "BOLD") {
                     if (v) {
                       v.focus();
-                      const L = !f.bold;
-                      window.__cmeManualBold = L;
+                      const S = !f.bold;
+                      window.__cmeManualBold = S;
                       const D = v.selection;
                       if (D && !D.isCollapsed) {
                         let W = v.getValue(D);
-                        W = W.replace(/\\mathrm{([^}]*)}/g, "$1").replace(/\\mathbf{([^}]*)}/g, "$1").replace(/\\mathit{([^}]*)}/g, "$1").replace(/\\mathbfit{([^}]*)}/g, "$1"), L && f.italic ? v.executeCommand(["insert", `\\mathbfit{${W}}`]) : L ? v.executeCommand(["insert", `\\mathbf{${W}}`]) : f.italic ? v.executeCommand(["insert", `\\mathit{${W}}`]) : v.executeCommand(["insert", `\\mathrm{${W}}`]);
+                        W = W.replace(/\\mathrm{([^}]*)}/g, "$1").replace(/\\mathbf{([^}]*)}/g, "$1").replace(/\\mathit{([^}]*)}/g, "$1").replace(/\\mathbfit{([^}]*)}/g, "$1"), S && f.italic ? v.executeCommand(["insert", `\\mathbfit{${W}}`]) : S ? v.executeCommand(["insert", `\\mathbf{${W}}`]) : f.italic ? v.executeCommand(["insert", `\\mathit{${W}}`]) : v.executeCommand(["insert", `\\mathrm{${W}}`]);
                       }
-                      ce((W) => ({ ...W, bold: L }));
+                      ce((W) => ({ ...W, bold: S }));
                     }
-                  } else if (m.action === "ITALIC") {
+                  } else if (h.action === "ITALIC") {
                     if (v) {
                       v.focus();
-                      const L = !f.italic;
-                      window.__cmeManualItalic = L;
+                      const S = !f.italic;
+                      window.__cmeManualItalic = S;
                       const D = v.selection;
                       if (D && !D.isCollapsed) {
                         let W = v.getValue(D);
-                        W = W.replace(/\\mathrm{([^}]*)}/g, "$1").replace(/\\mathbf{([^}]*)}/g, "$1").replace(/\\mathit{([^}]*)}/g, "$1").replace(/\\mathbfit{([^}]*)}/g, "$1"), f.bold && L ? v.executeCommand(["insert", `\\mathbfit{${W}}`]) : f.bold ? v.executeCommand(["insert", `\\mathbf{${W}}`]) : L ? v.executeCommand(["insert", `\\mathit{${W}}`]) : v.executeCommand(["insert", `\\mathrm{${W}}`]);
+                        W = W.replace(/\\mathrm{([^}]*)}/g, "$1").replace(/\\mathbf{([^}]*)}/g, "$1").replace(/\\mathit{([^}]*)}/g, "$1").replace(/\\mathbfit{([^}]*)}/g, "$1"), f.bold && S ? v.executeCommand(["insert", `\\mathbfit{${W}}`]) : f.bold ? v.executeCommand(["insert", `\\mathbf{${W}}`]) : S ? v.executeCommand(["insert", `\\mathit{${W}}`]) : v.executeCommand(["insert", `\\mathrm{${W}}`]);
                       }
-                      ce((W) => ({ ...W, italic: L }));
+                      ce((W) => ({ ...W, italic: S }));
                     }
-                  } else m.action === "UNDO" ? ($ = c.current) == null || $.executeCommand("undo") : m.action === "REDO" ? (ee = c.current) == null || ee.executeCommand("redo") : m.action === "CUT" ? ((te = c.current) == null || te.focus(), (le = c.current) == null || le.executeCommand("cutToClipboard")) : m.action === "COPY" ? ((F = c.current) == null || F.focus(), (H = c.current) == null || H.executeCommand("copyToClipboard")) : m.action === "PASTE" ? ((we = c.current) == null || we.focus(), navigator.clipboard.readText().then((L) => {
+                  } else h.action === "UNDO" ? ($ = c.current) == null || $.executeCommand("undo") : h.action === "REDO" ? (ee = c.current) == null || ee.executeCommand("redo") : h.action === "CUT" ? ((te = c.current) == null || te.focus(), (le = c.current) == null || le.executeCommand("cutToClipboard")) : h.action === "COPY" ? ((q = c.current) == null || q.focus(), (H = c.current) == null || H.executeCommand("copyToClipboard")) : h.action === "PASTE" ? ((we = c.current) == null || we.focus(), navigator.clipboard.readText().then((S) => {
                     var D;
-                    (D = c.current) == null || D.executeCommand(["insert", L]);
-                  }).catch((L) => {
+                    (D = c.current) == null || D.executeCommand(["insert", S]);
+                  }).catch((S) => {
                     var D;
                     (D = c.current) == null || D.executeCommand("pasteFromClipboard");
-                  })) : j(m.insert);
+                  })) : J(h.insert);
                 }
               },
-              (T.isTemplate || T.label === "√(□)" || T.isMatrix || m.isWidget) && m.insert && !m.action && !m.forceLabel ? /* @__PURE__ */ e.createElement(
+              (M.isTemplate || M.label === "√(□)" || M.isMatrix || h.isWidget) && h.insert && !h.action && !h.forceLabel ? /* @__PURE__ */ e.createElement(
                 "math-field",
                 {
                   "read-only": !0,
@@ -4289,13 +4292,13 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
                     cursor: "pointer"
                   }
                 },
-                pe(m.insert)
-              ) : m.label
+                pe(h.insert)
+              ) : h.label
             );
           })
         ));
       })())),
-      b && z(/* @__PURE__ */ e.createElement(
+      b && Q(/* @__PURE__ */ e.createElement(
         "div",
         {
           ref: (t) => {
@@ -4306,7 +4309,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
                 const w = a.getBoundingClientRect();
                 d + r.width > w.right - 4 && (d = w.right - r.width - 4), d < w.left + 4 && (d = w.left + 4), g + r.height > w.bottom - 4 && (g = w.bottom - r.height - 4);
               }
-              d + r.width > window.innerWidth - 4 && (d = window.innerWidth - r.width - 4), g + r.height > window.innerHeight - 4 && (g = window.innerHeight - r.height - 4), d < 4 && (d = 4), t.style.left = `${d}px`, t.style.top = `${g}px`, t.style.transform = "none", t.style.visibility = "visible";
+              d + r.width > window.innerWidth - 4 && (d = window.innerWidth - r.width - 4), g + r.height > window.innerHeight - 4 && (g = window.innerHeight - r.height - 4), d < 4 && (d = 4), t.style.left = `${d}px`, t.style.top = `${g}px`, t.style.transform = "none";
             });
           },
           className: "cme-more-popup",
@@ -4315,8 +4318,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
             left: `${b.cx}px`,
             top: `${b.y}px`,
             transform: "translateX(-50%)",
-            visibility: "hidden",
-            zIndex: 1e5,
+            zIndex: 2147483647,
             gridTemplateColumns: `repeat(${b.cols || 1}, auto)`
           }
         },
@@ -4328,7 +4330,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
             className: `cme-more-popup-btn ${t.cls || ""}`,
             title: t.title || t.label || t.insert,
             onMouseDown: (a) => {
-              a.preventDefault(), j(t.insert), y(null);
+              a.preventDefault(), J(t.insert), y(null);
             }
           },
           t.insert && !t.action && (t.cls === "template" || t.isWidget) ? /* @__PURE__ */ e.createElement(
@@ -4369,7 +4371,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
           "math-field",
           {
             ref: (t) => {
-              c.current = t, V = t;
+              c.current = t, V = t, t && (t.inlineShortcuts = Object.assign({}, t.inlineShortcuts, { "*": "*" }));
             },
             class: "cme-mathfield",
             tabIndex: 0,
@@ -4380,13 +4382,13 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
       ),
       /* @__PURE__ */ e.createElement("div", { className: "cme-popup-footer" }, /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-insert-btn", onClick: Re }, i ? "Update" : "Insert"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-cancel-btn", onClick: ue }, "Cancel")),
       We && /* @__PURE__ */ e.createElement("div", { className: "cme-confirm-overlay", onMouseDown: (t) => {
-        t.stopPropagation(), _(!1);
+        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(), _(!1), n && n();
+        t.stopPropagation(), Y(!1), n && n();
       } }, "Close"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-confirm-cancel-btn", onClick: (t) => {
-        t.stopPropagation(), _(!1);
+        t.stopPropagation(), Y(!1);
       } }, "Cancel")))),
-      x && z(
+      x && Q(
         /* @__PURE__ */ e.createElement(
           Ge,
           {
@@ -4404,21 +4406,21 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
         ),
         document.body
       ),
-      p && z(
+      p && Q(
         /* @__PURE__ */ e.createElement(
           je,
           {
             isOpen: !!p,
             position: p,
-            onClose: () => M(null),
+            onClose: () => A(null),
             onInsert: (t) => {
-              j(t), M(null);
+              J(t), A(null);
             }
           }
         ),
         document.body
       ),
-      k && z(
+      k && Q(
         /* @__PURE__ */ e.createElement(
           "div",
           {
@@ -4427,7 +4429,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
               position: "fixed",
               left: Math.min(k.x, window.innerWidth - 160) + "px",
               top: Math.min(k.y, window.innerHeight - 100) + "px",
-              zIndex: 1e5,
+              zIndex: 2147483647,
               background: "#fff",
               border: "1px solid #ccc",
               padding: "6px",
@@ -4481,7 +4483,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
                 onMouseDown: (a) => {
                   a.preventDefault(), a.stopPropagation();
                   const d = c.current;
-                  d && typeof d.applyStyle == "function" && (d.focus(), d.applyStyle({ color: t === "black" ? "none" : t }), q()), E(null);
+                  d && typeof d.applyStyle == "function" && (d.focus(), d.applyStyle({ color: t === "black" ? "none" : t }), P()), E(null);
                 }
               }
             );