From b06b5e9151c9757bcc25727cd06a5556c20d0699 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 7 Aug 2021 01:59:28 +0200
Subject: [PATCH] Generalize ChangeTimer and use it in Mathjax editor

---
 ts/editor/MathjaxHandleEditor.svelte |  7 +++-
 ts/editor/change-timer.ts            | 49 ++++++----------------------
 ts/editor/focus-handlers.ts          |  2 +-
 ts/editor/index.ts                   |  4 +--
 ts/editor/input-handlers.ts          |  2 +-
 ts/editor/saving.ts                  | 37 +++++++++++++++++++++
 6 files changed, 57 insertions(+), 44 deletions(-)
 create mode 100644 ts/editor/saving.ts

diff --git a/ts/editor/MathjaxHandleEditor.svelte b/ts/editor/MathjaxHandleEditor.svelte
index e1489a393..1068eaa39 100644
--- a/ts/editor/MathjaxHandleEditor.svelte
+++ b/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 {
diff --git a/ts/editor/change-timer.ts b/ts/editor/change-timer.ts
index 033e9f9ed..cc0753a46 100644
--- a/ts/editor/change-timer.ts
+++ b/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";
-import { bridgeCommand } from "./lib";
-import { getNoteId } from "./note-id";
-
-let changeTimer: number | null = null;
-
-export function triggerChangeTimer(currentField: EditingArea): void {
-    clearChangeTimer();
-    changeTimer = setTimeout(() => saveField(currentField, "key"), 600);
-}
-
-function clearChangeTimer(): void {
-    if (changeTimer) {
-        clearTimeout(changeTimer);
-        changeTimer = 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;
+    schedule(action: () => void, delay: number) {
+        this.clear();
+        this.value = setTimeout(action, delay);
     }
 
-    clearChangeTimer();
-
-    if (keepFocus) {
-        saveField(currentField, "key");
-    } else {
-        // triggers onBlur, which saves
-        currentField.blur();
+    clear() {
+        if (this.value) {
+            clearTimeout(this.value);
+            this.value = null;
+        }
     }
 }
diff --git a/ts/editor/focus-handlers.ts b/ts/editor/focus-handlers.ts
index 109dfbdfb..42ac55c65 100644
--- a/ts/editor/focus-handlers.ts
+++ b/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";
 
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index c183cfe48..ee6177cfa 100644
--- a/ts/editor/index.ts
+++ b/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";
diff --git a/ts/editor/input-handlers.ts b/ts/editor/input-handlers.ts
index 17bbf725a..55593fa62 100644
--- a/ts/editor/input-handlers.ts
+++ b/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 {
diff --git a/ts/editor/saving.ts b/ts/editor/saving.ts
new file mode 100644
index 000000000..0b50b7edb
--- /dev/null
+++ b/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();
+    }
+}