Use ResizeObserver to resize overlay if necessary

ts/editor/ImageHandle.svelte

@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ImageHandleFloat from "./ImageHandleFloat.svelte";
     import ImageHandleSizeSelect from "./ImageHandleSizeSelect.svelte";
 
-    import { getContext } from "svelte";
+    import { onDestroy, getContext } from "svelte";
     import { nightModeKey } from "components/context-keys";
 
     export let image: HTMLImageElement | null = null;
@@ -37,6 +37,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         updateSizes();
     }
 
+    const observer = new ResizeObserver(() => {
+        if (image) {
+            updateSizes();
+        }
+    });
+
+    function startObserving() {
+        observer.observe(container);
+    }
+
+    function stopObserving() {
+        observer.unobserve(container);
+    }
+
+    startObserving();
+
     function updateSizes() {
         const imageRect = image!.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
@@ -57,11 +73,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             return;
         }
 
+        stopObserving();
         (event.target as Element).setPointerCapture(event.pointerId);
     }
 
     function resize(event: PointerEvent): void {
-        if (!(event.target as Element).hasPointerCapture(event.pointerId)) {
+        const element = event.target! as Element;
+
+        if (!element.hasPointerCapture(event.pointerId)) {
             return;
         }
 
@@ -92,6 +111,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     const nightMode = getContext(nightModeKey);
+
+    onDestroy(() => observer.disconnect());
 </script>
 
 {#if image && imageRule}
@@ -99,7 +120,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         style="--top: {top}px; --left: {left}px; --width: {width}px; --height: {height}px;"
         class="image-handle-selection"
     >
-        <div class="image-handle-bg" on:dblclick={onDblclick} />
+        <div
+            class="image-handle-bg"
+            on:mousedown|preventDefault
+            on:dblclick={onDblclick}
+        />
         <div class="image-handle-buttons" class:is-rtl={isRtl}>
             <ImageHandleFloat {isRtl} bind:float={image.style.float} />
         </div>
@@ -119,20 +144,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {width}&times;{height} (Original: {naturalWidth}&times;{naturalHeight})
             </div>
         {/if}
-        <div class:nightMode class="image-handle-control image-handle-control-nw" />
+        <div
-        <div class:nightMode class="image-handle-control image-handle-control-ne" />
+            class:nightMode
+            class="image-handle-control image-handle-control-nw"
+            on:mousedown|preventDefault
+        />
+        <div
+            class:nightMode
+            class="image-handle-control image-handle-control-ne"
+            on:mousedown|preventDefault
+        />
         <div
             class:nightMode
             class:active
             class="image-handle-control image-handle-control-sw"
+            on:mousedown|preventDefault
             on:pointerdown={setPointerCapture}
+            on:pointerup={startObserving}
             on:pointermove={resize}
         />
         <div
             class:nightMode
             class:active
             class="image-handle-control image-handle-control-se"
+            on:mousedown|preventDefault
             on:pointerdown={setPointerCapture}
+            on:pointerup={startObserving}
             on:pointermove={resize}
         />
     </div>

ts/editor/editing-area.ts

@@ -58,6 +58,9 @@ export class EditingArea extends HTMLDivElement {
         }) as Codable;
         this.appendChild(this.codable);
 
+        this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+        this.onKey = this.onKey.bind(this);
         this.onPaste = this.onPaste.bind(this);
         this.showImageHandle = this.showImageHandle.bind(this);
     }
@@ -79,17 +82,11 @@ export class EditingArea extends HTMLDivElement {
     }
 
     connectedCallback(): void {
-        this.addEventListener("keydown", (event) => {
+        this.addEventListener("keydown", this.onKey);
-            this.resetImageHandle();
-            onKey(event);
-        });
         this.addEventListener("keyup", onKeyUp);
         this.addEventListener("input", onInput);
-        this.addEventListener("focusin", onFocus);
+        this.addEventListener("focusin", this.onFocus);
-        this.addEventListener("focusout", (event) => {
+        this.addEventListener("focusout", this.onBlur);
-            this.resetImageHandle();
-            onBlur(event);
-        });
         this.addEventListener("paste", this.onPaste);
         this.addEventListener("copy", onCutOrCopy);
         this.addEventListener("oncut", onCutOrCopy);
@@ -98,11 +95,11 @@ export class EditingArea extends HTMLDivElement {
     }
 
     disconnectedCallback(): void {
-        this.removeEventListener("keydown", onKey);
+        this.removeEventListener("keydown", this.onKey);
         this.removeEventListener("keyup", onKeyUp);
         this.removeEventListener("input", onInput);
-        this.removeEventListener("focusin", onFocus);
+        this.removeEventListener("focusin", this.onFocus);
-        this.removeEventListener("focusout", onBlur);
+        this.removeEventListener("focusout", this.onBlur);
         this.removeEventListener("paste", this.onPaste);
         this.removeEventListener("copy", onCutOrCopy);
         this.removeEventListener("oncut", onCutOrCopy);
@@ -164,11 +161,26 @@ export class EditingArea extends HTMLDivElement {
         this.activeInput.surroundSelection(before, after);
     }
 
+    onFocus(event: FocusEvent): void {
+        onFocus(event);
+    }
+
+    onBlur(event: FocusEvent): void {
+        this.resetImageHandle();
+        onBlur(event);
+    }
+
     onEnter(event: KeyboardEvent): void {
         this.activeInput.onEnter(event);
     }
 
+    onKey(event: KeyboardEvent): void {
+        this.resetImageHandle();
+        onKey(event);
+    }
+
     onPaste(event: ClipboardEvent): void {
+        this.resetImageHandle();
         this.activeInput.onPaste(event);
     }