From f25f5d146124c34deb9e54aa82a22320709331d5 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 13 Sep 2022 23:04:12 +0200
Subject: [PATCH] Move ImageOverlay to NoteEditor root

---
 ts/editor/ClozeButtons.svelte                 |  2 +-
 ts/editor/NoteEditor.svelte                   |  4 +-
 ts/editor/editor-toolbar/BlockButtons.svelte  |  2 +-
 .../editor-toolbar/CommandIconButton.svelte   |  2 +-
 ts/editor/editor-toolbar/LatexButton.svelte   |  2 +-
 .../editor-toolbar/TemplateButtons.svelte     | 12 ++---
 ts/editor/image-overlay/ImageOverlay.svelte   | 52 ++++++++++++++-----
 .../rich-text-input/RichTextInput.svelte      |  1 +
 8 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/ts/editor/ClozeButtons.svelte b/ts/editor/ClozeButtons.svelte
index f53c969e8..e2ebb872e 100644
--- a/ts/editor/ClozeButtons.svelte
+++ b/ts/editor/ClozeButtons.svelte
@@ -67,7 +67,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         });
     }
 
-    $: disabled = !editingInputIsRichText($focusedInput);
+    $: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
 
     const incrementKeyCombination = "Control+Shift+C";
     const sameKeyCombination = "Control+Alt+Shift+C";
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index 4b39aff33..fd9336a10 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -57,7 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Fields from "./Fields.svelte";
     import FrameElement from "./FrameElement.svelte";
     import { alertIcon } from "./icons";
-    import ImageHandle from "./image-overlay";
+    import ImageOverlay from "./image-overlay";
     import MathjaxOverlay from "./mathjax-overlay";
     import MathjaxElement from "./MathjaxElement.svelte";
     import Notification from "./Notification.svelte";
@@ -447,7 +447,6 @@ the AddCards dialog) should be implemented in the user of this component.
                                 }}
                                 bind:this={richTextInputs[index]}
                             >
-                                <ImageHandle maxWidth={250} maxHeight={125} />
                                 {#if insertSymbols}
                                     <SymbolsOverlay />
                                 {/if}
@@ -483,6 +482,7 @@ the AddCards dialog) should be implemented in the user of this component.
     </Fields>
 
     <MathjaxOverlay />
+    <ImageOverlay maxWidth={250} maxHeight={125} />
 
     <div class="note-editor-tag-editor">
         <TagEditor {tags} on:tagsupdate={saveTags} />
diff --git a/ts/editor/editor-toolbar/BlockButtons.svelte b/ts/editor/editor-toolbar/BlockButtons.svelte
index 8f0243b25..bfef4db6f 100644
--- a/ts/editor/editor-toolbar/BlockButtons.svelte
+++ b/ts/editor/editor-toolbar/BlockButtons.svelte
@@ -56,7 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const { focusedInput } = context.get();
 
-    $: disabled = !editingInputIsRichText($focusedInput);
+    $: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
 
     let showFloating = false;
 </script>
diff --git a/ts/editor/editor-toolbar/CommandIconButton.svelte b/ts/editor/editor-toolbar/CommandIconButton.svelte
index 744219856..f26332f0b 100644
--- a/ts/editor/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor/editor-toolbar/CommandIconButton.svelte
@@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         execCommand(key);
     }
 
-    $: disabled = !editingInputIsRichText($focusedInput);
+    $: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
 </script>
 
 {#if withoutState}
diff --git a/ts/editor/editor-toolbar/LatexButton.svelte b/ts/editor/editor-toolbar/LatexButton.svelte
index 7f6335233..f88163494 100644
--- a/ts/editor/editor-toolbar/LatexButton.svelte
+++ b/ts/editor/editor-toolbar/LatexButton.svelte
@@ -66,7 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         [onLatexMathEnv, "Control+T, M", tr.editingLatexMathEnv()],
     ];
 
-    $: disabled = !editingInputIsRichText($focusedInput);
+    $: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
 
     let showFloating = false;
 </script>
diff --git a/ts/editor/editor-toolbar/TemplateButtons.svelte b/ts/editor/editor-toolbar/TemplateButtons.svelte
index 528b9368c..24326d26f 100644
--- a/ts/editor/editor-toolbar/TemplateButtons.svelte
+++ b/ts/editor/editor-toolbar/TemplateButtons.svelte
@@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { getPlatformString } from "../../lib/shortcuts";
     import { context } from "../NoteEditor.svelte";
     import { setFormat } from "../old-editor-adapter";
-    import { editingInputIsRichText } from "../rich-text-input";
+    import { editingInputIsRichText, RichTextInputAPI } from "../rich-text-input";
     import { micIcon, paperclipIcon } from "./icons";
     import LatexButton from "./LatexButton.svelte";
 
@@ -35,12 +35,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     function attachMediaOnFocus(): void {
-        if (!editingInputIsRichText($focusedInput)) {
+        if (disabled) {
             return;
         }
 
         [mediaPromise, resolve] = promiseWithResolver<string>();
-        $focusedInput.editable.focusHandler.focus.on(
+        ($focusedInput as RichTextInputAPI).editable.focusHandler.focus.on(
             async () => setFormat("inserthtml", await mediaPromise),
             { once: true },
         );
@@ -55,12 +55,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const recordCombination = "F5";
 
     function attachRecordingOnFocus(): void {
-        if (!editingInputIsRichText($focusedInput)) {
+        if (disabled) {
             return;
         }
 
         [mediaPromise, resolve] = promiseWithResolver<string>();
-        $focusedInput.editable.focusHandler.focus.on(
+        ($focusedInput as RichTextInputAPI).editable.focusHandler.focus.on(
             async () => setFormat("inserthtml", await mediaPromise),
             { once: true },
         );
@@ -68,7 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         bridgeCommand("record");
     }
 
-    $: disabled = !editingInputIsRichText($focusedInput);
+    $: disabled = !$focusedInput || !editingInputIsRichText($focusedInput);
 
     export let api = {};
 </script>
diff --git a/ts/editor/image-overlay/ImageOverlay.svelte b/ts/editor/image-overlay/ImageOverlay.svelte
index 901ec3b93..39916dbdf 100644
--- a/ts/editor/image-overlay/ImageOverlay.svelte
+++ b/ts/editor/image-overlay/ImageOverlay.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, tick } from "svelte";
+    import { tick } from "svelte";
 
     import ButtonToolbar from "../../components/ButtonToolbar.svelte";
     import Popover from "../../components/Popover.svelte";
@@ -12,17 +12,52 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { on } from "../../lib/events";
     import * as tr from "../../lib/ftl";
     import { removeStyleProperties } from "../../lib/styling";
+    import type { Callback } from "../../lib/typing";
+    import type { EditingInputAPI } from "../EditingArea.svelte";
     import HandleBackground from "../HandleBackground.svelte";
     import HandleControl from "../HandleControl.svelte";
     import HandleLabel from "../HandleLabel.svelte";
-    import { context } from "../rich-text-input";
+    import { context } from "../NoteEditor.svelte";
+    import type { RichTextInputAPI } from "../rich-text-input";
+    import {
+        editingInputIsRichText,
+        lifecycle as richTextLifecycle,
+    } from "../rich-text-input";
     import FloatButtons from "./FloatButtons.svelte";
     import SizeSelect from "./SizeSelect.svelte";
 
     export let maxWidth: number;
     export let maxHeight: number;
 
-    const { element } = context.get();
+    richTextLifecycle.onMount(({ element }: RichTextInputAPI): void => {
+        (async () => {
+            const container = await element;
+
+            container.style.setProperty("--editor-shrink-max-width", `${maxWidth}px`);
+            container.style.setProperty("--editor-shrink-max-height", `${maxHeight}px`);
+        })();
+    });
+
+    const { focusedInput } = context.get();
+
+    let cleanup: Callback;
+    let richTextInput: RichTextInputAPI | null = null;
+
+    async function initialize(input: EditingInputAPI | null): Promise<void> {
+        cleanup?.();
+
+        if (!input || !editingInputIsRichText(input)) {
+            richTextInput = null;
+            return;
+        }
+
+        const container = await input.element;
+
+        cleanup = on(container, "click", maybeShowHandle);
+        richTextInput = input;
+    }
+
+    $: initialize($focusedInput);
 
     let activeImage: HTMLImageElement | null = null;
 
@@ -101,7 +136,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: observes = Boolean(activeImage);
 
     async function toggleResizeObserver(observes: boolean) {
-        const container = await element;
+        const container = await richTextInput!.element;
 
         if (observes) {
             resizeObserver.observe(container);
@@ -193,15 +228,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         activeImage!.removeAttribute("width");
     }
 
-    onMount(async () => {
-        const container = await element;
-
-        container.style.setProperty("--editor-shrink-max-width", `${maxWidth}px`);
-        container.style.setProperty("--editor-shrink-max-height", `${maxHeight}px`);
-
-        return on(container, "click", maybeShowHandle);
-    });
-
     let shrinkingDisabled: boolean;
     $: shrinkingDisabled =
         Number(actualWidth) <= maxWidth && Number(actualHeight) <= maxHeight;
diff --git a/ts/editor/rich-text-input/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte
index 69e848ffd..0196b4258 100644
--- a/ts/editor/rich-text-input/RichTextInput.svelte
+++ b/ts/editor/rich-text-input/RichTextInput.svelte
@@ -54,6 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         context,
         editingInputIsRichText,
         globalInputHandler as inputHandler,
+        lifecycle,
         surrounder,
     };
 </script>