Fix missizing of HandleSelection when first moving from empty to Mathjax

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 } from "svelte";
     import { nightModeKey } from "components/context-keys";
     import { convertMathjax } from "./mathjax";
 
@@ -22,18 +22,26 @@ 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(() => {
+        imageHeight = image.getBoundingClientRect().height;
+        setTimeout(() => image.dispatchEvent(new Event("resize")));
+    });
+
     onMount(() => {
+        observer.observe(image);
         if (autofocus) {
             image.click();
         }
     });
+
+    onDestroy(() => {
+        observer.unobserve(image);
+        observer.disconnect();
+    });
 </script>
 
 <img

ts/editor/MathjaxHandle.svelte

@@ -36,19 +36,22 @@ 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) {
+    const onImageResize = (resolve: () => void) => (): void => {
-        getComponent(activeImage!).dataset.mathjax = event.detail.mathjax;
+        errorMessage = activeImage!.title;
+        updateSelection().then(resolve);
+    };
 
+    function onEditorUpdate(event: CustomEvent): Promise<void> {
         let selectionResolve: (value: void) => void;
-        const afterSelectionUpdate = new Promise((resolve) => {
+        const afterSelectionUpdate = new Promise((resolve: (value: void) => void) => {
             selectionResolve = resolve;
         });
 
-        setTimeout(async () => {
+        const imageResize = onImageResize(selectionResolve!);
-            errorMessage = activeImage!.title;
+
-            await updateSelection();
+        activeImage!.addEventListener("resize", imageResize, { once: true });
-            selectionResolve();
+        /* this updates the image in Mathjax.svelte */
-        });
+        getComponent(activeImage!).dataset.mathjax = event.detail.mathjax;
 
         return afterSelectionUpdate;
     }