ckeditor-math-chem-editor 1.0.0 → 1.0.2

package/src/Ckeditor.jsx

@@ -159,17 +159,17 @@ function bindWidgetClickTarget(editor, container) {
   container.addEventListener('click', onPointerDown, true);
 }
 
-/* ══════════════════════════════════════════════════════════
-   Symbol groups — same as CustomMathEditor.jsx
-══════════════════════════════════════════════════════════ */
+/* ══════════════════════════════════════════════════════════
+   Symbol groups — same as CustomMathEditor.jsx
+══════════════════════════════════════════════════════════ */
 const MATH_GROUPS = [
   {
-    label: '√(□)', items: [
+    label: '√(□)', items: [
       // 1. Root & Fraction Group (3 cols)
-      { label: '√', insert: '\\sqrt{#0}', title: 'Square Root' },
-      { label: '√□', insert: '\\sqrt{#0}', title: 'Root with Placeholder' },
-      { label: 'ⁿ√', insert: '\\sqrt[#?]{#0}', title: 'Nth Root' },
-      { label: '□/□', insert: '\\frac{#0}{#?}', title: 'Fraction' },
+      { label: '√', insert: '\\sqrt{#0}', title: 'Square Root' },
+      { label: '√□', insert: '\\sqrt{#0}', title: 'Root with Placeholder' },
+      { label: 'ⁿ√', insert: '\\sqrt[#?]{#0}', title: 'Nth Root' },
+      { label: 'â–¡/â–¡', insert: '\\frac{#0}{#?}', title: 'Fraction' },
 
       { type: 'sep', cols: 2 },
       // 2. Brackets & Delimiters Group (2 cols)
@@ -180,43 +180,43 @@ const MATH_GROUPS = [
       { type: 'sep', cols: 2 },
       // 3. Basic Arithmetic Operators (3 cols)
       { label: '+', insert: '+' },
-      { label: '−', insert: '-' },
-      { label: '×', insert: '\\times' },
-      { label: '÷', insert: '\\div' },
-      { label: '±', insert: '\\pm' },
+      { label: '−', insert: '-' },
+      { label: '×', insert: '\\times' },
+      { label: '÷', insert: '\\div' },
+      { label: '±', insert: '\\pm' },
 
       { type: 'sep', cols: 4 },
       // 4. Comparison & Relation Operators (4 cols)
-      { label: '≥', insert: '\\geq' },
-      { label: '≤', insert: '\\leq' },
-      { label: '∩', insert: '\\cap' },
-      { label: '∪', insert: '\\cup' },
-      { label: '≠', insert: '\\neq' },
-      { label: '∈', insert: '\\in' },
-      { label: '≈', insert: '\\approx' },
-      { label: '∞', insert: '\\infty' },
+      { label: '≥', insert: '\\geq' },
+      { label: '≤', insert: '\\leq' },
+      { label: '∩', insert: '\\cap' },
+      { label: '∪', insert: '\\cup' },
+      { label: '≠', insert: '\\neq' },
+      { label: '∈', insert: '\\in' },
+      { label: '≈', insert: '\\approx' },
+      { label: '∞', insert: '\\infty' },
 
       { type: 'sep', cols: 2 },
       // 5. Greek Letters (2 cols)
-      { label: 'α', insert: '\\alpha' },
-      { label: 'β', insert: '\\beta' },
-      { label: 'π', insert: '\\pi' },
+      { label: 'α', insert: '\\alpha' },
+      { label: 'β', insert: '\\beta' },
+      { label: 'Ï€', insert: '\\pi' },
 
       { type: 'sep', cols: 1 },
       // 6. Undo / Redo (1 col)
-      { label: '↶', action: 'UNDO', title: 'Undo' },
-      { label: '↷', action: 'REDO', title: 'Redo' },
+      { label: '↶', action: 'UNDO', title: 'Undo' },
+      { label: '↷', action: 'REDO', title: 'Redo' },
 
       { type: 'sep', cols: 2 },
       // 7. Formatting Group (2 cols)
       { label: 'B', action: 'BOLD', cls: 'template', title: 'Bold' },
-      { label: '〖Ω〗', title: 'Insert Special Character', action: 'SPECIAL_CHARS' },
-      { label: '🅰️', action: 'TEXT_COLOR', title: 'Text Color' },
+      { label: '〖Ω〗', title: 'Insert Special Character', action: 'SPECIAL_CHARS' },
+      { label: '🅰️', action: 'TEXT_COLOR', title: 'Text Color' },
 
       { type: 'sep', cols: 1 },
       // 8. Text Style Group (1 col)
-      { label: 'T₁', insert: '#0_{#?}', title: 'Subscript' },
-      { label: 'T¹', insert: '#0^{#?}', title: 'Superscript' },
+      { label: 'T₁', insert: '#0_{#?}', title: 'Subscript' },
+      { label: 'T¹', insert: '#0^{#?}', title: 'Superscript' },
 
       { type: 'sep', cols: 1 },
       // 9. Font Controls (1 col)
@@ -225,56 +225,56 @@ const MATH_GROUPS = [
     ]
   },
   {
-    label: '±×÷', items: [
-      { label: '±', insert: '\\pm' }, { label: '∓', insert: '\\mp' },
-      { label: '×', insert: '\\times' }, { label: '÷', insert: '\\div' },
-      { label: '\\', insert: '\\backslash' }, { label: '﹨', insert: '﹨' },
-      { label: '≠', insert: '\\neq' }, { label: '≤', insert: '\\leq' },
-      { label: '≥', insert: '\\geq' }, { label: '≈', insert: '\\approx' },
-      { label: '≅', insert: '\\cong' }, { label: '∝', insert: '\\propto' },
-      { label: '≡', insert: '\\equiv' }, { label: 'sim', insert: '\\sim' },
-      { label: '∞', insert: '\\infty' }, { label: '∑', insert: '\\sum' },
-      { label: '∏', insert: '\\prod' },
-      { label: '∫', insert: '\\int' }, { label: '∮', insert: '\\oint' },
-      { label: '∂', insert: '\\partial' }, { label: '∇', insert: '\\nabla' },
-      { label: '⊕', insert: '\\oplus' }, { label: '⊗', insert: '\\otimes' },
-      { label: '⊙', insert: '\\odot' },
-      { label: '∈', insert: '\\in' }, { label: '∉', insert: '\\notin' },
-      { label: '⊂', insert: '\\subset' }, { label: '∪', insert: '\\cup' },
-      { label: '∩', insert: '\\cap' }, { label: '∅', insert: '\\emptyset' },
-      { label: '√', insert: '\\sqrt{#0}' }, { label: '∛', insert: '\\sqrt[3]{#0}' },
-      { label: '□±□', insert: '#? \\pm #?' }, { label: '□≠□', insert: '#? \\neq #?' },
-      { label: '□≈□', insert: '#? \\approx #?' },
+    label: '±×÷', items: [
+      { label: '±', insert: '\\pm' }, { label: '∓', insert: '\\mp' },
+      { label: '×', insert: '\\times' }, { label: '÷', insert: '\\div' },
+      { label: '\\', insert: '\\backslash' }, { label: '﹨', insert: '﹨' },
+      { label: '≠', insert: '\\neq' }, { label: '≤', insert: '\\leq' },
+      { label: '≥', insert: '\\geq' }, { label: '≈', insert: '\\approx' },
+      { label: '≅', insert: '\\cong' }, { label: '∝', insert: '\\propto' },
+      { label: '≡', insert: '\\equiv' }, { label: 'sim', insert: '\\sim' },
+      { label: '∞', insert: '\\infty' }, { label: '∑', insert: '\\sum' },
+      { label: '∏', insert: '\\prod' },
+      { label: '∫', insert: '\\int' }, { label: '∮', insert: '\\oint' },
+      { label: '∂', insert: '\\partial' }, { label: '∇', insert: '\\nabla' },
+      { label: '⊕', insert: '\\oplus' }, { label: '⊗', insert: '\\otimes' },
+      { label: '⊙', insert: '\\odot' },
+      { label: '∈', insert: '\\in' }, { label: '∉', insert: '\\notin' },
+      { label: '⊂', insert: '\\subset' }, { label: '∪', insert: '\\cup' },
+      { label: '∩', insert: '\\cap' }, { label: '∅', insert: '\\emptyset' },
+      { label: '√', insert: '\\sqrt{#0}' }, { label: '∛', insert: '\\sqrt[3]{#0}' },
+      { label: '□±□', insert: '#? \\pm #?' }, { label: '□≠□', insert: '#? \\neq #?' },
+      { label: '□≈□', insert: '#? \\approx #?' },
     ]
   },
   {
-    label: '□/□', isTemplate: true, items: [
+    label: 'â–¡/â–¡', isTemplate: true, items: [
       { label: 'a/b', insert: '\\frac{#0}{#?}', title: 'Fraction', icon: 'fraction-template-image' },
-      { label: '□/□', insert: '{#0}/{#?}', title: 'Bevelled Fraction', cls: 'green-template' },
+      { label: 'â–¡/â–¡', insert: '{#0}/{#?}', title: 'Bevelled Fraction', cls: 'green-template' },
       { label: 'a/b', insert: '{\\scriptstyle \\frac{#0}{#?}}', title: 'Small Fraction', icon: 'fraction-template-image', cls: 'small-template' },
-      { label: '□/□', insert: '{\\scriptstyle {#0}/{#?}}', title: 'Small Bevelled Fraction', cls: 'green-template small-template' },
+      { label: 'â–¡/â–¡', insert: '{\\scriptstyle {#0}/{#?}}', title: 'Small Bevelled Fraction', cls: 'green-template small-template' },
       { type: 'sep', cols: 4 },
-      { label: '√x', insert: '\\sqrt{#0}', title: 'Square Root', icon: 'sqrt-template-image' },
-      { label: 'ⁿ√x', insert: '\\sqrt[#?]{#0}', title: 'Nth Root', icon: 'nth-root-template-image' },
-      { label: 'xⁿ', insert: '#0^{#?}', title: 'Superscript', icon: 'superscript-template-image' },
-     { label: 'ˡ□', insert: '{}^{#?}#?', cls: 'template', directInsert: true, title: 'Left Superscript', icon: 'left-sup-template-image' },
+      { label: '√x', insert: '\\sqrt{#0}', title: 'Square Root', icon: 'sqrt-template-image' },
+      { label: 'ⁿ√x', insert: '\\sqrt[#?]{#0}', title: 'Nth Root', icon: 'nth-root-template-image' },
+      { label: 'xⁿ', insert: '#0^{#?}', title: 'Superscript', icon: 'superscript-template-image' },
+     { label: 'Ë¡â–¡', insert: '{}^{#?}#?', cls: 'template', directInsert: true, title: 'Left Superscript', icon: 'left-sup-template-image' },
       
-      { label: '□^□_□', insert: '#?^{#?}_{#?}', cls: 'template', directInsert: true, title: 'Right Superscript and Subscript', icon: 'right-sup-sub-template-image' },
-      { label: 'ˡₗ□', insert: '{}^{#?}_{#?}#?', cls: 'template', directInsert: true, title: 'Left Superscript and Subscript', icon: 'left-sup-sub-template-image' },
-      { label: 'xₙ', insert: '#0_{#?}', title: 'Subscript', icon: 'subscript-template-image' },
-      { label: 'ₗ□', insert: '{}_{#?}#?', cls: 'template', directInsert: true, title: 'Left Subscript', icon: 'left-sub-template-image' },
+      { label: 'â–¡^â–¡_â–¡', insert: '#?^{#?}_{#?}', cls: 'template', directInsert: true, title: 'Right Superscript and Subscript', icon: 'right-sup-sub-template-image' },
+      { label: 'Ë¡â‚—â–¡', insert: '{}^{#?}_{#?}#?', cls: 'template', directInsert: true, title: 'Left Superscript and Subscript', icon: 'left-sup-sub-template-image' },
+      { label: 'xâ‚™', insert: '#0_{#?}', title: 'Subscript', icon: 'subscript-template-image' },
+      { label: 'â‚—â–¡', insert: '{}_{#?}#?', cls: 'template', directInsert: true, title: 'Left Subscript', icon: 'left-sub-template-image' },
       { type: 'sep', cols: 3 },
-      { label: '□\n□', insert: '\\overset{#?}{#?}', cls: 'template', directInsert: true, title: 'Overset', icon: 'overset-template-image' },
-      { label: '□\n□\n□', insert: '\\overset{#?}{\\underset{#?}{#?}}', cls: 'template', directInsert: true, title: 'Over and Under', icon: 'over-under-template-image' },
-      { label: '□\n□', insert: '\\underset{#?}{#?}', cls: 'template', directInsert: true, title: 'Underset', icon: 'underset-template-image' },
+      { label: 'â–¡\nâ–¡', insert: '\\overset{#?}{#?}', cls: 'template', directInsert: true, title: 'Overset', icon: 'overset-template-image' },
+      { label: 'â–¡\nâ–¡\nâ–¡', insert: '\\overset{#?}{\\underset{#?}{#?}}', cls: 'template', directInsert: true, title: 'Over and Under', icon: 'over-under-template-image' },
+      { label: 'â–¡\nâ–¡', insert: '\\underset{#?}{#?}', cls: 'template', directInsert: true, title: 'Underset', icon: 'underset-template-image' },
       { type: 'sep', cols: 2 },
-      { label: '□⏟□', insert: '\\underbrace{#?}_{#?}', cls: 'template', directInsert: true, title: 'Underbrace', icon: 'underbrace-template-image' },
-      { label: '□⏞□', insert: '\\overbrace{#?}^{#?}', cls: 'template', directInsert: true, title: 'Overbrace', icon: 'overbrace-template-image' },
+      { label: '□⏟□', insert: '\\underbrace{#?}_{#?}', cls: 'template', directInsert: true, title: 'Underbrace', icon: 'underbrace-template-image' },
+      { label: '□⏞□', insert: '\\overbrace{#?}^{#?}', cls: 'template', directInsert: true, title: 'Overbrace', icon: 'overbrace-template-image' },
       { type: 'sep', cols: 4 },
-      { label: '□\n▯\n□', insert: '\\displaystyle{\\underset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.34em;line-height:1.15}{#?}}{\\overset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-bottom:0.34em;line-height:1.15}{#?}}{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}}}}', cls: 'template', directInsert: true, title: 'Operator With Upper and Lower Limits', icon: 'operator-limits-both-template-image' },
-      { label: '▯\n□', insert: '\\displaystyle{\\underset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.34em;line-height:1.15}{#?}}{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}}}', cls: 'template', directInsert: true, title: 'Operator With Lower Limit', icon: 'operator-lower-limit-template-image' },
-      { label: '▯^□_□', insert: '\\displaystyle{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}^{\\htmlStyle{font-size:1.1em;display:inline-block;padding-bottom:0.26em;line-height:1.15}{#?}}_{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.26em;line-height:1.15}{#?}}}', cls: 'template', directInsert: true, title: 'Operator With Right Superscript and Subscript', icon: 'operator-right-sup-sub-template-image' },
-      { label: '▯_□', insert: '\\displaystyle{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}_{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.26em;line-height:1.15}{#?}}}', cls: 'template', directInsert: true, title: 'Operator With Right Subscript', icon: 'operator-right-sub-template-image' },
+      { label: 'â–¡\nâ–¯\nâ–¡', insert: '\\displaystyle{\\underset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.34em;line-height:1.15}{#?}}{\\overset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-bottom:0.34em;line-height:1.15}{#?}}{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}}}}', cls: 'template', directInsert: true, title: 'Operator With Upper and Lower Limits', icon: 'operator-limits-both-template-image' },
+      { label: 'â–¯\nâ–¡', insert: '\\displaystyle{\\underset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.34em;line-height:1.15}{#?}}{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}}}', cls: 'template', directInsert: true, title: 'Operator With Lower Limit', icon: 'operator-lower-limit-template-image' },
+      { label: 'â–¯^â–¡_â–¡', insert: '\\displaystyle{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}^{\\htmlStyle{font-size:1.1em;display:inline-block;padding-bottom:0.26em;line-height:1.15}{#?}}_{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.26em;line-height:1.15}{#?}}}', cls: 'template', directInsert: true, title: 'Operator With Right Superscript and Subscript', icon: 'operator-right-sup-sub-template-image' },
+      { label: 'â–¯_â–¡', insert: '\\displaystyle{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}_{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.26em;line-height:1.15}{#?}}}', cls: 'template', directInsert: true, title: 'Operator With Right Subscript', icon: 'operator-right-sub-template-image' },
       { type: 'sep', cols: 3 },
       { label: 'hphantom', insert: '\\hphantom{0}', cls: 'template', directInsert: true, title: 'Horizontal Phantom Space', icon: 'hphantom-space-template-image' },
       { label: 'thin-space', insert: '\\,', cls: 'template', directInsert: true, title: 'Thin Space', icon: 'thin-space-template-image' },
@@ -289,11 +289,11 @@ const MATH_GROUPS = [
       { label: 'sin(x)', insert: '\\sin\\left(#0\\right)' },
       { label: 'cos(x)', insert: '\\cos\\left(#0\\right)' },
       { label: 'tan(x)', insert: '\\tan\\left(#0\\right)' },
-      { label: 'sin⁻¹', insert: '\\sin^{-1}' }, { label: 'cos⁻¹', insert: '\\cos^{-1}' },
-      { label: 'tan⁻¹', insert: '\\tan^{-1}' },
-      { label: 'sin²x', insert: '\\sin^{2}\\left(#0\\right)' },
-      { label: 'cos²x', insert: '\\cos^{2}\\left(#0\\right)' },
-      { label: 'tan²x', insert: '\\tan^{2}\\left(#0\\right)' },
+      { label: 'sin⁻¹', insert: '\\sin^{-1}' }, { label: 'cos⁻¹', insert: '\\cos^{-1}' },
+      { label: 'tan⁻¹', insert: '\\tan^{-1}' },
+      { label: 'sin²x', insert: '\\sin^{2}\\left(#0\\right)' },
+      { label: 'cos²x', insert: '\\cos^{2}\\left(#0\\right)' },
+      { label: 'tan²x', insert: '\\tan^{2}\\left(#0\\right)' },
       { label: 'sinh', insert: '\\sinh' }, { label: 'cosh', insert: '\\cosh' },
       { label: 'tanh', insert: '\\tanh' },
       { label: 'log', insert: '\\log' }, { label: 'ln', insert: '\\ln' },
@@ -301,52 +301,52 @@ const MATH_GROUPS = [
     ]
   },
   {
-    label: '→', items: [
-      { label: '→', insert: '\\rightarrow' }, { label: '←', insert: '\\leftarrow' },
-      { label: '↔', insert: '\\leftrightarrow' }, { label: '⇒', insert: '\\Rightarrow' },
-      { label: '⇐', insert: '\\Leftarrow' }, { label: '⇔', insert: '\\Leftrightarrow' },
-      { label: '↤', insert: '\\mapsfrom' }, { label: '↦', insert: '\\mapsto' },
+    label: '→', items: [
+      { label: '→', insert: '\\rightarrow' }, { label: '←', insert: '\\leftarrow' },
+      { label: '↔', insert: '\\leftrightarrow' }, { label: '⇒', insert: '\\Rightarrow' },
+      { label: '⇐', insert: '\\Leftarrow' }, { label: '⇔', insert: '\\Leftrightarrow' },
+      { label: '↤', insert: '\\mapsfrom' }, { label: '↦', insert: '\\mapsto' },
       { label: '|', action: 'ARROW_PICKER', title: 'More Arrows', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool' },
       { type: 'sep', cols: 3 },
-      { label: '⋮', insert: '\\vdots', title: 'Vertical ellipsis' },
-      { label: '⋰', insert: '⋰', title: 'Up-right diagonal ellipsis' },
-      { label: '…', insert: '\\ldots', title: 'Horizontal ellipsis' },
-      { label: '⋱', insert: '\\ddots', title: 'Down-right diagonal ellipsis' },
-      { label: '⋯', insert: '\\cdots', title: 'Midline ellipsis' },
+      { label: 'â‹®', insert: '\\vdots', title: 'Vertical ellipsis' },
+      { label: 'â‹°', insert: 'â‹°', title: 'Up-right diagonal ellipsis' },
+      { label: '…', insert: '\\ldots', title: 'Horizontal ellipsis' },
+      { label: '⋱', insert: '\\ddots', title: 'Down-right diagonal ellipsis' },
+      { label: '⋯', insert: '\\cdots', title: 'Midline ellipsis' },
       { type: 'sep', cols: 3 },
       { label: '-', insert: '-', title: 'Short dash' },
-      { label: '–', insert: '–', title: 'Dash' },
-      { label: '—', insert: '—', title: 'Long dash' },
+      { label: '–', insert: '–', title: 'Dash' },
+      { label: '—', insert: '—', title: 'Long dash' },
 
       { type: 'sep', cols: 3 },
-      { label: 'A→', insert: '\\xrightarrow{#0}', title: 'Arrow with label above', icon: 'arrow-label-right-above' },
-      { label: 'A←', insert: '\\xleftarrow{#0}', title: 'Left arrow with label above', icon: 'arrow-label-left-above' },
-      { label: '→A', insert: '\\xrightarrow[#?]{}', title: 'Arrow with label below', icon: 'arrow-label-right-below' },
-      { label: '←A', insert: '\\xleftarrow[#?]{}', title: 'Left arrow with label below', icon: 'arrow-label-left-below' },
-      { label: 'A→B', insert: '\\xrightarrow[#?]{#0}', title: 'Arrow with labels above and below', icon: 'arrow-label-right-above-below' },
-      { label: 'A←B', insert: '\\xleftarrow[#?]{#0}', title: 'Left arrow with labels above and below', icon: 'arrow-label-left-above-below' },
+      { label: 'A→', insert: '\\xrightarrow{#0}', title: 'Arrow with label above', icon: 'arrow-label-right-above' },
+      { label: 'A←', insert: '\\xleftarrow{#0}', title: 'Left arrow with label above', icon: 'arrow-label-left-above' },
+      { label: '→A', insert: '\\xrightarrow[#?]{}', title: 'Arrow with label below', icon: 'arrow-label-right-below' },
+      { label: '←A', insert: '\\xleftarrow[#?]{}', title: 'Left arrow with label below', icon: 'arrow-label-left-below' },
+      { label: 'A→B', insert: '\\xrightarrow[#?]{#0}', title: 'Arrow with labels above and below', icon: 'arrow-label-right-above-below' },
+      { label: 'A←B', insert: '\\xleftarrow[#?]{#0}', title: 'Left arrow with labels above and below', icon: 'arrow-label-left-above-below' },
       { label: '|', action: 'ARROW_LABEL_PICKER', title: 'More Labelled Arrows', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool arrow-label-picker-tool' },
 
       { type: 'sep', cols: 2 },
-      { label: 'x⇀', insert: '\\overrightharpoon{#0}', title: 'Vector accent', icon: 'accent-harpoon-right' },
-      { label: 'x→', insert: '\\overrightarrow{#0}', title: 'Arrow accent', icon: 'accent-arrow-right' },
-      { label: 'x↔', insert: '\\overleftrightarrow{#0}', title: 'Left-right arrow accent', icon: 'accent-arrow-both' },
-      { label: 'x̄', insert: '\\overline{#0}', title: 'Bar accent', icon: 'accent-bar' },
+      { label: 'x⇀', insert: '\\overrightharpoon{#0}', title: 'Vector accent', icon: 'accent-harpoon-right' },
+      { label: 'x→', insert: '\\overrightarrow{#0}', title: 'Arrow accent', icon: 'accent-arrow-right' },
+      { label: 'x↔', insert: '\\overleftrightarrow{#0}', title: 'Left-right arrow accent', icon: 'accent-arrow-both' },
+      { label: 'x̄', insert: '\\overline{#0}', title: 'Bar accent', icon: 'accent-bar' },
     ]
   },
   {
-    label: '∫ ∯', isTemplate: true, items: [
-      { label: '∫', insert: '\\int' }, { label: '∬', insert: '\\iint' },
-      { label: '∭', insert: '\\iiint' }, { label: '∮', insert: '\\oint' },
-      { label: '∯', insert: '\\oiint' }, { label: '∰', insert: '\\oiiint' },
-      { label: '∫dx', insert: '\\int #0 \\, d#?', icon: 'integral-with-differential' },
-      { label: '∫ₐᵇ', insert: '\\int_{#?}^{#?} #0 \\, d#?', icon: 'integral-with-limits-differential' },
-      { label: '∫∫dA', insert: '\\iint_{#?} #0 \\, dA', title: 'Double Integral with Area Element', icon: 'double-integral-area-template-image' },
-      { label: '∮C', insert: '\\oint_{#?} #0 \\, d#?' },
-      { label: '∫∫∫dV', insert: '\\iiint_{#?} #0 \\, dV' },
-      { label: '∫_C', insert: '\\int_{C} #0 \\, d#?' },
-      { label: '∮_C', insert: '\\oint_{C} #0 \\, d#?' },
-      { label: '∫∫_D', insert: '\\iint_{D} #0 \\, dA' },
+    label: '∫ ∯', isTemplate: true, items: [
+      { label: '∫', insert: '\\int' }, { label: '∬', insert: '\\iint' },
+      { label: '∭', insert: '\\iiint' }, { label: '∮', insert: '\\oint' },
+      { label: '∯', insert: '\\oiint' }, { label: '∰', insert: '\\oiiint' },
+      { label: '∫dx', insert: '\\int #0 \\, d#?', icon: 'integral-with-differential' },
+      { label: '∫ₐᵇ', insert: '\\int_{#?}^{#?} #0 \\, d#?', icon: 'integral-with-limits-differential' },
+      { label: '∫∫dA', insert: '\\iint_{#?} #0 \\, dA', title: 'Double Integral with Area Element', icon: 'double-integral-area-template-image' },
+      { label: '∮C', insert: '\\oint_{#?} #0 \\, d#?' },
+      { label: '∫∫∫dV', insert: '\\iiint_{#?} #0 \\, dV' },
+      { label: '∫_C', insert: '\\int_{C} #0 \\, d#?' },
+      { label: '∮_C', insert: '\\oint_{C} #0 \\, d#?' },
+      { label: '∫∫_D', insert: '\\iint_{D} #0 \\, dA' },
       { label: 'F(b)-F(a)', insert: '\\left[#0\\right]_{#?}^{#?}', title: 'Evaluated Expression', icon: 'evaluated-expression-template-image' },
       { label: 'u-sub', insert: '\\int #0 \\, du' },
     ]
@@ -358,106 +358,106 @@ const MATH_GROUPS = [
       { label: 'df/dx', insert: '\\frac{df}{dx}' },
       { label: 'd/dt', insert: '\\frac{d}{dt}' },
       { label: 'dy/dt', insert: '\\frac{dy}{dt}' },
-      { label: 'd²y/dx²', insert: '\\frac{d^{2}y}{dx^{2}}' },
-      { label: 'd²y/dt²', insert: '\\frac{d^{2}y}{dt^{2}}' },
-      { label: 'dⁿy/dxⁿ', insert: '\\frac{d^{#?}#0}{dx^{#?}}' },
-      { label: '∂/∂x', insert: '\\frac{\\partial}{\\partial x}' },
-      { label: '∂f/∂x', insert: '\\frac{\\partial #0}{\\partial x}' },
-      { label: '∂²f/∂x²', insert: '\\frac{\\partial^{2} #0}{\\partial x^{2}}' },
-      { label: '∂²f/∂y²', insert: '\\frac{\\partial^{2} #0}{\\partial y^{2}}' },
-      { label: '∂²f/∂x∂y', insert: '\\frac{\\partial^{2} #0}{\\partial x \\partial y}' },
+      { label: 'd²y/dx²', insert: '\\frac{d^{2}y}{dx^{2}}' },
+      { label: 'd²y/dt²', insert: '\\frac{d^{2}y}{dt^{2}}' },
+      { label: 'dⁿy/dxⁿ', insert: '\\frac{d^{#?}#0}{dx^{#?}}' },
+      { label: '∂/∂x', insert: '\\frac{\\partial}{\\partial x}' },
+      { label: '∂f/∂x', insert: '\\frac{\\partial #0}{\\partial x}' },
+      { label: '∂²f/∂x²', insert: '\\frac{\\partial^{2} #0}{\\partial x^{2}}' },
+      { label: '∂²f/∂y²', insert: '\\frac{\\partial^{2} #0}{\\partial y^{2}}' },
+      { label: '∂²f/∂x∂y', insert: '\\frac{\\partial^{2} #0}{\\partial x \\partial y}' },
       { label: "f'(x)", insert: '#0^{\\prime}(#?)' },
       { label: "f''(x)", insert: '#0^{\\prime\\prime}(#?)' },
       { label: "f'''(x)", insert: '#0^{\\prime\\prime\\prime}(#?)' },
       { label: "y'", insert: 'y^{\\prime}' }, { label: "y''", insert: 'y^{\\prime\\prime}' },
-      { label: 'ẋ', insert: '\\dot{#0}' }, { label: 'ẍ', insert: '\\ddot{#0}' },
-      { label: '∇f', insert: '\\nabla #0' }, { label: '∇²f', insert: '\\nabla^{2} #0' },
+      { label: 'ẋ', insert: '\\dot{#0}' }, { label: 'ẍ', insert: '\\ddot{#0}' },
+      { label: '∇f', insert: '\\nabla #0' }, { label: '∇²f', insert: '\\nabla^{2} #0' },
     ]
   },
   {
     label: 'log/ln', isTemplate: true, items: [
       { label: 'log', insert: '\\log' }, { label: 'ln', insert: '\\ln' },
-      { label: 'log₁₀', insert: '\\log_{10}' }, { label: 'log₂', insert: '\\log_{2}' },
-      { label: 'logₐ', insert: '\\log_{#?}' },
-      { label: 'logₐ(x)', insert: '\\log_{#?}\\left(#0\\right)' },
-      { label: 'log₁₀(x)', insert: '\\log_{10}\\left(#0\\right)' },
+      { label: 'log₁₀', insert: '\\log_{10}' }, { label: 'log₂', insert: '\\log_{2}' },
+      { label: 'logₐ', insert: '\\log_{#?}' },
+      { label: 'logₐ(x)', insert: '\\log_{#?}\\left(#0\\right)' },
+      { label: 'log₁₀(x)', insert: '\\log_{10}\\left(#0\\right)' },
       { label: 'ln(x)', insert: '\\ln\\left(#0\\right)' },
       { label: 'log|x|', insert: '\\log\\left|#0\\right|' },
-      { label: 'eˣ', insert: 'e^{#0}', title: 'e to the Power', icon: 'exp-e-template-image' }, { label: 'eⁱˣ', insert: 'e^{i #0}' },
-      { label: '10ˣ', insert: '10^{#0}' }, { label: '2ˣ', insert: '2^{#0}' },
-      { label: 'aˣ', insert: '#?^{#0}', title: 'Base to the Power', icon: 'exp-generic-template-image' },
+      { label: 'eˣ', insert: 'e^{#0}', title: 'e to the Power', icon: 'exp-e-template-image' }, { label: 'eⁱˣ', insert: 'e^{i #0}' },
+      { label: '10Ë£', insert: '10^{#0}' }, { label: '2Ë£', insert: '2^{#0}' },
+      { label: 'aˣ', insert: '#?^{#0}', title: 'Base to the Power', icon: 'exp-generic-template-image' },
       { label: 'log(ab)', insert: '\\log\\left(#0 \\cdot #?\\right)' },
       { label: 'log(a/b)', insert: '\\log\\left(\\frac{#0}{#?}\\right)' },
-      { label: 'log(aⁿ)', insert: '\\log\\left(#0^{#?}\\right)' },
+      { label: 'log(aⁿ)', insert: '\\log\\left(#0^{#?}\\right)' },
     ]
   },
   {
-    label: 'π,e', items: [
+    label: 'Ï€,e', items: [
       { label: 'e', insert: 'e' }, { label: 'i', insert: 'i' },
-      { label: 'π', insert: '\\pi' },
-      { label: 'ℝ', insert: '\\mathbb{R}' }, { label: 'ℤ', insert: '\\mathbb{Z}' },
-      { label: 'ℕ', insert: '\\mathbb{N}' }, { label: 'ℚ', insert: '\\mathbb{Q}' },
-      { label: 'ℂ', insert: '\\mathbb{C}' }, { label: '∅', insert: '\\emptyset' },
-      { label: 'ℵ₀', insert: '\\aleph_0' },
-      { label: 'ξ', insert: '\\xi' },
-      { label: 'ρ', insert: '\\rho' }, { label: 'σ', insert: '\\sigma' },
-      { label: 'τ', insert: '\\tau' }, { label: 'υ', insert: '\\upsilon' },
-      { label: 'φ', insert: '\\varphi' }, { label: 'χ', insert: '\\chi' },
-      { label: 'ψ', insert: '\\psi' }, { label: 'ω', insert: '\\omega' },
-      { label: 'Γ', insert: '\\Gamma' }, { label: 'Δ', insert: '\\Delta' },
-      { label: 'Θ', insert: '\\Theta' }, { label: 'Λ', insert: '\\Lambda' },
-      { label: 'Ξ', insert: '\\Xi' }, { label: 'Σ', insert: '\\Sigma' },
-      { label: 'Φ', insert: '\\Phi' }, { label: 'Ψ', insert: '\\Psi' },
-      { label: 'Ω', insert: '\\Omega' },
-      { label: 'θᵢ', insert: '\\theta_{#?}' }, { label: 'λₙ', insert: '\\lambda_{#?}' },
-      { label: 'μₓ', insert: '\\mu_{#?}' }, { label: 'σ²', insert: '\\sigma^{2}' },
-      { label: 'Δx', insert: '\\Delta #?' },
+      { label: 'Ï€', insert: '\\pi' },
+      { label: 'ℝ', insert: '\\mathbb{R}' }, { label: 'ℤ', insert: '\\mathbb{Z}' },
+      { label: 'â„•', insert: '\\mathbb{N}' }, { label: 'â„š', insert: '\\mathbb{Q}' },
+      { label: 'ℂ', insert: '\\mathbb{C}' }, { label: '∅', insert: '\\emptyset' },
+      { label: 'ℵ₀', insert: '\\aleph_0' },
+      { label: 'ξ', insert: '\\xi' },
+      { label: 'ρ', insert: '\\rho' }, { label: 'σ', insert: '\\sigma' },
+      { label: 'Ï„', insert: '\\tau' }, { label: 'Ï…', insert: '\\upsilon' },
+      { label: 'φ', insert: '\\varphi' }, { label: 'χ', insert: '\\chi' },
+      { label: 'ψ', insert: '\\psi' }, { label: 'ω', insert: '\\omega' },
+      { label: 'Γ', insert: '\\Gamma' }, { label: 'Δ', insert: '\\Delta' },
+      { label: 'Θ', insert: '\\Theta' }, { label: 'Λ', insert: '\\Lambda' },
+      { label: 'Ξ', insert: '\\Xi' }, { label: 'Σ', insert: '\\Sigma' },
+      { label: 'Φ', insert: '\\Phi' }, { label: 'Ψ', insert: '\\Psi' },
+      { label: 'Ω', insert: '\\Omega' },
+      { label: 'θᵢ', insert: '\\theta_{#?}' }, { label: 'λₙ', insert: '\\lambda_{#?}' },
+      { label: 'μₓ', insert: '\\mu_{#?}' }, { label: 'σ²', insert: '\\sigma^{2}' },
+      { label: 'Δx', insert: '\\Delta #?' },
     ]
   },
   {
-    label: '∈∪∩', items: [
-      { label: 'Ω', title: 'Insert Special Character', action: 'SPECIAL_CHARS' },
-      { label: '⊆', insert: '\\subseteq' }, { label: '⊇', insert: '\\supseteq' },
-      { label: '﹨', insert: '﹨' }, { label: '∩', insert: '\\cap' },
-      { label: '∪', insert: '\\cup' }, { label: '∅', insert: '\\emptyset' },
-      { label: '□⊂□', insert: '#? \\subset #?' }, { label: '□⊆□', insert: '#? \\subseteq #?' },
-      { label: '□∈□', insert: '#? \\in #?' }, { label: '□∉□', insert: '#? \\notin #?' },
-      { label: '□∪□', insert: '#? \\cup #?' }, { label: '□∩□', insert: '#? \\cap #?' },
+    label: '∈∪∩', items: [
+      { label: 'Ω', title: 'Insert Special Character', action: 'SPECIAL_CHARS' },
+      { label: '⊆', insert: '\\subseteq' }, { label: '⊇', insert: '\\supseteq' },
+      { label: '﹨', insert: '﹨' }, { label: '∩', insert: '\\cap' },
+      { label: '∪', insert: '\\cup' }, { label: '∅', insert: '\\emptyset' },
+      { label: '□⊂□', insert: '#? \\subset #?' }, { label: '□⊆□', insert: '#? \\subseteq #?' },
+      { label: '□∈□', insert: '#? \\in #?' }, { label: '□∉□', insert: '#? \\notin #?' },
+      { label: '□∪□', insert: '#? \\cup #?' }, { label: '□∩□', insert: '#? \\cap #?' },
     ]
   },
   {
-    label: '∀∃', items: [
-      { label: '∀', insert: '\\forall' }, { label: '∃', insert: '\\exists' },
-      { label: '¬', insert: '\\neg' }, { label: '∧', insert: '\\land' },
-      { label: '∨', insert: '\\lor' },
-      { label: '□⇒□', insert: '#? \\Rightarrow #?' }, { label: '□⇔□', insert: '#? \\Leftrightarrow #?' },
-      { label: '□∧□', insert: '#? \\land #?' }, { label: '□∨□', insert: '#? \\lor #?' },
-      { label: '¬□', insert: '\\neg #?' },
+    label: '∀∃', items: [
+      { label: '∀', insert: '\\forall' }, { label: '∃', insert: '\\exists' },
+      { label: '¬', insert: '\\neg' }, { label: '∧', insert: '\\land' },
+      { label: '∨', insert: '\\lor' },
+      { label: '□⇒□', insert: '#? \\Rightarrow #?' }, { label: '□⇔□', insert: '#? \\Leftrightarrow #?' },
+      { label: '□∧□', insert: '#? \\land #?' }, { label: '□∨□', insert: '#? \\lor #?' },
+      { label: '¬□', insert: '\\neg #?' },
     ]
   },
   {
     label: (
       <>
-        ⎡□ □⎤
+        ⎡□ □⎤
       </>
     ),
     isMatrix: true,
     items: [
-      { label: '□', insert: 'matrix', cls: 'template' },
+      { label: 'â–¡', insert: 'matrix', cls: 'template' },
       { label: '[]', insert: 'bmatrix', cls: 'template' },
       { label: '||', insert: 'vmatrix', cls: 'template' },
       { label: '()', insert: 'pmatrix', cls: 'template' },
       { type: 'sep', cols: 2 },
-      { label: '□ \\ □ \\ □', insert: '\\begin{matrix} #? \\\\ #? \\\\ #? \\end{matrix}', cls: 'template', directInsert: true },
-      { label: '□ □ □', insert: '\\begin{matrix} #? & #? & #? \\end{matrix}', cls: 'template', directInsert: true },
-      { label: '□ \\ □', insert: '\\begin{bmatrix} #? \\\\ #? \\end{bmatrix}', cls: 'template', directInsert: true },
-      { label: '□ & □', insert: '\\begin{bmatrix} #? & #? \\end{bmatrix}', cls: 'template', directInsert: true },
+      { label: 'â–¡ \\ â–¡ \\ â–¡', insert: '\\begin{matrix} #? \\\\ #? \\\\ #? \\end{matrix}', cls: 'template', directInsert: true },
+      { label: 'â–¡ â–¡ â–¡', insert: '\\begin{matrix} #? & #? & #? \\end{matrix}', cls: 'template', directInsert: true },
+      { label: 'â–¡ \\ â–¡', insert: '\\begin{bmatrix} #? \\\\ #? \\end{bmatrix}', cls: 'template', directInsert: true },
+      { label: 'â–¡ & â–¡', insert: '\\begin{bmatrix} #? & #? \\end{bmatrix}', cls: 'template', directInsert: true },
 
       { type: 'sep', cols: 2 },
-      { label: '□ \\ □', insert: '\\begin{pmatrix} #? \\\\ #? \\end{pmatrix}', cls: 'template', directInsert: true },
-      { label: '□ & □', insert: '\\begin{pmatrix} #? & #? \\end{pmatrix}', cls: 'template', directInsert: true },
-      // { label: '□ \\ □ \\ □', insert: '\\begin{bmatrix} #? \\\\ #? \\\\ #? \\end{bmatrix}', cls: 'template', directInsert: true },
-      // { label: '□ \\ □ \\ □', insert: '\\begin{pmatrix} #? \\\\ #? \\\\ #? \\end{pmatrix}', cls: 'template', directInsert: true },
+      { label: 'â–¡ \\ â–¡', insert: '\\begin{pmatrix} #? \\\\ #? \\end{pmatrix}', cls: 'template', directInsert: true },
+      { label: 'â–¡ & â–¡', insert: '\\begin{pmatrix} #? & #? \\end{pmatrix}', cls: 'template', directInsert: true },
+      // { label: 'â–¡ \\ â–¡ \\ â–¡', insert: '\\begin{bmatrix} #? \\\\ #? \\\\ #? \\end{bmatrix}', cls: 'template', directInsert: true },
+      // { label: 'â–¡ \\ â–¡ \\ â–¡', insert: '\\begin{pmatrix} #? \\\\ #? \\\\ #? \\end{pmatrix}', cls: 'template', directInsert: true },
 
 
       { type: 'sep', cols: 2 },
@@ -466,10 +466,10 @@ const MATH_GROUPS = [
       { label: 'cases-2x2', insert: '\\begin{cases} #? & #? \\\\ #? & #? \\end{cases}', cls: 'template', directInsert: true, icon: 'cases-two-by-two-template-image', title: 'Cases 2x2' },
       { label: 'aligned', insert: '\\begin{aligned} #? &= #? \\\\ #? &= #? \\end{aligned}', cls: 'template', directInsert: true, icon: 'aligned-equals-template-image', title: 'Aligned Equations' },
       { type: 'sep', cols: 2 },
-      { label: '⋮', insert: '\\vdots', title: 'Vertical ellipsis', icon: 'vertical-ellipsis-template-image', directInsert: true },
-      { label: '⋯', insert: '\\cdots', title: 'Midline ellipsis', icon: 'midline-ellipsis-template-image', directInsert: true },
-      { label: '⋰', insert: '⋰', title: 'Up-right diagonal ellipsis', icon: 'upright-ellipsis-template-image', directInsert: true },
-      { label: '⋱', insert: '\\ddots', title: 'Down-right diagonal ellipsis', icon: 'downright-ellipsis-template-image', directInsert: true },
+      { label: 'â‹®', insert: '\\vdots', title: 'Vertical ellipsis', icon: 'vertical-ellipsis-template-image', directInsert: true },
+      { label: '⋯', insert: '\\cdots', title: 'Midline ellipsis', icon: 'midline-ellipsis-template-image', directInsert: true },
+      { label: 'â‹°', insert: 'â‹°', title: 'Up-right diagonal ellipsis', icon: 'upright-ellipsis-template-image', directInsert: true },
+      { label: '⋱', insert: '\\ddots', title: 'Down-right diagonal ellipsis', icon: 'downright-ellipsis-template-image', directInsert: true },
       { type: 'sep', cols: 2 },
       {label: 'sum-array',insert: '\\frac{\\begin{array}{r}#?\\\\+\\,#?\\end{array}}{\\quad#?}',cls: 'template',directInsert: true,icon: 'sum-array-template-image',title: 'Column Addition'},     { label: 'diff-array', insert: '\\frac{\\begin{array}{r}#?\\\\-\\,#?\\end{array}}{\\quad#?}', directInsert: true, icon: 'difference-array-template-image', title: 'Column Subtraction' },
       { label: 'stack-line', insert: '\\frac{\\begin{array}{c}#?\\\\#?\\end{array}}{#?}', cls: 'template', directInsert: true, icon: 'stack-line-template-image', title: 'Stacked Line Layout' },
@@ -485,62 +485,62 @@ const MATH_GROUPS = [
 const RELATION_MORE_PICKERS = {
   operatorExtras: [
     { label: '\\', insert: '\\backslash', title: 'Slash', icon: 'slash-operator-template-image' },
-    { label: '﹨', insert: '﹨', title: 'Reverse Solidus' },
-    { label: '∓', insert: '\\mp', title: 'Minus or Plus', icon: 'minus-plus-operator-template-image' },
+    { label: '﹨', insert: '﹨', title: 'Reverse Solidus' },
+    { label: '∓', insert: '\\mp', title: 'Minus or Plus', icon: 'minus-plus-operator-template-image' },
   ],
   primeExtras: [
-    { label: '‴', insert: "'''", cls: 'prime-symbol-tool' },
-    { label: '⁗', insert: "''''", cls: 'prime-symbol-tool' },
-    { label: '‵', insert: '‵', cls: 'prime-symbol-tool', title: 'Reversed Prime' },
+    { label: '‴', insert: "'''", cls: 'prime-symbol-tool' },
+    { label: '⁗', insert: "''''", cls: 'prime-symbol-tool' },
+    { label: '‵', insert: '‵', cls: 'prime-symbol-tool', title: 'Reversed Prime' },
   ],
   notEqualExtras: [
-    { label: '≠', insert: '\\neq', title: 'Not Equal', icon: 'not-equal-template-image' },
-    { label: '≉', insert: '\\not\\approx', title: 'Not Approximately Equal', icon: 'not-approx-equal-template-image' },
-    { label: '≁', insert: '\\nsim', title: 'Not Similar', icon: 'not-similar-template-image' },
-    { label: '≢', insert: '\\not\\equiv', title: 'Not Identical', icon: 'not-identical-template-image' },
+    { label: '≠', insert: '\\neq', title: 'Not Equal', icon: 'not-equal-template-image' },
+    { label: '≉', insert: '\\not\\approx', title: 'Not Approximately Equal', icon: 'not-approx-equal-template-image' },
+    { label: '≁', insert: '\\nsim', title: 'Not Similar', icon: 'not-similar-template-image' },
+    { label: '≢', insert: '\\not\\equiv', title: 'Not Identical', icon: 'not-identical-template-image' },
   ],
   comparisonExtras: [
-    { label: '≫', insert: '\\gg', title: 'Much Greater Than', icon: 'much-greater-than-template-image' },
-    { label: '≪', insert: '\\ll', title: 'Much Less Than', icon: 'much-less-than-template-image' },
-    { label: '⪇', insert: '\\lneqq', title: 'Less Than But Not Equal' },
-    { label: '≻', insert: '\\succ', title: 'Succeeds', icon: 'succeeds-template-image' },
-    { label: '⪈', insert: '\\gneqq', title: 'Greater Than But Not Equal', icon: 'greater-than-not-equal-template-image' },
-    { label: '∝', insert: '\\propto', title: 'Proportional To', icon: 'proportional-to-template-image' },
-    { label: '⊲', insert: '\\lhd', title: 'Normal Subgroup', icon: 'normal-subgroup-template-image' },
-    { label: '≺', insert: '\\prec', title: 'Precedes', icon: 'precedes-template-image' },
-    { label: '▷', insert: '\\rhd', title: 'Contains Normal Subgroup', icon: 'contains-normal-subgroup-template-image' },
+    { label: '≫', insert: '\\gg', title: 'Much Greater Than', icon: 'much-greater-than-template-image' },
+    { label: '≪', insert: '\\ll', title: 'Much Less Than', icon: 'much-less-than-template-image' },
+    { label: '⪇', insert: '\\lneqq', title: 'Less Than But Not Equal' },
+    { label: '≻', insert: '\\succ', title: 'Succeeds', icon: 'succeeds-template-image' },
+    { label: '⪈', insert: '\\gneqq', title: 'Greater Than But Not Equal', icon: 'greater-than-not-equal-template-image' },
+    { label: '∝', insert: '\\propto', title: 'Proportional To', icon: 'proportional-to-template-image' },
+    { label: '⊲', insert: '\\lhd', title: 'Normal Subgroup', icon: 'normal-subgroup-template-image' },
+    { label: '≺', insert: '\\prec', title: 'Precedes', icon: 'precedes-template-image' },
+    { label: 'â–·', insert: '\\rhd', title: 'Contains Normal Subgroup', icon: 'contains-normal-subgroup-template-image' },
   ],
   setExtras: [
-    { label: '∉', insert: '\\notin', title: 'Not Element Of', icon: 'not-element-of-template-image' },
-    { label: '∌', insert: '\\not\\ni', title: 'Not Contains Member', icon: 'not-contains-member-template-image' },
-    { label: '⊆', insert: '\\subseteq', title: 'Subset Equal', icon: 'subset-equal-template-image' },
-    { label: '⊇', insert: '\\supseteq', title: 'Superset Equal', icon: 'superset-equal-template-image' },
-    { label: '⊏', insert: '\\sqsubset', title: 'Square Subset', icon: 'square-subset-template-image' },
-    { label: '⊐', insert: '\\sqsupset', title: 'Square Superset', icon: 'square-superset-template-image' },
-    { label: '⊑', insert: '\\sqsubseteq', title: 'Square Subset Equal', icon: 'square-subset-equal-template-image' },
-    { label: '⊒', insert: '\\sqsupseteq', title: 'Square Superset Equal', icon: 'square-superset-equal-template-image' },
-    { label: '⊓', insert: '\\sqcap', title: 'Square Cap', icon: 'square-cap-template-image' },
-    { label: '⊔', insert: '\\sqcup', title: 'Square Cup', icon: 'square-cup-template-image' },
+    { label: '∉', insert: '\\notin', title: 'Not Element Of', icon: 'not-element-of-template-image' },
+    { label: '∌', insert: '\\not\\ni', title: 'Not Contains Member', icon: 'not-contains-member-template-image' },
+    { label: '⊆', insert: '\\subseteq', title: 'Subset Equal', icon: 'subset-equal-template-image' },
+    { label: '⊇', insert: '\\supseteq', title: 'Superset Equal', icon: 'superset-equal-template-image' },
+    { label: '⊏', insert: '\\sqsubset', title: 'Square Subset', icon: 'square-subset-template-image' },
+    { label: '⊐', insert: '\\sqsupset', title: 'Square Superset', icon: 'square-superset-template-image' },
+    { label: '⊑', insert: '\\sqsubseteq', title: 'Square Subset Equal', icon: 'square-subset-equal-template-image' },
+    { label: '⊒', insert: '\\sqsupseteq', title: 'Square Superset Equal', icon: 'square-superset-equal-template-image' },
+    { label: '⊓', insert: '\\sqcap', title: 'Square Cap', icon: 'square-cap-template-image' },
+    { label: '⊔', insert: '\\sqcup', title: 'Square Cup', icon: 'square-cup-template-image' },
   ],
   logicExtras: [
-    { label: '∴', insert: '\\therefore', title: 'Therefore', icon: 'therefore-template-image' },
-    { label: '∵', insert: '\\because', title: 'Because', icon: 'because-template-image' },
+    { label: '∴', insert: '\\therefore', title: 'Therefore', icon: 'therefore-template-image' },
+    { label: '∵', insert: '\\because', title: 'Because', icon: 'because-template-image' },
   ],
   geometryExtras: [
-    { label: '∦', insert: '\\nparallel', title: 'Not Parallel', icon: 'not-parallel-template-image' },
-    { label: '∡', insert: '\\measuredangle', title: 'Measured Angle', icon: 'measured-angle-template-image' },
-    { label: '∢', insert: '\\sphericalangle', title: 'Spherical Angle', icon: 'spherical-angle-template-image' },
-    { label: '⋄', insert: '\\diamond', title: 'Diamond', icon: 'diamond-template-image' },
+    { label: '∦', insert: '\\nparallel', title: 'Not Parallel', icon: 'not-parallel-template-image' },
+    { label: '∡', insert: '\\measuredangle', title: 'Measured Angle', icon: 'measured-angle-template-image' },
+    { label: '∢', insert: '\\sphericalangle', title: 'Spherical Angle', icon: 'spherical-angle-template-image' },
+    { label: 'â‹„', insert: '\\diamond', title: 'Diamond', icon: 'diamond-template-image' },
   ],
   shapeExtras: [
-    { label: '▭', insert: '▭', title: 'Rectangle', icon: 'rectangle-template-image' },
-    { label: '▱', insert: '\\parallelogram', title: 'Parallelogram', icon: 'parallelogram-template-image' },
+    { label: 'â–­', insert: 'â–­', title: 'Rectangle', icon: 'rectangle-template-image' },
+    { label: 'â–±', insert: '\\parallelogram', title: 'Parallelogram', icon: 'parallelogram-template-image' },
   ],
   circledExtras: [
-    { label: '⊖', insert: '\\ominus', title: 'Circled Minus', icon: 'circled-minus-template-image' },
-    { label: '⊛', insert: '\\circledast', title: 'Circled Asterisk', icon: 'circled-asterisk-template-image' },
-    { label: '⊘', insert: '⨸', title: 'Circled Divide', icon: 'circled-divide-template-image' },
-    { label: '•', insert: '^{\\bullet}', title: 'Raised Bullet', icon: 'raised-bullet-template-image' },
+    { label: '⊖', insert: '\\ominus', title: 'Circled Minus', icon: 'circled-minus-template-image' },
+    { label: '⊛', insert: '\\circledast', title: 'Circled Asterisk', icon: 'circled-asterisk-template-image' },
+    { label: '⊘', insert: '⨸', title: 'Circled Divide', icon: 'circled-divide-template-image' },
+    { label: '•', insert: '^{\\bullet}', title: 'Raised Bullet', icon: 'raised-bullet-template-image' },
   ],
 };
 
@@ -557,125 +557,125 @@ const RELATIONS_TAB_ITEMS = [
   { label: 'cancel', insert: '\\cancel{#0}', title: 'Negate / Cross Out', icon: 'negate-template-image' },
   { type: 'sep', cols: 1 },
   { label: '+', insert: '+' },
-  { label: '·', insert: '\\cdot' },
-  { label: '−', insert: '-' },
+  { label: '·', insert: '\\cdot' },
+  { label: '−', insert: '-' },
   { label: '/', insert: '/' },
-  { label: '×', insert: '\\times' },
-  { label: '±', insert: '\\pm' },
-  { label: '÷', insert: '\\div' },
+  { label: '×', insert: '\\times' },
+  { label: '±', insert: '\\pm' },
+  { label: '÷', insert: '\\div' },
   { label: '*', insert: '\\ast' },
-  { label: '∘', insert: '∘' },
+  { label: '∘', insert: '∘' },
   makeRelationMorePicker('operatorExtras', 'More Operators'),
 
   { type: 'sep', cols: 5 },
-  { label: 'π', insert: '\\pi' },
-  { label: '∞', insert: '\\infty' },
-  { label: '∂', insert: '\\partial' },
-  { label: 'Δ', insert: '\\Delta' },
-  { label: '°', insert: '\\degree' },
-  { label: '′', insert: "'", cls: 'prime-symbol-tool' },
-  { label: '∅', insert: '\\emptyset' },
-  { label: '∇', insert: '\\nabla' },
-  { label: '″', insert: "''", cls: 'prime-symbol-tool' },
+  { label: 'Ï€', insert: '\\pi' },
+  { label: '∞', insert: '\\infty' },
+  { label: '∂', insert: '\\partial' },
+  { label: 'Δ', insert: '\\Delta' },
+  { label: '°', insert: '\\degree' },
+  { label: '′', insert: "'", cls: 'prime-symbol-tool' },
+  { label: '∅', insert: '\\emptyset' },
+  { label: '∇', insert: '\\nabla' },
+  { label: '″', insert: "''", cls: 'prime-symbol-tool' },
   makeRelationMorePicker('primeExtras', 'More Prime Symbols'),
   
 
   { type: 'sep', cols: 3 },
   { label: '=', insert: '=' },
-  { label: '≡', insert: '\\equiv' },
+  { label: '≡', insert: '\\equiv' },
   { label: '~', insert: '\\sim' },
-  { label: '≈', insert: '\\approx' },
-  { label: '≃', insert: '\\simeq' },
-  { label: '≅', insert: '\\cong' },
+  { label: '≈', insert: '\\approx' },
+  { label: '≃', insert: '\\simeq' },
+  { label: '≅', insert: '\\cong' },
   makeRelationMorePicker('notEqualExtras', 'More Not Equal Relations'),
 
   { type: 'sep', cols: 3 },
   { label: '>', insert: '>' },
   { label: '<', insert: '<' },
-  { label: '≥', insert: '\\geq' },
-  { label: '≤', insert: '\\leq' },
-  { label: '⩾', insert: '\\geqslant', title: 'Greater Than or Slanted Equal To' },
-  { label: '⩽', insert: '\\leqslant', title: 'Less Than or Slanted Equal To' },
+  { label: '≥', insert: '\\geq' },
+  { label: '≤', insert: '\\leq' },
+  { label: '⩾', insert: '\\geqslant', title: 'Greater Than or Slanted Equal To' },
+  { label: '⩽', insert: '\\leqslant', title: 'Less Than or Slanted Equal To' },
   makeRelationMorePicker('comparisonExtras', 'More Comparison Symbols'),
 
   { type: 'sep', cols: 3 },
-  { label: '∈', insert: '\\in' },
-  { label: '∋', insert: '\\ni' },
-  { label: '∪', insert: '\\cup' },
-  { label: '∩', insert: '\\cap' },
-  { label: '⊂', insert: '\\subset' },
-  { label: '⊃', insert: '\\supset' },
+  { label: '∈', insert: '\\in' },
+  { label: '∋', insert: '\\ni' },
+  { label: '∪', insert: '\\cup' },
+  { label: '∩', insert: '\\cap' },
+  { label: '⊂', insert: '\\subset' },
+  { label: '⊃', insert: '\\supset' },
   makeRelationMorePicker('setExtras', 'More Set Symbols'),
 
   { type: 'sep', cols: 3 },
-  { label: '∧', insert: '\\land' },
-  { label: '∨', insert: '\\lor' },
-  { label: '¬', insert: '\\neg' },
-  { label: '∀', insert: '\\forall' },
-  { label: '∃', insert: '\\exists' },
-  { label: '∄', insert: '\\nexists' },
+  { label: '∧', insert: '\\land' },
+  { label: '∨', insert: '\\lor' },
+  { label: '¬', insert: '\\neg' },
+  { label: '∀', insert: '\\forall' },
+  { label: '∃', insert: '\\exists' },
+  { label: '∄', insert: '\\nexists' },
   makeRelationMorePicker('logicExtras', 'More Logic Symbols'),
 
   { type: 'sep', cols: 2 },
-  { label: '∠', insert: '\\angle' },
-  { label: '∥', insert: '\\parallel' },
-  { label: '⊥', insert: '\\perp' },
+  { label: '∠', insert: '\\angle' },
+  { label: '∥', insert: '\\parallel' },
+  { label: '⊥', insert: '\\perp' },
   makeRelationMorePicker('geometryExtras', 'More Geometry Symbols'),
 
   { type: 'sep', cols: 3 },
-  { label: '□', insert: '\\square' },
-  { label: '△', insert: '\\triangle' },
-  { label: '○', insert: '\\bigcirc' },
+  { label: 'â–¡', insert: '\\square' },
+  { label: 'â–³', insert: '\\triangle' },
+  { label: 'â—‹', insert: '\\bigcirc' },
   makeRelationMorePicker('shapeExtras', 'More Shape Symbols'),
   { type: 'sep', cols: 3 },
-  { label: '⊕', insert: '\\oplus' },
-  { label: '⊗', insert: '\\otimes' },
-  { label: '⊙', insert: '\\odot' },
+  { label: '⊕', insert: '\\oplus' },
+  { label: '⊗', insert: '\\otimes' },
+  { label: '⊙', insert: '\\odot' },
   makeRelationMorePicker('circledExtras', 'More Circled Operators'),
 ];
 
 const ARROW_PICKER_ITEMS = [
-  { label: '↗', insert: '\\nearrow', title: 'North East Arrow' },
-  { label: '↘', insert: '\\searrow', title: 'South East Arrow' },
-  { label: '↖', insert: '\\nwarrow', title: 'North West Arrow' },
-  { label: '↙', insert: '\\swarrow', title: 'South West Arrow' },
-  { label: '⤡', insert: '⤡', title: 'North East and South West Arrow' },
-  { label: '⤢', insert: '⤢', title: 'North West and South East Arrow' },
-  { label: '↩', insert: '\\hookleftarrow', title: 'Hook Left Arrow' },
-  { label: '↪', insert: '\\hookrightarrow', title: 'Hook Right Arrow' },
-  { label: '↼', insert: '\\leftharpoonup', title: 'Left Harpoon Up' },
-  { label: '⇀', insert: '\\rightharpoonup', title: 'Right Harpoon Up' },
-  { label: '↑', insert: '\\uparrow', title: 'Up Arrow' },
-  { label: '↓', insert: '\\downarrow', title: 'Down Arrow' },
-  { label: '⇑', insert: '\\Uparrow', title: 'Double Up Arrow' },
-  { label: '⇓', insert: '\\Downarrow', title: 'Double Down Arrow' },
-  { label: '⥪', insert: '⥪', title: 'Leftwards Arrow with Hook' },
-  { label: '⥭', insert: '⥭', title: 'Rightwards Arrow with Hook' },
-  { label: '⇋', insert: '\\leftrightharpoons', title: 'Reverse Equilibrium Harpoons' },
-  { label: '⇌', insert: '\\rightleftharpoons', title: 'Equilibrium Harpoons' },
-  { label: '↽', insert: '\\leftharpoondown', title: 'Left Harpoon Down' },
-  { label: '⇁', insert: '\\rightharpoondown', title: 'Right Harpoon Down' },
-  { label: '⇆', insert: '⇆', title: 'Leftwards Arrow over Rightwards Arrow' },
-  { label: '⇄', insert: '\\rightleftarrows', title: 'Rightwards Arrow over Leftwards Arrow' },
-  { label: '⇅', insert: '⇅', title: 'Upwards Arrow Left of Downwards Arrow' },
-  { label: '⇵', insert: '⇵', title: 'Downwards Arrow Left of Upwards Arrow' },
-  { label: '⥮', insert: '⥮', title: 'Upwards Harpoon with Barb Left beside Downwards Harpoon with Barb Right' },
-  { label: '⥯', insert: '⥯', title: 'Downwards Harpoon with Barb Left beside Upwards Harpoon with Barb Right' },
+  { label: '↗', insert: '\\nearrow', title: 'North East Arrow' },
+  { label: '↘', insert: '\\searrow', title: 'South East Arrow' },
+  { label: '↖', insert: '\\nwarrow', title: 'North West Arrow' },
+  { label: '↙', insert: '\\swarrow', title: 'South West Arrow' },
+  { label: '⤡', insert: '⤡', title: 'North East and South West Arrow' },
+  { label: '⤢', insert: '⤢', title: 'North West and South East Arrow' },
+  { label: '↩', insert: '\\hookleftarrow', title: 'Hook Left Arrow' },
+  { label: '↪', insert: '\\hookrightarrow', title: 'Hook Right Arrow' },
+  { label: '↼', insert: '\\leftharpoonup', title: 'Left Harpoon Up' },
+  { label: '⇀', insert: '\\rightharpoonup', title: 'Right Harpoon Up' },
+  { label: '↑', insert: '\\uparrow', title: 'Up Arrow' },
+  { label: '↓', insert: '\\downarrow', title: 'Down Arrow' },
+  { label: '⇑', insert: '\\Uparrow', title: 'Double Up Arrow' },
+  { label: '⇓', insert: '\\Downarrow', title: 'Double Down Arrow' },
+  { label: '⥪', insert: '⥪', title: 'Leftwards Arrow with Hook' },
+  { label: '⥭', insert: '⥭', title: 'Rightwards Arrow with Hook' },
+  { label: '⇋', insert: '\\leftrightharpoons', title: 'Reverse Equilibrium Harpoons' },
+  { label: '⇌', insert: '\\rightleftharpoons', title: 'Equilibrium Harpoons' },
+  { label: '↽', insert: '\\leftharpoondown', title: 'Left Harpoon Down' },
+  { label: '⇁', insert: '\\rightharpoondown', title: 'Right Harpoon Down' },
+  { label: '⇆', insert: '⇆', title: 'Leftwards Arrow over Rightwards Arrow' },
+  { label: '⇄', insert: '\\rightleftarrows', title: 'Rightwards Arrow over Leftwards Arrow' },
+  { label: '⇅', insert: '⇅', title: 'Upwards Arrow Left of Downwards Arrow' },
+  { label: '⇵', insert: '⇵', title: 'Downwards Arrow Left of Upwards Arrow' },
+  { label: '⥮', insert: '⥮', title: 'Upwards Harpoon with Barb Left beside Downwards Harpoon with Barb Right' },
+  { label: '⥯', insert: '⥯', title: 'Downwards Harpoon with Barb Left beside Upwards Harpoon with Barb Right' },
   {
-    label: '⇄',
+    label: '⇄',
     insert: '\\rightleftarrows',
     title: 'Rightwards Arrow over Short Leftwards Arrow',
     preview: 'rightleft-short-left'
   },
   {
-    label: '→\n←',
+    label: '→\n←',
     insert: '\\overset{\\to}{\\longleftarrow}',
     title: 'Short Rightwards Arrow over Leftwards Arrow',
     preview: 'right-short-over-left-long'
   },
-  { label: '↕', insert: '\\updownarrow', title: 'Up Down Arrow' },
-  { label: '⇕', insert: '\\Updownarrow', title: 'Double Up Down Arrow' },
-  { label: '↵', insert: '↵', title: 'Downwards Arrow with Corner Leftwards' },
+  { label: '↕', insert: '\\updownarrow', title: 'Up Down Arrow' },
+  { label: '⇕', insert: '\\Updownarrow', title: 'Double Up Down Arrow' },
+  { label: '↵', insert: '↵', title: 'Downwards Arrow with Corner Leftwards' },
 ];
 
 const ARROW_LABEL_PICKER_ITEMS = [
@@ -787,43 +787,43 @@ const ARROW_LABEL_PICKER_ITEMS = [
 ];
 
 const GREEK_ITALIC_UPPERCASE_ITEMS = [
-  { label: 'Α', insert: '\\mathit{Α}', title: 'Italic Alpha' },
-  { label: 'Β', insert: '\\mathit{Β}', title: 'Italic Beta' },
-  { label: 'Γ', insert: '\\varGamma', title: 'Italic Gamma' },
-  { label: 'Δ', insert: '\\varDelta', title: 'Italic Delta' },
-  { label: 'Ε', insert: '\\mathit{Ε}', title: 'Italic Epsilon' },
-  { label: 'Ζ', insert: '\\mathit{Ζ}', title: 'Italic Zeta' },
-  { label: 'Η', insert: '\\mathit{Η}', title: 'Italic Eta' },
-  { label: 'Θ', insert: '\\varTheta', title: 'Italic Theta' },
-  { label: 'Ι', insert: '\\mathit{Ι}', title: 'Italic Iota' },
-  { label: 'Κ', insert: '\\mathit{Κ}', title: 'Italic Kappa' },
-  { label: 'Λ', insert: '\\varLambda', title: 'Italic Lambda' },
-  { label: 'Μ', insert: '\\mathit{Μ}', title: 'Italic Mu' },
-  { label: 'Ν', insert: '\\mathit{Ν}', title: 'Italic Nu' },
-  { label: 'Ξ', insert: '\\varXi', title: 'Italic Xi' },
-  { label: 'Ο', insert: '\\mathit{Ο}', title: 'Italic Omicron' },
-  { label: 'Π', insert: '\\varPi', title: 'Italic Pi' },
-  { label: 'Ρ', insert: '\\mathit{Ρ}', title: 'Italic Rho' },
-  { label: 'Σ', insert: '\\varSigma', title: 'Italic Sigma' },
-  { label: 'Τ', insert: '\\mathit{Τ}', title: 'Italic Tau' },
-  { label: 'Υ', insert: '\\varUpsilon', title: 'Italic Upsilon' },
-  { label: 'Φ', insert: '\\varPhi', title: 'Italic Phi' },
-  { label: 'Χ', insert: '\\mathit{Χ}', title: 'Italic Chi' },
-  { label: 'Ψ', insert: '\\varPsi', title: 'Italic Psi' },
-  { label: 'Ω', insert: '\\varOmega', title: 'Italic Omega' },
+  { label: 'Α', insert: '\\mathit{Α}', title: 'Italic Alpha' },
+  { label: 'Î’', insert: '\\mathit{Î’}', title: 'Italic Beta' },
+  { label: 'Γ', insert: '\\varGamma', title: 'Italic Gamma' },
+  { label: 'Δ', insert: '\\varDelta', title: 'Italic Delta' },
+  { label: 'Ε', insert: '\\mathit{Ε}', title: 'Italic Epsilon' },
+  { label: 'Ζ', insert: '\\mathit{Ζ}', title: 'Italic Zeta' },
+  { label: 'Η', insert: '\\mathit{Η}', title: 'Italic Eta' },
+  { label: 'Θ', insert: '\\varTheta', title: 'Italic Theta' },
+  { label: 'Ι', insert: '\\mathit{Ι}', title: 'Italic Iota' },
+  { label: 'Κ', insert: '\\mathit{Κ}', title: 'Italic Kappa' },
+  { label: 'Λ', insert: '\\varLambda', title: 'Italic Lambda' },
+  { label: 'Μ', insert: '\\mathit{Μ}', title: 'Italic Mu' },
+  { label: 'Ν', insert: '\\mathit{Ν}', title: 'Italic Nu' },
+  { label: 'Ξ', insert: '\\varXi', title: 'Italic Xi' },
+  { label: 'Ο', insert: '\\mathit{Ο}', title: 'Italic Omicron' },
+  { label: 'Π', insert: '\\varPi', title: 'Italic Pi' },
+  { label: 'Ρ', insert: '\\mathit{Ρ}', title: 'Italic Rho' },
+  { label: 'Σ', insert: '\\varSigma', title: 'Italic Sigma' },
+  { label: 'Τ', insert: '\\mathit{Τ}', title: 'Italic Tau' },
+  { label: 'Î¥', insert: '\\varUpsilon', title: 'Italic Upsilon' },
+  { label: 'Φ', insert: '\\varPhi', title: 'Italic Phi' },
+  { label: 'Χ', insert: '\\mathit{Χ}', title: 'Italic Chi' },
+  { label: 'Ψ', insert: '\\varPsi', title: 'Italic Psi' },
+  { label: 'Ω', insert: '\\varOmega', title: 'Italic Omega' },
 ];
 
 const BLACKBOARD_BOLD_LETTERS = [
-  ['𝔸', 'A'], ['𝔹', 'B'], ['ℂ', 'C'], ['𝔻', 'D'], ['𝔼', 'E'], ['𝔽', 'F'],
-  ['𝔾', 'G'], ['ℍ', 'H'], ['𝕀', 'I'], ['𝕁', 'J'], ['𝕂', 'K'], ['𝕃', 'L'],
-  ['𝕄', 'M'], ['ℕ', 'N'], ['𝕆', 'O'], ['ℙ', 'P'], ['ℚ', 'Q'], ['ℝ', 'R'],
-  ['𝕊', 'S'], ['𝕋', 'T'], ['𝕌', 'U'], ['𝕍', 'V'], ['𝕎', 'W'], ['𝕏', 'X'],
-  ['𝕐', 'Y'], ['ℤ', 'Z'],
-  ['𝕒', 'a'], ['𝕓', 'b'], ['𝕔', 'c'], ['𝕕', 'd'], ['𝕖', 'e'], ['𝕗', 'f'],
-  ['𝕘', 'g'], ['𝕙', 'h'], ['𝕚', 'i'], ['𝕛', 'j'], ['𝕜', 'k'], ['𝕝', 'l'],
-  ['𝕞', 'm'], ['𝕟', 'n'], ['𝕠', 'o'], ['𝕡', 'p'], ['𝕢', 'q'], ['𝕣', 'r'],
-  ['𝕤', 's'], ['𝕥', 't'], ['𝕦', 'u'], ['𝕧', 'v'], ['𝕨', 'w'], ['𝕩', 'x'],
-  ['𝕪', 'y'], ['𝕫', 'z'],
+  ['𝔸', 'A'], ['𝔹', 'B'], ['ℂ', 'C'], ['𝔻', 'D'], ['𝔼', 'E'], ['𝔽', 'F'],
+  ['𝔾', 'G'], ['ℍ', 'H'], ['𝕀', 'I'], ['𝕁', 'J'], ['𝕂', 'K'], ['𝕃', 'L'],
+  ['𝕄', 'M'], ['ℕ', 'N'], ['𝕆', 'O'], ['ℙ', 'P'], ['ℚ', 'Q'], ['ℝ', 'R'],
+  ['𝕊', 'S'], ['𝕋', 'T'], ['𝕌', 'U'], ['𝕍', 'V'], ['𝕎', 'W'], ['𝕏', 'X'],
+  ['𝕐', 'Y'], ['ℤ', 'Z'],
+  ['𝕒', 'a'], ['𝕓', 'b'], ['𝕔', 'c'], ['𝕕', 'd'], ['𝕖', 'e'], ['𝕗', 'f'],
+  ['𝕘', 'g'], ['𝕙', 'h'], ['𝕚', 'i'], ['𝕛', 'j'], ['𝕜', 'k'], ['𝕝', 'l'],
+  ['𝕞', 'm'], ['𝕟', 'n'], ['𝕠', 'o'], ['𝕡', 'p'], ['𝕢', 'q'], ['𝕣', 'r'],
+  ['𝕤', 's'], ['𝕥', 't'], ['𝕦', 'u'], ['𝕧', 'v'], ['𝕨', 'w'], ['𝕩', 'x'],
+  ['𝕪', 'y'], ['𝕫', 'z'],
 ];
 
 const BLACKBOARD_BOLD_PICKER_ITEMS = BLACKBOARD_BOLD_LETTERS.map(([label, letter]) => ({
@@ -833,122 +833,122 @@ const BLACKBOARD_BOLD_PICKER_ITEMS = BLACKBOARD_BOLD_LETTERS.map(([label, letter
 }));
 
 const FRAKTUR_SCRIPT_PICKER_ITEMS = [
-  ['𝔄', '\\mathfrak{A}', 'Fraktur A'],
-  ['𝔅', '\\mathfrak{B}', 'Fraktur B'],
-  ['ℭ', '\\mathfrak{C}', 'Fraktur C'],
-  ['𝔇', '\\mathfrak{D}', 'Fraktur D'],
-  ['𝔈', '\\mathfrak{E}', 'Fraktur E'],
-  ['𝔉', '\\mathfrak{F}', 'Fraktur F'],
-  ['𝔊', '\\mathfrak{G}', 'Fraktur G'],
-  ['ℌ', '\\mathfrak{H}', 'Fraktur H'],
-  ['ℑ', '\\mathfrak{I}', 'Fraktur I'],
-  ['𝔍', '\\mathfrak{J}', 'Fraktur J'],
-  ['𝔎', '\\mathfrak{K}', 'Fraktur K'],
-  ['𝔏', '\\mathfrak{L}', 'Fraktur L'],
-  ['𝔐', '\\mathfrak{M}', 'Fraktur M'],
-  ['𝔑', '\\mathfrak{N}', 'Fraktur N'],
-  ['𝔒', '\\mathfrak{O}', 'Fraktur O'],
-  ['𝔓', '\\mathfrak{P}', 'Fraktur P'],
-  ['𝔔', '\\mathfrak{Q}', 'Fraktur Q'],
-  ['ℜ', '\\mathfrak{R}', 'Fraktur R'],
-  ['𝔖', '\\mathfrak{S}', 'Fraktur S'],
-  ['𝔗', '\\mathfrak{T}', 'Fraktur T'],
-  ['𝔘', '\\mathfrak{U}', 'Fraktur U'],
-  ['𝔙', '\\mathfrak{V}', 'Fraktur V'],
-  ['𝔚', '\\mathfrak{W}', 'Fraktur W'],
-  ['𝔛', '\\mathfrak{X}', 'Fraktur X'],
-  ['𝔜', '\\mathfrak{Y}', 'Fraktur Y'],
-  ['ℨ', '\\mathfrak{Z}', 'Fraktur Z'],
-  ['𝔞', '\\mathfrak{a}', 'Fraktur a'],
-  ['𝔟', '\\mathfrak{b}', 'Fraktur b'],
-  ['𝔠', '\\mathfrak{c}', 'Fraktur c'],
-  ['𝔡', '\\mathfrak{d}', 'Fraktur d'],
-  ['𝔢', '\\mathfrak{e}', 'Fraktur e'],
-  ['𝔣', '\\mathfrak{f}', 'Fraktur f'],
-  ['𝔤', '\\mathfrak{g}', 'Fraktur g'],
-  ['𝔥', '\\mathfrak{h}', 'Fraktur h'],
-  ['𝔦', '\\mathfrak{i}', 'Fraktur i'],
-  ['𝔧', '\\mathfrak{j}', 'Fraktur j'],
-  ['𝔨', '\\mathfrak{k}', 'Fraktur k'],
-  ['𝔩', '\\mathfrak{l}', 'Fraktur l'],
-  ['𝔪', '\\mathfrak{m}', 'Fraktur m'],
-  ['𝔫', '\\mathfrak{n}', 'Fraktur n'],
-  ['𝔬', '\\mathfrak{o}', 'Fraktur o'],
-  ['𝔭', '\\mathfrak{p}', 'Fraktur p'],
-  ['𝔮', '\\mathfrak{q}', 'Fraktur q'],
-  ['𝔯', '\\mathfrak{r}', 'Fraktur r'],
-  ['𝔰', '\\mathfrak{s}', 'Fraktur s'],
-  ['𝔱', '\\mathfrak{t}', 'Fraktur t'],
-  ['𝔲', '\\mathfrak{u}', 'Fraktur u'],
-  ['𝔳', '\\mathfrak{v}', 'Fraktur v'],
-  ['𝔴', '\\mathfrak{w}', 'Fraktur w'],
-  ['𝔵', '\\mathfrak{x}', 'Fraktur x'],
-  ['𝔶', '\\mathfrak{y}', 'Fraktur y'],
-  ['𝔷', '\\mathfrak{z}', 'Fraktur z'],
-  ['𝒜', '\\mathscr{A}', 'Script A'],
-  ['ℬ', '\\mathscr{B}', 'Script B'],
-  ['𝒞', '\\mathscr{C}', 'Script C'],
-  ['𝒟', '\\mathscr{D}', 'Script D'],
-  ['ℰ', '\\mathscr{E}', 'Script E'],
-  ['ℱ', '\\mathscr{F}', 'Script F'],
-  ['𝒢', '\\mathscr{G}', 'Script G'],
-  ['ℋ', '\\mathscr{H}', 'Script H'],
-  ['ℐ', '\\mathscr{I}', 'Script I'],
-  ['𝒥', '\\mathscr{J}', 'Script J'],
-  ['𝒦', '\\mathscr{K}', 'Script K'],
-  ['ℒ', '\\mathscr{L}', 'Script L'],
-  ['ℳ', '\\mathscr{M}', 'Script M'],
-  ['𝒩', '\\mathscr{N}', 'Script N'],
-  ['𝒪', '\\mathscr{O}', 'Script O'],
-  ['𝒫', '\\mathscr{P}', 'Script P'],
-  ['𝒬', '\\mathscr{Q}', 'Script Q'],
-  ['ℛ', '\\mathscr{R}', 'Script R'],
-  ['𝒮', '\\mathscr{S}', 'Script S'],
-  ['𝒯', '\\mathscr{T}', 'Script T'],
-  ['𝒰', '\\mathscr{U}', 'Script U'],
-  ['𝒱', '\\mathscr{V}', 'Script V'],
-  ['𝒲', '\\mathscr{W}', 'Script W'],
-  ['𝒳', '\\mathscr{X}', 'Script X'],
-  ['𝒴', '\\mathscr{Y}', 'Script Y'],
-  ['𝒵', '\\mathscr{Z}', 'Script Z'],
-  ['𝒶', '\\mathscr{a}', 'Script a'],
-  ['𝒷', '\\mathscr{b}', 'Script b'],
-  ['𝒸', '\\mathscr{c}', 'Script c'],
-  ['𝒹', '\\mathscr{d}', 'Script d'],
-  ['ℯ', '\\mathscr{e}', 'Script e'],
-  ['𝒻', '\\mathscr{f}', 'Script f'],
-  ['ℊ', '\\mathscr{g}', 'Script g'],
-  ['𝒽', '\\mathscr{h}', 'Script h'],
-  ['𝒾', '\\mathscr{i}', 'Script i'],
-  ['𝒿', '\\mathscr{j}', 'Script j'],
-  ['𝓀', '\\mathscr{k}', 'Script k'],
-  ['𝓁', '\\mathscr{l}', 'Script l'],
-  ['𝓂', '\\mathscr{m}', 'Script m'],
-  ['𝓃', '\\mathscr{n}', 'Script n'],
-  ['ℴ', '\\mathscr{o}', 'Script o'],
-  ['𝓅', '\\mathscr{p}', 'Script p'],
-  ['𝓆', '\\mathscr{q}', 'Script q'],
-  ['𝓇', '\\mathscr{r}', 'Script r'],
-  ['𝓈', '\\mathscr{s}', 'Script s'],
-  ['𝓉', '\\mathscr{t}', 'Script t'],
-  ['𝓊', '\\mathscr{u}', 'Script u'],
-  ['𝓋', '\\mathscr{v}', 'Script v'],
-  ['𝓌', '\\mathscr{w}', 'Script w'],
-  ['𝓍', '\\mathscr{x}', 'Script x'],
-  ['𝓎', '\\mathscr{y}', 'Script y'],
-  ['𝓏', '\\mathscr{z}', 'Script z'],
+  ['𝔄', '\\mathfrak{A}', 'Fraktur A'],
+  ['𝔅', '\\mathfrak{B}', 'Fraktur B'],
+  ['â„­', '\\mathfrak{C}', 'Fraktur C'],
+  ['𝔇', '\\mathfrak{D}', 'Fraktur D'],
+  ['𝔈', '\\mathfrak{E}', 'Fraktur E'],
+  ['𝔉', '\\mathfrak{F}', 'Fraktur F'],
+  ['𝔊', '\\mathfrak{G}', 'Fraktur G'],
+  ['ℌ', '\\mathfrak{H}', 'Fraktur H'],
+  ['â„‘', '\\mathfrak{I}', 'Fraktur I'],
+  ['𝔍', '\\mathfrak{J}', 'Fraktur J'],
+  ['𝔎', '\\mathfrak{K}', 'Fraktur K'],
+  ['𝔏', '\\mathfrak{L}', 'Fraktur L'],
+  ['𝔐', '\\mathfrak{M}', 'Fraktur M'],
+  ['𝔑', '\\mathfrak{N}', 'Fraktur N'],
+  ['𝔒', '\\mathfrak{O}', 'Fraktur O'],
+  ['𝔓', '\\mathfrak{P}', 'Fraktur P'],
+  ['𝔔', '\\mathfrak{Q}', 'Fraktur Q'],
+  ['ℜ', '\\mathfrak{R}', 'Fraktur R'],
+  ['𝔖', '\\mathfrak{S}', 'Fraktur S'],
+  ['𝔗', '\\mathfrak{T}', 'Fraktur T'],
+  ['𝔘', '\\mathfrak{U}', 'Fraktur U'],
+  ['𝔙', '\\mathfrak{V}', 'Fraktur V'],
+  ['𝔚', '\\mathfrak{W}', 'Fraktur W'],
+  ['𝔛', '\\mathfrak{X}', 'Fraktur X'],
+  ['𝔜', '\\mathfrak{Y}', 'Fraktur Y'],
+  ['ℨ', '\\mathfrak{Z}', 'Fraktur Z'],
+  ['𝔞', '\\mathfrak{a}', 'Fraktur a'],
+  ['𝔟', '\\mathfrak{b}', 'Fraktur b'],
+  ['𝔠', '\\mathfrak{c}', 'Fraktur c'],
+  ['𝔡', '\\mathfrak{d}', 'Fraktur d'],
+  ['𝔢', '\\mathfrak{e}', 'Fraktur e'],
+  ['𝔣', '\\mathfrak{f}', 'Fraktur f'],
+  ['𝔤', '\\mathfrak{g}', 'Fraktur g'],
+  ['𝔥', '\\mathfrak{h}', 'Fraktur h'],
+  ['𝔦', '\\mathfrak{i}', 'Fraktur i'],
+  ['𝔧', '\\mathfrak{j}', 'Fraktur j'],
+  ['𝔨', '\\mathfrak{k}', 'Fraktur k'],
+  ['𝔩', '\\mathfrak{l}', 'Fraktur l'],
+  ['𝔪', '\\mathfrak{m}', 'Fraktur m'],
+  ['𝔫', '\\mathfrak{n}', 'Fraktur n'],
+  ['𝔬', '\\mathfrak{o}', 'Fraktur o'],
+  ['𝔭', '\\mathfrak{p}', 'Fraktur p'],
+  ['𝔮', '\\mathfrak{q}', 'Fraktur q'],
+  ['𝔯', '\\mathfrak{r}', 'Fraktur r'],
+  ['𝔰', '\\mathfrak{s}', 'Fraktur s'],
+  ['𝔱', '\\mathfrak{t}', 'Fraktur t'],
+  ['𝔲', '\\mathfrak{u}', 'Fraktur u'],
+  ['𝔳', '\\mathfrak{v}', 'Fraktur v'],
+  ['𝔴', '\\mathfrak{w}', 'Fraktur w'],
+  ['𝔵', '\\mathfrak{x}', 'Fraktur x'],
+  ['𝔶', '\\mathfrak{y}', 'Fraktur y'],
+  ['𝔷', '\\mathfrak{z}', 'Fraktur z'],
+  ['𝒜', '\\mathscr{A}', 'Script A'],
+  ['ℬ', '\\mathscr{B}', 'Script B'],
+  ['𝒞', '\\mathscr{C}', 'Script C'],
+  ['𝒟', '\\mathscr{D}', 'Script D'],
+  ['â„°', '\\mathscr{E}', 'Script E'],
+  ['ℱ', '\\mathscr{F}', 'Script F'],
+  ['𝒢', '\\mathscr{G}', 'Script G'],
+  ['â„‹', '\\mathscr{H}', 'Script H'],
+  ['ℐ', '\\mathscr{I}', 'Script I'],
+  ['𝒥', '\\mathscr{J}', 'Script J'],
+  ['𝒦', '\\mathscr{K}', 'Script K'],
+  ['â„’', '\\mathscr{L}', 'Script L'],
+  ['ℳ', '\\mathscr{M}', 'Script M'],
+  ['𝒩', '\\mathscr{N}', 'Script N'],
+  ['𝒪', '\\mathscr{O}', 'Script O'],
+  ['𝒫', '\\mathscr{P}', 'Script P'],
+  ['𝒬', '\\mathscr{Q}', 'Script Q'],
+  ['â„›', '\\mathscr{R}', 'Script R'],
+  ['𝒮', '\\mathscr{S}', 'Script S'],
+  ['𝒯', '\\mathscr{T}', 'Script T'],
+  ['𝒰', '\\mathscr{U}', 'Script U'],
+  ['𝒱', '\\mathscr{V}', 'Script V'],
+  ['𝒲', '\\mathscr{W}', 'Script W'],
+  ['𝒳', '\\mathscr{X}', 'Script X'],
+  ['𝒴', '\\mathscr{Y}', 'Script Y'],
+  ['𝒵', '\\mathscr{Z}', 'Script Z'],
+  ['𝒶', '\\mathscr{a}', 'Script a'],
+  ['𝒷', '\\mathscr{b}', 'Script b'],
+  ['𝒸', '\\mathscr{c}', 'Script c'],
+  ['𝒹', '\\mathscr{d}', 'Script d'],
+  ['ℯ', '\\mathscr{e}', 'Script e'],
+  ['𝒻', '\\mathscr{f}', 'Script f'],
+  ['â„Š', '\\mathscr{g}', 'Script g'],
+  ['𝒽', '\\mathscr{h}', 'Script h'],
+  ['𝒾', '\\mathscr{i}', 'Script i'],
+  ['𝒿', '\\mathscr{j}', 'Script j'],
+  ['𝓀', '\\mathscr{k}', 'Script k'],
+  ['𝓁', '\\mathscr{l}', 'Script l'],
+  ['𝓂', '\\mathscr{m}', 'Script m'],
+  ['𝓃', '\\mathscr{n}', 'Script n'],
+  ['â„´', '\\mathscr{o}', 'Script o'],
+  ['𝓅', '\\mathscr{p}', 'Script p'],
+  ['𝓆', '\\mathscr{q}', 'Script q'],
+  ['𝓇', '\\mathscr{r}', 'Script r'],
+  ['𝓈', '\\mathscr{s}', 'Script s'],
+  ['𝓉', '\\mathscr{t}', 'Script t'],
+  ['𝓊', '\\mathscr{u}', 'Script u'],
+  ['𝓋', '\\mathscr{v}', 'Script v'],
+  ['𝓌', '\\mathscr{w}', 'Script w'],
+  ['𝓍', '\\mathscr{x}', 'Script x'],
+  ['𝓎', '\\mathscr{y}', 'Script y'],
+  ['𝓏', '\\mathscr{z}', 'Script z'],
 ].map(([label, insert, title]) => ({ label, insert, title }));
 
 const HEBREW_SYMBOL_PICKER_ITEMS = [
-  { label: 'ℵ', insert: '\\aleph', title: 'Aleph' },
-  { label: 'ℒ', insert: '\\mathscr{L}', title: 'Script L' },
-  { label: '℘', insert: '\\wp', title: 'Weierstrass p' },
-  { label: '𝒵', insert: '\\mathscr{Z}', title: 'Script Z' },
-  { label: 'ℱ', insert: '\\mathscr{F}', title: 'Script F' },
+  { label: 'ℵ', insert: '\\aleph', title: 'Aleph' },
+  { label: 'â„’', insert: '\\mathscr{L}', title: 'Script L' },
+  { label: '℘', insert: '\\wp', title: 'Weierstrass p' },
+  { label: '𝒵', insert: '\\mathscr{Z}', title: 'Script Z' },
+  { label: 'ℱ', insert: '\\mathscr{F}', title: 'Script F' },
 ];
 
-const ARABIC_INDIC_DIGITS = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
-const EASTERN_ARABIC_INDIC_DIGITS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+const ARABIC_INDIC_DIGITS = ['Ù ', 'Ù¡', 'Ù¢', 'Ù£', 'Ù¤', 'Ù¥', 'Ù¦', 'Ù§', 'Ù¨', 'Ù©'];
+const EASTERN_ARABIC_INDIC_DIGITS = ['Û°', 'Û±', 'Û²', 'Û³', 'Û´', 'Ûµ', 'Û¶', 'Û·', 'Û¸', 'Û¹'];
 
 function convertDigitsToNumeralSystem(value, numeralMode) {
   if (!value || numeralMode === 'western') return value;
@@ -1193,59 +1193,59 @@ const ORDERED_MATH_GROUPS = [
     label: <RootFractionTabIcon />,
     items: [
       // GROUP 1 - Fractions & Roots (cols: 2)
-      { label: '□/□', insert: '\\frac{#0}{#?}', title: 'Fraction', cls: 'green-template', icon: 'stacked-fraction' },
-      { label: '□/□', insert: '{#0}/{#?}', title: 'Bevelled Fraction', cls: 'green-template' },
-      { label: '√□', insert: '\\sqrt{#0}', title: 'Square Root', cls: 'green-template', icon: 'square-root-template' },
-      { label: '□√□', insert: '\\sqrt[#?]{#0}', title: 'Root', cls: 'green-template', icon: 'nth-root-template' },
+      { label: 'â–¡/â–¡', insert: '\\frac{#0}{#?}', title: 'Fraction', cls: 'green-template', icon: 'stacked-fraction' },
+      { label: 'â–¡/â–¡', insert: '{#0}/{#?}', title: 'Bevelled Fraction', cls: 'green-template' },
+      { label: '√□', insert: '\\sqrt{#0}', title: 'Square Root', cls: 'green-template', icon: 'square-root-template' },
+      { label: '□√□', insert: '\\sqrt[#?]{#0}', title: 'Root', cls: 'green-template', icon: 'nth-root-template' },
       { type: 'sep', cols: 2 },
       // GROUP 2a - Brackets (cols: 2)
-      { label: '□^□', insert: '#0^{#?}', title: 'Superscript', cls: 'green-template', icon: 'superscript-template' },
-      { label: '□_□', insert: '#0_{#?}', title: 'Subscript', cls: 'green-template', icon: 'subscript-template' },
+      { label: 'â–¡^â–¡', insert: '#0^{#?}', title: 'Superscript', cls: 'green-template', icon: 'superscript-template' },
+      { label: 'â–¡_â–¡', insert: '#0_{#?}', title: 'Subscript', cls: 'green-template', icon: 'subscript-template' },
       
       { type: 'sep', cols: 1 },
       // GROUP 2b - Super/Subscript (cols: 1)
-      { label: '(□)', insert: '\\left(#0\\right)', title: 'Parentheses', cls: 'green-template' },
-      { label: '|□|', insert: '\\left|#0\\right|', title: 'Absolute Value', cls: 'green-template' },
-      { label: '[□]', insert: '\\left[#0\\right]', title: 'Square Brackets', cls: 'green-template' },
-      { label: '{□}', insert: '\\left\\{#0\\right\\}', title: 'Curly Braces', cls: 'green-template' },
+      { label: '(â–¡)', insert: '\\left(#0\\right)', title: 'Parentheses', cls: 'green-template' },
+      { label: '|â–¡|', insert: '\\left|#0\\right|', title: 'Absolute Value', cls: 'green-template' },
+      { label: '[â–¡]', insert: '\\left[#0\\right]', title: 'Square Brackets', cls: 'green-template' },
+      { label: '{â–¡}', insert: '\\left\\{#0\\right\\}', title: 'Curly Braces', cls: 'green-template' },
       { type: 'sep', cols: 3 },
       // GROUP 3 - Operators (cols: 3)
       { label: '+', insert: '+' },
-      { label: '−', insert: '-' },
-      { label: '×', insert: '\\times' },
-      { label: '÷', insert: '\\div' },
+      { label: '−', insert: '-' },
+      { label: '×', insert: '\\times' },
+      { label: '÷', insert: '\\div' },
       { label: '/', insert: '/' },
-      { label: '±', insert: '\\pm' },
+      { label: '±', insert: '\\pm' },
       { type: 'sep', cols: 3 },
       // GROUP 4 - Relations (cols: 4)
-      { label: '≥', insert: '\\geq' },
-      { label: '≤', insert: '\\leq' },
-      { label: '∩', insert: '\\cap' },
-      { label: '∪', insert: '\\cup' },
+      { label: '≥', insert: '\\geq' },
+      { label: '≤', insert: '\\leq' },
+      { label: '∩', insert: '\\cap' },
+      { label: '∪', insert: '\\cup' },
       { label: '=', insert: '=' },
-        { label: '≠', insert: '\\neq' },
-      { label: '⊂', insert: '\\subset' },
-      { label: '∈', insert: '\\in' },
+        { label: '≠', insert: '\\neq' },
+      { label: '⊂', insert: '\\subset' },
+      { label: '∈', insert: '\\in' },
       { type: 'sep', cols: 4 },
       // GROUP 5 - Symbols (cols: 2)
-      { label: '∅', insert: '\\emptyset' },
-      { label: '∞', insert: '\\infty' },
-      { label: 'π', insert: '\\pi' },
-      { label: 'ℕ', insert: '\\mathbb{N}' },
+      { label: '∅', insert: '\\emptyset' },
+      { label: '∞', insert: '\\infty' },
+      { label: 'Ï€', insert: '\\pi' },
+      { label: 'â„•', insert: '\\mathbb{N}' },
       { type: 'sep', cols: 2 },
       // GROUP 6 - Clipboard (cols: 3)
-      { label: '✂', action: 'CUT', title: 'Cut Formula', cls: 'soft-tool' },
-      { label: '⧉', action: 'COPY', title: 'Copy Formula', cls: 'soft-tool' },
-      { label: '⎘', action: 'PASTE', title: 'Paste Formula', cls: 'soft-tool' },
-      { label: '↶', action: 'UNDO', title: 'Undo', cls: 'soft-tool' },
-      { label: '↷', action: 'REDO', title: 'Redo', cls: 'soft-tool' },
-      { label: '⌫', action: 'CLEAR', title: 'Clear Formula', cls: 'soft-tool' },
+      { label: '✂', action: 'CUT', title: 'Cut Formula', cls: 'soft-tool' },
+      { label: '⧉', action: 'COPY', title: 'Copy Formula', cls: 'soft-tool' },
+      { label: '⎘', action: 'PASTE', title: 'Paste Formula', cls: 'soft-tool' },
+      { label: '↶', action: 'UNDO', title: 'Undo', cls: 'soft-tool' },
+      { label: '↷', action: 'REDO', title: 'Redo', cls: 'soft-tool' },
+      { label: '⌫', action: 'CLEAR', title: 'Clear Formula', cls: 'soft-tool' },
       { type: 'sep', cols: 3 },
       // GROUP 7 - Formatting (cols: 3)
       { label: 'B', action: 'BOLD', cls: 'template format-tool', title: 'Bold' },
       { label: '1b', action: 'ITALIC', cls: 'format-tool', title: 'Italic' },
       { label: 'BI', action: 'BOLD_ITALIC', cls: 'format-tool', title: 'Bold Italic' },
-      { label: 'Ω', action: 'SPECIAL_CHARS', cls: 'format-tool omega-tool', title: 'Greek Letters' },
+      { label: 'Ω', action: 'SPECIAL_CHARS', cls: 'format-tool omega-tool', title: 'Greek Letters' },
       { label: 'T', action: 'TEXT', cls: 'format-tool text-tool', title: 'Regular Text' },
       { label: 'A', action: 'TEXT_COLOR', cls: 'format-tool color-tool', title: 'Text Color' },
       { type: 'sep', cols: 1 },
@@ -1259,7 +1259,7 @@ const ORDERED_MATH_GROUPS = [
     id: 'relations',
     ...MATH_GROUPS[1],
     items: RELATIONS_TAB_ITEMS,
-    label: <TabIcon top="∈∞" compact />,
+    label: <TabIcon top="∈∞" compact />,
   },
   {
     id: 'arrows',
@@ -1268,61 +1268,61 @@ const ORDERED_MATH_GROUPS = [
   },
   {
     id: 'greek',
-    label: <TabIcon top="α Ω" compact />,
+    label: <TabIcon top="α Ω" compact />,
     items: [
-      { category: 'Lowercase Greek Letters', label: 'α', insert: '\\alpha' },
-      { category: 'Lowercase Greek Letters', label: 'β', insert: '\\beta' },
-      { category: 'Lowercase Greek Letters', label: 'γ', insert: '\\gamma' },
-      { category: 'Lowercase Greek Letters', label: 'δ', insert: '\\delta' },
-      { category: 'Lowercase Greek Letters', label: 'ε', insert: '\\epsilon' },
-      { category: 'Lowercase Greek Letters', label: 'ζ', insert: '\\zeta' },
-      { category: 'Lowercase Greek Letters', label: 'η', insert: '\\eta' },
-      { category: 'Lowercase Greek Letters', label: 'θ', insert: '\\theta' },
-      { category: 'Lowercase Greek Letters', label: 'ϑ', insert: '\\vartheta' },
-      { category: 'Lowercase Greek Letters', label: 'ι', insert: '\\iota' },
-      { category: 'Lowercase Greek Letters', label: 'κ', insert: '\\kappa' },
-      { category: 'Lowercase Greek Letters', label: 'λ', insert: '\\lambda' },
-      { category: 'Lowercase Greek Letters', label: 'μ', insert: '\\mu' },
-      { category: 'Lowercase Greek Letters', label: 'ν', insert: '\\nu' },
-      { category: 'Lowercase Greek Letters', label: 'ξ', insert: '\\xi' },
-      { category: 'Lowercase Greek Letters', label: 'ο', insert: 'ο' },
-      { category: 'Lowercase Greek Letters', label: 'π', insert: '\\pi' },
-      { category: 'Lowercase Greek Letters', label: 'ϖ', insert: '\\varpi' },
-      { category: 'Lowercase Greek Letters', label: 'ρ', insert: '\\rho' },
-      { category: 'Lowercase Greek Letters', label: 'ς', insert: '\\varsigma' },
-      { category: 'Lowercase Greek Letters', label: 'σ', insert: '\\sigma' },
-      { category: 'Lowercase Greek Letters', label: 'τ', insert: '\\tau' },
-      { category: 'Lowercase Greek Letters', label: 'υ', insert: '\\upsilon' },
-      { category: 'Lowercase Greek Letters', label: 'φ', insert: '\\phi' },
-      { category: 'Lowercase Greek Letters', label: 'ϕ', insert: '\\varphi' },
-      { category: 'Lowercase Greek Letters', label: 'χ', insert: '\\chi' },
-      { category: 'Lowercase Greek Letters', label: 'ψ', insert: '\\psi' },
-      { category: 'Lowercase Greek Letters', label: 'ω', insert: '\\omega' },
+      { category: 'Lowercase Greek Letters', label: 'α', insert: '\\alpha' },
+      { category: 'Lowercase Greek Letters', label: 'β', insert: '\\beta' },
+      { category: 'Lowercase Greek Letters', label: 'γ', insert: '\\gamma' },
+      { category: 'Lowercase Greek Letters', label: 'δ', insert: '\\delta' },
+      { category: 'Lowercase Greek Letters', label: 'ε', insert: '\\epsilon' },
+      { category: 'Lowercase Greek Letters', label: 'ζ', insert: '\\zeta' },
+      { category: 'Lowercase Greek Letters', label: 'η', insert: '\\eta' },
+      { category: 'Lowercase Greek Letters', label: 'θ', insert: '\\theta' },
+      { category: 'Lowercase Greek Letters', label: 'Ï‘', insert: '\\vartheta' },
+      { category: 'Lowercase Greek Letters', label: 'ι', insert: '\\iota' },
+      { category: 'Lowercase Greek Letters', label: 'κ', insert: '\\kappa' },
+      { category: 'Lowercase Greek Letters', label: 'λ', insert: '\\lambda' },
+      { category: 'Lowercase Greek Letters', label: 'μ', insert: '\\mu' },
+      { category: 'Lowercase Greek Letters', label: 'ν', insert: '\\nu' },
+      { category: 'Lowercase Greek Letters', label: 'ξ', insert: '\\xi' },
+      { category: 'Lowercase Greek Letters', label: 'ο', insert: 'ο' },
+      { category: 'Lowercase Greek Letters', label: 'Ï€', insert: '\\pi' },
+      { category: 'Lowercase Greek Letters', label: 'Ï–', insert: '\\varpi' },
+      { category: 'Lowercase Greek Letters', label: 'ρ', insert: '\\rho' },
+      { category: 'Lowercase Greek Letters', label: 'Ï‚', insert: '\\varsigma' },
+      { category: 'Lowercase Greek Letters', label: 'σ', insert: '\\sigma' },
+      { category: 'Lowercase Greek Letters', label: 'Ï„', insert: '\\tau' },
+      { category: 'Lowercase Greek Letters', label: 'Ï…', insert: '\\upsilon' },
+      { category: 'Lowercase Greek Letters', label: 'φ', insert: '\\phi' },
+      { category: 'Lowercase Greek Letters', label: 'Ï•', insert: '\\varphi' },
+      { category: 'Lowercase Greek Letters', label: 'χ', insert: '\\chi' },
+      { category: 'Lowercase Greek Letters', label: 'ψ', insert: '\\psi' },
+      { category: 'Lowercase Greek Letters', label: 'ω', insert: '\\omega' },
       { category: 'Lowercase Greek Letters', label: '|', action: 'GREEK_ITALIC_PICKER', title: 'Italic Uppercase Greek', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool greek-italic-picker-tool' },
 
-      { category: 'Uppercase Greek Letters', label: 'ℕ', insert: '\\mathbb{N}' },
-      { category: 'Uppercase Greek Letters', label: 'ℤ', insert: '\\mathbb{Z}' },
-      { category: 'Uppercase Greek Letters', label: 'ℚ', insert: '\\mathbb{Q}' },
-      { category: 'Uppercase Greek Letters', label: 'ℂ', insert: '\\mathbb{C}' },
-      { category: 'Uppercase Greek Letters', label: 'ℝ', insert: '\\mathbb{R}' },
-      { category: 'Uppercase Greek Letters', label: 'ℙ', insert: '\\mathbb{P}' },
+      { category: 'Uppercase Greek Letters', label: 'â„•', insert: '\\mathbb{N}' },
+      { category: 'Uppercase Greek Letters', label: 'ℤ', insert: '\\mathbb{Z}' },
+      { category: 'Uppercase Greek Letters', label: 'â„š', insert: '\\mathbb{Q}' },
+      { category: 'Uppercase Greek Letters', label: 'â„‚', insert: '\\mathbb{C}' },
+      { category: 'Uppercase Greek Letters', label: 'ℝ', insert: '\\mathbb{R}' },
+      { category: 'Uppercase Greek Letters', label: 'â„™', insert: '\\mathbb{P}' },
       { category: 'Uppercase Greek Letters', label: '|', action: 'BLACKBOARD_BOLD_PICKER', title: 'More Blackboard Bold Letters', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool blackboard-bold-picker-tool' },
 
-      { category: 'Fraktur / Gothic Symbols', label: '𝔄', insert: '\\mathfrak{A}' },
-      { category: 'Fraktur / Gothic Symbols', label: '𝒜', insert: '\\mathscr{A}' },
-      { category: 'Fraktur / Gothic Symbols', label: '𝔅', insert: '\\mathfrak{B}' },
-      { category: 'Fraktur / Gothic Symbols', label: 'ℬ', insert: '\\mathscr{B}' },
-      { category: 'Fraktur / Gothic Symbols', label: 'ℭ', insert: '\\mathfrak{C}' },
-      { category: 'Fraktur / Gothic Symbols', label: '𝒞', insert: '\\mathscr{C}' },
+      { category: 'Fraktur / Gothic Symbols', label: '𝔄', insert: '\\mathfrak{A}' },
+      { category: 'Fraktur / Gothic Symbols', label: '𝒜', insert: '\\mathscr{A}' },
+      { category: 'Fraktur / Gothic Symbols', label: '𝔅', insert: '\\mathfrak{B}' },
+      { category: 'Fraktur / Gothic Symbols', label: 'ℬ', insert: '\\mathscr{B}' },
+      { category: 'Fraktur / Gothic Symbols', label: 'â„­', insert: '\\mathfrak{C}' },
+      { category: 'Fraktur / Gothic Symbols', label: '𝒞', insert: '\\mathscr{C}' },
       { category: 'Fraktur / Gothic Symbols', label: '|', action: 'FRAKTUR_SCRIPT_PICKER', title: 'More Fraktur and Script Letters', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool fraktur-script-picker-tool' },
 
-      { category: 'Hebrew Mathematical Symbols', label: 'ℑ', insert: '\\Im' },
-      { category: 'Hebrew Mathematical Symbols', label: 'ℜ', insert: '\\Re' },
-      { category: 'Hebrew Mathematical Symbols', label: '𝓁', insert: '\\ell' },
+      { category: 'Hebrew Mathematical Symbols', label: 'â„‘', insert: '\\Im' },
+      { category: 'Hebrew Mathematical Symbols', label: 'ℜ', insert: '\\Re' },
+      { category: 'Hebrew Mathematical Symbols', label: '𝓁', insert: '\\ell' },
       { category: 'Hebrew Mathematical Symbols', label: '|', action: 'HEBREW_SYMBOL_PICKER', title: 'More Hebrew Mathematical Symbols', icon: 'vertical-line-picker-template-image', cls: 'arrow-picker-tool hebrew-symbol-picker-tool' },
 
-      { category: 'Arabic-Indic Numeral Systems', label: '٤٦', action: 'ARABIC_INDIC_NUMERALS', title: 'Arabic-Indic Numerals', icon: 'arabic-indic-numerals-template-image', cls: 'numeral-mode-tool' },
-      { category: 'Arabic-Indic Numeral Systems', label: '۴۶', action: 'EASTERN_ARABIC_INDIC_NUMERALS', title: 'Eastern Arabic-Indic Numerals (Persian/Urdu)', icon: 'eastern-arabic-indic-numerals-template-image', cls: 'numeral-mode-tool' },
+      { category: 'Arabic-Indic Numeral Systems', label: '٤٦', action: 'ARABIC_INDIC_NUMERALS', title: 'Arabic-Indic Numerals', icon: 'arabic-indic-numerals-template-image', cls: 'numeral-mode-tool' },
+      { category: 'Arabic-Indic Numeral Systems', label: 'Û´Û¶', action: 'EASTERN_ARABIC_INDIC_NUMERALS', title: 'Eastern Arabic-Indic Numerals (Persian/Urdu)', icon: 'eastern-arabic-indic-numerals-template-image', cls: 'numeral-mode-tool' },
 
       { category: 'Blackboard Bold / Number Sets', label: 'H', insert: 'H' },
       { category: 'Blackboard Bold / Number Sets', label: 'C', insert: 'C' },
@@ -1347,51 +1347,51 @@ const ORDERED_MATH_GROUPS = [
     id: 'brackets',
     label: <BracketsTabIcon />,
     items: [
-      { label: '(□)', insert: '\\left(#0\\right)' },
-      { label: '[□]', insert: '\\left[#0\\right]' },
-      { label: '|□|', insert: '\\left|#0\\right|' },
-      { label: '‖□‖', insert: '\\left\\| #0 \\right\\|' },
-      { label: '⟨□⟩', insert: '\\left\\langle #0 \\right\\rangle' },
-      { label: '{□}', insert: '\\left\\{#0\\right\\}' },
-      { label: '⌊□⌋', insert: '\\left\\lfloor #0 \\right\\rfloor' },
-      { label: '⌈□⌉', insert: '\\left\\lceil #0 \\right\\rceil' },
-      { label: '⟨□|□⟩', insert: '\\left\\langle #0 \\middle| #? \\right\\rangle' },
+      { label: '(â–¡)', insert: '\\left(#0\\right)' },
+      { label: '[â–¡]', insert: '\\left[#0\\right]' },
+      { label: '|â–¡|', insert: '\\left|#0\\right|' },
+      { label: '‖□‖', insert: '\\left\\| #0 \\right\\|' },
+      { label: '⟨□⟩', insert: '\\left\\langle #0 \\right\\rangle' },
+      { label: '{â–¡}', insert: '\\left\\{#0\\right\\}' },
+      { label: '⌊□⌋', insert: '\\left\\lfloor #0 \\right\\rfloor' },
+      { label: '⌈□⌉', insert: '\\left\\lceil #0 \\right\\rceil' },
+      { label: '⟨□|□⟩', insert: '\\left\\langle #0 \\middle| #? \\right\\rangle' },
       { type: 'sep', cols: 2 },
       { label: 'overbrace', insert: '\\overbrace{#0}', cls: 'template', directInsert: true, title: 'Overbrace', icon: 'overbrace-arc-template-image' },
       { label: 'underbrace', insert: '\\underbrace{#0}', cls: 'template', directInsert: true, title: 'Underbrace', icon: 'underbrace-arc-template-image' },
       { label: 'overparen', insert: '\\overparen{#0}', cls: 'template', directInsert: true, title: 'Overparen', icon: 'overparen-template-image' },
       { label: 'underparen', insert: '\\underparen{#0}', cls: 'template', directInsert: true, title: 'Underparen', icon: 'underparen-template-image' },
       { type: 'sep', cols: 2 },
-      { label: '⃗\n▯', insert: '\\vec{#0}', cls: 'template', directInsert: true, title: 'Vector Accent', icon: 'vec-accent-template-image' },
-      { label: '→\n▯', insert: '\\overrightarrow{#?}', cls: 'template', directInsert: true, title: 'Right Arrow Accent', icon: 'overrightarrow-accent-template-image' },
-      { label: '↔\n▯', insert: '\\overleftrightarrow{#?}', cls: 'template', directInsert: true, title: 'Left-Right Arrow Accent', icon: 'overleftrightarrow-accent-template-image' },
-      { label: '¯\n▯', insert: '\\overline{#?}', cls: 'template', directInsert: true, title: 'Overline Accent', icon: 'overline-accent-template-image' },
-      { label: '^\n▯', insert: '\\hat{#?}', cls: 'template', directInsert: true, title: 'Hat Accent', icon: 'hat-accent-template-image' },
-      { label: '~\n▯', insert: '\\tilde{#?}', cls: 'template', directInsert: true, title: 'Tilde Accent', icon: 'tilde-accent-template-image' },
-      { label: '¨\n▯', insert: '\\ddot{#?}', cls: 'template', directInsert: true, title: 'Double Dot Accent', icon: 'ddot-accent-template-image' },
-      { label: '˙\n▯', insert: '\\dot{#?}', cls: 'template', directInsert: true, title: 'Dot Accent', icon: 'dot-accent-template-image' },
+      { label: '⃗\n▯', insert: '\\vec{#0}', cls: 'template', directInsert: true, title: 'Vector Accent', icon: 'vec-accent-template-image' },
+      { label: '→\n▯', insert: '\\overrightarrow{#?}', cls: 'template', directInsert: true, title: 'Right Arrow Accent', icon: 'overrightarrow-accent-template-image' },
+      { label: '↔\n▯', insert: '\\overleftrightarrow{#?}', cls: 'template', directInsert: true, title: 'Left-Right Arrow Accent', icon: 'overleftrightarrow-accent-template-image' },
+      { label: '¯\n▯', insert: '\\overline{#?}', cls: 'template', directInsert: true, title: 'Overline Accent', icon: 'overline-accent-template-image' },
+      { label: '^\nâ–¯', insert: '\\hat{#?}', cls: 'template', directInsert: true, title: 'Hat Accent', icon: 'hat-accent-template-image' },
+      { label: '~\nâ–¯', insert: '\\tilde{#?}', cls: 'template', directInsert: true, title: 'Tilde Accent', icon: 'tilde-accent-template-image' },
+      { label: '¨\n▯', insert: '\\ddot{#?}', cls: 'template', directInsert: true, title: 'Double Dot Accent', icon: 'ddot-accent-template-image' },
+      { label: 'Ë™\nâ–¯', insert: '\\dot{#?}', cls: 'template', directInsert: true, title: 'Dot Accent', icon: 'dot-accent-template-image' },
       { type: 'sep', cols: 2 },
-      { label: '¯\n▯', insert: '\\overline{#?}', cls: 'template', directInsert: true, title: 'Overline', icon: 'overline-frame-template-image' },
-      { label: '_\n▯', insert: '\\underline{#?}', cls: 'template', directInsert: true, title: 'Underline', icon: 'underline-frame-template-image' },
-      { label: '|\n▯', insert: '\\left|#?\\right.', cls: 'template', directInsert: true, title: 'Left Bar', icon: 'left-bar-template-image' },
-      { label: '▯\n|', insert: '\\left.#?\\right|', cls: 'template', directInsert: true, title: 'Right Bar', icon: 'right-bar-template-image' },
-      { label: '□\n▯', insert: '\\boxed{#?}', cls: 'template', directInsert: true, title: 'Boxed', icon: 'boxed-square-template-image' },
-      { label: '(\n▯\n)', insert: '\\enclose{circle}{#?}', cls: 'template', directInsert: true, title: 'Rounded Enclosure', icon: 'paren-frame-template-image' },
-      { label: '¯\n▯|', insert: '\\overline{\\left.#?\\right|}', cls: 'template', directInsert: true, title: 'Overline with Right Bar', icon: 'overline-right-bar-template-image' },
-      { label: '▢\n▯', insert: '\\enclose{roundedbox}{#?}', cls: 'template', directInsert: true, title: 'Rounded Boxed', icon: 'boxed-rounded-template-image' },
+      { label: '¯\n▯', insert: '\\overline{#?}', cls: 'template', directInsert: true, title: 'Overline', icon: 'overline-frame-template-image' },
+      { label: '_\nâ–¯', insert: '\\underline{#?}', cls: 'template', directInsert: true, title: 'Underline', icon: 'underline-frame-template-image' },
+      { label: '|\nâ–¯', insert: '\\left|#?\\right.', cls: 'template', directInsert: true, title: 'Left Bar', icon: 'left-bar-template-image' },
+      { label: 'â–¯\n|', insert: '\\left.#?\\right|', cls: 'template', directInsert: true, title: 'Right Bar', icon: 'right-bar-template-image' },
+      { label: 'â–¡\nâ–¯', insert: '\\boxed{#?}', cls: 'template', directInsert: true, title: 'Boxed', icon: 'boxed-square-template-image' },
+      { label: '(\nâ–¯\n)', insert: '\\enclose{circle}{#?}', cls: 'template', directInsert: true, title: 'Rounded Enclosure', icon: 'paren-frame-template-image' },
+      { label: '¯\n▯|', insert: '\\overline{\\left.#?\\right|}', cls: 'template', directInsert: true, title: 'Overline with Right Bar', icon: 'overline-right-bar-template-image' },
+      { label: 'â–¢\nâ–¯', insert: '\\enclose{roundedbox}{#?}', cls: 'template', directInsert: true, title: 'Rounded Boxed', icon: 'boxed-rounded-template-image' },
       { type: 'sep', cols: 2 },
-      { label: '╱\n▯', insert: '\\cancel{#?}', cls: 'template', directInsert: true, title: 'Cancel', icon: 'cancel-diagonal-template-image' },
-      { label: '╲\n▯', insert: '\\bcancel{#?}', cls: 'template', directInsert: true, title: 'Backward Cancel', icon: 'bcancel-template-image' },
-      { label: '─\n▯', insert: '\\enclose{horizontalstrike}{#?}', cls: 'template', directInsert: true, title: 'Strikeout Text', icon: 'sout-template-image' },
-      { label: '╳\n▯', insert: '\\xcancel{#?}', cls: 'template', directInsert: true, title: 'Cross Cancel', icon: 'xcancel-template-image' },
-      { label: '│\n▯', insert: '\\enclose{verticalstrike}{#?}', cls: 'template', directInsert: true, title: 'Vertical Strike', icon: 'vertical-strike-template-image' },
-      { label: ')\n¯', insert: '\\overline{\\left)#?\\right.}', cls: 'template', directInsert: true, title: 'Overline with Curved Left Boundary', icon: 'overline-left-curve-template-image' },
-      { label: '┼\n▯', insert: '\\enclose{verticalstrike horizontalstrike}{#?}', cls: 'template', directInsert: true, title: 'Vertical and Horizontal Strike', icon: 'crosshair-strike-template-image' },
+      { label: '╱\n▯', insert: '\\cancel{#?}', cls: 'template', directInsert: true, title: 'Cancel', icon: 'cancel-diagonal-template-image' },
+      { label: '╲\n▯', insert: '\\bcancel{#?}', cls: 'template', directInsert: true, title: 'Backward Cancel', icon: 'bcancel-template-image' },
+      { label: '─\n▯', insert: '\\enclose{horizontalstrike}{#?}', cls: 'template', directInsert: true, title: 'Strikeout Text', icon: 'sout-template-image' },
+      { label: '╳\n▯', insert: '\\xcancel{#?}', cls: 'template', directInsert: true, title: 'Cross Cancel', icon: 'xcancel-template-image' },
+      { label: '│\n▯', insert: '\\enclose{verticalstrike}{#?}', cls: 'template', directInsert: true, title: 'Vertical Strike', icon: 'vertical-strike-template-image' },
+      { label: ')\n¯', insert: '\\overline{\\left)#?\\right.}', cls: 'template', directInsert: true, title: 'Overline with Curved Left Boundary', icon: 'overline-left-curve-template-image' },
+      { label: '┼\n▯', insert: '\\enclose{verticalstrike horizontalstrike}{#?}', cls: 'template', directInsert: true, title: 'Vertical and Horizontal Strike', icon: 'crosshair-strike-template-image' },
     ],
   },
   {
     id: 'sets',
-    label: <TabIcon top="Σ ∪" compact />,
+    label: <TabIcon top="Σ ∪" compact />,
     items: [
       { label: 'sum-limits-both', insert: '\\sum\\limits_{#?}^{#?}', cls: 'template', directInsert: true, title: 'Summation With Upper and Lower Limits', icon: 'sum-limits-both-template-image' },
       { label: 'sum-limits-lower', insert: '\\sum\\limits_{#?}', cls: 'template', directInsert: true, title: 'Summation With Lower Limit', icon: 'sum-limits-lower-template-image' },
@@ -1401,17 +1401,17 @@ const ORDERED_MATH_GROUPS = [
       { label: 'prod-limits-lower', insert: '\\prod\\limits_{#?}', cls: 'template', directInsert: true, title: 'Product With Lower Limit', icon: 'prod-limits-lower-template-image' },
       { label: 'prod-right-both', insert: '\\prod\\nolimits^{#?}_{#?}', cls: 'template', directInsert: true, title: 'Product With Right Superscript and Subscript', icon: 'prod-right-both-template-image' },
       { label: 'prod-right-lower', insert: '\\prod\\nolimits_{#?}', cls: 'template', directInsert: true, title: 'Product With Right Subscript', icon: 'prod-right-lower-template-image' },
-      { label: '□\n▯\n□', insert: '\\displaystyle{\\underset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.34em;line-height:1.15}{#?}}{\\overset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-bottom:0.34em;line-height:1.15}{#?}}{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}}}}', cls: 'template', directInsert: true, title: 'Operator With Upper and Lower Limits', icon: 'operator-limits-both-template-image' },
-      { label: '▯\n□', insert: '\\displaystyle{\\underset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.34em;line-height:1.15}{#?}}{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}}}', cls: 'template', directInsert: true, title: 'Operator With Lower Limit', icon: 'operator-lower-limit-template-image' },
-      { label: '▯^□_□', insert: '\\displaystyle{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}^{\\htmlStyle{font-size:1.1em;display:inline-block;padding-bottom:0.26em;line-height:1.15}{#?}}_{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.26em;line-height:1.15}{#?}}}', cls: 'template', directInsert: true, title: 'Operator With Right Superscript and Subscript', icon: 'operator-right-sup-sub-template-image' },
-      { label: '▯_□', insert: '\\displaystyle{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}_{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.26em;line-height:1.15}{#?}}}', cls: 'template', directInsert: true, title: 'Operator With Right Subscript', icon: 'operator-right-sub-template-image' },
-      { label: '⋂', insert: '\\bigcap' },
-      { label: '⋃', insert: '\\bigcup' },
-      { label: '∏', insert: '\\prod' },
-      { label: '∐', insert: '\\coprod' },
-      { label: '⨅', insert: '\\sqcap' },
-      { label: '⨆', insert: '\\sqcup' },
-      { label: '∑', insert: '\\sum' },
+      { label: 'â–¡\nâ–¯\nâ–¡', insert: '\\displaystyle{\\underset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.34em;line-height:1.15}{#?}}{\\overset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-bottom:0.34em;line-height:1.15}{#?}}{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}}}}', cls: 'template', directInsert: true, title: 'Operator With Upper and Lower Limits', icon: 'operator-limits-both-template-image' },
+      { label: 'â–¯\nâ–¡', insert: '\\displaystyle{\\underset{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.34em;line-height:1.15}{#?}}{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}}}', cls: 'template', directInsert: true, title: 'Operator With Lower Limit', icon: 'operator-lower-limit-template-image' },
+      { label: 'â–¯^â–¡_â–¡', insert: '\\displaystyle{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}^{\\htmlStyle{font-size:1.1em;display:inline-block;padding-bottom:0.26em;line-height:1.15}{#?}}_{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.26em;line-height:1.15}{#?}}}', cls: 'template', directInsert: true, title: 'Operator With Right Superscript and Subscript', icon: 'operator-right-sup-sub-template-image' },
+      { label: 'â–¯_â–¡', insert: '\\displaystyle{\\htmlStyle{font-size:1.45em;line-height:1.1}{#0}_{\\htmlStyle{font-size:1.1em;display:inline-block;padding-top:0.26em;line-height:1.15}{#?}}}', cls: 'template', directInsert: true, title: 'Operator With Right Subscript', icon: 'operator-right-sub-template-image' },
+      { label: 'â‹‚', insert: '\\bigcap' },
+      { label: '⋃', insert: '\\bigcup' },
+      { label: '∏', insert: '\\prod' },
+      { label: '∐', insert: '\\coprod' },
+      { label: '⨅', insert: '\\sqcap' },
+      { label: '⨆', insert: '\\sqcup' },
+      { label: '∑', insert: '\\sum' },
     ],
   },
   {
@@ -1421,41 +1421,41 @@ const ORDERED_MATH_GROUPS = [
     items: [
       { label: 'integral-both', insert: '\\int_{#?}^{#?}', cls: 'template', directInsert: true, title: 'Definite Integral', icon: 'integral-both-template-image' },
       { label: 'integral-lower', insert: '\\int_{#?}', cls: 'template', directInsert: true, title: 'Integral With Subscript', icon: 'integral-lower-template-image' },
-      { label: '∫□d□', insert: '\\int_{#?}^{#?} #? \\, d#?', directInsert: true, title: 'Integral', icon: 'integral-box-differential-template-image' },
+      { label: '∫□d□', insert: '\\int_{#?}^{#?} #? \\, d#?', directInsert: true, title: 'Integral', icon: 'integral-box-differential-template-image' },
       { label: '', insert: '\\int_{#?} #? \\, d#?', cls: 'template', directInsert: true, title: 'Integral', icon: 'integral-template-image' },
       { type: 'sep', cols: 4 },
       {label: 'd', insert: 'd', cls: 'template', directInsert: true, title: 'Differential'},
-      {label: '∂', insert: '∂', cls: 'template', directInsert: true, title: 'Partial Differential'},
+      {label: '∂', insert: '∂', cls: 'template', directInsert: true, title: 'Partial Differential'},
       { label: 'first-derivative', insert: '\\frac{d#?}{d#?}', cls: 'template', directInsert: true, title: 'First Derivative', icon: 'first-derivative-template-image' },
       { label: 'partial-derivative', insert: '\\frac{\\partial#?}{\\partial#?}', cls: 'template', directInsert: true, title: 'Partial Derivative', icon: 'partial-derivative-template-image' },
       { label: 'limit-infinity', insert: '\\lim_{#?\\to\\infty}', cls: 'template', directInsert: true, title: 'Limit to Infinity', icon: 'limit-infinity-template-image' },
       { label: 'limit-generic', insert: '\\lim_{#?}', cls: 'template', directInsert: true, title: 'Limit', icon: 'limit-generic-template-image' },
       { type: 'sep', cols: 2 },
-      { label: '∇×\n▯', insert: '\\nabla \\times #?', cls: 'template', directInsert: true, title: 'Curl' },
-      { label: '∇·\n▯', insert: '\\nabla \\cdot #?', cls: 'template', directInsert: true, title: 'Divergence' },
-      { label: '∇\n▯', insert: '\\nabla #?', cls: 'template', directInsert: true, title: 'Gradient' },
-      { label: 'Δ\n▯', insert: '\\Delta #?', cls: 'template', directInsert: true, title: 'Delta Expression' },
+      { label: '∇×\n▯', insert: '\\nabla \\times #?', cls: 'template', directInsert: true, title: 'Curl' },
+      { label: '∇·\n▯', insert: '\\nabla \\cdot #?', cls: 'template', directInsert: true, title: 'Divergence' },
+      { label: '∇\n▯', insert: '\\nabla #?', cls: 'template', directInsert: true, title: 'Gradient' },
+      { label: 'Δ\n▯', insert: '\\Delta #?', cls: 'template', directInsert: true, title: 'Delta Expression' },
       { type: 'sep', cols: 3 },
-      { label: '∫', insert: '\\int' },
-      { label: '∮', insert: '\\oint' },
-      { label: '∬', insert: '\\iint' },
-      { label: '∯', insert: '\\oiint' },
-      { label: '∭', insert: '\\iiint' },
-      { label: '∰', insert: '\\oiiint' },
+      { label: '∫', insert: '\\int' },
+      { label: '∮', insert: '\\oint' },
+      { label: '∬', insert: '\\iint' },
+      { label: '∯', insert: '\\oiint' },
+      { label: '∭', insert: '\\iiint' },
+      { label: '∰', insert: '\\oiiint' },
       { type: 'sep', cols: 2 },
-      { label: 'log(□)', insert: '\\log\\left(#0\\right)' },
-      { label: 'log₍□₎(□)', insert: '\\log_{#?}\\left(#?\\right)', cls: 'template', directInsert: true, title: 'Logarithm With Base', icon: 'log-base-template-image' },
+      { label: 'log(â–¡)', insert: '\\log\\left(#0\\right)' },
+      { label: 'log₍□₎(□)', insert: '\\log_{#?}\\left(#?\\right)', cls: 'template', directInsert: true, title: 'Logarithm With Base', icon: 'log-base-template-image' },
       { type: 'sep', cols: 4 },
-      { label: 'sin(□)', insert: '\\sin\\left(#0\\right)' },
-      { label: 'cos(□)', insert: '\\cos\\left(#0\\right)' },
-      { label: 'tan(□)', insert: '\\tan\\left(#0\\right)' },
-      { label: 'ln(□)', insert: '\\ln\\left(#0\\right)' },
-      { label: 'sin⁻¹(□)', insert: '\\sin^{-1}\\left(#0\\right)' },
-      { label: 'csc(□)', insert: '\\csc\\left(#0\\right)' },
-      { label: 'cos⁻¹(□)', insert: '\\cos^{-1}\\left(#0\\right)' },
-      { label: 'sec(□)', insert: '\\sec\\left(#0\\right)' },
-      { label: 'tan⁻¹(□)', insert: '\\tan^{-1}\\left(#0\\right)' },
-      { label: 'cot(□)', insert: '\\cot\\left(#0\\right)' },
+      { label: 'sin(â–¡)', insert: '\\sin\\left(#0\\right)' },
+      { label: 'cos(â–¡)', insert: '\\cos\\left(#0\\right)' },
+      { label: 'tan(â–¡)', insert: '\\tan\\left(#0\\right)' },
+      { label: 'ln(â–¡)', insert: '\\ln\\left(#0\\right)' },
+      { label: 'sin⁻¹(□)', insert: '\\sin^{-1}\\left(#0\\right)' },
+      { label: 'csc(â–¡)', insert: '\\csc\\left(#0\\right)' },
+      { label: 'cos⁻¹(□)', insert: '\\cos^{-1}\\left(#0\\right)' },
+      { label: 'sec(â–¡)', insert: '\\sec\\left(#0\\right)' },
+      { label: 'tan⁻¹(□)', insert: '\\tan^{-1}\\left(#0\\right)' },
+      { label: 'cot(â–¡)', insert: '\\cot\\left(#0\\right)' },
     ],
   },
   {
@@ -1481,7 +1481,7 @@ const CHEM_GROUPS = [
     items: ['Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar', 'K', 'Ca'].map(el => ({ label: el, insert: el, cls: 'chem-element' }))
   },
   {
-    label: 'Fe-Zn →⇌', isChem: true, items: [
+    label: 'Fe-Zn →⇌', isChem: true, items: [
       ...['Fe', 'Cu', 'Zn', 'Mn'].map(el => ({ label: el, insert: el, cls: 'chem-element' })),
       { type: 'sep', cols: 2 },
       ...['Cr', 'Ni', 'Co', 'Ag'].map(el => ({ label: el, insert: el, cls: 'chem-element' })),
@@ -1492,25 +1492,25 @@ const CHEM_GROUPS = [
       { type: 'sep', cols: 2 },
       { label: 'Xe', insert: 'Xe', cls: 'chem-element' },
       { type: 'sep', cols: 5 },
-      { label: '→', insert: '->', cls: 'chem-arrow' }, { label: '⇌', insert: '<=>', cls: 'chem-arrow' },
-      { label: '←', insert: '<-', cls: 'chem-arrow' }, { label: '⇄', insert: '<->', cls: 'chem-arrow' }, { label: '↑', insert: '^', cls: 'chem-arrow' },
+      { label: '→', insert: '->', cls: 'chem-arrow' }, { label: '⇌', insert: '<=>', cls: 'chem-arrow' },
+      { label: '←', insert: '<-', cls: 'chem-arrow' }, { label: '⇄', insert: '<->', cls: 'chem-arrow' }, { label: '↑', insert: '^', cls: 'chem-arrow' },
       { type: 'sep', cols: 4 },
-      { label: '↓', insert: 'v', cls: 'chem-arrow' }, { label: '+', insert: ' + ', cls: 'chem-arrow' },
-      { label: '→(Δ)', insert: '->[\\Delta]', cls: 'chem-arrow' }, { label: '→(aq)', insert: '->[aq]', cls: 'chem-arrow' },
+      { label: '↓', insert: 'v', cls: 'chem-arrow' }, { label: '+', insert: ' + ', cls: 'chem-arrow' },
+      { label: '→(Δ)', insert: '->[\\Delta]', cls: 'chem-arrow' }, { label: '→(aq)', insert: '->[aq]', cls: 'chem-arrow' },
     ]
   },
   {
-    label: '(s)(l) ⁺/⁻', isChem: true, items: [
+    label: '(s)(l) ⁺/⁻', isChem: true, items: [
       { label: '(s)', insert: '(s)', cls: 'chem-state' }, { label: '(l)', insert: '(l)', cls: 'chem-state' },
       { label: '(g)', insert: '(g)', cls: 'chem-state' }, { label: '(aq)', insert: '(aq)', cls: 'chem-state' },
       { type: 'sep', cols: 2 },
       { label: '(conc)', insert: '(conc)', cls: 'chem-state' },
       { label: '(dil)', insert: '(dil)', cls: 'chem-state' }, { label: '(ppt)', insert: '(ppt)', cls: 'chem-state' },
       { type: 'sep', cols: 2 },
-      { label: '✚', insert: '^{+}', cls: 'chem-element' }, { label: '━', insert: '^{-}', cls: 'chem-element' },
-      { label: '²⁺', insert: '^{2+}', cls: 'chem-element' }, { label: '²⁻', insert: '^{2-}', cls: 'chem-element' },
+      { label: '✚', insert: '^{+}', cls: 'chem-element' }, { label: '━', insert: '^{-}', cls: 'chem-element' },
+      { label: '²⁺', insert: '^{2+}', cls: 'chem-element' }, { label: '²⁻', insert: '^{2-}', cls: 'chem-element' },
       { type: 'sep', cols: 2 },
-      { label: '³⁺', insert: '^{3+}', cls: 'chem-element' }, { label: '³⁻', insert: '^{3-}', cls: 'chem-element' },
+      { label: '³⁺', insert: '^{3+}', cls: 'chem-element' }, { label: '³⁻', insert: '^{3-}', cls: 'chem-element' },
       { label: '2', insert: '2', cls: 'chem-element' }, { label: '3', insert: '3', cls: 'chem-element' },
       { type: 'sep', cols: 2 },
       { label: '4', insert: '4', cls: 'chem-element' }, { label: '5', insert: '5', cls: 'chem-element' },
@@ -1521,17 +1521,17 @@ const CHEM_GROUPS = [
     ]
   },
   {
-    label: 'H₂O', isChem: true, items: [
-      { label: 'H₂O', insert: 'H2O', cls: 'chem-element' }, { label: 'CO₂', insert: 'CO2', cls: 'chem-element' },
-      { label: 'NH₃', insert: 'NH3', cls: 'chem-element' }, { label: 'H₂SO₄', insert: 'H2SO4', cls: 'chem-element' },
+    label: 'Hâ‚‚O', isChem: true, items: [
+      { label: 'Hâ‚‚O', insert: 'H2O', cls: 'chem-element' }, { label: 'COâ‚‚', insert: 'CO2', cls: 'chem-element' },
+      { label: 'NH₃', insert: 'NH3', cls: 'chem-element' }, { label: 'H₂SO₄', insert: 'H2SO4', cls: 'chem-element' },
       { label: 'HCl', insert: 'HCl', cls: 'chem-element' }, { label: 'NaOH', insert: 'NaOH', cls: 'chem-element' },
-      { label: 'NaCl', insert: 'NaCl', cls: 'chem-element' }, { label: 'CaCO₃', insert: 'CaCO3', cls: 'chem-element' },
-      { label: 'HNO₃', insert: 'HNO3', cls: 'chem-element' }, { label: 'H₃PO₄', insert: 'H3PO4', cls: 'chem-element' },
-      { label: 'CH₃COOH', insert: 'CH3COOH', cls: 'chem-element' }, { label: 'C₆H₁₂O₆', insert: 'C6H12O6', cls: 'chem-element' },
-      { label: 'CH₄', insert: 'CH4', cls: 'chem-element' }, { label: 'C₂H₅OH', insert: 'C2H5OH', cls: 'chem-element' },
-      { label: 'CO₃²⁻', insert: 'CO3^{2-}', cls: 'chem-element' }, { label: 'SO₄²⁻', insert: 'SO4^{2-}', cls: 'chem-element' },
-      { label: 'NO₃⁻', insert: 'NO3^-', cls: 'chem-element' }, { label: 'PO₄³⁻', insert: 'PO4^{3-}', cls: 'chem-element' },
-      { label: 'NH₄⁺', insert: 'NH4^+', cls: 'chem-element' }, { label: 'OH⁻', insert: 'OH^-', cls: 'chem-element' },
+      { label: 'NaCl', insert: 'NaCl', cls: 'chem-element' }, { label: 'CaCO₃', insert: 'CaCO3', cls: 'chem-element' },
+      { label: 'HNO₃', insert: 'HNO3', cls: 'chem-element' }, { label: 'H₃PO₄', insert: 'H3PO4', cls: 'chem-element' },
+      { label: 'CH₃COOH', insert: 'CH3COOH', cls: 'chem-element' }, { label: 'C₆H₁₂O₆', insert: 'C6H12O6', cls: 'chem-element' },
+      { label: 'CHâ‚„', insert: 'CH4', cls: 'chem-element' }, { label: 'Câ‚‚Hâ‚…OH', insert: 'C2H5OH', cls: 'chem-element' },
+      { label: 'CO₃²⁻', insert: 'CO3^{2-}', cls: 'chem-element' }, { label: 'SO₄²⁻', insert: 'SO4^{2-}', cls: 'chem-element' },
+      { label: 'NO₃⁻', insert: 'NO3^-', cls: 'chem-element' }, { label: 'PO₄³⁻', insert: 'PO4^{3-}', cls: 'chem-element' },
+      { label: 'NH₄⁺', insert: 'NH4^+', cls: 'chem-element' }, { label: 'OH⁻', insert: 'OH^-', cls: 'chem-element' },
     ]
   },
 ];
@@ -1718,10 +1718,10 @@ function ArrowTemplateIcon({ arrow, above = '', below = '' }) {
   );
 }
 
-/* ══════════════════════════════════════════════════════════
+/* ══════════════════════════════════════════════════════════
    CKEditor inline widget plugin for MathLive rendering
    Uses createRawElement so CKEditor won't touch the DOM inside
-══════════════════════════════════════════════════════════ */
+══════════════════════════════════════════════════════════ */
 class MathInlinePlugin extends Plugin {
   static get pluginName() {
     return 'MathInlinePlugin';
@@ -1734,7 +1734,7 @@ class MathInlinePlugin extends Plugin {
   init() {
     const editor = this.editor;
 
-    // 1) Register model element — isObject: true treats it as one atomic block
+    // 1) Register model element — isObject: true treats it as one atomic block
     editor.model.schema.register('mathInline', {
       isInline: true,
       isObject: true,
@@ -1749,7 +1749,7 @@ class MathInlinePlugin extends Plugin {
       }
     });
 
-    // 2) Editing downcast — what the user SEES in the editor
+    // 2) Editing downcast — what the user SEES in the editor
     //    createRawElement lets us manage the DOM ourselves (MathLive web component)
     editor.conversion.for('editingDowncast').elementToElement({
       model: 'mathInline',
@@ -1798,7 +1798,7 @@ class MathInlinePlugin extends Plugin {
             mf.style.direction = dir;
             mf.style.textAlign = dir === 'rtl' ? 'right' : 'left';
             mf.style.unicodeBidi = dir === 'rtl' ? 'plaintext' : 'normal';
-            mf.style.color = '#ffffff';
+            mf.style.color = '#000000';
 
             const setLatex = () => {
               if (mf.setValue) mf.setValue(latex, { silenceNotifications: true });
@@ -1846,7 +1846,7 @@ class MathInlinePlugin extends Plugin {
       );
     }, { priority: 'high' });
 
-    // 3) Data downcast — what getData() returns (HTML output)
+    // 3) Data downcast — what getData() returns (HTML output)
     editor.conversion.for('dataDowncast').elementToElement({
       model: 'mathInline',
       view: (modelElement, { writer }) => {
@@ -1864,7 +1864,7 @@ class MathInlinePlugin extends Plugin {
       },
     });
 
-    // 4) Upcast — recognize HTML from getData() and convert back to model
+    // 4) Upcast — recognize HTML from getData() and convert back to model
     editor.conversion.for('upcast').elementToElement({
       view: {
         name: 'span',
@@ -1883,10 +1883,10 @@ class MathInlinePlugin extends Plugin {
   }
 }
 
-/* ══════════════════════════════════════════════════════════
-   Toolbar buttons plugin — Math + Chem
-══════════════════════════════════════════════════════════ */
-/* SVG icons for toolbar — matches the MathType / ChemType icons */
+/* ══════════════════════════════════════════════════════════
+   Toolbar buttons plugin — Math + Chem
+══════════════════════════════════════════════════════════ */
+/* SVG icons for toolbar — matches the MathType / ChemType icons */
 const MATH_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M4 12h3l3 6l5-12h5" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 
 const CHEM_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><rect x="3" y="3" width="18" height="18" rx="3" fill="none" stroke="currentColor" stroke-width="2"/><text x="12" y="16" text-anchor="middle" font-size="12" font-weight="bold" fill="currentColor" font-family="system-ui, sans-serif">C</text><text x="6" y="8" font-size="4" font-weight="bold" fill="currentColor" font-family="system-ui, sans-serif">6</text></svg>';
@@ -2308,51 +2308,51 @@ const TOOLBAR_ICON_IMAGES = {
   'sum-limits-both-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 90" fill="none">
       <rect x="24" y="2" width="12" height="20" stroke="#6aa56a" stroke-width="2"/>
-      <text x="30" y="58" font-size="64" text-anchor="middle" fill="#000">∑</text>
+      <text x="30" y="58" font-size="64" text-anchor="middle" fill="#000">∑</text>
       <rect x="24" y="72" width="12" height="20" stroke="#6aa56a" stroke-width="2"/>
     </svg>
   `),
   'sum-right-both-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 72" fill="none">
-      <text x="20" y="52" font-size="54" fill="#000">∑</text>
+      <text x="20" y="52" font-size="54" fill="#000">∑</text>
       <rect x="50" y="6" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
       <rect x="50" y="46" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
     </svg>
   `),
   'sum-limits-lower-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 90" fill="none">
-      <text x="30" y="58" font-size="64" text-anchor="middle" fill="#000">∑</text>
+      <text x="30" y="58" font-size="64" text-anchor="middle" fill="#000">∑</text>
       <rect x="24" y="72" width="12" height="20" stroke="#6aa56a" stroke-width="2"/>
     </svg>
   `),
   'sum-right-lower-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 90" fill="none">
-      <text x="26" y="58" font-size="64" text-anchor="middle" fill="#000">∑</text>
+      <text x="26" y="58" font-size="64" text-anchor="middle" fill="#000">∑</text>
       <rect x="50" y="58" width="12" height="20" stroke="#6aa56a" stroke-width="2"/>
     </svg>
   `),
   'prod-limits-both-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 96" fill="none">
       <rect x="27" y="2" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
-      <text x="12" y="62" font-size="58" font-family="Times New Roman" fill="#000">∏</text>
+      <text x="12" y="62" font-size="58" font-family="Times New Roman" fill="#000">∏</text>
       <rect x="27" y="74" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
     </svg>
   `),
   'prod-limits-lower-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 96" fill="none">
-      <text x="12" y="62" font-size="58" font-family="Times New Roman" fill="#000">∏</text>
+      <text x="12" y="62" font-size="58" font-family="Times New Roman" fill="#000">∏</text>
       <rect x="27" y="74" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
     </svg>
   `),
   'prod-right-lower-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" fill="none">
-      <text x="12" y="54" font-size="58" font-family="Times New Roman" fill="#000">∏</text>
+      <text x="12" y="54" font-size="58" font-family="Times New Roman" fill="#000">∏</text>
       <rect x="52" y="44" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
     </svg>
   `),
   'prod-right-both-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" fill="none">
-      <text x="10" y="54" font-size="58" fill="#000">∏</text>
+      <text x="10" y="54" font-size="58" fill="#000">∏</text>
       <rect x="52" y="6" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
       <rect x="52" y="44" width="10" height="18" stroke="#6aa56a" stroke-width="2"/>
     </svg>
@@ -2386,7 +2386,7 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'definite-integral-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-      <text x="0.95" y="14.05" font-size="14.2" font-family="Cambria Math, STIX Two Math, Times New Roman, serif" font-weight="700" fill="#37474f">∫</text>
+      <text x="0.95" y="14.05" font-size="14.2" font-family="Cambria Math, STIX Two Math, Times New Roman, serif" font-weight="700" fill="#37474f">∫</text>
       <rect x="5.1" y="1.2" width="2.55" height="2.55" rx="0.42" fill="none" stroke="#4a5559" stroke-width="1.15"/>
       <rect x="2.1" y="13.15" width="2.55" height="2.55" rx="0.42" fill="none" stroke="#4a5559" stroke-width="1.15"/>
       <rect x="8.45" y="6.15" width="3.8" height="3.8" rx="0.58" fill="none" stroke="#4a5559" stroke-width="1.2"/>
@@ -2394,7 +2394,7 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'integral-with-differential-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-      <text x="0.95" y="13.85" font-size="14.6" font-family="Cambria Math, STIX Two Math, Times New Roman, serif" font-weight="700" fill="#37474f">∫</text>
+      <text x="0.95" y="13.85" font-size="14.6" font-family="Cambria Math, STIX Two Math, Times New Roman, serif" font-weight="700" fill="#37474f">∫</text>
       <rect x="6.55" y="6.15" width="3.05" height="3.05" rx="0.48" fill="none" stroke="#4a5559" stroke-width="1.15"/>
       <text x="10.55" y="8.95" font-size="4.95" font-family="Arial, Helvetica, sans-serif" font-weight="700" fill="#37474f">d</text>
       <rect x="13.15" y="6.15" width="3.05" height="3.05" rx="0.48" fill="none" stroke="#4a5559" stroke-width="1.15"/>
@@ -2411,7 +2411,7 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'integral-with-differential': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-      <text x="0.95" y="13.85" font-size="14.6" font-family="Cambria Math, STIX Two Math, Times New Roman, serif" font-weight="700" fill="#37474f">∫</text>
+      <text x="0.95" y="13.85" font-size="14.6" font-family="Cambria Math, STIX Two Math, Times New Roman, serif" font-weight="700" fill="#37474f">∫</text>
       <rect x="6.55" y="6.15" width="3.05" height="3.05" rx="0.48" fill="none" stroke="#4a5559" stroke-width="1.15"/>
       <text x="10.55" y="8.95" font-size="4.95" font-family="Arial, Helvetica, sans-serif" font-weight="700" fill="#37474f">d</text>
       <rect x="13.15" y="6.15" width="3.05" height="3.05" rx="0.48" fill="none" stroke="#4a5559" stroke-width="1.15"/>
@@ -2419,7 +2419,7 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'integral-with-limits-differential': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 60">
-      <text x="10" y="42" font-size="42" font-family="Times New Roman, serif" fill="#000">∫</text>
+      <text x="10" y="42" font-size="42" font-family="Times New Roman, serif" fill="#000">∫</text>
       <rect x="34" y="2" width="8" height="18" fill="none" stroke="#2e8b57" stroke-width="2"/>
       <rect x="18" y="40" width="8" height="18" fill="none" stroke="#2e8b57" stroke-width="2"/>
       <rect x="48" y="22" width="12" height="22" fill="none" stroke="#2e8b57" stroke-width="2"/>
@@ -2429,14 +2429,14 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'integral-both-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 70">
-      <text x="8" y="48" font-size="46" font-family="Times New Roman">∫</text>
+      <text x="8" y="48" font-size="46" font-family="Times New Roman">∫</text>
       <rect x="34" y="4" width="8" height="18" fill="none" stroke="#2e8b57" stroke-width="2"/>
       <rect x="18" y="46" width="8" height="18" fill="none" stroke="#2e8b57" stroke-width="2"/>
     </svg>
   `),
   'integral-lower-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 60">
-      <text x="8" y="42" font-size="44" font-family="Times New Roman">∫</text>
+      <text x="8" y="42" font-size="44" font-family="Times New Roman">∫</text>
       <rect x="20" y="40" width="8" height="18" fill="none" stroke="#2e8b57" stroke-width="2"/>
     </svg>
   `),
@@ -2451,10 +2451,10 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'partial-derivative-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 50">
-      <text x="4" y="18" font-size="18">∂</text>
+      <text x="4" y="18" font-size="18">∂</text>
       <rect x="20" y="4" width="8" height="16" fill="none" stroke="#2e8b57" stroke-width="2"/>
       <line x1="2" y1="25" x2="34" y2="25" stroke="#000" stroke-width="2"/>
-      <text x="4" y="44" font-size="18">∂</text>
+      <text x="4" y="44" font-size="18">∂</text>
       <rect x="20" y="30" width="8" height="16" fill="none" stroke="#2e8b57" stroke-width="2"/>
     </svg>
   `),
@@ -2462,7 +2462,7 @@ const TOOLBAR_ICON_IMAGES = {
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 40">
       <text x="18" y="15" font-size="18">lim</text>
       <rect x="4" y="22" width="8" height="14" fill="none" stroke="#2e8b57" stroke-width="2"/>
-      <text x="16" y="33" font-size="16">→∞</text>
+      <text x="16" y="33" font-size="16">→∞</text>
     </svg>
   `),
   'limit-generic-template-image': makeToolbarIconImage(`
@@ -2545,7 +2545,7 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'double-integral-area-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-      <text x="0.7" y="13.55" font-size="11.1" font-family="Cambria Math, STIX Two Math, Times New Roman, serif" font-weight="700" fill="#263238">∫∫</text>
+      <text x="0.7" y="13.55" font-size="11.1" font-family="Cambria Math, STIX Two Math, Times New Roman, serif" font-weight="700" fill="#263238">∫∫</text>
       <rect x="10.85" y="2.05" width="3.45" height="3.45" rx="0.55" fill="none" stroke="#465257" stroke-width="1.2"/>
       <rect x="8.05" y="12.05" width="3.1" height="3.1" rx="0.5" fill="none" stroke="#465257" stroke-width="1.2"/>
       <text x="10.95" y="9.75" font-size="5.45" font-family="Arial, Helvetica, sans-serif" font-weight="700" fill="#263238">dA</text>
@@ -2573,7 +2573,7 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'rtl-input-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-      <text x="10.9" y="8.6" text-anchor="middle" fill="#2f3b43" font-size="6.9" font-weight="700" font-family="Tahoma, Arial, sans-serif">س</text>
+      <text x="10.9" y="8.6" text-anchor="middle" fill="#2f3b43" font-size="6.9" font-weight="700" font-family="Tahoma, Arial, sans-serif">س</text>
       <rect x="11.85" y="3.1" width="3.2" height="3.2" rx="0.45" fill="none" stroke="#2c8a43" stroke-width="1.1"/>
       <path d="M13.9 13.1H4.55M6.2 11.45L4.55 13.1L6.2 14.75" fill="none" stroke="#2c8a43" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
@@ -2631,97 +2631,97 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'less-than-not-equal-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor" font-family="Cambria Math, STIX Two Math, Times New Roman">≨</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor" font-family="Cambria Math, STIX Two Math, Times New Roman">≨</text>
     </svg>
   `),
   'much-greater-than-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">≫</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">≫</text>
     </svg>
   `),
   'succeeds-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">≻</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">≻</text>
     </svg>
   `),
   'greater-than-not-equal-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor" font-family="Cambria Math, STIX Two Math, Times New Roman">≩</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor" font-family="Cambria Math, STIX Two Math, Times New Roman">≩</text>
     </svg>
   `),
   'proportional-to-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">∝</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">∝</text>
     </svg>
   `),
   'normal-subgroup-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊲</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊲</text>
     </svg>
   `),
   'much-less-than-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">≪</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">≪</text>
     </svg>
   `),
   'precedes-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">≺</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">≺</text>
     </svg>
   `),
   'contains-normal-subgroup-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">▷</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">â–·</text>
     </svg>
   `),
   'not-element-of-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">∉</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">∉</text>
     </svg>
   `),
   'not-contains-member-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">∌</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">∌</text>
     </svg>
   `),
   'subset-equal-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊆</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊆</text>
     </svg>
   `),
   'superset-equal-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊇</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊇</text>
     </svg>
   `),
   'square-subset-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊏</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊏</text>
     </svg>
   `),
   'square-superset-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊐</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊐</text>
     </svg>
   `),
   'square-subset-equal-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊑</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊑</text>
     </svg>
   `),
   'square-superset-equal-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊒</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊒</text>
     </svg>
   `),
   'square-cap-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊓</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊓</text>
     </svg>
   `),
   'square-cup-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊔</text>
+      <text x="12" y="17" text-anchor="middle" font-size="20" fill="currentColor">⊔</text>
     </svg>
   `),
   'therefore-template-image': makeToolbarIconImage(`
@@ -2755,7 +2755,7 @@ const TOOLBAR_ICON_IMAGES = {
         fill="currentColor"
         font-family="Cambria Math, STIX Two Math, Times New Roman"
       >
-        ∡
+        ∡
       </text>
     </svg>
   `),
@@ -2769,7 +2769,7 @@ const TOOLBAR_ICON_IMAGES = {
         fill="currentColor"
         font-family="Cambria Math, STIX Two Math, Times New Roman"
       >
-        ∢
+        ∢
       </text>
     </svg>
   `),
@@ -2933,7 +2933,7 @@ const TOOLBAR_ICON_IMAGES = {
   'product-array-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 88" fill="none">
       <rect x="34" y="6" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
-      <text x="14" y="46" font-size="18" text-anchor="middle" fill="#000">×</text>
+      <text x="14" y="46" font-size="18" text-anchor="middle" fill="#000">×</text>
       <rect x="34" y="38" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
       <line x1="4" y1="66" x2="46" y2="66" stroke="#000" stroke-width="1.5"/>
       <rect x="34" y="74" width="10" height="16" stroke="#008000" stroke-width="1.5"/>
@@ -3130,12 +3130,12 @@ const TOOLBAR_ICON_IMAGES = {
   `),
   'arabic-indic-numerals-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-      <text x="4" y="36" font-family="Amiri, Noto Naskh Arabic, serif" font-size="38" fill="#000">٤٦</text>
+      <text x="4" y="36" font-family="Amiri, Noto Naskh Arabic, serif" font-size="38" fill="#000">٤٦</text>
     </svg>
   `),
   'eastern-arabic-indic-numerals-template-image': makeToolbarIconImage(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-      <text x="4" y="36" font-size="36" font-family="sans-serif" fill="#000">۴۶</text>
+      <text x="4" y="36" font-size="36" font-family="sans-serif" fill="#000">Û´Û¶</text>
     </svg>
   `),
 };
@@ -3144,7 +3144,7 @@ function renderToolbarItemLabel(item, context = {}) {
   if (item.cls?.includes('arrow-picker-tool')) {
     return (
       <span className="cme-toolbar-chevron-indicator" aria-hidden="true">
-        ⏵
+        ⏵
       </span>
     );
   }
@@ -3627,9 +3627,9 @@ function renderToolbarItemLabel(item, context = {}) {
     const labelLength = String(item.label || '').length;
 
     if (isChemMode) {
-      const isChemScriptLabel = /^(?:[⁰¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿⁱ₀₁₂₃₄₅₆₇₈₉₊₋₌₍₎ₐₑₒₓᵢⱼₙ])+$/u.test(String(item.label || ''));
+      const isChemScriptLabel = /^(?:[⁰¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿⁱ₀₁₂₃₄₅₆₇₈₉₊₋₌₍₎ₐₑₒₓᵢⱼₙ])+$/u.test(String(item.label || ''));
       classNames.push('cme-toolbar-glyph--chem');
-      const isChemChargeLabel = /^(?:[+-]|[²³][⁺⁻])$/u.test(String(item.label || ''));
+      const isChemChargeLabel = /^(?:[+-]|[²³][⁺⁻])$/u.test(String(item.label || ''));
       if (itemClassName.includes('chem-element')) {
         classNames.push('cme-toolbar-glyph--chem-element');
       }
@@ -3688,152 +3688,152 @@ function renderToolbarItemLabel(item, context = {}) {
 
 function ArrowGlyphIcon({ type, size = 24 }) {
   const icons = {
-    '↗': (
+    '↗': (
       <>
         <path d="M5 19L19 5" />
         <path d="M12 5H19V12" />
       </>
     ),
-    '↘': (
+    '↘': (
       <>
         <path d="M5 5L19 19" />
         <path d="M12 19H19V12" />
       </>
     ),
-    '↖': (
+    '↖': (
       <>
         <path d="M19 19L5 5" />
         <path d="M12 5H5V12" />
       </>
     ),
-    '↙': (
+    '↙': (
       <>
         <path d="M19 5L5 19" />
         <path d="M12 19H5V12" />
       </>
     ),
-    '←': (
+    '←': (
       <>
         <path d="M20 12H6" />
         <path d="M11 7L6 12L11 17" />
       </>
     ),
-    '→': (
+    '→': (
       <>
         <path d="M4 12H18" />
         <path d="M13 7L18 12L13 17" />
       </>
     ),
-    '↑': (
+    '↑': (
       <>
         <path d="M12 20V6" />
         <path d="M7 11L12 6L17 11" />
       </>
     ),
-    '↓': (
+    '↓': (
       <>
         <path d="M12 4V18" />
         <path d="M7 13L12 18L17 13" />
       </>
     ),
-    '↔': (
+    '↔': (
       <>
         <path d="M4 12H20" />
         <path d="M9 7L4 12L9 17" />
         <path d="M15 7L20 12L15 17" />
       </>
     ),
-    '↕': (
+    '↕': (
       <>
         <path d="M12 4V20" />
         <path d="M7 9L12 4L17 9" />
         <path d="M7 15L12 20L17 15" />
       </>
     ),
-    '⇐': (
+    '⇐': (
       <>
         <path d="M20 10H6M20 14H6" />
         <path d="M11 6L6 12L11 18" />
       </>
     ),
-    '⇒': (
+    '⇒': (
       <>
         <path d="M4 10H18M4 14H18" />
         <path d="M13 6L18 12L13 18" />
       </>
     ),
-    '⇑': (
+    '⇑': (
       <>
         <path d="M10 20V6M14 20V6" />
         <path d="M6 11L12 5L18 11" />
       </>
     ),
-    '⇓': (
+    '⇓': (
       <>
         <path d="M10 4V18M14 4V18" />
         <path d="M6 13L12 19L18 13" />
       </>
     ),
-    '⇔': (
+    '⇔': (
       <>
         <path d="M4 10H20M4 14H20" />
         <path d="M9 6L4 12L9 18" />
         <path d="M15 6L20 12L15 18" />
       </>
     ),
-    '⇕': (
+    '⇕': (
       <>
         <path d="M10 4V20M14 4V20" />
         <path d="M6 9L12 3L18 9" />
         <path d="M6 15L12 21L18 15" />
       </>
     ),
-    '⟵': (
+    '⟵': (
       <>
         <path d="M21 12H5.5" />
         <path d="M10.8 7L5.5 12L10.8 17" />
       </>
     ),
-    '⟶': (
+    '⟶': (
       <>
         <path d="M3 12H18.5" />
         <path d="M13.2 7L18.5 12L13.2 17" />
       </>
     ),
-    '⟷': (
+    '⟷': (
       <>
         <path d="M3 12H21" />
         <path d="M8 7L3 12L8 17" />
         <path d="M16 7L21 12L16 17" />
       </>
     ),
-    '⟸': (
+    '⟸': (
       <>
         <path d="M21 10H5.5M21 14H5.5" />
         <path d="M10.8 6L5.5 12L10.8 18" />
       </>
     ),
-    '⟹': (
+    '⟹': (
       <>
         <path d="M3 10H18.5M3 14H18.5" />
         <path d="M13.2 6L18.5 12L13.2 18" />
       </>
     ),
-    '⟺': (
+    '⟺': (
       <>
         <path d="M3 10H21M3 14H21" />
         <path d="M8 6L3 12L8 18" />
         <path d="M16 6L21 12L16 18" />
       </>
     ),
-    '↤': (
+    '↤': (
       <>
         <path d="M20 12H8" />
         <path d="M8 7L3 12L8 17" />
         <path d="M20 6V18" />
       </>
     ),
-    '↦': (
+    '↦': (
       <>
         <path d="M4 12H16" />
         <path d="M16 7L21 12L16 17" />
@@ -4327,9 +4327,9 @@ function makeToolbarPlugin(onOpenPopup) {
   };
 }
 
-/* ══════════════════════════════════════════════════════════
-   MathChemPopup — same as CustomMathEditor popup
-══════════════════════════════════════════════════════════ */
+/* ══════════════════════════════════════════════════════════
+   MathChemPopup — same as CustomMathEditor popup
+══════════════════════════════════════════════════════════ */
 function MatrixHoverGrid({ matrixType, x, y, onSelect, onMouseEnter, onMouseLeave }) {
   const [hoverGrid, setHoverGrid] = useState({ r: 2, c: 2 });
   const labelMap = {
@@ -4369,7 +4369,7 @@ function MatrixHoverGrid({ matrixType, x, y, onSelect, onMouseEnter, onMouseLeav
     >
       <div className="cme-matrix-hover-title-wrap">
         <div className="cme-matrix-hover-title">{labelMap[matrixType] || 'Matrix'}</div>
-        <div className="cme-matrix-hover-subtitle">{hoverGrid.r} × {hoverGrid.c}</div>
+        <div className="cme-matrix-hover-subtitle">{hoverGrid.r} × {hoverGrid.c}</div>
       </div>
       <div className="cme-matrix-hover-grid">
         {Array.from({ length: 6 }).map((_, rIndex) => (
@@ -4430,9 +4430,9 @@ function MatrixHoverGrid({ matrixType, x, y, onSelect, onMouseEnter, onMouseLeav
   );
 }
 
-/* ══════════════════════════════════════════════════════════
-   MathChemPopup — same as CustomMathEditor popup
-   ══════════════════════════════════════════════════════════ */
+/* ══════════════════════════════════════════════════════════
+   MathChemPopup — same as CustomMathEditor popup
+   ══════════════════════════════════════════════════════════ */
 function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection = 'ltr', isEditing }) {
   const popupMfRef = useRef(null);
   const popupRef = useRef(null);
@@ -4937,7 +4937,7 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
 
 
 
-  /* ── Auto-scroll caret into view ── */
+  /* ── Auto-scroll caret into view ── */
   useEffect(() => {
     const popupMf = popupMfRef.current;
     if (!popupMf) return;
@@ -6020,7 +6020,7 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
                 setShowColorPicker(null);
               }}
             >
-              ×
+              ×
             </button>
           </div>
 
@@ -6036,11 +6036,11 @@ function MathChemPopup({ mode, onInsert, onClose, initialLatex, initialDirection
   );
 }
 
-/* ══════════════════════════════════════════════════════════
-   LaTeX → Unicode plain-text converter
+/* ══════════════════════════════════════════════════════════
+   LaTeX → Unicode plain-text converter
    Converts LaTeX notation to readable Unicode so CKEditor
    treats each character individually (backspace works per-char)
-══════════════════════════════════════════════════════════ */
+══════════════════════════════════════════════════════════ */
 function latexToPlainText(latex) {
   let text = latex;
 
@@ -6051,35 +6051,35 @@ function latexToPlainText(latex) {
   // Sort replacements longest-first to avoid partial matches
   const replacements = [
     // Greek lowercase
-    ['\\varepsilon', 'ε'], ['\\varphi', 'φ'],
-    ['\\alpha', 'α'], ['\\beta', 'β'], ['\\gamma', 'γ'], ['\\delta', 'δ'],
-    ['\\epsilon', 'ε'], ['\\zeta', 'ζ'], ['\\eta', 'η'], ['\\theta', 'θ'],
-    ['\\iota', 'ι'], ['\\kappa', 'κ'], ['\\lambda', 'λ'], ['\\mu', 'μ'],
-    ['\\nu', 'ν'], ['\\xi', 'ξ'], ['\\pi', 'π'], ['\\rho', 'ρ'],
-    ['\\sigma', 'σ'], ['\\tau', 'τ'], ['\\upsilon', 'υ'], ['\\phi', 'φ'],
-    ['\\chi', 'χ'], ['\\psi', 'ψ'], ['\\omega', 'ω'],
+    ['\\varepsilon', 'ε'], ['\\varphi', 'φ'],
+    ['\\alpha', 'α'], ['\\beta', 'β'], ['\\gamma', 'γ'], ['\\delta', 'δ'],
+    ['\\epsilon', 'ε'], ['\\zeta', 'ζ'], ['\\eta', 'η'], ['\\theta', 'θ'],
+    ['\\iota', 'ι'], ['\\kappa', 'κ'], ['\\lambda', 'λ'], ['\\mu', 'μ'],
+    ['\\nu', 'ν'], ['\\xi', 'ξ'], ['\\pi', 'π'], ['\\rho', 'ρ'],
+    ['\\sigma', 'σ'], ['\\tau', 'τ'], ['\\upsilon', 'υ'], ['\\phi', 'φ'],
+    ['\\chi', 'χ'], ['\\psi', 'ψ'], ['\\omega', 'ω'],
     // Greek uppercase
-    ['\\Gamma', 'Γ'], ['\\Delta', 'Δ'], ['\\Theta', 'Θ'], ['\\Lambda', 'Λ'],
-    ['\\Xi', 'Ξ'], ['\\Pi', 'Π'], ['\\Sigma', 'Σ'], ['\\Upsilon', 'Υ'],
-    ['\\Phi', 'Φ'], ['\\Psi', 'Ψ'], ['\\Omega', 'Ω'],
+    ['\\Gamma', 'Γ'], ['\\Delta', 'Δ'], ['\\Theta', 'Θ'], ['\\Lambda', 'Λ'],
+    ['\\Xi', 'Ξ'], ['\\Pi', 'Π'], ['\\Sigma', 'Σ'], ['\\Upsilon', 'Υ'],
+    ['\\Phi', 'Φ'], ['\\Psi', 'Ψ'], ['\\Omega', 'Ω'],
     // Operators
-    ['\\pm', '±'], ['\\mp', '∓'], ['\\times', '×'], ['\\div', '÷'],
+    ['\\pm', '±'], ['\\mp', '∓'], ['\\times', '×'], ['\\div', '÷'],
     ['\\backslash', '\\'],
-    ['\\cdot', '·'], ['\\neq', '≠'], ['\\leq', '≤'], ['\\geq', '≥'],
-    ['\\approx', '≈'], ['\\equiv', '≡'], ['\\infty', '∞'],
-    ['\\sum', '∑'], ['\\prod', '∏'], ['\\int', '∫'], ['\\oint', '∮'],
-    ['\\iint', '∬'], ['\\iiint', '∭'], ['\\oiint', '∯'],
-    ['\\partial', '∂'], ['\\nabla', '∇'],
-    ['\\in', '∈'], ['\\notin', '∉'],
-    ['\\subset', '⊂'], ['\\subseteq', '⊆'], ['\\supset', '⊃'], ['\\supseteq', '⊇'],
-    ['\\cup', '∪'], ['\\cap', '∩'], ['\\emptyset', '∅'], ['\\setminus', '﹨'],
-    ['\\forall', '∀'], ['\\exists', '∃'], ['\\neg', '¬'],
-    ['\\land', '∧'], ['\\lor', '∨'],
+    ['\\cdot', '·'], ['\\neq', '≠'], ['\\leq', '≤'], ['\\geq', '≥'],
+    ['\\approx', '≈'], ['\\equiv', '≡'], ['\\infty', '∞'],
+    ['\\sum', '∑'], ['\\prod', '∏'], ['\\int', '∫'], ['\\oint', '∮'],
+    ['\\iint', '∬'], ['\\iiint', '∭'], ['\\oiint', '∯'],
+    ['\\partial', '∂'], ['\\nabla', '∇'],
+    ['\\in', '∈'], ['\\notin', '∉'],
+    ['\\subset', '⊂'], ['\\subseteq', '⊆'], ['\\supset', '⊃'], ['\\supseteq', '⊇'],
+    ['\\cup', '∪'], ['\\cap', '∩'], ['\\emptyset', '∅'], ['\\setminus', '﹨'],
+    ['\\forall', '∀'], ['\\exists', '∃'], ['\\neg', '¬'],
+    ['\\land', '∧'], ['\\lor', '∨'],
     // Arrows
-    ['\\leftrightarrow', '↔'], ['\\Leftrightarrow', '⇔'],
-    ['\\rightarrow', '→'], ['\\leftarrow', '←'],
-    ['\\Rightarrow', '⇒'], ['\\Leftarrow', '⇐'],
-    ['\\uparrow', '↑'], ['\\downarrow', '↓'],
+    ['\\leftrightarrow', '↔'], ['\\Leftrightarrow', '⇔'],
+    ['\\rightarrow', '→'], ['\\leftarrow', '←'],
+    ['\\Rightarrow', '⇒'], ['\\Leftarrow', '⇐'],
+    ['\\uparrow', '↑'], ['\\downarrow', '↓'],
     // Trig / log
     ['\\sin', 'sin'], ['\\cos', 'cos'], ['\\tan', 'tan'],
     ['\\cot', 'cot'], ['\\sec', 'sec'], ['\\csc', 'csc'],
@@ -6088,7 +6088,7 @@ function latexToPlainText(latex) {
     ...BLACKBOARD_BOLD_PICKER_ITEMS.map(({ insert, label }) => [insert, label]),
     ...FRAKTUR_SCRIPT_PICKER_ITEMS.map(({ insert, label }) => [insert, label]),
     ...HEBREW_SYMBOL_PICKER_ITEMS.map(({ insert, label }) => [insert, label]),
-    ['\\wp', '℘'],
+    ['\\wp', '℘'],
     // Delimiters
     ['\\left(', '('], ['\\right)', ')'],
     ['\\left[', '['], ['\\right]', ']'],
@@ -6097,7 +6097,7 @@ function latexToPlainText(latex) {
     // Spacing
     ['\\,', ' '], ['\\;', ' '], ['\\quad', ' '], ['\\qquad', '  '],
     // Misc
-    ['\\prime', '′'], ['\\vdots', '⋮'], ['\\cdots', '⋯'], ['\\ddots', '⋱'], ['\\ldots', '…'],
+    ['\\prime', '′'], ['\\vdots', '⋮'], ['\\cdots', '⋯'], ['\\ddots', '⋱'], ['\\ldots', '…'],
   ];
 
   for (const [cmd, char] of replacements) {
@@ -6105,45 +6105,45 @@ function latexToPlainText(latex) {
     text = text.replace(new RegExp(escaped, 'g'), char);
   }
 
-  // \frac{a}{b} → a/b
+  // \frac{a}{b} → a/b
   text = text.replace(/\\frac\{([^}]*)\}\{([^}]*)\}/g, '$1/$2');
 
-  // \sqrt[n]{x} → ⁿ√(x)  and  \sqrt{x} → √(x)
-  text = text.replace(/\\sqrt\[([^\]]*)\]\{([^}]*)\}/g, '$1√($2)');
-  text = text.replace(/\\sqrt\{([^}]*)\}/g, '√($1)');
+  // \sqrt[n]{x} → ⁿ√(x)  and  \sqrt{x} → √(x)
+  text = text.replace(/\\sqrt\[([^\]]*)\]\{([^}]*)\}/g, '$1√($2)');
+  text = text.replace(/\\sqrt\{([^}]*)\}/g, '√($1)');
 
-  // \vec{x} → x⃗  \hat{x} → x̂  \bar{x} → x̄  \dot{x} → ẋ  \ddot{x} → ẍ
+  // \vec{x} → x⃗  \hat{x} → x̂  \bar{x} → x̄  \dot{x} → ẋ  \ddot{x} → ẍ
   text = text.replace(/\\vec\{([^}]*)\}/g, '$1\u20D7');
   text = text.replace(/\\hat\{([^}]*)\}/g, '$1\u0302');
   text = text.replace(/\\bar\{([^}]*)\}/g, '$1\u0304');
   text = text.replace(/\\ddot\{([^}]*)\}/g, '$1\u0308');
   text = text.replace(/\\dot\{([^}]*)\}/g, '$1\u0307');
 
-  // \text{...} → content
+  // \text{...} → content
   text = text.replace(/\\text\{([^}]*)\}/g, '$1');
 
-  // \begin{pmatrix}...\end{pmatrix} → [a, b; c, d]
+  // \begin{pmatrix}...\end{pmatrix} → [a, b; c, d]
   text = text.replace(/\\begin\{pmatrix\}([\s\S]*?)\\end\{pmatrix\}/g, (_, c) =>
     '[' + c.replace(/\\\\/g, '; ').replace(/&/g, ', ').trim() + ']'
   );
 
   // Superscripts ^{content}
-  const supMap = { '0': '⁰', '1': '¹', '2': '²', '3': '³', '4': '⁴', '5': '⁵', '6': '⁶', '7': '⁷', '8': '⁸', '9': '⁹', '+': '⁺', '-': '⁻', '=': '⁼', '(': '⁽', ')': '⁾', 'n': 'ⁿ', 'i': 'ⁱ' };
+  const supMap = { '0': '⁰', '1': '¹', '2': '²', '3': '³', '4': '⁴', '5': '⁵', '6': '⁶', '7': '⁷', '8': '⁸', '9': '⁹', '+': '⁺', '-': '⁻', '=': '⁼', '(': '⁽', ')': '⁾', 'n': 'ⁿ', 'i': 'ⁱ' };
   text = text.replace(/\^\{([^}]*)\}/g, (_, content) =>
     content.split('').map(c => supMap[c] || c).join('')
   );
   text = text.replace(/\^([a-zA-Z0-9])/g, (_, c) => supMap[c] || c);
 
   // Subscripts _{content}
-  const subMap = { '0': '₀', '1': '₁', '2': '₂', '3': '₃', '4': '₄', '5': '₅', '6': '₆', '7': '₇', '8': '₈', '9': '₉', '+': '₊', '-': '₋', '=': '₌', '(': '₍', ')': '₎', 'a': 'ₐ', 'e': 'ₑ', 'o': 'ₒ', 'x': 'ₓ', 'i': 'ᵢ', 'j': 'ⱼ', 'n': 'ₙ' };
+  const subMap = { '0': '₀', '1': '₁', '2': '₂', '3': '₃', '4': '₄', '5': '₅', '6': '₆', '7': '₇', '8': '₈', '9': '₉', '+': '₊', '-': '₋', '=': '₌', '(': '₍', ')': '₎', 'a': 'ₐ', 'e': 'ₑ', 'o': 'ₒ', 'x': 'ₓ', 'i': 'ᵢ', 'j': 'ⱼ', 'n': 'ₙ' };
   text = text.replace(/_\{([^}]*)\}/g, (_, content) =>
     content.split('').map(c => subMap[c] || c).join('')
   );
   text = text.replace(/_([a-zA-Z0-9])/g, (_, c) => subMap[c] || c);
 
   // Chem arrows
-  text = text.replace(/->/g, '→');
-  text = text.replace(/<=>/g, '⇌');
+  text = text.replace(/->/g, '→');
+  text = text.replace(/<=>/g, '⇌');
 
   // Clean up remaining LaTeX
   text = text.replace(/\\[a-zA-Z]+/g, '');   // remove unknown commands
@@ -6154,9 +6154,9 @@ function latexToPlainText(latex) {
   return text.trim();
 }
 
-/* ══════════════════════════════════════════════════════════
+/* ══════════════════════════════════════════════════════════
    Main CkEditor component
-══════════════════════════════════════════════════════════ */
+══════════════════════════════════════════════════════════ */
 function CkEditor({ value, onChange, className = '' }) {
   const editorRef = useRef(null);
   const popupOpenRef = useRef(false);
@@ -6210,7 +6210,7 @@ function CkEditor({ value, onChange, className = '' }) {
         : null;
 
       if (targetModel) {
-        // ── EDIT MODE: replace widget so the math-field re-renders with new latex ──
+        // ── EDIT MODE: replace widget so the math-field re-renders with new latex ──
         editor.model.change((writer) => {
           const mathElement = writer.createElement('mathInline', mathAttributes);
           const position = writer.createPositionBefore(targetModel);
@@ -6310,7 +6310,7 @@ function CkEditor({ value, onChange, className = '' }) {
           width: auto !important;
           max-width: 100% !important;
           pointer-events: none !important;
-          color: #ffffff !important;
+          color: #000000 !important;
         }
         .ck-math-widget[data-dir="rtl"] {
           direction: rtl !important;