refactor: port MathField.svelte to runes mode

mgreminger · Dec 15, 2024 · 434eeec · 434eeec
1 parent b8df999
commit 434eeec
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 102 deletions.
diff --git a/src/DataTableCell.svelte b/src/DataTableCell.svelte
@@ -556,9 +556,9 @@
       >
         <MathField
           editable={true}
-          on:update={(e) => parseParameterField(e.detail.latex, j, mathField)}
-          on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-          on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+          update={(e) => parseParameterField(e.latex, j, mathField)}
+          shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+          modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
           mathField={mathField}
           parsingError={mathField.parsingError}
           bind:this={mathField.element}
@@ -603,9 +603,9 @@
         {:else}
           <MathField
             editable={true}
-            on:update={(e) => parseUnitField(e.detail.latex, j, mathField)}
-            on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-            on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+            update={(e) => parseUnitField(e.latex, j, mathField)}
+            shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+            modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
             mathField={mathField}
             parsingError={mathField.parsingError}
             bind:this={mathField.element}
@@ -653,9 +653,9 @@
               >
                 <MathField
                   editable={true}
-                  on:update={(e) => parseInterpolationDefNameField(e.detail.latex, i, def.nameField)}
-                  on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-                  on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+                  update={(e) => parseInterpolationDefNameField(e.latex, i, def.nameField)}
+                  shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+                  modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
                   mathField={def.nameField}
                   parsingError={def.nameField.parsingError}
                   bind:this={def.nameField.element}

diff --git a/src/FluidCell.svelte b/src/FluidCell.svelte
@@ -536,10 +536,10 @@
     <div id={`fluid-symbol-${index}`} class="row">
       <MathField
         editable={true}
-        on:update={(e) => parseLatex(e.detail.latex, fluidCell.mathField)}
-        on:enter={() => dispatch("insertMathCellAfter", {index: index})}
-        on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-        on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+        update={(e) => parseLatex(e.latex, fluidCell.mathField)}
+        enter={() => dispatch("insertMathCellAfter", {index: index})}
+        shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+        modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
         mathField={fluidCell.mathField}
         parsingError={fluidCell.mathField.parsingError}
         bind:this={fluidCell.mathField.element}

diff --git a/src/MathCell.svelte b/src/MathCell.svelte
@@ -466,10 +466,10 @@
 <span class="container">
   <MathField
     editable={true}
-    on:update={(e) => parseLatex(e.detail.latex, index)}
-    on:enter={() => dispatch("insertMathCellAfter", {index: index})}
-    on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-    on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+    update={(e) => parseLatex(e.latex, index)}
+    enter={() => dispatch("insertMathCellAfter", {index: index})}
+    shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+    modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
     mathField={mathCell.mathField}
     parsingError={mathCell.mathField.parsingError}
     bind:this={mathCell.mathField.element}

diff --git a/src/MathField.svelte b/src/MathField.svelte
@@ -1,16 +1,37 @@
 <script lang="ts">
-  import { onMount, onDestroy, createEventDispatcher } from "svelte";
-  import { modifierKey, activeMathField, results, resultsInvalid } from "./stores";
+  import { onMount } from "svelte";
+  import { modifierKey, activeMathField, resultsInvalid } from "./stores";
   import type { MathField } from "./cells/MathField";
 
   import type { MathfieldElement } from "mathlive";
   import { INLINE_SHORTCUTS, MAX_MATRIX_COLS } from "./constants";
+  import { values } from "idb-keyval";
+
+  interface Props {
+    latex?: string;
+    mathField?: MathField | null;
+    parsingError?: boolean;
+    editable?: boolean;
+    hidden?: boolean;
+    update?: (arg: {latex: string}) => void;
+    enter?: () => void;
+    shiftEnter?: () => void;
+    modifierEnter?: () => void;
+  }
+
+  let {
+    latex = "",
+    mathField = null,
+    parsingError = false,
+    editable = false,
+    hidden = false,
+    update,
+    enter,
+    shiftEnter,
+    modifierEnter
+  }: Props = $props();
 
-  export let latex = "";
-  export let mathField: MathField | null = null;
-  export let parsingError = false;
-  export let editable = false;
-  export let hidden = false;
+  let mathLiveField: MathfieldElement = $state();
 
   export function getMathField() {
     return mathLiveField;
@@ -34,39 +55,17 @@
     }
   }
 
-  const dispatch = createEventDispatcher<{
-    update: {latex: string};
-    enter: null;
-    shiftEnter: null;
-    modifierEnter: null;
-  }>();
-
-  let mathSpan: HTMLSpanElement;
-  let mathLiveField: MathfieldElement;
-
-  onMount(() => {    
+  onMount(() => {
     if (editable) {
-      mathLiveField.mathVirtualKeyboardPolicy = "manual";
-      mathLiveField.inlineShortcutTimeout = 0;
-      mathLiveField.smartSuperscript = false;
-      mathLiveField.inlineShortcuts = INLINE_SHORTCUTS;
-
-      mathLiveField.mathModeSpace = '\\:';
-
-      mathLiveField.keybindings = getKeybindings(mathLiveField);
-
-      setLatex(latex); // set initial latex value
+      setLatex(latex); // set and parse initial latex value
     } else {
-      mathLiveField.readOnly = true;
+      mathLiveField.value = latex;
     }
-
-    //@ts-ignore
-    mathLiveField.menuItems = getContextMenuItems(mathLiveField, editable);
   });
 
 
   function handleMathFieldUpdate(e?: Event) {
-    dispatch('update', {latex: mathLiveField.value});
+    update?.({latex: mathLiveField.value});
   } 
 
   function handleKeyDown(e: KeyboardEvent) {
@@ -97,11 +96,11 @@
           if ($activeMathField?.pendingNewLatex && !e.shiftKey && !e[$modifierKey]) {
               $activeMathField.setPendingLatex();
           } else if(e.shiftKey) {
-            dispatch('shiftEnter');
+            shiftEnter?.();
           } else if(e[$modifierKey]) {
-            dispatch('modifierEnter');
+            modifierEnter?.();
           } else {
-            dispatch('enter');
+            enter?.();
           }
         }
         break;
@@ -224,19 +223,31 @@
     ]
   }
 
-  // workaround needed for move cell inlineShortcuts bug (also impacts menuItems and keybindings)
-  $: if (editable && mathLiveField) {
-    mathLiveField.inlineShortcuts = INLINE_SHORTCUTS;
-    //@ts-ignore
-    mathLiveField.menuItems = getContextMenuItems(mathLiveField, editable);
-    mathLiveField.keybindings = getKeybindings(mathLiveField);
-  }
+   // workaround needed for move cell inlineShortcuts bug (also impacts menuItems and keybindings)
+  function setup() {
+    if (editable) {
+      mathLiveField.mathVirtualKeyboardPolicy = "manual";
+      mathLiveField.inlineShortcutTimeout = 0;
+      mathLiveField.smartSuperscript = false;
+      mathLiveField.inlineShortcuts = INLINE_SHORTCUTS;
+
+      mathLiveField.mathModeSpace = '\\:';
+
+      mathLiveField.keybindings = getKeybindings(mathLiveField);
+    } else {
+      mathLiveField.readOnly = true;
+    }
 
-  $: if (!editable && mathLiveField ) {
-    mathLiveField.value = latex;
     //@ts-ignore
     mathLiveField.menuItems = getContextMenuItems(mathLiveField, editable);
   }
+
+  $effect( () => {
+    if (!editable && mathLiveField ) {
+      mathLiveField.value = latex;
+    }
+  });
+
 </script>
 
 <style>
@@ -298,18 +309,15 @@
 
 </style>
 
-<!-- Suppressing some Svelte A11y warnings since math-field is not recognized as an interactive element -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-
 <math-field
   role="textbox math"
   min-font-scale=0.75
   max-matrix-cols={MAX_MATRIX_COLS}
-  on:focusin={handleFocusIn}
-  on:focusout={handleFocusOut}
-  on:input={handleMathFieldUpdate}
-  on:keydown|capture={handleKeyDown}
+  onfocusin={handleFocusIn}
+  onfocusout={handleFocusOut}
+  oninput={handleMathFieldUpdate}
+  onkeydowncapture={handleKeyDown}
+  onmount={setup}
   bind:this={mathLiveField}
   class:editable
   class:parsing-error={parsingError}

diff --git a/src/PiecewiseCell.svelte b/src/PiecewiseCell.svelte
@@ -156,9 +156,9 @@
   >
     <MathField
       editable={true}
-      on:update={(e) => parseLatex(e.detail.latex, piecewiseCell.parameterField)}
-      on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-      on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+      update={(e) => parseLatex(e.latex, piecewiseCell.parameterField)}
+      shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+      modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
       mathField={piecewiseCell.parameterField}
       parsingError={piecewiseCell.parameterField.parsingError}
       bind:this={piecewiseCell.parameterField.element}
@@ -189,10 +189,10 @@
       >
         <MathField
           editable={true}
-          on:update={(e) => parseLatex(e.detail.latex, mathField)}
-          on:enter={() => handleEnter(i)}
-          on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-          on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+          update={(e) => parseLatex(e.latex, mathField)}
+          enter={() => handleEnter(i)}
+          shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+          modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
           mathField={mathField}
           parsingError={mathField.parsingError}
           bind:this={mathField.element}
@@ -228,10 +228,10 @@
 
               <MathField
                 editable={true}
-                on:update={(e) => parseLatex(e.detail.latex, conditionMathField)}
-                on:enter={() => handleEnter(i)}
-                on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-                on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+                update={(e) => parseLatex(e.latex, conditionMathField)}
+                enter={() => handleEnter(i)}
+                shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+                modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
                 mathField={conditionMathField}
                 parsingError={conditionMathField.parsingError}
                 bind:this={conditionMathField.element}

diff --git a/src/PlotCell.svelte b/src/PlotCell.svelte
@@ -591,10 +591,10 @@
         >
           <MathField
             editable={true}
-            on:update={(e) => parseLatex(e.detail.latex, mathField)}
-            on:enter={() => handleEnter(i)}
-            on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-            on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+            update={(e) => parseLatex(e.latex, mathField)}
+            enter={() => handleEnter(i)}
+            shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+            modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
             mathField={mathField}
             parsingError={mathField.parsingError}
             bind:this={mathField.element}

diff --git a/src/SystemCell.svelte b/src/SystemCell.svelte
@@ -264,10 +264,10 @@
           > 
             <MathField
               editable={true}
-              on:update={(e) => parseLatex(e.detail.latex, mathField)}
-              on:enter={() => handleEnter(i)}
-              on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-              on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+              update={(e) => parseLatex(e.latex, mathField)}
+              enter={() => handleEnter(i)}
+              shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+              modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
               mathField={mathField}
               parsingError={mathField.parsingError}
               bind:this={mathField.element}
@@ -382,9 +382,9 @@
   >
     <MathField
       editable={true}
-      on:update={(e) => parseLatex(e.detail.latex, systemCell.parameterListField)}
-      on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-      on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+      update={(e) => parseLatex(e.latex, systemCell.parameterListField)}
+      shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+      modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
       mathField={systemCell.parameterListField}
       parsingError={systemCell.parameterListField.parsingError}
       bind:this={systemCell.parameterListField.element}

diff --git a/src/TableCell.svelte b/src/TableCell.svelte
@@ -305,9 +305,9 @@
       >
         <MathField
           editable={true}
-          on:update={(e) => parseLatex(e.detail.latex, j, mathField)}
-          on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-          on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+          update={(e) => parseLatex(e.latex, j, mathField)}
+          shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+          modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
           mathField={mathField}
           parsingError={mathField.parsingError}
           bind:this={mathField.element}
@@ -332,9 +332,9 @@
       >
         <MathField
           editable={true}
-          on:update={(e) => parseLatex(e.detail.latex, j)}
-          on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-          on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+          update={(e) => parseLatex(e.latex, j)}
+          shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+          modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
           mathField={mathField}
           parsingError={mathField.parsingError}
           bind:this={mathField.element}
@@ -393,10 +393,10 @@
           >
             <MathField
               editable={true}
-              on:update={(e) => parseLatex(e.detail.latex, j, mathField)}
-              on:enter={() => handleEnter(i)}
-              on:shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
-              on:modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
+              update={(e) => parseLatex(e.latex, j, mathField)}
+              enter={() => handleEnter(i)}
+              shiftEnter={() => dispatch("insertMathCellAfter", {index: index})}
+              modifierEnter={() => dispatch("insertInsertCellAfter", {index: index})}
               mathField={mathField}
               parsingError={mathField.parsingError}
               bind:this={mathField.element}