digi-mathchem-editor 1.0.9 → 1.0.11

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

@@ -302,10 +302,10 @@ const Me = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AA
 function ie(l) {
   const o = l == null ? void 0 : l.shadowRoot;
   if (!o) return;
-  const n = l.hasAttribute("read-only") || l.hasAttribute("readonly"), s = n ? "readonly" : "editable";
-  let i = o.querySelector(`[${ye}]`);
-  i && i.getAttribute("data-cache") === s || (i || (i = document.createElement("style"), i.setAttribute(ye, "true"), o.appendChild(i)), i.setAttribute("data-cache", s), i.textContent = `
-    ${n ? `
+  const a = l.hasAttribute("read-only") || l.hasAttribute("readonly"), s = a ? "readonly" : "editable";
+  let n = o.querySelector(`[${ye}]`);
+  n && n.getAttribute("data-cache") === s || (n || (n = document.createElement("style"), n.setAttribute(ye, "true"), o.appendChild(n)), n.setAttribute("data-cache", s), n.textContent = `
+    ${a ? `
       :host, :host * { cursor: pointer !important; }
       .ML__latex, .ML__content, .ML__container, .ML__virtual-keyboard-toggle { cursor: pointer !important; }
     ` : ""}
@@ -318,15 +318,15 @@ function qe() {
 let me = null;
 function Fe() {
   me || (qe(), me = new MutationObserver((l) => {
-    var o, n, s;
-    for (const i of l) {
-      if (i.type === "attributes" && ((o = i.target.tagName) == null ? void 0 : o.toLowerCase()) === "math-field") {
-        ie(i.target);
+    var o, a, s;
+    for (const n of l) {
+      if (n.type === "attributes" && ((o = n.target.tagName) == null ? void 0 : o.toLowerCase()) === "math-field") {
+        ie(n.target);
         continue;
       }
-      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((m) => requestAnimationFrame(() => ie(m))));
+      if (n.addedNodes)
+        for (const c of n.addedNodes)
+          c instanceof Element && (((a = c.tagName) == null ? void 0 : a.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,
@@ -347,39 +347,39 @@ const Ce = [
 ], Ze = () => {
   const l = [];
   return Ce.slice(1).forEach((o) => {
-    o.ranges.forEach((n) => {
-      for (let s = n[0]; s <= n[1]; s++) {
+    o.ranges.forEach((a) => {
+      for (let s = a[0]; s <= a[1]; s++) {
         if (s >= 127 && s <= 159) continue;
-        const i = String.fromCodePoint(s);
-        new RegExp("\\p{C}", "u").test(i) || l.push({
+        const n = String.fromCodePoint(s);
+        new RegExp("\\p{C}", "u").test(n) || l.push({
           code: s.toString(16).toUpperCase().padStart(4, "0"),
-          char: i,
+          char: n,
           category: o.id
         });
       }
     });
   }), l;
 }, Je = Ze();
-function je({ isOpen: l, onClose: o, onInsert: n, position: s }) {
-  const [i, c] = B(""), [m, u] = B("All");
+function je({ isOpen: l, onClose: o, onInsert: a, position: s }) {
+  const [n, c] = B(""), [m, u] = B("All");
   O(() => {
     l && (c(""), u("All"));
   }, [l]);
   const x = xe(() => {
     let k = Je;
-    if (m !== "All" && (k = k.filter((E) => E.category === m)), i.trim()) {
-      const E = i.trim().toUpperCase();
+    if (m !== "All" && (k = k.filter((E) => E.category === m)), n.trim()) {
+      const E = n.trim().toUpperCase();
       k = k.filter((b) => b.code.includes(E));
     }
     return k;
-  }, [m, i]), I = xe(() => {
-    if (m !== "All" && !i.trim())
+  }, [m, n]), I = xe(() => {
+    if (m !== "All" && !n.trim())
       return { [m]: x };
     const k = {};
     return x.forEach((E) => {
       k[E.category] || (k[E.category] = []), k[E.category].push(E);
     }), k;
-  }, [x, m, i]), p = (k) => {
+  }, [x, m, n]), p = (k) => {
     k.key === "Escape" && o();
   };
   if (O(() => (l && window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p)), [l]), !l) return null;
@@ -395,7 +395,7 @@ function je({ isOpen: l, onClose: o, onInsert: n, position: s }) {
     {
       type: "text",
       placeholder: "Code",
-      value: i,
+      value: n,
       onChange: (k) => c(k.target.value),
       className: "scm-code-input"
     }
@@ -413,7 +413,7 @@ function je({ isOpen: l, onClose: o, onInsert: n, position: s }) {
       key: b.code,
       className: "scm-char-btn",
       onClick: () => {
-        n(b.char), o();
+        a(b.char), o();
       },
       title: `U+${b.code}`
     },
@@ -449,52 +449,52 @@ 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, m;
+  var a, s, n, 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"))))
+    if (u instanceof HTMLElement && ((a = u.classList) != null && a.contains("ck-math-widget") || (s = u.dataset) != null && s.mathId || (n = u.classList) != null && n.contains("ck-widget") && ((c = u.querySelector) != null && c.call(u, ".ck-math-widget-inner"))))
       return u;
   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 "";
-  let o = "", n = 0;
-  for (; n < l.length; ) {
-    let s = l.indexOf("\\placeholder", n);
+  let o = "", a = 0;
+  for (; a < l.length; ) {
+    let s = l.indexOf("\\placeholder", a);
     if (s === -1) {
-      o += l.slice(n);
+      o += l.slice(a);
       break;
     }
-    if (o += l.slice(n, s), n = s + 12, l[n] === "[") {
-      let i = 1;
-      for (n++; n < l.length && i > 0; )
-        l[n] === "[" ? i++ : l[n] === "]" && i--, n++;
+    if (o += l.slice(a, s), a = s + 12, l[a] === "[") {
+      let n = 1;
+      for (a++; a < l.length && n > 0; )
+        l[a] === "[" ? n++ : l[a] === "]" && n--, a++;
     }
-    if (l[n] === "{") {
-      let i = 1, c = n + 1;
-      for (n++; n < l.length && i > 0; )
-        l[n] === "{" ? i++ : l[n] === "}" && i--, n++;
-      let m = l.slice(c, n - 1);
+    if (l[a] === "{") {
+      let n = 1, c = a + 1;
+      for (a++; a < l.length && n > 0; )
+        l[a] === "{" ? n++ : l[a] === "}" && n--, a++;
+      let m = l.slice(c, a - 1);
       m.trim() === "" ? o += "\\quad " : o += m;
     }
   }
   return o;
 }
 function z(l) {
-  let o = "", n = 0;
+  let o = "", a = 0;
   const s = "\\text{";
-  for (; n < l.length; ) {
-    const i = l.indexOf(s, n);
-    if (i === -1) {
-      o += l.slice(n);
+  for (; a < l.length; ) {
+    const n = l.indexOf(s, a);
+    if (n === -1) {
+      o += l.slice(a);
       break;
     }
-    o += l.slice(n, i);
-    let c = 1, m = i + s.length;
+    o += l.slice(a, n);
+    let c = 1, m = n + 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;
+    o += l.slice(n + s.length, m - 1), a = m;
   }
   return o;
 }
@@ -505,8 +505,8 @@ function oe(l) {
   if (!l) return "";
   const o = l.getAttribute("data-latex");
   if (o) return o;
-  const n = l.querySelector("math-field");
-  return n ? n.getValue ? n.getValue("latex-expanded") : n.value || "" : "";
+  const a = l.querySelector("math-field");
+  return a ? a.getValue ? a.getValue("latex-expanded") : a.value || "" : "";
 }
 function Le(l, o) {
   if (!l || !o) return !1;
@@ -519,16 +519,16 @@ function Le(l, o) {
 function ze(l, o) {
   var u;
   if (!l || !o) return null;
-  const n = l.model.document.selection.getSelectedElement();
-  if ((n == null ? void 0 : n.name) === "mathInline") return n;
+  const a = l.model.document.selection.getSelectedElement();
+  if ((a == null ? void 0 : a.name) === "mathInline") return a;
   const s = o.getAttribute("data-math-id");
   if (s) {
     const x = window.__ckMathWidgets.get(s);
     if (Le(l, x)) return x;
   }
-  const i = l.editing.view.domConverter.mapDomToView(o);
-  if (i) {
-    const x = l.editing.mapper.toModelElement(i);
+  const n = l.editing.view.domConverter.mapDomToView(o);
+  if (n) {
+    const x = l.editing.mapper.toModelElement(n);
     if ((x == null ? void 0 : x.name) === "mathInline") return x;
   }
   const c = oe(o);
@@ -539,21 +539,21 @@ function ze(l, o) {
       return x;
   return null;
 }
-function Se(l, o, n, s) {
+function Se(l, o, a, s) {
   if (!l || l._mathWidgetOpening) return;
   l._mathWidgetOpening = !0, queueMicrotask(() => {
     l._mathWidgetOpening = !1;
   });
-  const i = Le(l, o) ? o : ze(l, s), c = (i == null ? void 0 : i.getAttribute("latex")) || n || oe(s);
+  const n = Le(l, o) ? o : ze(l, s), c = (n == null ? void 0 : n.getAttribute("latex")) || a || oe(s);
   if (!c) return;
-  i && l.model.change((u) => {
-    u.setSelection(i, "on");
+  n && l.model.change((u) => {
+    u.setSelection(n, "on");
   });
   const m = l.mathWidgetClickHandler || window.__ckMathWidgetClickHandler;
-  m && m(i, c), window.dispatchEvent(new CustomEvent("editAneesWidget", {
+  m && m(n, c), window.dispatchEvent(new CustomEvent("editAneesWidget", {
     detail: {
       editor: l,
-      modelElement: i,
+      modelElement: n,
       latex: c
     }
   }));
@@ -561,11 +561,11 @@ function Se(l, o, n, s) {
 function Xe(l, o) {
   if (!o || o._ckMathClickBound) return;
   o._ckMathClickBound = !0;
-  const n = (s) => {
-    var i;
-    s.button === 0 && (s.preventDefault(), s.stopPropagation(), (i = s.stopImmediatePropagation) == null || i.call(s), Se(l, null, oe(o), o));
+  const a = (s) => {
+    var n;
+    s.button === 0 && (s.preventDefault(), s.stopPropagation(), (n = s.stopImmediatePropagation) == null || n.call(s), Se(l, null, oe(o), o));
   };
-  o.addEventListener("mousedown", n, !0), o.addEventListener("click", n, !0);
+  o.addEventListener("mousedown", a, !0), o.addEventListener("click", a, !0);
 }
 const Ke = [
   {
@@ -2003,7 +2003,7 @@ const Ke = [
   //     { type: 'sep', cols: 2, cls: 'cme-trig-subgroup' }
   //   ]
   // },
-], Ye = [
+], _e = [
   {
     label: "H₂O",
     isChem: !0,
@@ -3605,11 +3605,11 @@ const Ke = [
   //   ]
   // },
 ];
-function _e(l = "") {
+function Ye(l = "") {
   if (String(l).match(/^\\ce\{([\s\S]*)\}$/) || l.includes("\\class{cme-"))
     return l;
-  const n = l.replace(/\\text\{([^}]*)\}/g, "$1").replace(/\$/g, "").trim();
-  return n ? `\\ce{${n}}` : "";
+  const a = l.replace(/\\text\{([^}]*)\}/g, "$1").replace(/\$/g, "").trim();
+  return a ? `\\ce{${a}}` : "";
 }
 function pe(l) {
   return l === "matrix" ? "\\begin{matrix} \\placeholder{} & \\placeholder{} \\\\ \\placeholder{} & \\placeholder{} \\end{matrix}" : l === "bmatrix" ? "\\begin{bmatrix} \\placeholder{} & \\placeholder{} \\\\ \\placeholder{} & \\placeholder{} \\end{bmatrix}" : l === "pmatrix" ? "\\begin{pmatrix} \\placeholder{} & \\placeholder{} \\\\ \\placeholder{} & \\placeholder{} \\end{pmatrix}" : l === "vmatrix" ? "\\begin{vmatrix} \\placeholder{} & \\placeholder{} \\\\ \\placeholder{} & \\placeholder{} \\end{vmatrix}" : l.replace(/#0|#\?/g, "\\placeholder{}");
@@ -3628,20 +3628,20 @@ class at extends He {
       isObject: !0,
       allowWhere: "$text",
       allowAttributes: ["latex"]
-    }), o.model.schema.addChildCheck((s, i) => {
-      if (i.name === "mathInline")
+    }), o.model.schema.addChildCheck((s, n) => {
+      if (n.name === "mathInline")
         return !0;
     }), o.conversion.for("editingDowncast").elementToElement({
       model: "mathInline",
-      view: (s, { writer: i }) => {
+      view: (s, { writer: n }) => {
         const c = s.getAttribute("latex") || "", m = "math-" + Math.random().toString(36).substr(2, 9);
         window.__ckMathWidgets.set(m, s);
-        const u = i.createContainerElement("span", {
+        const u = n.createContainerElement("span", {
           class: "ck-math-widget ck-math-inline-word",
           contenteditable: "false",
           "data-math-id": m,
           "data-latex": c
-        }), x = i.createRawElement(
+        }), x = n.createRawElement(
           "span",
           {
             class: "ck-math-widget-inner",
@@ -3682,21 +3682,21 @@ class at extends He {
             k(), requestAnimationFrame(k);
           }
         );
-        return i.insert(i.createPositionAt(u, 0), x), Ue(u, i, { label: "math formula" });
+        return n.insert(n.createPositionAt(u, 0), x), Ue(u, n, { label: "math formula" });
       }
     });
-    const n = o.editing.view.document;
-    this.listenTo(n, "mousedown", (s, i) => {
-      const c = Qe(i.domTarget);
-      c && i.domEvent.button === 0 && (s.stop(), i.preventDefault(), Se(
+    const a = o.editing.view.document;
+    this.listenTo(a, "mousedown", (s, n) => {
+      const c = Qe(n.domTarget);
+      c && n.domEvent.button === 0 && (s.stop(), n.preventDefault(), Se(
         o,
         null,
         oe(c),
         c
       ));
     }, { priority: "high" }), o.conversion.for("editingDowncast").add((s) => {
-      s.on("attribute:latex:mathInline", (i, c, m) => {
-        if (!m.consumable.consume(c.item, i.name))
+      s.on("attribute:latex:mathInline", (n, c, m) => {
+        if (!m.consumable.consume(c.item, n.name))
           return;
         const u = m.writer, x = m.mapper.toViewElement(c.item);
         if (x) {
@@ -3720,8 +3720,8 @@ class at extends He {
       });
     }), o.conversion.for("dataDowncast").elementToElement({
       model: "mathInline",
-      view: (s, { writer: i }) => {
-        const c = s.getAttribute("latex") || "", m = i.createContainerElement("span", {
+      view: (s, { writer: n }) => {
+        const c = s.getAttribute("latex") || "", m = n.createContainerElement("span", {
           class: "math-tex",
           "data-latex": c,
           // Keep raw latex in data-latex for restoring
@@ -3732,21 +3732,21 @@ class at extends He {
             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(m, 0), i.createText(u)), m;
+        return u.includes("\\enclose") && /^\\ce\{[\s\S]*\}$/i.test(u.trim()) && (u = u.trim().replace(/^\\ce\{([\s\S]*)\}$/i, "$1")), n.insert(n.createPositionAt(m, 0), n.createText(u)), m;
       }
     }), o.conversion.for("upcast").elementToElement({
       view: {
         name: "span",
         classes: "math-tex"
       },
-      model: (s, { writer: i }) => {
+      model: (s, { writer: n }) => {
         const c = s.getAttribute("data-latex") || "";
-        return i.createElement("mathInline", { latex: c });
+        return n.createElement("mathInline", { latex: c });
       }
     });
   }
 }
-function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: i, onMouseLeave: c }) {
+function Ge({ matrixType: l, x: o, y: a, onSelect: s, onMouseEnter: n, onMouseLeave: c }) {
   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 === "") {
@@ -3781,9 +3781,9 @@ function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: i, onMouseLe
     "div",
     {
       className: "cme-matrix-hover-popover ck-only",
-      style: { top: `${n}px`, left: `${o}px` },
+      style: { top: `${a}px`, left: `${o}px` },
       onMouseDown: (b) => b.stopPropagation(),
-      onMouseEnter: i,
+      onMouseEnter: n,
       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((T, C) => {
@@ -3838,22 +3838,22 @@ function Ge({ matrixType: l, x: o, y: n, onSelect: s, onMouseEnter: i, onMouseLe
   );
 }
 let F = !1, be = null, V = null;
-function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i }) {
+function $e({ mode: l, onInsert: o, onClose: a, initialLatex: s, isEditing: n }) {
   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 [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);
+  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, _] = B(!1), se = re(null);
   O(() => {
-    const t = (a) => {
+    const t = (r) => {
       if (!U) return;
-      let d = a.clientX - Z.current.x, g = a.clientY - Z.current.y;
+      let d = r.clientX - Z.current.x, g = r.clientY - Z.current.y;
       if (se.current) {
         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);
       }
       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);
+    }, i = () => X(!1);
+    return U && (window.addEventListener("mousemove", t), window.addEventListener("mouseup", i)), () => {
+      window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", i);
     };
   }, [U]);
   const Ie = (t) => {
@@ -3862,19 +3862,19 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
       x: t.clientX - T.x,
       y: t.clientY - T.y
     };
-    const r = document.querySelector(".cme-editor-popup");
-    if (r) {
-      const a = r.getBoundingClientRect();
+    const i = document.querySelector(".cme-editor-popup");
+    if (i) {
+      const r = i.getBoundingClientRect();
       se.current = {
-        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
+        left: r.left - T.x,
+        top: r.top - T.y,
+        right: r.right - T.x,
+        bottom: r.bottom - T.y,
+        width: r.width,
+        height: r.height
       };
     }
-  }, _ = l === "math" ? Ke : Ye, [f, ce] = B({
+  }, Y = l === "math" ? Ke : _e, [f, ce] = B({
     bold: !1,
     italic: !1,
     color: "none",
@@ -3885,7 +3885,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
     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(
+        const i = window.__cmeManualBold !== void 0 ? window.__cmeManualBold : t.queryStyle({ fontSeries: "b" }) === "all" || t.queryStyle({ variantStyle: "bold" }) === "all", r = 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(
           (h) => t.queryStyle({ fontFamily: h }) === "all"
         ) || "none", g = window.__cmeManualFontSize !== void 0 ? window.__cmeManualFontSize : [5, 7, 9].find(
           (h) => t.queryStyle({ fontSize: h }) === "all"
@@ -3918,28 +3918,28 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
           (h) => t.queryStyle({ color: h }) === "all"
         ) || "none";
         ce((h) => ({
-          bold: r,
-          italic: a,
+          bold: i,
+          italic: r,
           fontFamily: d,
           fontSize: String(g),
           color: w
         }));
-      } catch (r) {
-        console.warn("Failed to query active styles:", r);
+      } catch (i) {
+        console.warn("Failed to query active styles:", i);
       }
   }, []);
   O(() => {
     if (!x && !k) return;
-    const t = (r) => {
-      !r.target.closest(".cme-matrix-hover-popover") && !r.target.closest(".cme-matrix-btn-wrapper") && I(null), !r.target.closest(".cme-color-picker-popup") && !r.target.closest('[title="Text Color"]') && E(null);
+    const t = (i) => {
+      !i.target.closest(".cme-matrix-hover-popover") && !i.target.closest(".cme-matrix-btn-wrapper") && I(null), !i.target.closest(".cme-color-picker-popup") && !i.target.closest('[title="Text Color"]') && E(null);
     };
     return window.addEventListener("mousedown", t, !0), window.addEventListener("pointerdown", t, !0), () => {
       window.removeEventListener("mousedown", t, !0), window.removeEventListener("pointerdown", t, !0);
     };
   }, [x, k]), O(() => {
     if (!b) return;
-    const t = (r) => {
-      !r.target.closest(".cme-more-popup") && !r.target.closest(".cme-more-trigger-btn") && y(null);
+    const t = (i) => {
+      !i.target.closest(".cme-more-popup") && !i.target.closest(".cme-more-trigger-btn") && y(null);
     };
     return window.addEventListener("mousedown", t, !0), window.addEventListener("pointerdown", t, !0), () => {
       window.removeEventListener("mousedown", t, !0), window.removeEventListener("pointerdown", t, !0);
@@ -3952,31 +3952,37 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
     const t = V;
     if (!t) return;
     t.macros = { ...t.macros, ...window.__cme_macros || {} }, t.defaultMode = "math";
-    const r = () => {
+    const i = () => {
       if (typeof t.applyStyle == "function" && t.applyStyle({ variantStyle: "up" }), s) {
-        let a = s;
+        let r = s;
         if (l === "chem") {
-          const d = a.match(/^\\ce\{([\s\S]*)\}$/i);
-          d && (a = d[1]);
+          const d = r.match(/^\\ce\{([\s\S]*)\}$/i);
+          d && (r = d[1]);
         }
-        a = z(a), a = ne(a), t.setValue ? t.setValue("", { silenceNotifications: !0 }) : t.value = "", t.executeCommand(["insert", a, { insertionMode: "replaceAll" }]);
+        r = z(r), r = ne(r), t.setValue ? t.setValue("", { silenceNotifications: !0 }) : t.value = "", t.executeCommand(["insert", r, { insertionMode: "replaceAll" }]);
       }
       requestAnimationFrame(() => t.focus());
     };
-    customElements.get("math-field") ? requestAnimationFrame(r) : customElements.whenDefined("math-field").then(() => requestAnimationFrame(r));
+    customElements.get("math-field") ? requestAnimationFrame(i) : customElements.whenDefined("math-field").then(() => requestAnimationFrame(i));
   }, [l, s]), O(() => {
     const t = V;
     if (!t) return;
-    const r = (a) => {
-      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(() => {
+    const i = (r) => {
+      if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(r.key) ? (F = !1, clearTimeout(be), window.__cmeManualBold = void 0, window.__cmeManualItalic = void 0, window.__cmeManualFontFamily = void 0, window.__cmeManualFontSize = void 0) : (r.key.length === 1 || r.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();
+      }, 500)), ["`", "~", "@", "^", "_", "$"].includes(r.key) && !r.ctrlKey && !r.metaKey && !r.altKey) {
+        r.preventDefault(), r.stopPropagation();
+        let d = "";
+        r.key === "`" ? d = "\\text{\\char96}" : r.key === "~" ? d = "\\text{~}" : r.key === "@" ? d = "\\text{@}" : r.key === "^" ? d = "\\text{^}" : r.key === "_" ? d = "\\_" : r.key === "$" && (d = "\\$"), t.executeCommand(["insert", d]);
+        return;
+      }
+      if (r.key.length === 1 && !r.ctrlKey && !r.metaKey && !r.altKey && /[a-zA-Z0-9]/.test(r.key)) {
+        r.preventDefault(), r.stopPropagation();
         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 M = `${L}{${r.key}}`;
+        w && h ? (M = `\\mathbfit{${r.key}}`, d && (M = `\\boldsymbol{\\mathsf{${r.key}}}`), g && (M = `\\boldsymbol{\\mathtt{${r.key}}}`)) : w && (d || g) && (M = `\\boldsymbol{${M}}`);
         let R = M;
         const j = f.fontSize === "auto" ? 5 : parseInt(f.fontSize, 10);
         if (j !== 5) {
@@ -3986,63 +3992,63 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
         f.color !== "none" && (R = `\\textcolor{${f.color}}{${R}}`), t.executeCommand(["insert", R]);
         return;
       }
-      a.key === " " ? (a.preventDefault(), t.executeCommand(["insert", "\\, "])) : a.key === "Enter" && (a.preventDefault(), a.stopImmediatePropagation(), t.executeCommand("addRowAfter"));
+      r.key === " " ? (r.preventDefault(), t.executeCommand(["insert", "\\, "])) : r.key === "Enter" && (r.preventDefault(), r.stopImmediatePropagation(), t.executeCommand("addRowAfter"));
     };
-    return t.addEventListener("keydown", r, !0), () => t.removeEventListener("keydown", r, !0);
+    return t.addEventListener("keydown", i, !0), () => t.removeEventListener("keydown", i, !0);
   }, [l, f, P]), O(() => {
     const t = V;
     if (!t) return;
-    const r = () => {
+    const i = () => {
       setTimeout(() => {
-        const a = t.shadowRoot;
-        if (!a) return;
-        const d = a.querySelector(".ML__caret") || a.querySelector('[class*="caret"]');
+        const r = t.shadowRoot;
+        if (!r) return;
+        const d = r.querySelector(".ML__caret") || r.querySelector('[class*="caret"]');
         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(P, 50), () => {
-      t.removeEventListener("selection-change", r), t.removeEventListener("input", r), t.removeEventListener("keydown", r);
+    return t.addEventListener("selection-change", i), t.addEventListener("input", i), t.addEventListener("keydown", i), setTimeout(P, 50), () => {
+      t.removeEventListener("selection-change", i), t.removeEventListener("input", i), t.removeEventListener("keydown", i);
     };
   }, [P]);
   const J = he((t) => {
-    const r = V;
-    r && (r.focus(), r.executeCommand(["insert", t]));
-  }, []), Be = he((t, r, a) => {
+    const i = V;
+    i && (i.focus(), i.executeCommand(["insert", t]));
+  }, []), Be = he((t, i, r) => {
     let d = `\\begin{${t}} `;
-    for (let g = 0; g < r; g++) {
-      for (let w = 0; w < a; w++)
-        d += "#?", w < a - 1 && (d += " & ");
-      g < r - 1 && (d += " \\\\ ");
+    for (let g = 0; g < i; g++) {
+      for (let w = 0; w < r; w++)
+        d += "#?", w < r - 1 && (d += " & ");
+      g < i - 1 && (d += " \\\\ ");
     }
     d += ` \\end{${t}}`, J(d);
   }, [J]), De = (t) => {
-    t.stopPropagation(), ge((r) => !r), ke(!1), C({ x: 0, y: 0 });
+    t.stopPropagation(), ge((i) => !i), ke(!1), C({ x: 0, y: 0 });
   }, Ne = (t) => {
-    t.stopPropagation(), ke((r) => !r), ge(!1), C({ x: 0, y: 0 });
+    t.stopPropagation(), ke((i) => !i), ge(!1), C({ x: 0, y: 0 });
   }, ue = (t) => {
     t && t.stopPropagation();
-    const r = V;
-    if (!r) {
-      n && n();
+    const i = V;
+    if (!i) {
+      a && a();
       return;
     }
-    const a = r.getValue ? r.getValue("latex") : r.value, d = s || "";
-    !a || a.trim() === "" || a === d ? n && n() : Y(!0);
+    const r = i.getValue ? i.getValue("latex") : i.value, d = s || "";
+    !r || r.trim() === "" || r === d ? a && a() : _(!0);
   }, Re = () => {
     const t = V;
     if (!t) return;
-    let r = t.getValue ? t.getValue("latex") : t.value;
-    if (!r || r.trim() === "") {
-      n && n();
+    let i = t.getValue ? t.getValue("latex") : t.value;
+    if (!i || i.trim() === "") {
+      a && a();
       return;
     }
-    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((L) => `\\${d}{${L.trim()}}`).join(" \\\\ ")}}`;
+    l === "chem" && (i = Ye(i)), i = z(i);
+    const r = i.match(/^\\(mathrm|mathit|mathbf|mathsf|text)\{\\displaylines\{([\s\S]*)\}\}$/);
+    if (r) {
+      const d = r[1];
+      i = `\\displaylines{${r[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();
+    i = i.replace(/[\r\n]+/g, " "), o && o(i), t.setValue ? t.setValue("") : t.value = "", a && a();
   };
   return Q(
     /* @__PURE__ */ e.createElement(
@@ -4059,18 +4065,18 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
           onMouseDown: Ie,
           style: { cursor: U ? "grabbing" : "grab" }
         },
-        /* @__PURE__ */ e.createElement("span", null, i ? l === "math" ? "Edit Math Formula" : "Edit Chemistry Formula" : l === "math" ? "Math Editor" : "Chemistry Editor")
+        /* @__PURE__ */ e.createElement("span", null, n ? 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" }, _.map((t, r) => {
-        const a = m === r;
+      /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar", role: "toolbar", "aria-label": "Symbol palette" }, /* @__PURE__ */ e.createElement("div", { className: "cme-toolbar-groups" }, Y.map((t, i) => {
+        const r = m === i;
         return /* @__PURE__ */ e.createElement(
           "button",
           {
             key: t.isMatrix ? "matrix-tab" : t.label,
-            className: `cme-group-tab${a ? " active" : ""}`,
+            className: `cme-group-tab${r ? " active" : ""}`,
             type: "button",
             onMouseDown: (d) => {
-              d.preventDefault(), u(r), I(null);
+              d.preventDefault(), u(i), I(null);
             }
           },
           t.mathLabel ? /* @__PURE__ */ e.createElement(
@@ -4090,7 +4096,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
                 padding: "0",
                 margin: "0",
                 boxShadow: "none",
-                color: a ? "#333333" : "#ffffff"
+                color: r ? "#333333" : "#ffffff"
               }
             },
             t.mathLabel
@@ -4098,21 +4104,21 @@ 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 = _[m]) == null ? void 0 : d.items) || [], r = t.some((g) => g.type === "sep"), a = [];
-        if (r) {
+        const t = ((d = Y[m]) == null ? void 0 : d.items) || [], i = t.some((g) => g.type === "sep"), r = [];
+        if (i) {
           let g = { cols: 2, small: !1, cls: "", items: [], moreItems: null };
           for (const w of t)
-            w.type === "sep" ? (g.items.length > 0 && a.push(g), g = { cols: w.cols || 2, small: !!w.small, cls: w.cls || "", items: [], moreItems: w.moreItems || null, moreCols: w.moreCols || 1 }) : g.items.push(w);
-          g.items.length > 0 && a.push(g);
+            w.type === "sep" ? (g.items.length > 0 && r.push(g), g = { cols: w.cols || 2, small: !!w.small, cls: w.cls || "", items: [], moreItems: w.moreItems || null, moreCols: w.moreCols || 1 }) : g.items.push(w);
+          g.items.length > 0 && r.push(g);
         } else
           for (let w = 0; w < t.length; w += 4)
-            a.push({
+            r.push({
               cols: 2,
               small: !1,
               cls: "",
               items: t.slice(w, w + 4)
             });
-        return a.map((g, w) => /* @__PURE__ */ e.createElement(
+        return r.map((g, w) => /* @__PURE__ */ e.createElement(
           "div",
           {
             key: w,
@@ -4132,7 +4138,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
                 if (h.stopPropagation(), b && b.items === g.moreItems)
                   y(null);
                 else {
-                  const L = h.currentTarget.getBoundingClientRect(), M = _[m] || {};
+                  const L = h.currentTarget.getBoundingClientRect(), M = Y[m] || {};
                   y({ cx: L.left + L.width / 2, y: L.bottom, items: g.moreItems, cols: g.moreCols, isTemplate: M.isTemplate || M.label === "√(□)" || M.isMatrix });
                 }
               }
@@ -4140,7 +4146,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
             "▶"
           ),
           g.items.map((h, L) => {
-            const M = _[m];
+            const M = Y[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(
@@ -4303,13 +4309,13 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
         {
           ref: (t) => {
             t && requestAnimationFrame(() => {
-              const r = t.getBoundingClientRect(), a = document.querySelector(".cme-editor-popup");
-              let d = b.cx - r.width / 2, g = b.y;
-              if (a) {
-                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);
+              const i = t.getBoundingClientRect(), r = document.querySelector(".cme-editor-popup");
+              let d = b.cx - i.width / 2, g = b.y;
+              if (r) {
+                const w = r.getBoundingClientRect();
+                d + i.width > w.right - 4 && (d = w.right - i.width - 4), d < w.left + 4 && (d = w.left + 4), g + i.height > w.bottom - 4 && (g = w.bottom - i.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";
+              d + i.width > window.innerWidth - 4 && (d = window.innerWidth - i.width - 4), g + i.height > window.innerHeight - 4 && (g = window.innerHeight - i.height - 4), d < 4 && (d = 4), t.style.left = `${d}px`, t.style.top = `${g}px`, t.style.transform = "none";
             });
           },
           className: "cme-more-popup",
@@ -4322,15 +4328,15 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
             gridTemplateColumns: `repeat(${b.cols || 1}, auto)`
           }
         },
-        b.items.map((t, r) => /* @__PURE__ */ e.createElement(
+        b.items.map((t, i) => /* @__PURE__ */ e.createElement(
           "button",
           {
-            key: r,
+            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), y(null);
+            onMouseDown: (r) => {
+              r.preventDefault(), J(t.insert), y(null);
             }
           },
           t.insert && !t.action && (t.cls === "template" || t.isWidget) ? /* @__PURE__ */ e.createElement(
@@ -4362,8 +4368,8 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
           className: "cme-mathfield-container",
           onMouseDown: (t) => {
             c.current && (t.target === c.current || c.current.contains(t.target)) || (t.preventDefault(), requestAnimationFrame(() => {
-              var r, a;
-              (a = (r = c.current) == null ? void 0 : r.focus) == null || a.call(r);
+              var i, r;
+              (r = (i = c.current) == null ? void 0 : i.focus) == null || r.call(i);
             }));
           }
         },
@@ -4380,13 +4386,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")),
+      /* @__PURE__ */ e.createElement("div", { className: "cme-popup-footer" }, /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-insert-btn", onClick: Re }, n ? "Update" : "Insert"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-cancel-btn", onClick: ue }, "Cancel"), /* @__PURE__ */ e.createElement("span", { style: { marginLeft: "auto", fontSize: "11px", color: "#888", alignSelf: "center", marginRight: "10px" } }, "v1.0.11")),
       We && /* @__PURE__ */ e.createElement("div", { className: "cme-confirm-overlay", onMouseDown: (t) => {
-        t.stopPropagation(), Y(!1);
+        t.stopPropagation(), _(!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();
+        t.stopPropagation(), _(!1), a && a();
       } }, "Close"), /* @__PURE__ */ e.createElement("button", { type: "button", className: "cme-confirm-cancel-btn", onClick: (t) => {
-        t.stopPropagation(), Y(!1);
+        t.stopPropagation(), _(!1);
       } }, "Cancel")))),
       x && Q(
         /* @__PURE__ */ e.createElement(
@@ -4395,8 +4401,8 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
             matrixType: x.type,
             x: x.x,
             y: x.y,
-            onSelect: (t, r) => {
-              Be(x.type, t, r), I(null);
+            onSelect: (t, i) => {
+              Be(x.type, t, i), I(null);
             },
             onMouseEnter: () => {
             },
@@ -4466,7 +4472,7 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
             "violet",
             "gold"
           ].map((t) => {
-            const r = f.color === t || t === "black" && (f.color === "none" || !f.color);
+            const i = f.color === t || t === "black" && (f.color === "none" || !f.color);
             return /* @__PURE__ */ e.createElement(
               "div",
               {
@@ -4477,11 +4483,11 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
                   height: "16px",
                   backgroundColor: t,
                   cursor: "pointer",
-                  border: r ? "2px solid #e6c229" : "1px solid #000",
+                  border: i ? "2px solid #e6c229" : "1px solid #000",
                   boxSizing: "border-box"
                 },
-                onMouseDown: (a) => {
-                  a.preventDefault(), a.stopPropagation();
+                onMouseDown: (r) => {
+                  r.preventDefault(), r.stopPropagation();
                   const d = c.current;
                   d && typeof d.applyStyle == "function" && (d.focus(), d.applyStyle({ color: t === "black" ? "none" : t }), P()), E(null);
                 }
@@ -4495,14 +4501,14 @@ function $e({ mode: l, onInsert: o, onClose: n, initialLatex: s, isEditing: i })
     document.body
   );
 }
-const ot = ({ isOpen: l, mode: o, initialValue: n, onInsert: s, onClose: i }) => l ? /* @__PURE__ */ e.createElement(
+const ot = ({ isOpen: l, mode: o, initialValue: a, onInsert: s, onClose: n }) => l ? /* @__PURE__ */ e.createElement(
   $e,
   {
     mode: o,
     onInsert: s,
-    onClose: i,
-    initialLatex: n || "",
-    isEditing: !!n
+    onClose: n,
+    initialLatex: a || "",
+    isEditing: !!a
   }
 ) : null;
 export {