Move Symbols Overlay to NoteEditor root

ts/editor/NoteEditor.svelte

@@ -447,9 +447,6 @@ the AddCards dialog) should be implemented in the user of this component.
                                 }}
                                 bind:this={richTextInputs[index]}
                             >
-                                {#if insertSymbols}
-                                    <SymbolsOverlay />
-                                {/if}
                                 <FieldDescription>
                                     {field.description}
                                 </FieldDescription>
@@ -483,6 +480,9 @@ the AddCards dialog) should be implemented in the user of this component.
 
     <MathjaxOverlay />
     <ImageOverlay maxWidth={250} maxHeight={125} />
+    {#if insertSymbols}
+        <SymbolsOverlay />
+    {/if}
 
     <div class="note-editor-tag-editor">
         <TagEditor {tags} on:tagsupdate={saveTags} />

ts/editor/symbols-overlay/SymbolsOverlay.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 { getContext, onMount } from "svelte";
+    import { getContext } from "svelte";
     import type { Readable } from "svelte/store";
 
     import DropdownItem from "../../components/DropdownItem.svelte";
@@ -15,7 +15,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Callback } from "../../lib/typing";
     import { singleCallback } from "../../lib/typing";
     import type { SpecialKeyParams } from "../../sveltelib/input-handler";
-    import { context } from "../rich-text-input";
+    import type { EditingInputAPI } from "../EditingArea.svelte";
+    import { context } from "../NoteEditor.svelte";
+    import {
+        editingInputIsRichText,
+        RichTextInputAPI,
+    } from "../rich-text-input/RichTextInput.svelte";
     import { findSymbols, getAutoInsertSymbol, getExactSymbol } from "./symbols-table";
     import type {
         SymbolsEntry as SymbolsEntryType,
@@ -29,19 +34,39 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const whitespaceCharacters = [" ", "\u00a0"];
 
-    const { editable, inputHandler } = context.get();
+    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;
+        }
+
+        cleanup = input.inputHandler.beforeInput.on(
+            async (input: { event: Event }): Promise<void> => onBeforeInput(input),
+        );
+        richTextInput = input;
+    }
+
+    $: initialize($focusedInput);
+
     const fontFamily = getContext<Readable<string>>(fontFamilyKey);
 
     let foundSymbols: SymbolsTable = [];
 
     let referenceRange: Range | undefined = undefined;
     let activeItem = 0;
-    let cleanup: Callback;
+    let cleanupReferenceRange: Callback;
 
     function unsetReferenceRange() {
         referenceRange = undefined;
         activeItem = 0;
-        cleanup?.();
+        cleanupReferenceRange?.();
     }
 
     function replaceText(selection: Selection, text: Text, nodes: Node[]): void {
@@ -90,7 +115,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     replacementLength,
                 );
 
-                inputHandler.insertText.on(
+                richTextInput!.inputHandler.insertText.on(
                     async ({ text }) => {
                         replaceText(
                             selection,
@@ -217,13 +242,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
             if (foundSymbols.length > 0) {
                 referenceRange = currentRange;
-                cleanup = singleCallback(
+                cleanupReferenceRange = singleCallback(
-                    editable.focusHandler.blur.on(async () => unsetReferenceRange(), {
+                    richTextInput!.editable.focusHandler.blur.on(
+                        async () => unsetReferenceRange(),
+                        {
                             once: true,
-                    }),
+                        },
-                    inputHandler.pointerDown.on(async () => unsetReferenceRange()),
+                    ),
-                    inputHandler.specialKey.on(async (input: SpecialKeyParams) =>
+                    richTextInput!.inputHandler.pointerDown.on(async () =>
-                        onSpecialKey(input),
+                        unsetReferenceRange(),
+                    ),
+                    richTextInput!.inputHandler.specialKey.on(
+                        async (input: SpecialKeyParams) => onSpecialKey(input),
                     ),
                 );
             }
@@ -292,7 +322,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             replacementLength,
         );
 
-        inputHandler.insertText.on(
+        richTextInput!.inputHandler.insertText.on(
             async ({ text }) =>
                 replaceText(selection, text, symbolsEntryToReplacement(symbolEntry)),
             {
@@ -314,7 +344,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         // We have to wait for afterInput to update the symbols, because we also
         // want to update in the case of a deletion
-        inputHandler.afterInput.on(
+        richTextInput!.inputHandler.afterInput.on(
             async (): Promise<void> => {
                 const currentRange = getRange(selection)!;
                 const query = findValidSearchQuery(selection, currentRange);
@@ -344,12 +374,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             maybeShowOverlay(selection, event);
         }
     }
-
-    onMount(() =>
-        inputHandler.beforeInput.on(
-            async (input: { event: Event }): Promise<void> => onBeforeInput(input),
-        ),
-    );
 </script>
 
 <div class="symbols-overlay">