Move screen-specific functionality back NoteEditor

qt/aqt/browser/browser.py

@@ -601,6 +601,7 @@ class Browser(QMainWindow):
 
         def add_preview_button(editor: Editor) -> None:
             editor._links["preview"] = lambda _editor: self.onTogglePreview()
+            gui_hooks.editor_did_init.remove(add_preview_button)
 
         gui_hooks.editor_did_init.append(add_preview_button)
         self.editor = aqt.editor.Editor(
@@ -609,7 +610,6 @@ class Browser(QMainWindow):
             self,
             editor_mode=aqt.editor.EditorMode.BROWSER,
         )
-        gui_hooks.editor_did_init.remove(add_preview_button)
 
     @ensure_editor_saved
     def on_all_or_selected_rows_changed(self) -> None:

ts/routes/editor/BrowserEditor.svelte

@@ -1,28 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import ButtonGroupItem from "$lib/components/ButtonGroupItem.svelte";
-
-    import type { NoteEditorAPI } from "./NoteEditor.svelte";
-    import NoteEditor from "./NoteEditor.svelte";
-    import PreviewButton from "./PreviewButton.svelte";
-
-    const api: Partial<NoteEditorAPI> = {};
-    let noteEditor: NoteEditor;
-
-    export let uiResolve: (api: NoteEditorAPI) => void;
-
-    $: if (noteEditor) {
-        uiResolve(api as NoteEditorAPI);
-    }
-</script>
-
-<NoteEditor bind:this={noteEditor} {api}>
-    <svelte:fragment slot="notetypeButtons">
-        <ButtonGroupItem>
-            <PreviewButton />
-        </ButtonGroupItem>
-    </svelte:fragment>
-</NoteEditor>

ts/routes/editor/NoteCreator.svelte

@@ -1,51 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { bridgeCommand } from "@tslib/bridgecommand";
-    import { registerShortcut } from "@tslib/shortcuts";
-    import { onDestroy, onMount } from "svelte";
-
-    import type { NoteEditorAPI } from "./NoteEditor.svelte";
-    import NoteEditor from "./NoteEditor.svelte";
-    import StickyBadge from "./StickyBadge.svelte";
-
-    const api: Partial<NoteEditorAPI> = {};
-    let noteEditor: NoteEditor;
-
-    export let uiResolve: (api: NoteEditorAPI) => void;
-
-    $: if (noteEditor) {
-        uiResolve(api as NoteEditorAPI);
-    }
-
-    let stickies: boolean[] = [];
-
-    function setSticky(stckies: boolean[]): void {
-        stickies = stckies;
-    }
-
-    function toggleStickyAll(): void {
-        bridgeCommand("toggleStickyAll", (values: boolean[]) => (stickies = values));
-    }
-
-    let deregisterSticky: () => void;
-    export function activateStickyShortcuts() {
-        deregisterSticky = registerShortcut(toggleStickyAll, "Shift+F9");
-    }
-
-    onMount(() => {
-        Object.assign(globalThis, {
-            setSticky,
-        });
-    });
-
-    onDestroy(() => deregisterSticky);
-</script>
-
-<NoteEditor bind:this={noteEditor} {api}>
-    <svelte:fragment slot="field-state" let:index let:show>
-        <StickyBadge bind:active={stickies[index]} {index} {show} />
-    </svelte:fragment>
-</NoteEditor>

ts/routes/editor/NoteEditor.svelte

@@ -13,6 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import FieldState from "./FieldState.svelte";
     import LabelContainer from "./LabelContainer.svelte";
     import LabelName from "./LabelName.svelte";
+    import type { EditorMode } from "./types";
 
     export interface NoteEditorAPI {
         fields: EditorFieldAPI[];
@@ -188,6 +189,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         fonts = fs;
     }
 
+    let stickies: boolean[] = [];
+
+    function setSticky(stckies: boolean[]): void {
+        stickies = stckies;
+    }
+
     export function focusField(index: number | null): void {
         tick().then(() => {
             if (typeof index === "number") {
@@ -432,6 +439,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     } from "../image-occlusion/store";
     import CollapseLabel from "./CollapseLabel.svelte";
     import * as oldEditorAdapter from "./old-editor-adapter";
+    import StickyBadge from "./StickyBadge.svelte";
+    import ButtonGroupItem from "$lib/components/ButtonGroupItem.svelte";
+    import PreviewButton from "./PreviewButton.svelte";
 
     $: isIOImageLoaded = false;
     $: ioImageLoadedStore.set(isIOImageLoaded);
@@ -667,6 +677,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             setIsImageOcclusion,
             setupMaskEditor,
             saveOcclusions,
+            setSticky,
             ...oldEditorAdapter,
         });
 
@@ -701,19 +712,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     setupLifecycleHooks(api);
 
     $: tagAmount = $tags.length;
+
+    let noteEditor: HTMLDivElement;
+
+    export let uiResolve: (api: NoteEditorAPI) => void;
+    export let mode: EditorMode;
+
+    $: if (noteEditor) {
+        uiResolve(api as NoteEditorAPI);
+        console.log("svelte editor mode", mode);
+    }
 </script>
 
 <!--
 @component
 Serves as a pre-slotted convenience component which combines all the common
 components and functionality for general note editing.
-
-Functionality exclusive to specific note-editing views (e.g. in the browser or
-the AddCards dialog) should be implemented in the user of this component.
 -->
-<div class="note-editor">
+<div class="note-editor" bind:this={noteEditor}>
     <EditorToolbar {size} {wrap} api={toolbar}>
-        <slot slot="notetypeButtons" name="notetypeButtons" />
+        <svelte:fragment slot="notetypeButtons">
+            {#if mode === "browse"}
+                <ButtonGroupItem>
+                    <PreviewButton />
+                </ButtonGroupItem>
+            {/if}
+        </svelte:fragment>
     </EditorToolbar>
 
     {#if hint}
@@ -795,13 +819,14 @@ the AddCards dialog) should be implemented in the user of this component.
                                 {#if cols[index] === "dupe"}
                                     <DuplicateLink />
                                 {/if}
-                                <slot
-                                    name="field-state"
-                                    {field}
-                                    {index}
-                                    show={fields[index] === $hoveredField ||
-                                        fields[index] === $focusedField}
-                                />
+                                {#if mode === "add"}
+                                    <StickyBadge
+                                        bind:active={stickies[index]}
+                                        {index}
+                                        show={fields[index] === $hoveredField ||
+                                            fields[index] === $focusedField}
+                                    />
+                                {/if}
                                 {#if plainTextDefaults[index]}
                                     <RichTextBadge
                                         show={!fieldsCollapsed[index] &&

ts/routes/editor/ReviewerEditor.svelte

@@ -1,19 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import type { NoteEditorAPI } from "./NoteEditor.svelte";
-    import NoteEditor from "./NoteEditor.svelte";
-
-    const api: Partial<NoteEditorAPI> = {};
-    let noteEditor: NoteEditor;
-
-    export let uiResolve: (api: NoteEditorAPI) => void;
-
-    $: if (noteEditor) {
-        uiResolve(api as NoteEditorAPI);
-    }
-</script>
-
-<NoteEditor bind:this={noteEditor} {api} />

ts/routes/editor/base.ts

@@ -19,10 +19,7 @@ import LabelButton from "$lib/components/LabelButton.svelte";
 import WithContext from "$lib/components/WithContext.svelte";
 import WithState from "$lib/components/WithState.svelte";
 
-import BrowserEditor from "./BrowserEditor.svelte";
-import NoteCreator from "./NoteCreator.svelte";
-import * as editorContextKeys from "./NoteEditor.svelte";
-import ReviewerEditor from "./ReviewerEditor.svelte";
+import NoteEditor, * as editorContextKeys from "./NoteEditor.svelte";
 
 declare global {
     interface Selection {
@@ -56,33 +53,11 @@ export const components = {
 
 export { editorToolbar } from "./editor-toolbar";
 
-async function setupBrowserEditor(): Promise<void> {
-    await setupI18n({ modules: editorModules });
-    mount(BrowserEditor, { target: document.body, props: { uiResolve } });
-}
-
-async function setupNoteCreator(): Promise<void> {
-    await setupI18n({ modules: editorModules });
-    mount(NoteCreator, { target: document.body, props: { uiResolve } });
-}
-
-async function setupReviewerEditor(): Promise<void> {
-    await setupI18n({ modules: editorModules });
-    mount(ReviewerEditor, { target: document.body, props: { uiResolve } });
-}
-
 export async function setupEditor(mode: EditorMode) {
-    switch (mode) {
-        case "add":
-            await setupNoteCreator();
-            break;
-        case "browse":
-            await setupBrowserEditor();
-            break;
-        case "review":
-            await setupReviewerEditor();
-            break;
-        default:
-            alert("unexpected editor type");
+    if (!["add", "browse", "review"].includes(mode)) {
+        alert("unexpected editor type");
+        return;
     }
+    await setupI18n({ modules: editorModules });
+    mount(NoteEditor, { target: document.body, props: { uiResolve, mode } });
 }