digi-mathchem-editor 1.0.23 → 1.0.24

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

@@ -1,4 +1,4 @@
-import e, { useState as T, useEffect as O, useMemo as Oe, useRef as le, useCallback as fe } from "react";
+import e, { useState as T, useEffect as D, useMemo as Oe, useRef as le, useCallback as fe } from "react";
 import { createPortal as re } from "react-dom";
 import { FontAwesomeIcon as ge } from "@fortawesome/react-fontawesome";
 import { faBold as Fe, faItalic as Ze } from "@fortawesome/free-solid-svg-icons";
@@ -326,7 +326,7 @@ function ct() {
       }
       if (a.addedNodes)
         for (const m of a.addedNodes)
-          m instanceof Element && (((o = m.tagName) == null ? void 0 : o.toLowerCase()) === "math-field" && requestAnimationFrame(() => pe(m)), (c = m.querySelectorAll) == null || c.call(m, "math-field").forEach((p) => requestAnimationFrame(() => pe(p))));
+          m instanceof Element && (((o = m.tagName) == null ? void 0 : o.toLowerCase()) === "math-field" && requestAnimationFrame(() => pe(m)), (c = m.querySelectorAll) == null || c.call(m, "math-field").forEach((b) => requestAnimationFrame(() => pe(b))));
     }
   }), ve.observe(document.body, {
     childList: !0,
@@ -361,28 +361,28 @@ const je = [
   }), l;
 }, mt = ht();
 function dt({ isOpen: l, onClose: n, onInsert: o, position: c }) {
-  const [a, m] = T(""), [p, b] = T("All");
-  O(() => {
-    l && (m(""), b("All"));
+  const [a, m] = T(""), [b, p] = T("All");
+  D(() => {
+    l && (m(""), p("All"));
   }, [l]);
   const y = Oe(() => {
     let u = mt;
-    if (p !== "All" && (u = u.filter((M) => M.category === p)), a.trim()) {
+    if (b !== "All" && (u = u.filter((M) => M.category === b)), a.trim()) {
       const M = a.trim().toUpperCase();
       u = u.filter((x) => x.code.includes(M));
     }
     return u;
-  }, [p, a]), L = Oe(() => {
-    if (p !== "All" && !a.trim())
-      return { [p]: y };
+  }, [b, a]), L = Oe(() => {
+    if (b !== "All" && !a.trim())
+      return { [b]: y };
     const u = {};
     return y.forEach((M) => {
       u[M.category] || (u[M.category] = []), u[M.category].push(M);
     }), u;
-  }, [y, p, a]), k = (u) => {
+  }, [y, b, a]), k = (u) => {
     u.key === "Escape" && n();
   };
-  if (O(() => (l && window.addEventListener("keydown", k), () => window.removeEventListener("keydown", k)), [l]), !l) return null;
+  if (D(() => (l && window.addEventListener("keydown", k), () => window.removeEventListener("keydown", k)), [l]), !l) return null;
   let v = { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
   if (c) {
     let u = c.x - 120, M = c.y;
@@ -402,8 +402,8 @@ function dt({ isOpen: l, onClose: n, onInsert: o, position: c }) {
   ), /* @__PURE__ */ e.createElement(
     "select",
     {
-      value: p,
-      onChange: (u) => b(u.target.value),
+      value: b,
+      onChange: (u) => p(u.target.value),
       className: "scm-category-select"
     },
     je.map((u) => /* @__PURE__ */ e.createElement("option", { key: u.id, value: u.id }, u.name))
@@ -420,7 +420,7 @@ function dt({ isOpen: l, onClose: n, onInsert: o, position: c }) {
     x.char
   ))))), y.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "scm-no-results" }, "No characters found.")))));
 }
-const pt = "1.0.23", bt = {
+const pt = "1.0.24", bt = {
   version: pt
 };
 window.__cme_macros = {
@@ -452,13 +452,13 @@ typeof window < "u" && (window.MathfieldElement ? window.MathfieldElement.fontsD
 window.__ckMathWidgets = window.__ckMathWidgets || /* @__PURE__ */ new Map();
 window.__ckMathWidgetClickHandler = null;
 function gt(l) {
-  var o, c, a, m, p;
+  var o, c, a, m, b;
   if (!l) return null;
   const n = typeof l.composedPath == "function" ? l.composedPath() : [l];
-  for (const b of n)
-    if (b instanceof HTMLElement && ((o = b.classList) != null && o.contains("ck-math-widget") || (c = b.dataset) != null && c.mathId || (a = b.classList) != null && a.contains("ck-widget") && ((m = b.querySelector) != null && m.call(b, ".ck-math-widget-inner"))))
-      return b;
-  return l instanceof Element ? (p = l.closest) == null ? void 0 : p.call(l, ".ck-math-widget, [data-math-id]") : null;
+  for (const p of n)
+    if (p instanceof HTMLElement && ((o = p.classList) != null && o.contains("ck-math-widget") || (c = p.dataset) != null && c.mathId || (a = p.classList) != null && a.contains("ck-widget") && ((m = p.querySelector) != null && m.call(p, ".ck-math-widget-inner"))))
+      return p;
+  return l instanceof Element ? (b = l.closest) == null ? void 0 : b.call(l, ".ck-math-widget, [data-math-id]") : null;
 }
 function Me(l) {
   if (!l) return "";
@@ -478,8 +478,8 @@ function Me(l) {
       let a = 1, m = o + 1;
       for (o++; o < l.length && a > 0; )
         l[o] === "{" ? a++ : l[o] === "}" && a--, o++;
-      let p = l.slice(m, o - 1);
-      p.trim() === "" ? n += "\\quad " : n += p;
+      let b = l.slice(m, o - 1);
+      b.trim() === "" ? n += "\\quad " : n += b;
     }
   }
   return n;
@@ -494,11 +494,11 @@ function ne(l) {
       break;
     }
     n += l.slice(o, a);
-    let m = 1, p = a + c.length;
-    for (; p < l.length && m > 0; )
-      l[p] === "{" ? m++ : l[p] === "}" && m--, p++;
-    const b = l.slice(a + c.length, p - 1);
-    /^['"/]+$/.test(b) || b.includes("\\textquotedbl") || b.includes("\\textquotesingle") ? n += "\\text{" + b + "}" : n += b, o = p;
+    let m = 1, b = a + c.length;
+    for (; b < l.length && m > 0; )
+      l[b] === "{" ? m++ : l[b] === "}" && m--, b++;
+    const p = l.slice(a + c.length, b - 1);
+    /^['"/]+$/.test(p) || p.includes("\\textquotedbl") || p.includes("\\textquotesingle") ? n += "\\text{" + p + "}" : n += p, o = b;
   }
   return n;
 }
@@ -533,18 +533,18 @@ function Pe(l) {
   for (; c && a < 10; ) {
     c = !1, a++;
     for (const m of o) {
-      let p = 0;
-      for (; p < n.length; ) {
-        const b = n.indexOf(m, p);
-        if (b === -1) break;
-        let y = 1, L = b + m.length;
+      let b = 0;
+      for (; b < n.length; ) {
+        const p = n.indexOf(m, b);
+        if (p === -1) break;
+        let y = 1, L = p + m.length;
         for (; L < n.length && y > 0; )
           n[L] === "{" && !Ue(n, L) ? y++ : n[L] === "}" && !Ue(n, L) && y--, L++;
         if (y === 0) {
-          const k = n.slice(b + m.length, L - 1);
-          n = n.slice(0, b) + k + n.slice(L), c = !0, p = b;
+          const k = n.slice(p + m.length, L - 1);
+          n = n.slice(0, p) + k + n.slice(L), c = !0, b = p;
         } else
-          p = b + m.length;
+          b = p + m.length;
       }
     }
   }
@@ -598,8 +598,8 @@ function qe(l, n, o, c) {
   if (!l) return "";
   if (!n && !o)
     return ut(l, { fontFamily: c });
-  const a = c === "sans-serif", m = c === "monospace", p = c === "roman";
-  return n && o ? a ? `\\boldsymbol{\\mathsf{${l}}}` : m ? `\\boldsymbol{\\mathtt{${l}}}` : p ? `\\mathbfit{\\mathrm{${l}}}` : `\\mathbfit{${l}}` : n ? a ? `\\boldsymbol{\\mathsf{${l}}}` : m ? `\\boldsymbol{\\mathtt{${l}}}` : p ? `\\mathbf{\\mathrm{${l}}}` : `\\mathbf{${l}}` : o ? a ? `\\mathsf{${l}}` : m ? `\\mathtt{${l}}` : p ? `\\mathit{\\mathrm{${l}}}` : `\\mathit{${l}}` : l;
+  const a = c === "sans-serif", m = c === "monospace", b = c === "roman";
+  return n && o ? a ? `\\boldsymbol{\\mathsf{${l}}}` : m ? `\\boldsymbol{\\mathtt{${l}}}` : b ? `\\mathbfit{\\mathrm{${l}}}` : `\\mathbfit{${l}}` : n ? a ? `\\boldsymbol{\\mathsf{${l}}}` : m ? `\\boldsymbol{\\mathtt{${l}}}` : b ? `\\mathbf{\\mathrm{${l}}}` : `\\mathbf{${l}}` : o ? a ? `\\mathsf{${l}}` : m ? `\\mathtt{${l}}` : b ? `\\mathit{\\mathrm{${l}}}` : `\\mathit{${l}}` : l;
 }
 function de(l, n, o, c) {
   if (!l) return "";
@@ -607,8 +607,8 @@ function de(l, n, o, c) {
   const m = a.match(/^\\displaylines\s*\{([\s\S]*)\}$/i);
   if (m && (a = m[1].trim()), a.match(/^\\begin\{(array|matrix|pmatrix|bmatrix|vmatrix|Vmatrix|align|aligned|gather|cases)\}([\s\S]*)\\end\{\1\}$/i))
     return a;
-  const b = a.match(/^\\begin\{(array|gather)\}(\{[\s\S]*?\})?([\s\S]*?)\\end\{\1\}$/i);
-  if (b && (a = b[3].trim()), /\\\\|\\cr|\\newline|\\par|\n/.test(a)) {
+  const p = a.match(/^\\begin\{(array|gather)\}(\{[\s\S]*?\})?([\s\S]*?)\\end\{\1\}$/i);
+  if (p && (a = p[3].trim()), /\\\\|\\cr|\\newline|\\par|\n/.test(a)) {
     const y = /\\\\(?:\[[^\]]*\])?|\\cr|\\newline|\\par|\n/;
     return `\\displaylines{${a.split(y).map((v) => {
       const u = v.trim();
@@ -639,7 +639,7 @@ function Qe(l, n) {
   }
 }
 function wt(l, n) {
-  var b;
+  var p;
   if (!l || !n) return null;
   const o = l.model.document.selection.getSelectedElement();
   if ((o == null ? void 0 : o.name) === "mathInline") return o;
@@ -655,9 +655,9 @@ function wt(l, n) {
   }
   const m = ke(n);
   if (!m) return null;
-  const p = l.model.document.getRoot();
-  for (const { item: y } of l.model.createRangeIn(p))
-    if ((b = y.is) != null && b.call(y, "element", "mathInline") && y.getAttribute("latex") === m)
+  const b = l.model.document.getRoot();
+  for (const { item: y } of l.model.createRangeIn(b))
+    if ((p = y.is) != null && p.call(y, "element", "mathInline") && y.getAttribute("latex") === m)
       return y;
   return null;
 }
@@ -668,11 +668,11 @@ function Xe(l, n, o, c) {
   });
   const a = Qe(l, n) ? n : wt(l, c), m = (a == null ? void 0 : a.getAttribute("latex")) || o || ke(c);
   if (!m) return;
-  a && l.model.change((b) => {
-    b.setSelection(a, "on");
+  a && l.model.change((p) => {
+    p.setSelection(a, "on");
   });
-  const p = l.mathWidgetClickHandler || window.__ckMathWidgetClickHandler;
-  p && p(a, m), window.dispatchEvent(new CustomEvent("editAneesWidget", {
+  const b = l.mathWidgetClickHandler || window.__ckMathWidgetClickHandler;
+  b && b(a, m), window.dispatchEvent(new CustomEvent("editAneesWidget", {
     detail: {
       editor: l,
       modelElement: a,
@@ -3761,12 +3761,12 @@ class It extends it {
     }), n.conversion.for("editingDowncast").elementToElement({
       model: "mathInline",
       view: (c, { writer: a }) => {
-        const m = c.getAttribute("latex") || "", p = "math-" + Math.random().toString(36).substr(2, 9);
-        window.__ckMathWidgets.set(p, c);
-        const b = a.createContainerElement("span", {
+        const m = c.getAttribute("latex") || "", b = "math-" + Math.random().toString(36).substr(2, 9);
+        window.__ckMathWidgets.set(b, c);
+        const p = a.createContainerElement("span", {
           class: "ck-math-widget ck-math-inline-word",
           contenteditable: "false",
-          "data-math-id": p,
+          "data-math-id": b,
           "data-latex": m
         }), y = a.createRawElement(
           "span",
@@ -3811,7 +3811,7 @@ class It extends it {
             u(), requestAnimationFrame(u);
           }
         );
-        return a.insert(a.createPositionAt(b, 0), y), at(b, a, { label: "math formula" });
+        return a.insert(a.createPositionAt(p, 0), y), at(p, a, { label: "math formula" });
       }
     });
     const o = n.editing.view.document;
@@ -3824,12 +3824,12 @@ class It extends it {
         m
       ));
     }, { priority: "high" }), n.conversion.for("editingDowncast").add((c) => {
-      c.on("attribute:latex:mathInline", (a, m, p) => {
-        if (!p.consumable.consume(m.item, a.name))
+      c.on("attribute:latex:mathInline", (a, m, b) => {
+        if (!b.consumable.consume(m.item, a.name))
           return;
-        const b = p.writer, y = p.mapper.toViewElement(m.item);
+        const p = b.writer, y = b.mapper.toViewElement(m.item);
         if (y) {
-          b.setAttribute("data-latex", m.attributeNewValue, y);
+          p.setAttribute("data-latex", m.attributeNewValue, y);
           const L = n.editing.view.domConverter.mapViewToDom(y);
           if (L) {
             const k = L.querySelector("math-field");
@@ -3850,20 +3850,20 @@ class It extends it {
     }), n.conversion.for("dataDowncast").elementToElement({
       model: "mathInline",
       view: (c, { writer: a }) => {
-        const m = c.getAttribute("latex") || "", p = a.createContainerElement("span", {
+        const m = c.getAttribute("latex") || "", b = a.createContainerElement("span", {
           class: "math-tex",
           "data-latex": m,
           // Keep raw latex in data-latex for restoring
           style: "display:inline;"
         });
-        let b = be(
+        let p = be(
           ne(
             Me(m)
           )
         );
-        b.includes("\\enclose") && /^\\ce\{[\s\S]*\}$/i.test(b.trim()) && (b = b.trim().replace(/^\\ce\{([\s\S]*)\}$/i, "$1"));
-        let y = b.replace(/\\textasciitilde/g, "~").replace(/\\textasciicircum/g, "^").replace(/\\textasteriskcentered/g, "*").replace(/\\char96/g, "`").replace(/\\sim/g, "~").replace(/\\!/g, "!").replace(/\\@/g, "@").replace(/\\#/g, "#").replace(/\\$/g, "$").replace(/\\%/g, "%").replace(/\\&/g, "&").replace(/\\_/g, "_").replace(/\\\{/g, "{").replace(/\\\}/g, "}").replace(/\\ce\{([^}]*)\}/g, "$1").trim();
-        return a.insert(a.createPositionAt(p, 0), a.createText(y)), p;
+        p.includes("\\enclose") && /^\\ce\{[\s\S]*\}$/i.test(p.trim()) && (p = p.trim().replace(/^\\ce\{([\s\S]*)\}$/i, "$1"));
+        let y = p.replace(/\\textasciitilde/g, "~").replace(/\\textasciicircum/g, "^").replace(/\\textasteriskcentered/g, "*").replace(/\\char96/g, "`").replace(/\\sim/g, "~").replace(/\\!/g, "!").replace(/\\@/g, "@").replace(/\\#/g, "#").replace(/\\$/g, "$").replace(/\\%/g, "%").replace(/\\&/g, "&").replace(/\\_/g, "_").replace(/\\\{/g, "{").replace(/\\\}/g, "}").replace(/\\ce\{([^}]*)\}/g, "$1").trim();
+        return a.insert(a.createPositionAt(b, 0), a.createText(y)), b;
       }
     }), n.conversion.for("upcast").elementToElement({
       view: {
@@ -3878,37 +3878,37 @@ class It extends it {
   }
 }
 function vt({ matrixType: l, x: n, y: o, onSelect: c, onMouseEnter: a, onMouseLeave: m }) {
-  const [p, b] = T({ r: 2, c: 2 }), y = Math.max(10, parseInt(p.r, 10) || 0), L = Math.max(10, parseInt(p.c, 10) || 0), k = (x) => {
+  const [b, p] = T({ r: 2, c: 2 }), y = Math.max(10, parseInt(b.r, 10) || 0), L = Math.max(10, parseInt(b.c, 10) || 0), k = (x) => {
     const A = x.target.value;
     if (A === "") {
-      b((S) => ({ ...S, r: "" }));
+      p((S) => ({ ...S, r: "" }));
       return;
     }
     const I = parseInt(A, 10);
-    isNaN(I) || b((S) => ({ ...S, r: Math.max(1, Math.min(10, I)) }));
+    isNaN(I) || p((S) => ({ ...S, r: Math.max(1, Math.min(10, I)) }));
   }, v = () => {
-    (p.r === "" || isNaN(parseInt(p.r, 10))) && b((x) => ({ ...x, r: 1 }));
+    (b.r === "" || isNaN(parseInt(b.r, 10))) && p((x) => ({ ...x, r: 1 }));
   }, u = (x) => {
     const A = x.target.value;
     if (A === "") {
-      b((S) => ({ ...S, c: "" }));
+      p((S) => ({ ...S, c: "" }));
       return;
     }
     const I = parseInt(A, 10);
-    isNaN(I) || b((S) => ({ ...S, c: Math.max(1, Math.min(10, I)) }));
+    isNaN(I) || p((S) => ({ ...S, c: Math.max(1, Math.min(10, I)) }));
   }, M = () => {
-    (p.c === "" || isNaN(parseInt(p.c, 10))) && b((x) => ({ ...x, c: 1 }));
+    (b.c === "" || isNaN(parseInt(b.c, 10))) && p((x) => ({ ...x, c: 1 }));
   };
-  return O(() => {
+  return D(() => {
     const x = (A) => {
       if (A.key === "Enter") {
         A.preventDefault(), A.stopPropagation();
-        const I = parseInt(p.r, 10) || 1, S = parseInt(p.c, 10) || 1;
+        const I = parseInt(b.r, 10) || 1, S = parseInt(b.c, 10) || 1;
         c(I, S);
       }
     };
     return window.addEventListener("keydown", x, !0), () => window.removeEventListener("keydown", x, !0);
-  }, [p.r, p.c, c]), /* @__PURE__ */ e.createElement(
+  }, [b.r, b.c, c]), /* @__PURE__ */ e.createElement(
     "div",
     {
       className: "cme-matrix-hover-popover ck-only",
@@ -3918,13 +3918,13 @@ function vt({ matrixType: l, x: n, y: o, onSelect: c, onMouseEnter: a, onMouseLe
       onMouseLeave: m
     },
     /* @__PURE__ */ e.createElement("div", { className: "cme-matrix-hover-grid" }, Array.from({ length: y }).map((x, A) => /* @__PURE__ */ e.createElement("div", { key: A, className: "cme-matrix-hover-row" }, Array.from({ length: L }).map((I, S) => {
-      const X = parseInt(p.r, 10) || 0, V = parseInt(p.c, 10) || 0, Y = A < X && S < V;
+      const X = parseInt(b.r, 10) || 0, V = parseInt(b.c, 10) || 0, Y = A < X && S < V;
       return /* @__PURE__ */ e.createElement(
         "div",
         {
           key: `${A}-${S}`,
           className: `cme-matrix-hover-cell${Y ? " selected" : ""}`,
-          onMouseEnter: () => b({ r: A + 1, c: S + 1 }),
+          onMouseEnter: () => p({ r: A + 1, c: S + 1 }),
           onClick: (Z) => {
             Z.preventDefault(), Z.stopPropagation(), c(A + 1, S + 1);
           }
@@ -3936,16 +3936,16 @@ function vt({ matrixType: l, x: n, y: o, onSelect: c, onMouseEnter: a, onMouseLe
       {
         type: "number",
         className: "cme-counter-val",
-        value: p.r,
+        value: b.r,
         onChange: k,
         onBlur: v,
         min: "1",
         max: "10"
       }
-    ), /* @__PURE__ */ e.createElement("div", { className: "cme-counter-btns" }, /* @__PURE__ */ e.createElement("button", { type: "button", onClick: () => b((x) => {
+    ), /* @__PURE__ */ e.createElement("div", { className: "cme-counter-btns" }, /* @__PURE__ */ e.createElement("button", { type: "button", onClick: () => p((x) => {
       const A = parseInt(x.r, 10) || 1;
       return { ...x, r: Math.min(10, A + 1) };
-    }) }, "▲"), /* @__PURE__ */ e.createElement("button", { type: "button", onClick: () => b((x) => {
+    }) }, "▲"), /* @__PURE__ */ e.createElement("button", { type: "button", onClick: () => p((x) => {
       const A = parseInt(x.r, 10) || 1;
       return { ...x, r: Math.max(1, A - 1) };
     }) }, "▼"))), /* @__PURE__ */ e.createElement("div", { className: "cme-matrix-counter" }, /* @__PURE__ */ e.createElement("span", null, "C"), /* @__PURE__ */ e.createElement(
@@ -3953,16 +3953,16 @@ function vt({ matrixType: l, x: n, y: o, onSelect: c, onMouseEnter: a, onMouseLe
       {
         type: "number",
         className: "cme-counter-val",
-        value: p.c,
+        value: b.c,
         onChange: u,
         onBlur: M,
         min: "1",
         max: "10"
       }
-    ), /* @__PURE__ */ e.createElement("div", { className: "cme-counter-btns" }, /* @__PURE__ */ e.createElement("button", { type: "button", onClick: () => b((x) => {
+    ), /* @__PURE__ */ e.createElement("div", { className: "cme-counter-btns" }, /* @__PURE__ */ e.createElement("button", { type: "button", onClick: () => p((x) => {
       const A = parseInt(x.c, 10) || 1;
       return { ...x, c: Math.min(10, A + 1) };
-    }) }, "▲"), /* @__PURE__ */ e.createElement("button", { type: "button", onClick: () => b((x) => {
+    }) }, "▲"), /* @__PURE__ */ e.createElement("button", { type: "button", onClick: () => p((x) => {
       const A = parseInt(x.c, 10) || 1;
       return { ...x, c: Math.max(1, A - 1) };
     }) }, "▼"))))
@@ -3970,25 +3970,25 @@ function vt({ matrixType: l, x: n, y: o, onSelect: c, onMouseEnter: a, onMouseLe
 }
 let K = !1, Ce = null, ie = null;
 function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a }) {
-  const m = le(null), p = le(null), [b, y] = T(null), [L, k] = T(0), [v, u] = T(null), [M, x] = T(null), [A, I] = T(null), [S, X] = T(null);
+  const m = le(null), b = le(null), [p, y] = T(null), [L, k] = T(0), [v, u] = T(null), [M, x] = T(null), [A, I] = T(null), [S, X] = T(null);
   le(null);
   const [V, Y] = T({ x: 0, y: 0 }), [Z, Le] = T(!1), ue = le({ x: 0, y: 0 }), [_e, Te] = T(!1), [Ke, We] = T(!1), [Ye, ae] = T(!1), we = le(null);
-  O(() => {
+  D(() => {
     const t = (r) => {
       if (!Z) return;
       const s = r.touches && r.touches.length > 0 ? r.touches[0].clientX : r.clientX, h = r.touches && r.touches.length > 0 ? r.touches[0].clientY : r.clientY;
       let g = s - ue.current.x, d = h - ue.current.y;
       if (we.current) {
-        const C = we.current, f = -C.left, D = window.innerWidth - C.right, H = -C.top, N = window.innerHeight - C.bottom;
-        g < f && (g = f), g > D && (g = D), d < H && (d = H), d > N && (d = N);
+        const C = we.current, f = -C.left, N = window.innerWidth - C.right, H = -C.top, R = window.innerHeight - C.bottom;
+        g < f && (g = f), g > N && (g = N), d < H && (d = H), d > R && (d = R);
       }
       Y({ x: g, y: d });
     }, i = () => Le(!1);
     return Z && (window.addEventListener("mousemove", t, { passive: !1 }), window.addEventListener("mouseup", i), window.addEventListener("touchmove", t, { passive: !1 }), window.addEventListener("touchend", i)), () => {
       window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", i), window.removeEventListener("touchmove", t), window.removeEventListener("touchend", i);
     };
-  }, [Z]), O(() => {
-    const t = p.current;
+  }, [Z]), D(() => {
+    const t = b.current;
     if (!t) return;
     let i = 0, r = 0, s = 0;
     const h = (d) => {
@@ -3997,8 +3997,8 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
       if (d.touches.length !== 1) return;
       const C = i - d.touches[0].clientY, f = r - d.touches[0].clientX;
       if (Math.abs(C) < 10 || Math.abs(f) > Math.abs(C) || t.scrollHeight <= t.clientHeight) return;
-      const D = s + C, H = t.scrollHeight - t.clientHeight;
-      D > 0 && D < H && d.preventDefault(), t.scrollTop = Math.max(0, Math.min(D, H));
+      const N = s + C, H = t.scrollHeight - t.clientHeight;
+      N > 0 && N < H && d.preventDefault(), t.scrollTop = Math.max(0, Math.min(N, H));
     };
     return t.addEventListener("touchstart", h, { passive: !0 }), t.addEventListener("touchmove", g, { passive: !1 }), () => {
       t.removeEventListener("touchstart", h), t.removeEventListener("touchmove", g);
@@ -4116,9 +4116,9 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
             f = t.getValue(sel) || "";
           } catch {
           }
-          const D = ["roman", "sans-serif", "monospace"].find((N) => C(t.queryStyle({ fontFamily: N }))) || "none";
-          D !== "none" ? h = D : /\\mathsf\b/.test(f) ? h = "sans-serif" : /\\mathtt\b/.test(f) ? h = "monospace" : /\\mathrm\b/.test(f) ? h = "roman" : h = "none";
-          const H = [5, 7, 9].find((N) => C(t.queryStyle({ fontSize: N }))) || "auto";
+          const N = ["roman", "sans-serif", "monospace"].find((R) => C(t.queryStyle({ fontFamily: R }))) || "none";
+          N !== "none" ? h = N : /\\mathsf\b/.test(f) ? h = "sans-serif" : /\\mathtt\b/.test(f) ? h = "monospace" : /\\mathrm\b/.test(f) ? h = "roman" : h = "none";
+          const H = [5, 7, 9].find((R) => C(t.queryStyle({ fontSize: R }))) || "auto";
           g = String(H), d = [
             "black",
             "dimgray",
@@ -4144,7 +4144,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
             "indigo",
             "violet",
             "gold"
-          ].find((N) => C(t.queryStyle({ color: N }))) || "none";
+          ].find((R) => C(t.queryStyle({ color: R }))) || "none";
         } else
           window.__cmeManualBold !== void 0 && (r = window.__cmeManualBold), window.__cmeManualItalic !== void 0 && (s = window.__cmeManualItalic), console.log("CME: updateActiveStyles else-branch bold=", r, "manual=", window.__cmeManualBold), h = window.__cmeManualFontFamily !== void 0 ? window.__cmeManualFontFamily : ["roman", "sans-serif", "monospace"].find(
             (f) => C(t.queryStyle({ fontFamily: f }))
@@ -4189,7 +4189,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
         console.warn("Failed to query active styles:", i);
       }
   }, []);
-  O(() => {
+  D(() => {
     if (!v && !A) return;
     const t = (i) => {
       !i.target.closest(".cme-matrix-hover-popover") && !i.target.closest(".cme-matrix-btn-wrapper") && u(null), !i.target.closest(".cme-color-picker-popup") && !i.target.closest('[title="Text Color"]') && I(null);
@@ -4197,7 +4197,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
     return window.addEventListener("mousedown", t, !0), window.addEventListener("pointerdown", t, !0), () => {
       window.removeEventListener("mousedown", t, !0), window.removeEventListener("pointerdown", t, !0);
     };
-  }, [v, A]), O(() => {
+  }, [v, A]), D(() => {
     if (!S) return;
     const t = (i) => {
       !i.target.closest(".cme-more-popup") && !i.target.closest(".cme-more-trigger-btn") && X(null);
@@ -4205,12 +4205,12 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
     return window.addEventListener("mousedown", t, !0), window.addEventListener("pointerdown", t, !0), () => {
       window.removeEventListener("mousedown", t, !0), window.removeEventListener("pointerdown", t, !0);
     };
-  }, [S]), O(() => {
+  }, [S]), D(() => {
     const t = setTimeout(() => ct(), 50);
     return () => clearTimeout(t);
-  }, [L]), O(() => {
+  }, [L]), D(() => {
     if (K) return;
-    const t = b;
+    const t = p;
     if (!t) return;
     t.macros = { ...t.macros, ...window.__cme_macros || {} }, t.defaultMode = "math";
     const i = () => {
@@ -4227,8 +4227,8 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
       });
     };
     customElements.get("math-field") ? requestAnimationFrame(i) : customElements.whenDefined("math-field").then(() => requestAnimationFrame(i));
-  }, [l, c, b]), O(() => {
-    const t = b;
+  }, [l, c, p]), D(() => {
+    const t = p;
     if (!t) return;
     const i = (r) => {
       if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(r.key) ? (K = !1, clearTimeout(Ce), window.__cmeManualBold = void 0, window.__cmeManualItalic = void 0, window.__cmeManualFontFamily = void 0, window.__cmeManualFontSize = void 0) : (r.key.length === 1 || r.key === " ") && (K = !0, clearTimeout(Ce), Ce = setTimeout(() => {
@@ -4262,8 +4262,8 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
       r.key === " " ? (r.preventDefault(), t.executeCommand(["insert", "\\, "])) : r.key === "Enter" && (r.preventDefault(), r.stopImmediatePropagation(), t.executeCommand("addRowAfter"));
     };
     return t.addEventListener("keydown", i, !0), () => t.removeEventListener("keydown", i, !0);
-  }, [l, E, q, b]), O(() => {
-    const t = b;
+  }, [l, E, q, p]), D(() => {
+    const t = p;
     if (!t) return;
     const i = () => {
       window.__cmeIgnoreStyleUpdate && Date.now() < window.__cmeIgnoreStyleUpdate || (P(t) && (window.__cmeManualBold = void 0, window.__cmeManualItalic = void 0, window.__cmeManualFontFamily = void 0, window.__cmeManualFontSize = void 0), setTimeout(() => {
@@ -4276,7 +4276,28 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
     return t.addEventListener("selection-change", i), t.addEventListener("input", i), t.addEventListener("keydown", i), t.addEventListener("pointerup", i), t.addEventListener("click", i), setTimeout(q, 50), () => {
       t.removeEventListener("selection-change", i), t.removeEventListener("input", i), t.removeEventListener("keydown", i), t.removeEventListener("pointerup", i), t.removeEventListener("click", i);
     };
-  }, [q, b]);
+  }, [q, p]), D(() => {
+    const t = p;
+    if (!t) return;
+    const i = () => {
+      const r = t.shadowRoot;
+      if (!r || r.querySelector("style[data-cme-sqrt-fix]")) return;
+      const s = document.createElement("style");
+      s.setAttribute("data-cme-sqrt-fix", "1"), s.textContent = `
+        .ML__sqrt-line {
+          min-width: 0.6em !important;
+        }
+      `, r.appendChild(s);
+    };
+    if (t.shadowRoot)
+      i();
+    else {
+      const r = new MutationObserver(() => {
+        t.shadowRoot && (r.disconnect(), i());
+      });
+      return r.observe(t, { childList: !0, subtree: !1 }), () => r.disconnect();
+    }
+  }, [p]);
   const G = fe((t) => {
     const i = ie;
     if (!i || !t) return;
@@ -4504,7 +4525,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
                   )
                 )
               );
-            const D = d.action === "BOLD", H = d.action === "ITALIC", N = d.action === "TEXT_COLOR", lt = D && E.bold || H && E.italic || N && E.color !== "none" && E.color !== "black";
+            const N = d.action === "BOLD", H = d.action === "ITALIC", R = d.action === "TEXT_COLOR", lt = N && E.bold || H && E.italic || R && E.color !== "none" && E.color !== "black";
             return /* @__PURE__ */ e.createElement(
               "button",
               {
@@ -4527,7 +4548,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
                       w.focus();
                       const W = P(w), U = !(W ? Be(w) : E.bold);
                       if (window.__cmeManualBold = U, window.__cmeIgnoreStyleUpdate = Date.now() + 50, W) {
-                        const R = w.getValue(w.selection), $ = w.getValue(), ee = (Ee) => Ee.replace(/\\[a-zA-Z]+/g, "").replace(/[^a-zA-Z0-9]/g, ""), z = ee(R), te = ee($), j = z.length > 0 && z === te, ye = Pe(j ? $ : R), Q = de(ye, U, E.italic, E.fontFamily);
+                        const O = w.getValue(w.selection), $ = w.getValue(), ee = (Ee) => Ee.replace(/\\[a-zA-Z]+/g, "").replace(/[^a-zA-Z0-9]/g, ""), z = ee(O), te = ee($), j = z.length > 0 && z === te, ye = Pe(j ? $ : O), Q = de(ye, U, E.italic, E.fontFamily);
                         console.log("[CME-BOLD] selAlnum=", z, "fullAlnum=", te, "isFullSel=", j), console.log("[CME-BOLD] formatted=", JSON.stringify(Q)), j ? (w.setValue(Q), console.log("[CME-BOLD] after setValue:", JSON.stringify(w.getValue()))) : w.executeCommand(["insert", Q]);
                       } else if (typeof w.applyStyle == "function")
                         if (U)
@@ -4539,7 +4560,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
                           }
                           w.applyStyle({ fontSeries: "auto" }), w.applyStyle({ fontSeries: "m" });
                         }
-                      xe((R) => ({ ...R, bold: U })), setTimeout(() => {
+                      xe((O) => ({ ...O, bold: U })), setTimeout(() => {
                         q();
                       }, 60);
                     }
@@ -4548,7 +4569,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
                       w.focus();
                       const W = P(w), U = !(W ? De(w) : E.italic);
                       if (window.__cmeManualItalic = U, window.__cmeIgnoreStyleUpdate = Date.now() + 50, W) {
-                        const R = w.getValue(w.selection), $ = w.getValue(), ee = (Ee) => Ee.replace(/\\[a-zA-Z]+/g, "").replace(/[^a-zA-Z0-9]/g, ""), z = ee(R), te = ee($), j = z.length > 0 && z === te, ye = Pe(j ? $ : R), Q = de(ye, E.bold, U, E.fontFamily);
+                        const O = w.getValue(w.selection), $ = w.getValue(), ee = (Ee) => Ee.replace(/\\[a-zA-Z]+/g, "").replace(/[^a-zA-Z0-9]/g, ""), z = ee(O), te = ee($), j = z.length > 0 && z === te, ye = Pe(j ? $ : O), Q = de(ye, E.bold, U, E.fontFamily);
                         console.log("[CME-ITALIC] selAlnum=", z, "fullAlnum=", te, "isFullSel=", j), console.log("[CME-ITALIC] formatted=", JSON.stringify(Q)), j ? (w.setValue(Q), console.log("[CME-ITALIC] after setValue:", JSON.stringify(w.getValue()))) : w.executeCommand(["insert", Q]);
                       } else if (typeof w.applyStyle == "function")
                         if (U)
@@ -4560,7 +4581,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
                           }
                           w.applyStyle({ shape: "auto" }), w.applyStyle({ shape: "n" });
                         }
-                      xe((R) => ({ ...R, italic: U })), setTimeout(() => {
+                      xe((O) => ({ ...O, italic: U })), setTimeout(() => {
                         q();
                       }, 60);
                     }
@@ -4659,7 +4680,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
       /* @__PURE__ */ e.createElement(
         "div",
         {
-          ref: p,
+          ref: b,
           className: "cme-mathfield-container",
           onPointerDown: (t) => {
             var i, r;
@@ -4670,7 +4691,7 @@ function Mt({ mode: l, onInsert: n, onClose: o, initialLatex: c, isEditing: a })
           "math-field",
           {
             ref: (t) => {
-              m.current = t, ie = t, t && b !== t && (y(t), t.inlineShortcuts = Object.assign({}, t.inlineShortcuts, { "*": "*" }), window.mathVirtualKeyboard && (window.mathVirtualKeyboard.policy = "manual"), t.menuItems && (t.menuItems = t.menuItems.filter((i) => {
+              m.current = t, ie = t, t && p !== t && (y(t), t.inlineShortcuts = Object.assign({}, t.inlineShortcuts, { "*": "*" }), window.mathVirtualKeyboard && (window.mathVirtualKeyboard.policy = "manual"), t.menuItems && (t.menuItems = t.menuItems.filter((i) => {
                 const r = typeof i.label == "string" ? i.label.toLowerCase() : "", s = typeof i.id == "string" ? i.id.toLowerCase() : "";
                 return !r.includes("matrix") && !s.includes("matrix");
               })));