Merge pull request #1376 from hgiesel/mathjaxcleanupv2

Mathjax Cleanup

ts/editable/Mathjax.svelte

@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, getContext } from "svelte";
+    import { onMount, onDestroy, getContext, tick } from "svelte";
     import { nightModeKey } from "components/context-keys";
     import { convertMathjax } from "./mathjax";
 
@@ -22,18 +22,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let encoded: string;
     let imageHeight: number;
 
-    $: {
+    $: encoded = encodeURIComponent(converted);
-        encoded = encodeURIComponent(converted);
-        setTimeout(() => (imageHeight = image.getBoundingClientRect().height));
-    }
 
     let image: HTMLImageElement;
 
+    const observer = new ResizeObserver(async () => {
+        imageHeight = image.getBoundingClientRect().height;
+        await tick();
+        setTimeout(() => image.dispatchEvent(new Event("resize")));
+    });
+
     onMount(() => {
+        observer.observe(image);
         if (autofocus) {
             image.click();
         }
     });
+
+    onDestroy(() => {
+        observer.unobserve(image);
+        observer.disconnect();
+    });
 </script>
 
 <img

ts/editable/mathjax.ts

@@ -1,6 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+/* eslint
+@typescript-eslint/no-explicit-any: "off",
+ */
+
 import { mathIcon } from "./icons";
 
 const parser = new DOMParser();
@@ -36,19 +40,25 @@ export function convertMathjax(
         return getEmptyIcon(style);
     }
 
-    const output = globalThis.MathJax.tex2svg(input);
+    let output: Element;
-    const svg = output.children[0];
+    try {
+        output = globalThis.MathJax.tex2svg(input);
+    } catch (e) {
+        return ["Mathjax Error", String(e)];
+    }
 
-    if (svg.viewBox.baseVal.height === 16) {
+    const svg = output.children[0] as SVGElement;
+
+    if ((svg as any).viewBox.baseVal.height === 16) {
         return getEmptyIcon(style);
     }
 
     let title = "";
 
     if (svg.innerHTML.includes("data-mjx-error")) {
-        svg.querySelector("rect").setAttribute("fill", "yellow");
+        svg.querySelector("rect")?.setAttribute("fill", "yellow");
-        svg.querySelector("text").setAttribute("color", "red");
+        svg.querySelector("text")?.setAttribute("color", "red");
-        title = svg.querySelector("title").innerHTML;
+        title = svg.querySelector("title")?.innerHTML ?? "";
     } else {
         svg.insertBefore(style, svg.children[0]);
     }

ts/editor/MathjaxHandle.svelte

@@ -20,6 +20,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let dropdownApi: any;
 
+    let removeEventListener: () => void = () => {
+        /* noop */
+    };
+
+    function onImageResize(): void {
+        if (activeImage) {
+            errorMessage = activeImage.title;
+            updateSelection().then(() => dropdownApi.update());
+        }
+    }
+
+    $: if (activeImage) {
+        activeImage.addEventListener("resize", onImageResize);
+
+        const lastImage = activeImage;
+        removeEventListener = () =>
+            lastImage.removeEventListener("resize", onImageResize);
+    } else {
+        removeEventListener();
+    }
+
     const resizeObserver = new ResizeObserver(async () => {
         if (activeImage) {
             await updateSelection();
@@ -36,21 +57,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return image.closest("anki-mathjax")! as HTMLElement;
     }
 
-    function onEditorUpdate(event: CustomEvent) {
+    function onEditorUpdate(event: CustomEvent): void {
+        /* this updates the image in Mathjax.svelte */
         getComponent(activeImage!).dataset.mathjax = event.detail.mathjax;
-
-        let selectionResolve: (value: void) => void;
-        const afterSelectionUpdate = new Promise((resolve) => {
-            selectionResolve = resolve;
-        });
-
-        setTimeout(async () => {
-            errorMessage = activeImage!.title;
-            await updateSelection();
-            selectionResolve();
-        });
-
-        return afterSelectionUpdate;
     }
 </script>
 
@@ -60,7 +69,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     autoClose={false}
     distance={4}
     let:createDropdown
-    let:dropdownObject
 >
     {#if activeImage}
         <HandleSelection
@@ -77,10 +85,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <DropdownMenu>
             <MathjaxHandleEditor
                 initialValue={getComponent(activeImage).dataset.mathjax ?? ""}
-                on:update={async (event) => {
+                on:update={onEditorUpdate}
-                    await onEditorUpdate(event);
-                    dropdownObject.update();
-                }}
             />
             <div class="margin-x">
                 <ButtonToolbar>

ts/editor/MathjaxHandleEditor.svelte

@@ -16,6 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let codeMirror: CodeMirror.EditorFromTextArea;
     const changeTimer = new ChangeTimer();
+    const dispatch = createEventDispatcher();
 
     function onInput() {
         changeTimer.schedule(
@@ -24,12 +25,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         );
     }
 
+    function onBlur() {
+        changeTimer.fireImmediately();
+    }
+
     function openCodemirror(textarea: HTMLTextAreaElement): void {
         codeMirror = CodeMirror.fromTextArea(textarea, codeMirrorOptions);
         codeMirror.on("change", onInput);
+        codeMirror.on("blur", onBlur);
     }
 
-    const dispatch = createEventDispatcher();
     let textarea: HTMLTextAreaElement;
 
     onMount(() => {

ts/editor/change-timer.ts

@@ -3,10 +3,16 @@
 
 export class ChangeTimer {
     private value: number | null = null;
+    private action: (() => void) | null = null;
+
+    constructor() {
+        this.fireImmediately = this.fireImmediately.bind(this);
+    }
 
     schedule(action: () => void, delay: number): void {
         this.clear();
-        this.value = setTimeout(action, delay);
+        this.action = action;
+        this.value = setTimeout(this.fireImmediately, delay);
     }
 
     clear(): void {
@@ -15,4 +21,13 @@ export class ChangeTimer {
             this.value = null;
         }
     }
+
+    fireImmediately(): void {
+        if (this.action) {
+            this.action();
+            this.action = null;
+        }
+
+        this.clear();
+    }
 }

ts/editor/saving.ts

@@ -29,12 +29,11 @@ export function saveNow(keepFocus: boolean): void {
         return;
     }
 
-    saveFieldTimer.clear();
-
     if (keepFocus) {
-        saveField(currentField, "key");
+        saveFieldTimer.fireImmediately();
     } else {
         // triggers onBlur, which saves
+        saveFieldTimer.clear();
         currentField.blur();
     }
 }

ts/lib/wrap.ts

@@ -38,7 +38,12 @@ export function wrapInternal(
         document.execCommand("inserthtml", false, new_);
     }
 
-    if (!span.innerHTML) {
+    if (
+        !span.innerHTML &&
+        /* ugly solution: treat <anki-mathjax> differently than other wraps */ !front.includes(
+            "<anki-mathjax"
+        )
+    ) {
         moveCursorPastPostfix(selection, back);
     }
 }