Generalize ChangeTimer and use it in Mathjax editor

ts/editor/MathjaxHandleEditor.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import { onMount, createEventDispatcher } from "svelte";
+    import { ChangeTimer } from "./change-timer";
 
     import * as CodeMirror from "codemirror/lib/codemirror";
     import "codemirror/mode/stex/stex";
@@ -32,9 +33,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     };
 
     let codeMirror: CodeMirror;
+    const changeTimer = new ChangeTimer();
 
     function onInput() {
-        dispatch("update", { mathjax: codeMirror.getValue() });
+        changeTimer.schedule(
+            () => dispatch("update", { mathjax: codeMirror.getValue() }),
+            400
+        );
     }
 
     function openCodemirror(textarea: HTMLTextAreaElement): void {

ts/editor/change-timer.ts

@@ -1,47 +1,18 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import type { EditingArea } from "./editing-area";
+export class ChangeTimer {
+    private value: number | null = null;
 
-import { getCurrentField } from "./helpers";
+    schedule(action: () => void, delay: number) {
-import { bridgeCommand } from "./lib";
+        this.clear();
-import { getNoteId } from "./note-id";
+        this.value = setTimeout(action, delay);
-
-let changeTimer: number | null = null;
-
-export function triggerChangeTimer(currentField: EditingArea): void {
-    clearChangeTimer();
-    changeTimer = setTimeout(() => saveField(currentField, "key"), 600);
     }
 
-function clearChangeTimer(): void {
+    clear() {
-    if (changeTimer) {
+        if (this.value) {
-        clearTimeout(changeTimer);
+            clearTimeout(this.value);
-        changeTimer = null;
+            this.value = null;
         }
     }
-
-export function saveField(currentField: EditingArea, type: "blur" | "key"): void {
-    clearChangeTimer();
-    const command = `${type}:${currentField.ord}:${getNoteId()}:${
-        currentField.fieldHTML
-    }`;
-    bridgeCommand(command);
-}
-
-export function saveNow(keepFocus: boolean): void {
-    const currentField = getCurrentField();
-
-    if (!currentField) {
-        return;
-    }
-
-    clearChangeTimer();
-
-    if (keepFocus) {
-        saveField(currentField, "key");
-    } else {
-        // triggers onBlur, which saves
-        currentField.blur();
-    }
 }

ts/editor/focus-handlers.ts

@@ -8,7 +8,7 @@
 import { fieldFocused } from "./toolbar";
 import type { EditingArea } from "./editing-area";
 
-import { saveField } from "./change-timer";
+import { saveField } from "./saving";
 import { bridgeCommand } from "./lib";
 import { getCurrentField } from "./helpers";
 

ts/editor/index.ts

@@ -18,7 +18,7 @@ import { isApplePlatform } from "lib/platform";
 import { registerShortcut } from "lib/shortcuts";
 import { bridgeCommand } from "lib/bridgecommand";
 import { updateActiveButtons } from "./toolbar";
-import { saveField } from "./change-timer";
+import { saveField } from "./saving";
 
 import "./fields.css";
 
@@ -36,7 +36,7 @@ import { initTagEditor } from "./tag-editor";
 import { getCurrentField } from "./helpers";
 
 export { setNoteId, getNoteId } from "./note-id";
-export { saveNow } from "./change-timer";
+export { saveNow } from "./saving";
 export { wrap, wrapIntoText } from "./wrap";
 export { editorToolbar } from "./toolbar";
 export { activateStickyShortcuts } from "./label-container";

ts/editor/input-handlers.ts

@@ -8,7 +8,7 @@
 import { nodeIsElement } from "lib/dom";
 import { updateActiveButtons } from "./toolbar";
 import { EditingArea } from "./editing-area";
-import { triggerChangeTimer } from "./change-timer";
+import { triggerChangeTimer } from "./saving";
 import { registerShortcut } from "lib/shortcuts";
 
 export function onInput(event: Event): void {

ts/editor/saving.ts

@@ -0,0 +1,37 @@
+import type { EditingArea } from "./editing-area";
+
+import { ChangeTimer } from "./change-timer";
+import { getCurrentField } from "./helpers";
+import { bridgeCommand } from "./lib";
+import { getNoteId } from "./note-id";
+
+const saveFieldTimer = new ChangeTimer();
+
+export function triggerChangeTimer(currentField: EditingArea): void {
+    saveFieldTimer.schedule(() => saveField(currentField, "key"), 600);
+}
+
+export function saveField(currentField: EditingArea, type: "blur" | "key"): void {
+    saveFieldTimer.clear();
+    const command = `${type}:${currentField.ord}:${getNoteId()}:${
+        currentField.fieldHTML
+    }`;
+    bridgeCommand(command);
+}
+
+export function saveNow(keepFocus: boolean): void {
+    const currentField = getCurrentField();
+
+    if (!currentField) {
+        return;
+    }
+
+    saveFieldTimer.clear();
+
+    if (keepFocus) {
+        saveField(currentField, "key");
+    } else {
+        // triggers onBlur, which saves
+        currentField.blur();
+    }
+}