From c1d906d62f2424e6b26e664bec05cb5ee8b60c72 Mon Sep 17 00:00:00 2001
From: Arno Gourdol <arno@arno.org>
Date: Wed, 15 Nov 2023 18:24:32 -0800
Subject: [PATCH] lint

---
 src/core-atoms/latex.ts                |   4 +-
 src/editor-mathfield/keyboard-input.ts |   4 +-
 src/editor/keybindings.ts              |   3 +-
 src/editor/keyboard-layout.ts          | 282 ++++++++++++-------------
 test/smoke/index.html                  | 184 ++++++++--------
 5 files changed, 236 insertions(+), 241 deletions(-)

diff --git a/src/core-atoms/latex.ts b/src/core-atoms/latex.ts
index b5ded2fe9..c61d4bd99 100644
--- a/src/core-atoms/latex.ts
+++ b/src/core-atoms/latex.ts
@@ -40,8 +40,8 @@ export class LatexAtom extends Atom {
       classes: this.isSuggestion
         ? 'ML__suggestion'
         : this.isError
-        ? 'ML__error'
-        : '',
+          ? 'ML__error'
+          : '',
       type: 'latex',
       maxFontSize: 1.0,
     });
diff --git a/src/editor-mathfield/keyboard-input.ts b/src/editor-mathfield/keyboard-input.ts
index f9da271de..ba4a5a8bd 100644
--- a/src/editor-mathfield/keyboard-input.ts
+++ b/src/editor-mathfield/keyboard-input.ts
@@ -650,8 +650,8 @@ function insertMathModeChar(
       mathfield.adoptStyle === 'left'
         ? atom
         : atom.parent
-        ? atom.rightSibling
-        : null;
+          ? atom.rightSibling
+          : null;
     if (
       sibling?.type === 'mord' &&
       /[a-zA-Z0-9]/.test(sibling.value) &&
diff --git a/src/editor/keybindings.ts b/src/editor/keybindings.ts
index ff011d4b6..689eb3407 100644
--- a/src/editor/keybindings.ts
+++ b/src/editor/keybindings.ts
@@ -269,9 +269,8 @@ function normalizeKeybinding(
   // Convert it to a key code.
   const code = getCodeForKey(modifiers.key, layout);
   // if (!code) throw new Error('Invalid keybinding key "' + keybinding.key + '"');
-  if (!code) {
+  if (!code)
     return { ...keybinding, key: keystrokeModifiersToString(modifiers) };
-  }
 
   if ((code.shift && modifiers.shift) || (code.alt && modifiers.alt)) {
     throw new Error(
diff --git a/src/editor/keyboard-layout.ts b/src/editor/keyboard-layout.ts
index 06e87edfc..b8b78c28c 100644
--- a/src/editor/keyboard-layout.ts
+++ b/src/editor/keyboard-layout.ts
@@ -293,147 +293,147 @@ export const DEFAULT_KEYBOARD_LAYOUT: KeyboardLayout =
         },
       }
     : platform() === 'windows'
-    ? {
-        id: 'windows.en-intl',
-        displayName: 'English (international)',
-        platform: 'windows',
-        virtualLayout: 'qwerty',
-        locale: 'en',
-        score: 0,
-        mapping: {
-          KeyA: ['a', 'A', 'á', 'Á'],
-          KeyB: ['b', 'B', '', ''],
-          KeyC: ['c', 'C', '©', '¢'],
-          KeyD: ['d', 'D', 'ð', 'Ð'],
-          KeyE: ['e', 'E', 'é', 'É'],
-          KeyF: ['f', 'F', '', ''],
-          KeyG: ['g', 'G', '', ''],
-          KeyH: ['h', 'H', '', ''],
-          KeyI: ['i', 'I', 'í', 'Í'],
-          KeyJ: ['j', 'J', '', ''],
-          KeyK: ['k', 'K', '', ''],
-          KeyL: ['l', 'L', 'ø', 'Ø'],
-          KeyM: ['m', 'M', 'µ', ''],
-          KeyN: ['n', 'N', 'ñ', 'Ñ'],
-          KeyO: ['o', 'O', 'ó', 'Ó'],
-          KeyP: ['p', 'P', 'ö', 'Ö'],
-          KeyQ: ['q', 'Q', 'ä', 'Ä'],
-          KeyR: ['r', 'R', '®', ''],
-          KeyS: ['s', 'S', 'ß', '§'],
-          KeyT: ['t', 'T', 'þ', 'Þ'],
-          KeyU: ['u', 'U', 'ú', 'Ú'],
-          KeyV: ['v', 'V', '', ''],
-          KeyW: ['w', 'W', 'å', 'Å'],
-          KeyX: ['x', 'X', '', ''],
-          KeyY: ['y', 'Y', 'ü', 'Ü'],
-          KeyZ: ['z', 'Z', 'æ', 'Æ'],
-          Digit1: ['1', '!', '¡', '¹'],
-          Digit2: ['2', '@', '²', ''],
-          Digit3: ['3', '#', '³', ''],
-          Digit4: ['4', '$', '¤', '£'],
-          Digit5: ['5', '%', '€', ''],
-          Digit6: ['6', '^', '¼', ''],
-          Digit7: ['7', '&', '½', ''],
-          Digit8: ['8', '*', '¾', ''],
-          Digit9: ['9', '(', '‘', ''],
-          Digit0: ['0', ')', '’', ''],
-          Space: [' ', ' ', '', ''],
-          Minus: ['-', '_', '¥', ''],
-          Equal: ['=', '+', '×', '÷'],
-          BracketLeft: ['[', '{', '«', ''],
-          BracketRight: [']', '}', '»', ''],
-          Backslash: ['\\', '|', '¬', '¦'],
-          Semicolon: [';', ':', '¶', '°'],
-          Quote: ["'", '"', '´', '¨'],
-          Backquote: ['`', '~', '', ''],
-          Comma: [',', '<', 'ç', 'Ç'],
-          Period: ['.', '>', '', ''],
-          Slash: ['/', '?', '¿', ''],
-          NumpadDivide: ['/', '/', '', ''],
-          NumpadMultiply: ['*', '*', '', ''],
-          NumpadSubtract: ['-', '-', '', ''],
-          NumpadAdd: ['+', '+', '', ''],
-          IntlBackslash: ['\\', '|', '', ''],
-        },
-      }
-    : {
-        id: 'linux.en',
-        displayName: 'English',
-        platform: 'linux',
-        virtualLayout: 'qwerty',
-        locale: 'en',
-        score: 0,
-        mapping: {
-          KeyA: ['a', 'A', 'a', 'A'],
-          KeyB: ['b', 'B', 'b', 'B'],
-          KeyC: ['c', 'C', 'c', 'C'],
-          KeyD: ['d', 'D', 'd', 'D'],
-          KeyE: ['e', 'E', 'e', 'E'],
-          KeyF: ['f', 'F', 'f', 'F'],
-          KeyG: ['g', 'G', 'g', 'G'],
-          KeyH: ['h', 'H', 'h', 'H'],
-          KeyI: ['i', 'I', 'i', 'I'],
-          KeyJ: ['j', 'J', 'j', 'J'],
-          KeyK: ['k', 'K', 'k', 'K'],
-          KeyL: ['l', 'L', 'l', 'L'],
-          KeyM: ['m', 'M', 'm', 'M'],
-          KeyN: ['n', 'N', 'n', 'N'],
-          KeyO: ['o', 'O', 'o', 'O'],
-          KeyP: ['p', 'P', 'p', 'P'],
-          KeyQ: ['q', 'Q', 'q', 'Q'],
-          KeyR: ['r', 'R', 'r', 'R'],
-          KeyS: ['s', 'S', 's', 'S'],
-          KeyT: ['t', 'T', 't', 'T'],
-          KeyU: ['u', 'U', 'u', 'U'],
-          KeyV: ['v', 'V', 'v', 'V'],
-          KeyW: ['w', 'W', 'w', 'W'],
-          KeyX: ['x', 'X', 'x', 'X'],
-          KeyY: ['y', 'Y', 'y', 'Y'],
-          KeyZ: ['z', 'Z', 'z', 'Z'],
-          Digit1: ['1', '!', '1', '!'],
-          Digit2: ['2', '@', '2', '@'],
-          Digit3: ['3', '#', '3', '#'],
-          Digit4: ['4', '$', '4', '$'],
-          Digit5: ['5', '%', '5', '%'],
-          Digit6: ['6', '^', '6', '^'],
-          Digit7: ['7', '&', '7', '&'],
-          Digit8: ['8', '*', '8', '*'],
-          Digit9: ['9', '(', '9', '('],
-          Digit0: ['0', ')', '0', ')'],
-          Space: [' ', ' ', ' ', ' '],
-          Minus: ['-', '_', '-', '_'],
-          Equal: ['=', '+', '=', '+'],
-          BracketLeft: ['[', '{', '[', '{'],
-          BracketRight: [']', '}', ']', '}'],
-          Backslash: ['\\', '|', '\\', '|'],
-          Semicolon: [';', ':', ';', ':'],
-          Quote: ["'", '"', "'", '"'],
-          Backquote: ['`', '~', '`', '~'],
-          Comma: [',', '<', ',', '<'],
-          Period: ['.', '>', '.', '>'],
-          Slash: ['/', '?', '/', '?'],
-          NumpadDivide: ['/', '/', '/', '/'],
-          NumpadMultiply: ['*', '*', '*', '*'],
-          NumpadSubtract: ['-', '-', '-', '-'],
-          NumpadAdd: ['+', '+', '+', '+'],
-          Numpad1: ['1', '1', '1', '1'],
-          Numpad2: ['2', '2', '2', '2'],
-          Numpad3: ['3', '3', '3', '3'],
-          Numpad4: ['4', '4', '4', '4'],
-          Numpad5: ['5', '5', '5', '5'],
-          Numpad6: ['6', '6', '6', '6'],
-          Numpad7: ['7', '7', '7', '7'],
-          Numpad8: ['8', '8', '8', '8'],
-          Numpad9: ['9', '9', '9', '9'],
-          Numpad0: ['0', '0', '0', '0'],
-          NumpadDecimal: ['', '.', '', '.'],
-          IntlBackslash: ['<', '>', '|', '¦'],
-          NumpadEqual: ['=', '=', '=', '='],
-          NumpadComma: ['.', '.', '.', '.'],
-          NumpadParenLeft: ['(', '(', '(', '('],
-          NumpadParenRight: [')', ')', ')', ')'],
-        },
-      };
+      ? {
+          id: 'windows.en-intl',
+          displayName: 'English (international)',
+          platform: 'windows',
+          virtualLayout: 'qwerty',
+          locale: 'en',
+          score: 0,
+          mapping: {
+            KeyA: ['a', 'A', 'á', 'Á'],
+            KeyB: ['b', 'B', '', ''],
+            KeyC: ['c', 'C', '©', '¢'],
+            KeyD: ['d', 'D', 'ð', 'Ð'],
+            KeyE: ['e', 'E', 'é', 'É'],
+            KeyF: ['f', 'F', '', ''],
+            KeyG: ['g', 'G', '', ''],
+            KeyH: ['h', 'H', '', ''],
+            KeyI: ['i', 'I', 'í', 'Í'],
+            KeyJ: ['j', 'J', '', ''],
+            KeyK: ['k', 'K', '', ''],
+            KeyL: ['l', 'L', 'ø', 'Ø'],
+            KeyM: ['m', 'M', 'µ', ''],
+            KeyN: ['n', 'N', 'ñ', 'Ñ'],
+            KeyO: ['o', 'O', 'ó', 'Ó'],
+            KeyP: ['p', 'P', 'ö', 'Ö'],
+            KeyQ: ['q', 'Q', 'ä', 'Ä'],
+            KeyR: ['r', 'R', '®', ''],
+            KeyS: ['s', 'S', 'ß', '§'],
+            KeyT: ['t', 'T', 'þ', 'Þ'],
+            KeyU: ['u', 'U', 'ú', 'Ú'],
+            KeyV: ['v', 'V', '', ''],
+            KeyW: ['w', 'W', 'å', 'Å'],
+            KeyX: ['x', 'X', '', ''],
+            KeyY: ['y', 'Y', 'ü', 'Ü'],
+            KeyZ: ['z', 'Z', 'æ', 'Æ'],
+            Digit1: ['1', '!', '¡', '¹'],
+            Digit2: ['2', '@', '²', ''],
+            Digit3: ['3', '#', '³', ''],
+            Digit4: ['4', '$', '¤', '£'],
+            Digit5: ['5', '%', '€', ''],
+            Digit6: ['6', '^', '¼', ''],
+            Digit7: ['7', '&', '½', ''],
+            Digit8: ['8', '*', '¾', ''],
+            Digit9: ['9', '(', '‘', ''],
+            Digit0: ['0', ')', '’', ''],
+            Space: [' ', ' ', '', ''],
+            Minus: ['-', '_', '¥', ''],
+            Equal: ['=', '+', '×', '÷'],
+            BracketLeft: ['[', '{', '«', ''],
+            BracketRight: [']', '}', '»', ''],
+            Backslash: ['\\', '|', '¬', '¦'],
+            Semicolon: [';', ':', '¶', '°'],
+            Quote: ["'", '"', '´', '¨'],
+            Backquote: ['`', '~', '', ''],
+            Comma: [',', '<', 'ç', 'Ç'],
+            Period: ['.', '>', '', ''],
+            Slash: ['/', '?', '¿', ''],
+            NumpadDivide: ['/', '/', '', ''],
+            NumpadMultiply: ['*', '*', '', ''],
+            NumpadSubtract: ['-', '-', '', ''],
+            NumpadAdd: ['+', '+', '', ''],
+            IntlBackslash: ['\\', '|', '', ''],
+          },
+        }
+      : {
+          id: 'linux.en',
+          displayName: 'English',
+          platform: 'linux',
+          virtualLayout: 'qwerty',
+          locale: 'en',
+          score: 0,
+          mapping: {
+            KeyA: ['a', 'A', 'a', 'A'],
+            KeyB: ['b', 'B', 'b', 'B'],
+            KeyC: ['c', 'C', 'c', 'C'],
+            KeyD: ['d', 'D', 'd', 'D'],
+            KeyE: ['e', 'E', 'e', 'E'],
+            KeyF: ['f', 'F', 'f', 'F'],
+            KeyG: ['g', 'G', 'g', 'G'],
+            KeyH: ['h', 'H', 'h', 'H'],
+            KeyI: ['i', 'I', 'i', 'I'],
+            KeyJ: ['j', 'J', 'j', 'J'],
+            KeyK: ['k', 'K', 'k', 'K'],
+            KeyL: ['l', 'L', 'l', 'L'],
+            KeyM: ['m', 'M', 'm', 'M'],
+            KeyN: ['n', 'N', 'n', 'N'],
+            KeyO: ['o', 'O', 'o', 'O'],
+            KeyP: ['p', 'P', 'p', 'P'],
+            KeyQ: ['q', 'Q', 'q', 'Q'],
+            KeyR: ['r', 'R', 'r', 'R'],
+            KeyS: ['s', 'S', 's', 'S'],
+            KeyT: ['t', 'T', 't', 'T'],
+            KeyU: ['u', 'U', 'u', 'U'],
+            KeyV: ['v', 'V', 'v', 'V'],
+            KeyW: ['w', 'W', 'w', 'W'],
+            KeyX: ['x', 'X', 'x', 'X'],
+            KeyY: ['y', 'Y', 'y', 'Y'],
+            KeyZ: ['z', 'Z', 'z', 'Z'],
+            Digit1: ['1', '!', '1', '!'],
+            Digit2: ['2', '@', '2', '@'],
+            Digit3: ['3', '#', '3', '#'],
+            Digit4: ['4', '$', '4', '$'],
+            Digit5: ['5', '%', '5', '%'],
+            Digit6: ['6', '^', '6', '^'],
+            Digit7: ['7', '&', '7', '&'],
+            Digit8: ['8', '*', '8', '*'],
+            Digit9: ['9', '(', '9', '('],
+            Digit0: ['0', ')', '0', ')'],
+            Space: [' ', ' ', ' ', ' '],
+            Minus: ['-', '_', '-', '_'],
+            Equal: ['=', '+', '=', '+'],
+            BracketLeft: ['[', '{', '[', '{'],
+            BracketRight: [']', '}', ']', '}'],
+            Backslash: ['\\', '|', '\\', '|'],
+            Semicolon: [';', ':', ';', ':'],
+            Quote: ["'", '"', "'", '"'],
+            Backquote: ['`', '~', '`', '~'],
+            Comma: [',', '<', ',', '<'],
+            Period: ['.', '>', '.', '>'],
+            Slash: ['/', '?', '/', '?'],
+            NumpadDivide: ['/', '/', '/', '/'],
+            NumpadMultiply: ['*', '*', '*', '*'],
+            NumpadSubtract: ['-', '-', '-', '-'],
+            NumpadAdd: ['+', '+', '+', '+'],
+            Numpad1: ['1', '1', '1', '1'],
+            Numpad2: ['2', '2', '2', '2'],
+            Numpad3: ['3', '3', '3', '3'],
+            Numpad4: ['4', '4', '4', '4'],
+            Numpad5: ['5', '5', '5', '5'],
+            Numpad6: ['6', '6', '6', '6'],
+            Numpad7: ['7', '7', '7', '7'],
+            Numpad8: ['8', '8', '8', '8'],
+            Numpad9: ['9', '9', '9', '9'],
+            Numpad0: ['0', '0', '0', '0'],
+            NumpadDecimal: ['', '.', '', '.'],
+            IntlBackslash: ['<', '>', '|', '¦'],
+            NumpadEqual: ['=', '=', '=', '='],
+            NumpadComma: ['.', '.', '.', '.'],
+            NumpadParenLeft: ['(', '(', '(', '('],
+            NumpadParenRight: [')', ')', ')', ')'],
+          },
+        };
 
 /* prettier-ignore */
 const BASE_LAYOUT_MAPPING = {
diff --git a/test/smoke/index.html b/test/smoke/index.html
index bcaf84820..4b7b2ea83 100644
--- a/test/smoke/index.html
+++ b/test/smoke/index.html
@@ -56,9 +56,10 @@ <h1>Smoke Test</h1>
       <!-- <math-field id="mf"
         >\left(r+s+\right)+\sqrt{x+1}=\frac{ab+cd}{1243+def}</math-field
       > -->
-      <math-field id="mf" name="formula">\frac{\frac12}{\frac34}</math-field>
 
-      <div id="math-container"></div>
+      <math-field id="mf" name="formula"
+        >\left(\frac{5}{3}+1\right)+1</math-field
+      >
 
       <!-- <math-field id="mf"
         >-=a\phase{abc}\enclose{longdiv}{\frac{1}{12+3+4+5}}\enclose{box}{\sqrt[1234567]{\frac{1}{x+1}}}</math-field
@@ -109,26 +110,17 @@ <h2>Latex to Speakable Text</h2>
         MathfieldElement,
         convertLatexToMarkup,
         convertLatexToSpeakableText,
-      } from '/dist/mathlive.mjs';
+      } from "/dist/mathlive.mjs";
 
       import {
         ComputeEngine,
         version,
-      } from 'https://unpkg.com/@cortex-js/compute-engine?module';
+      } from "https://unpkg.com/@cortex-js/compute-engine?module";
 
       const MAX_LINE_LENGTH = 74;
 
       renderMathInDocument();
 
-      let mathfieldElement;
-      document.addEventListener('DOMContentLoaded', (event) => {
-        mathfieldElement = new MathfieldElement();
-        mathfieldElement.value = 'hello';
-        document.querySelector('#math-container').appendChild(mathfieldElement);
-        mathfieldElement.focus();
-        mathfieldElement.executeCommand('moveToMathfieldEnd');
-      });
-
       // const ce = new ComputeEngine({
       //   latexDictionary: [
       //     ...ComputeEngine.getLatexDictionary(),
@@ -156,7 +148,7 @@ <h2>Latex to Speakable Text</h2>
       MathfieldElement.computeEngine.latexOptions = {
         ...MathfieldElement.computeEngine.latexOptions,
         parseUnknownIdentifier: (s) =>
-          /^[a-zA-Z]+$/.test(s) ? 'function' : 'unknown',
+          /^[a-zA-Z]+$/.test(s) ? "function" : "unknown",
       };
 
       // mathVirtualKeyboard.layouts = {
@@ -238,12 +230,17 @@ <h2>Latex to Speakable Text</h2>
       //   'alphabetic',
       // ];
 
-      const mf = document.getElementById('mf');
+      const mf = document.getElementById("mf");
+
+      // console.info(mf.registers);
+      // console.info(mf.registers.jot);
+      // mf.registers.jot = '2em';
+      // console.info(mf.registers.jot);
 
-      MathfieldElement.computeEngine.notation = 'scientific';
+      MathfieldElement.computeEngine.notation = "scientific";
 
       mf.inlineShortcuts = {
-        '--': '\\_',
+        "--": "\\_",
         ...mf.inlineShortcuts,
       };
       // eslint-disable-next-line no-undef
@@ -286,16 +283,16 @@ <h2>Latex to Speakable Text</h2>
       mf.macros = {
         ...mf.macros,
         // Alpha: undefined,
-        minutes: '\\prime',
+        minutes: "\\prime",
         smolfrac: {
           args: 2,
-          def: '{}^{#1}\\!\\!/\\!{}_{#2}',
+          def: "{}^{#1}\\!\\!/\\!{}_{#2}",
           captureSelection: false,
         },
         funfunction: {
           captureSelection: false,
           args: 2,
-          def: 'FunFunction\\left({#1},{#2}\\right)',
+          def: "FunFunction\\left({#1},{#2}\\right)",
         },
       };
 
@@ -314,46 +311,46 @@ <h2>Latex to Speakable Text</h2>
       //   if (ev.inputType === 'insertLineBreak') console.log('enter');
       // });
 
-      mf.addEventListener('input', (ev) => updateContent(mf));
+      mf.addEventListener("input", (ev) => updateContent(mf));
 
       // mf.addEventListener('keydown', (ev) => {
       //   console.log('keydown', ev);
       // });
 
-      mf.addEventListener('selection-change', (ev) => {
+      mf.addEventListener("selection-change", (ev) => {
         const selection = mf.selection;
-        document.getElementById('selection').innerHTML =
-          `${label('value     ')}"${escapeHtml(
-            mf.getValue(selection, 'latex')
+        document.getElementById("selection").innerHTML =
+          `${label("value     ")}"${escapeHtml(
+            mf.getValue(selection, "latex")
           )}"<br>` +
           // `${label('MathJson  ')}"${escapeHtml(
           //   mf.getValue(selection, 'math-json')
           // )}"<br>` +
-          label('start     ') +
+          label("start     ") +
           selection.ranges[0][0] +
-          '<br>' +
-          label('end       ') +
+          "<br>" +
+          label("end       ") +
           selection.ranges[0][1] +
-          '<br>' +
-          label('position  ') +
+          "<br>" +
+          label("position  ") +
           mf.position +
-          '<br>' +
-          label('direction ') +
+          "<br>" +
+          label("direction ") +
           '"' +
           selection.direction +
           '"<br>' +
-          label('depth     ') +
+          label("depth     ") +
           mf.getOffsetDepth(mf.position);
       });
 
-      document.getElementById('grow').addEventListener('click', () => {
+      document.getElementById("grow").addEventListener("click", () => {
         for (let i = 0; i < 1000; i++) {
           document.body.appendChild(new MathfieldElement());
         }
       });
 
-      document.getElementById('shrink').addEventListener('click', () => {
-        document.querySelectorAll('math-field').forEach((x) => x.remove());
+      document.getElementById("shrink").addEventListener("click", () => {
+        document.querySelectorAll("math-field").forEach((x) => x.remove());
       });
 
       // First time update
@@ -363,27 +360,26 @@ <h2>Latex to Speakable Text</h2>
       // Handler called when the mathfield content has changed
       //
       function updateContent(mf) {
-        const latex = mf.getValue('latex-expanded');
+        const latex = mf.getValue("latex-expanded");
         try {
-          setHtml('latex', mf.getValue('latex-expanded'));
-          setHtml('ascii-math', mf.getValue('ascii-math'));
-          setHtml('mathml', mf.getValue('math-ml'));
-          document.getElementById(
-            'mathml-render'
-          ).innerHTML = `<math>${mf.getValue('math-ml')}</math>`;
+          setHtml("latex", mf.getValue("latex-expanded"));
+          setHtml("ascii-math", mf.getValue("ascii-math"));
+          setHtml("mathml", mf.getValue("math-ml"));
+          document.getElementById("mathml-render").innerHTML =
+            `<math>${mf.getValue("math-ml")}</math>`;
           // setHtml('math-json', ce.parse(mf.value));
-          setHtml('latex2speech', convertLatexToSpeakableText(mf.getValue()));
+          setHtml("latex2speech", convertLatexToSpeakableText(mf.getValue()));
 
           const expr = mf.expression;
           if (expr) {
-            setHtml('math-json', exprToString(expr));
-            const result = expr.evaluate().latex ?? '';
-            document.getElementById('result').innerText = result;
-            document.getElementById('result-latex').innerText = `$$${result}$$`;
-            renderMathInElement('result-latex');
+            setHtml("math-json", exprToString(expr));
+            const result = expr.evaluate().latex ?? "";
+            document.getElementById("result").innerText = result;
+            document.getElementById("result-latex").innerText = `$$${result}$$`;
+            renderMathInElement("result-latex");
           }
         } catch (e) {
-          console.error('Error converting', e.toString());
+          console.error("Error converting", e.toString());
         }
       }
 
@@ -400,15 +396,15 @@ <h2>Latex to Speakable Text</h2>
           /[&<>"'`= /\u200b]/g,
           (s) =>
             ({
-              '&': '&amp;',
-              '<': '&lt;',
-              '>': '&gt;',
-              '"': '&quot;',
-              "'": '&#39;',
-              '/': '&#x2F;',
-              '`': '&#x60;',
-              '=': '&#x3D;',
-              '\u200b': '&amp;#zws;',
+              "&": "&amp;",
+              "<": "&lt;",
+              ">": "&gt;",
+              '"': "&quot;",
+              "'": "&#39;",
+              "/": "&#x2F;",
+              "`": "&#x60;",
+              "=": "&#x3D;",
+              "\u200b": "&amp;#zws;",
             })[s] ?? s
         );
       }
@@ -417,7 +413,7 @@ <h2>Latex to Speakable Text</h2>
         const extraSpecificity = `.ML__keyboard .minimalist-backdrop`;
 
         return {
-          label: '',
+          label: "",
           layers: [
             {
               style: `
@@ -514,39 +510,39 @@ <h2>Latex to Speakable Text</h2>
                     opacity: 1;
                   }
                 `,
-              backdrop: 'minimalist-backdrop',
-              container: 'minimalist-container',
+              backdrop: "minimalist-backdrop",
+              container: "minimalist-container",
               rows: [
                 customKeys,
-                customKeys.length > 0 ? ['[hr]'] : [],
+                customKeys.length > 0 ? ["[hr]"] : [],
                 [
-                  '+',
-                  '-',
-                  '\\times',
+                  "+",
+                  "-",
+                  "\\times",
                   {
-                    insert: '\\frac{#@}{#0}',
-                    latex: '\\frac{#?}{#?}',
-                    class: 'small',
+                    insert: "\\frac{#@}{#0}",
+                    latex: "\\frac{#?}{#?}",
+                    class: "small",
                   },
-                  '=',
-                  '[.]',
-                  '(',
-                  ')',
-                  { latex: '\\sqrt{#0}', class: 'small' },
-                  { insert: '#@^{#?}', class: 'small', latex: '#?^{#?}' },
+                  "=",
+                  "[.]",
+                  "(",
+                  ")",
+                  { latex: "\\sqrt{#0}", class: "small" },
+                  { insert: "#@^{#?}", class: "small", latex: "#?^{#?}" },
                 ],
-                ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
-                ['[hr]'],
+                ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
+                ["[hr]"],
                 [
-                  { label: '[undo]' },
-                  '[redo]',
-                  '[separator]',
-                  '[separator]',
-                  '[separator]',
-                  { label: '[separator]', width: 1.5 },
-                  '[left]',
-                  '[right]',
-                  { label: '[backspace]', class: 'action hide-shift' },
+                  { label: "[undo]" },
+                  "[redo]",
+                  "[separator]",
+                  "[separator]",
+                  "[separator]",
+                  { label: "[separator]", width: 1.5 },
+                  "[left]",
+                  "[right]",
+                  { label: "[backspace]", class: "action hide-shift" },
                 ],
               ],
             },
@@ -555,28 +551,28 @@ <h2>Latex to Speakable Text</h2>
       }
 
       function exprToStringRecursive(expr, start) {
-        let indent = ' '.repeat(start);
+        let indent = " ".repeat(start);
         if (Array.isArray(expr)) {
           const elements = expr.map((x) => exprToStringRecursive(x, start + 2));
-          let result = `[${elements.join(', ')}]`;
+          let result = `[${elements.join(", ")}]`;
           if (start + result.length < MAX_LINE_LENGTH) return result;
           return `[\n${indent}  ${elements.join(`,\n${indent}  `)}\n${indent}]`;
         }
-        if (expr === null) return 'null';
-        if (typeof expr === 'object') {
+        if (expr === null) return "null";
+        if (typeof expr === "object") {
           const elements = {};
           Object.keys(expr).forEach(
             (x) => (elements[x] = exprToStringRecursive(expr[x], start + 2))
           );
           let result = `{${Object.keys(expr)
             .map((key) => `"${key}": ${elements[key]}`)
-            .join('; ')}}`;
+            .join("; ")}}`;
           if (start + result.length < MAX_LINE_LENGTH) return result;
           result = `\n${indent}{${Object.keys(expr)
             .map((key) => {
               return `"${key}": ${elements[key]}`;
             })
-            .join('; ')}}`;
+            .join("; ")}}`;
           if (start + result.length < MAX_LINE_LENGTH) return result;
           return (
             `\n${indent}{\n` +
@@ -585,9 +581,9 @@ <h2>Latex to Speakable Text</h2>
                 return `${indent}  "${key}": ${elements[key]}`;
               })
               .join(`;\n${indent}`) +
-            '\n' +
+            "\n" +
             indent +
-            '}'
+            "}"
           );
         }
         return JSON.stringify(expr, null, 2);