Make HandleSelection perfectly size when first activating

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, onDestroy, getContext } from "svelte";
+    import { onMount, onDestroy, getContext, tick } from "svelte";
     import { nightModeKey } from "components/context-keys";
     import { convertMathjax } from "./mathjax";
 
@@ -26,8 +26,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let image: HTMLImageElement;
 
-    const observer = new ResizeObserver(() => {
+    const observer = new ResizeObserver(async () => {
         imageHeight = image.getBoundingClientRect().height;
+        await tick();
         setTimeout(() => image.dispatchEvent(new Event("resize")));
     });
 

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,24 +57,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return image.closest("anki-mathjax")! as HTMLElement;
     }
 
-    const onImageResize = (resolve: () => void) => (): void => {
-        errorMessage = activeImage!.title;
-        updateSelection().then(resolve);
-    };
-
-    function onEditorUpdate(event: CustomEvent): Promise<void> {
-        let selectionResolve: (value: void) => void;
-        const afterSelectionUpdate = new Promise((resolve: (value: void) => void) => {
-            selectionResolve = resolve;
-        });
-
-        const imageResize = onImageResize(selectionResolve!);
-
-        activeImage!.addEventListener("resize", imageResize, { once: true });
+    function onEditorUpdate(event: CustomEvent): void {
         /* this updates the image in Mathjax.svelte */
         getComponent(activeImage!).dataset.mathjax = event.detail.mathjax;
-
-        return afterSelectionUpdate;
     }
 </script>
 
@@ -63,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
@@ -80,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) => {
-                    await onEditorUpdate(event);
-                    dropdownObject.update();
-                }}
+                on:update={onEditorUpdate}
             />
             <div class="margin-x">
                 <ButtonToolbar>