Always correctly update MathjaxHandle position

ts/editable/Mathjax.svelte

@@ -24,10 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: {
         encoded = encodeURIComponent(converted);
-
+        setTimeout(() => (imageHeight = image.getBoundingClientRect().height));
-        setTimeout(() => {
-            imageHeight = image.getBoundingClientRect().height;
-        });
     }
 
     let image: HTMLImageElement;

ts/editor/HandleBackground.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { onMount, createEventDispatcher } from "svelte";
 
-    export let title: string | undefined = undefined;
+    export let tooltip: string | undefined = undefined;
 
     let background: HTMLDivElement;
     const dispatch = createEventDispatcher();
@@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div
     bind:this={background}
-    {title}
+    title={tooltip}
     on:mousedown|preventDefault
     on:click|stopPropagation
     on:dblclick

ts/editor/HandleSelection.svelte

@@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let width: number;
     let height: number;
 
-    export function updateSelection(_div: HTMLDivElement): void {
+    function setSelection(_selection?: HTMLDivElement): void {
         const containerRect = container.getBoundingClientRect();
         const imageRect = image!.getBoundingClientRect();
 
@@ -28,6 +28,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         height = image!.clientHeight;
     }
 
+    export function updateSelection(): Promise<void> {
+        let updateResolve: () => void;
+        const afterUpdate: Promise<void> = new Promise((resolve) => {
+            updateResolve = resolve;
+        });
+
+        setSelection();
+        setTimeout(() => updateResolve());
+
+        return afterUpdate;
+    }
+
     const dispatch = createEventDispatcher();
     let selection: HTMLDivElement;
 
@@ -36,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div
     bind:this={selection}
-    use:updateSelection
+    use:setSelection
     on:click={(event) =>
         /* prevent triggering Bootstrap dropdown */ event.stopImmediatePropagation()}
     style="--left: {left}px; --top: {top}px; --width: {width}px; --height: {height}px; --offsetX: {offsetX}px; --offsetY: {offsetY}px;"

ts/editor/ImageHandle.svelte

@@ -53,10 +53,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    let updateSelection: () => void;
+    let updateSelection: () => Promise<void>;
 
     async function updateSizesWithDimensions() {
-        updateSelection();
+        await updateSelection();
         updateDimensions();
     }
 

ts/editor/MathjaxHandle.svelte

@@ -20,51 +20,57 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let container: HTMLElement;
     export let isRtl: boolean;
 
-    const resizeObserver = new ResizeObserver(() => {
+    let dropdownApi: any;
+
+    const resizeObserver = new ResizeObserver(async () => {
         if (activeImage) {
-            updateSelection();
+            await updateSelection();
+            dropdownApi.update();
         }
     });
 
     resizeObserver.observe(container);
 
-    let updateSelection: () => void;
+    let updateSelection: () => Promise<void>;
-    let dropdownApi: any;
+    let errorMessage: string;
-    let title: string;
 
     function getComponent(image: HTMLImageElement): HTMLElement {
         return image.closest("anki-mathjax")! as HTMLElement;
     }
 
-    function scheduleDropdownUpdate() {
+    function onEditorUpdate(event: CustomEvent) {
-        setTimeout(async () => {
-            await tick();
-            dropdownApi.update();
-        });
-    }
-
-    async function onEditorUpdate(event: CustomEvent) {
         getComponent(activeImage!).dataset.mathjax = event.detail.mathjax;
 
-        setTimeout(() => {
+        let selectionResolve: (value: void) => void;
-            updateSelection();
+        const afterSelectionUpdate = new Promise((resolve) => {
-            title = activeImage!.title;
+            selectionResolve = resolve;
-            scheduleDropdownUpdate();
         });
+
+        setTimeout(async () => {
+            errorMessage = activeImage!.title;
+            await updateSelection();
+            selectionResolve();
+        });
+
+        return afterSelectionUpdate;
     }
 </script>
 
-<WithDropdown drop="down" autoOpen={true} autoClose={false} let:createDropdown>
+<WithDropdown
+    drop="down"
+    autoOpen={true}
+    autoClose={false}
+    let:createDropdown
+    let:dropdownObject
+>
     {#if activeImage}
         <HandleSelection
             image={activeImage}
             {container}
-            offsetX={2}
-            offsetY={2}
             bind:updateSelection
             on:mount={(event) => (dropdownApi = createDropdown(event.detail.selection))}
         >
-            <HandleBackground {title} />
+            <HandleBackground tooltip={errorMessage} />
 
             <HandleControl offsetX={1} offsetY={1} />
         </HandleSelection>
@@ -72,7 +78,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <DropdownMenu>
             <MathjaxHandleEditor
                 initialValue={getComponent(activeImage).dataset.mathjax ?? ""}
-                on:update={onEditorUpdate}
+                on:update={async (event) => {
+                    await onEditorUpdate(event);
+                    dropdownObject.update();
+                }}
             />
             <div class="margin-x">
                 <ButtonToolbar>
@@ -80,10 +89,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         <MathjaxHandleInlineBlock
                             {activeImage}
                             {isRtl}
-                            on:click={() => {
+                            on:click={updateSelection}
-                                updateSelection();
-                                scheduleDropdownUpdate();
-                            }}
                         />
                     </Item>
                 </ButtonToolbar>