digi-mathchem-editor 1.0.29 → 1.0.31

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

@@ -24,6 +24,24 @@ const J = {
   },
   notni: {
     def: "\\mathrel{\\char`∌}"
+  },
+  cmeNotEqual: {
+    def: "\\class{cme-not-equal}{=}"
+  },
+  cmeNotApprox: {
+    def: "\\class{cme-not-approx}{\\approx}"
+  },
+  cmeNotEquiv: {
+    def: "\\class{cme-not-equiv}{\\equiv}"
+  },
+  cmeNotSim: {
+    def: "\\class{cme-not-sim}{\\sim}"
+  },
+  napprox: {
+    def: "\\class{cme-not-approx}{\\approx}"
+  },
+  nequiv: {
+    def: "\\class{cme-not-equiv}{\\equiv}"
   }
 };
 typeof window < "u" && (window.__cme_macros = {
@@ -210,7 +228,7 @@ const z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAA
             <rect x="9" y="7" width="6" height="10" rx="1" stroke="#2E7D32" stroke-width="2" fill="none" />
             <line x1="9" y1="21" x2="15" y2="3" stroke="#666" stroke-width="2" stroke-linecap="round" />
           </svg>`,
-        insert: "\\cancel{#?}",
+        insert: "\\class{cme-cancel-strike}{#?}",
         isWidget: !0,
         title: "Cancel strike"
       },
@@ -269,10 +287,10 @@ const z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAA
         moreCols: 2,
         small: !0,
         moreItems: [
-          { label: "≠", insert: "\\neq", title: "Not equal" },
-          { label: "≉", insert: "\\not\\approx", title: "Not almost equal to" },
-          { label: "≢", insert: "\\not\\equiv", title: "Not identical to" },
-          { label: "≁", insert: "\\nsim", title: "Not similar" }
+          { label: "≠", insert: "\\class{cme-not-equal}{=}", title: "Not equal" },
+          { label: "≉", insert: "\\class{cme-not-approx}{\\approx}", title: "Not almost equal to" },
+          { label: "≢", insert: "\\class{cme-not-equiv}{\\equiv}", title: "Not identical to" },
+          { label: "≁", insert: "\\class{cme-not-sim}{\\sim}", title: "Not similar" }
         ]
       },
       { label: "=", insert: "=", title: "Equals" },
@@ -4265,7 +4283,7 @@ const z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAA
             <rect x="9" y="7" width="6" height="10" rx="1" stroke="#2E7D32" stroke-width="2" fill="none" />
             <line x1="9" y1="21" x2="15" y2="3" stroke="#666" stroke-width="2" stroke-linecap="round" />
           </svg>`,
-        insert: "\\cancel{#?}",
+        insert: "\\class{cme-cancel-strike}{#?}",
         isWidget: !0,
         title: "Cancel strike"
       },
@@ -4324,10 +4342,10 @@ const z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAA
         moreCols: 2,
         small: !0,
         moreItems: [
-          { label: "≠", insert: "\\neq", title: "Not equal" },
-          { label: "≉", insert: "\\not\\approx", title: "Not almost equal to" },
-          { label: "≢", insert: "\\not\\equiv", title: "Not identical to" },
-          { label: "≁", insert: "\\not\\sim", title: "Not similar" }
+          { label: "≠", insert: "\\class{cme-not-equal}{=}", title: "Not equal" },
+          { label: "≉", insert: "\\class{cme-not-approx}{\\approx}", title: "Not almost equal to" },
+          { label: "≢", insert: "\\class{cme-not-equiv}{\\equiv}", title: "Not identical to" },
+          { label: "≁", insert: "\\class{cme-not-sim}{\\sim}", title: "Not similar" }
         ]
       },
       { label: "=", insert: "=", title: "Equals" },
@@ -7538,20 +7556,6 @@ const Z = "data-mathfield-shadow-styles", ot = `
       overflow: visible !important;
       contain: none !important;
     }
-    .ML__notation {
-      position: absolute !important;
-      line-height: 0 !important;
-      box-sizing: border-box !important;
-    }
-    .ML__notation svg {
-      position: absolute !important;
-      overflow: visible !important;
-      top: 0 !important;
-      left: 0 !important;
-      width: 100% !important;
-      height: 100% !important;
-      pointer-events: none !important;
-    }
     .wide-circle {
       display: inline-block !important;
       transform: scaleX(1.5) !important;
@@ -7651,8 +7655,8 @@ const Z = "data-mathfield-shadow-styles", ot = `
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       background: currentColor;
-      -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
-      mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
       -webkit-mask-size: 100% 100%;
       mask-size: 100% 100%;
       pointer-events: none;
@@ -7666,8 +7670,8 @@ const Z = "data-mathfield-shadow-styles", ot = `
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       background: currentColor;
-      -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
-      mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
       -webkit-mask-size: 100% 100%;
       mask-size: 100% 100%;
       pointer-events: none;
@@ -7681,8 +7685,8 @@ const Z = "data-mathfield-shadow-styles", ot = `
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       background: currentColor;
-      -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
-      mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
       -webkit-mask-size: 100% 100%;
       mask-size: 100% 100%;
       pointer-events: none;
@@ -7696,8 +7700,32 @@ const Z = "data-mathfield-shadow-styles", ot = `
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       background: currentColor;
-      -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='50' x2='100' y2='50' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
-      mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='50' x2='100' y2='50' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='50' x2='100' y2='50' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='50' x2='100' y2='50' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
+      -webkit-mask-size: 100% 100%;
+      mask-size: 100% 100%;
+      pointer-events: none;
+    }
+    .cme-not-equal,
+    .cme-not-approx,
+    .cme-not-equiv,
+    .cme-not-sim {
+      display: inline-block;
+      position: relative;
+    }
+    .cme-not-equal::after,
+    .cme-not-approx::after,
+    .cme-not-equiv::after,
+    .cme-not-sim::after {
+      content: '';
+      position: absolute;
+      top: -0.02em;
+      bottom: -0.02em;
+      left: 0;
+      right: 0;
+      background: currentColor;
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='28' y1='86' x2='72' y2='14' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' stroke-linecap='round' /%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='28' y1='86' x2='72' y2='14' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke' stroke-linecap='round' /%3E%3C/svg%3E");
       -webkit-mask-size: 100% 100%;
       mask-size: 100% 100%;
       pointer-events: none;
@@ -7992,7 +8020,7 @@ class dt {
     this.close();
   }
 }
-const mt = "1.0.29", E = {
+const mt = "1.0.31", E = {
   version: mt
 };
 typeof window < "u" && (window.MathfieldElement ? window.MathfieldElement.fontsDirectory = "https://cdn.jsdelivr.net/npm/mathlive/dist/fonts" : V && (V.fontsDirectory = "https://cdn.jsdelivr.net/npm/mathlive/dist/fonts"));
@@ -8473,28 +8501,28 @@ const D = class D {
         }
         const c = h.action === "BOLD", g = h.action === "ITALIC", x = h.action === "TEXT_COLOR", u = h.action === "SPECIAL_CHARS", y = c && this.activeStyles.bold || g && this.activeStyles.italic || x && this.activeStyles.color !== "none", w = document.createElement("button");
         w.type = "button", w.className = "cme-btn" + (e.isTemplate ? " template" : "") + (h.cls ? ` ${h.cls}` : "") + (y ? " active" : ""), w.title = h.title || h.label || h.insert || "", typeof h.label == "string" && (h.label.includes("<svg") || h.label.includes("<img") || h.label.includes("<strong") || h.label.includes("<em")) ? w.innerHTML = h.label : typeof h.label == "string" && (w.textContent = h.label), w.addEventListener("mousedown", (k) => {
-          var p, b, m, M, d, S, C, f, T, I;
+          var p, b, m, M, d, S, C, v, T, I;
           k.preventDefault();
           const i = this.mathField;
           if (u) {
             this.closeAllPopups();
-            const v = w.getBoundingClientRect();
-            this.openSpecialCharacters(v);
+            const f = w.getBoundingClientRect();
+            this.openSpecialCharacters(f);
           } else if (x)
             if (this.colorPickerPopup && this.activeColorBtn === w)
               this.closeColorPicker();
             else {
-              const v = w.getBoundingClientRect();
-              this.openColorPicker(v, w);
+              const f = w.getBoundingClientRect();
+              this.openColorPicker(f, w);
             }
           else if (c) {
             if (this.closeAllPopups(), this.explicitToggle = !0, this.activeStyles.bold = !this.activeStyles.bold, i) {
               if (i.selectionIsCollapsed)
                 this.activeStyles.bold || (i.styleBias = "none", i.defaultStyle && (delete i.defaultStyle.variantStyle, delete i.defaultStyle.fontSeries));
               else {
-                const v = this.getSelectionLatex(i);
-                if (v && v.trim()) {
-                  const R = F(v.trim()), A = B(
+                const f = this.getSelectionLatex(i);
+                if (f && f.trim()) {
+                  const R = F(f.trim()), A = B(
                     R,
                     this.activeStyles.bold,
                     this.activeStyles.italic,
@@ -8525,9 +8553,9 @@ const D = class D {
               if (i.selectionIsCollapsed)
                 this.activeStyles.italic || (i.styleBias = "none", i.defaultStyle && (delete i.defaultStyle.variantStyle, delete i.defaultStyle.fontShape));
               else {
-                const v = this.getSelectionLatex(i);
-                if (v && v.trim()) {
-                  const R = F(v.trim()), A = B(
+                const f = this.getSelectionLatex(i);
+                if (f && f.trim()) {
+                  const R = F(f.trim()), A = B(
                     R,
                     this.activeStyles.bold,
                     this.activeStyles.italic,
@@ -8560,15 +8588,15 @@ const D = class D {
           else if (h.action === "CUT")
             this.closeAllPopups(), (d = i == null ? void 0 : i.focus) == null || d.call(i), (S = i == null ? void 0 : i.executeCommand) == null || S.call(i, "cutToClipboard");
           else if (h.action === "COPY")
-            this.closeAllPopups(), (C = i == null ? void 0 : i.focus) == null || C.call(i), (f = i == null ? void 0 : i.executeCommand) == null || f.call(i, "copyToClipboard");
+            this.closeAllPopups(), (C = i == null ? void 0 : i.focus) == null || C.call(i), (v = i == null ? void 0 : i.executeCommand) == null || v.call(i, "copyToClipboard");
           else if (h.action === "PASTE")
             this.closeAllPopups(), (T = i == null ? void 0 : i.focus) == null || T.call(i), (I = i == null ? void 0 : i.executeCommand) == null || I.call(i, "pasteFromClipboard");
           else if (h.action === "MATRIX_HOVER")
             if (this.activeMatrixPopup && this.activeMatrixBtn === w)
               this.closeMatrixPopup();
             else {
-              const v = w.getBoundingClientRect();
-              this.openMatrixGrid(h.matrixType || "matrix", v, w);
+              const f = w.getBoundingClientRect();
+              this.openMatrixGrid(h.matrixType || "matrix", f, w);
             }
           else
             this.insertAtCursor(h);
@@ -8631,21 +8659,21 @@ const D = class D {
     const m = document.createElement("button");
     m.type = "button", m.className = "cme-matrix-insert-btn", m.textContent = "INSERT", h.appendChild(c), h.appendChild(m);
     const M = (d, S) => {
-      l = Math.max(1, Math.min(10, d)), n = Math.max(1, Math.min(10, S)), g.value = l, k.value = n, o.querySelectorAll(".cme-matrix-hover-cell").forEach((f) => {
-        const T = parseInt(f.dataset.row, 10), I = parseInt(f.dataset.col, 10);
-        T <= l && I <= n ? f.classList.add("selected") : f.classList.remove("selected");
+      l = Math.max(1, Math.min(10, d)), n = Math.max(1, Math.min(10, S)), g.value = l, k.value = n, o.querySelectorAll(".cme-matrix-hover-cell").forEach((v) => {
+        const T = parseInt(v.dataset.row, 10), I = parseInt(v.dataset.col, 10);
+        T <= l && I <= n ? v.classList.add("selected") : v.classList.remove("selected");
       });
     };
     for (let d = 1; d <= 5; d++) {
       const S = document.createElement("div");
       S.className = "cme-matrix-hover-row";
       for (let C = 1; C <= 10; C++) {
-        const f = document.createElement("div");
-        f.className = "cme-matrix-hover-cell" + (d <= l && C <= n ? " selected" : ""), f.dataset.row = d, f.dataset.col = C, f.addEventListener("mouseenter", () => {
+        const v = document.createElement("div");
+        v.className = "cme-matrix-hover-cell" + (d <= l && C <= n ? " selected" : ""), v.dataset.row = d, v.dataset.col = C, v.addEventListener("mouseenter", () => {
           M(d, C);
-        }), f.addEventListener("click", (T) => {
+        }), v.addEventListener("click", (T) => {
           T.stopPropagation(), this.insertMatrix(t, d, C), this.closeMatrixPopup();
-        }), S.appendChild(f);
+        }), S.appendChild(v);
       }
       o.appendChild(S);
     }