From 06d1ec6af41cd8f05b6c2205fb6116cc3a15ff89 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 17 Sep 2021 20:54:37 +0200
Subject: [PATCH] Fix missizing of HandleSelection when first moving from empty
 to Mathjax

---
 ts/editable/Mathjax.svelte     | 18 +++++++++++++-----
 ts/editor/MathjaxHandle.svelte | 19 +++++++++++--------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/ts/editable/Mathjax.svelte b/ts/editable/Mathjax.svelte
index 3642ef27c..ccf442f12 100644
--- a/ts/editable/Mathjax.svelte
+++ b/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);
-        setTimeout(() => (imageHeight = image.getBoundingClientRect().height));
-    }
+    $: encoded = encodeURIComponent(converted);
 
     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
diff --git a/ts/editor/MathjaxHandle.svelte b/ts/editor/MathjaxHandle.svelte
index a002981a9..cb76b8c70 100644
--- a/ts/editor/MathjaxHandle.svelte
+++ b/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) {
-        getComponent(activeImage!).dataset.mathjax = event.detail.mathjax;
+    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) => {
+        const afterSelectionUpdate = new Promise((resolve: (value: void) => void) => {
             selectionResolve = resolve;
         });
 
-        setTimeout(async () => {
-            errorMessage = activeImage!.title;
-            await updateSelection();
-            selectionResolve();
-        });
+        const imageResize = onImageResize(selectionResolve!);
+
+        activeImage!.addEventListener("resize", imageResize, { once: true });
+        /* this updates the image in Mathjax.svelte */
+        getComponent(activeImage!).dataset.mathjax = event.detail.mathjax;
 
         return afterSelectionUpdate;
     }