Move editor code to ts/routes

build/configure/src/aqt.rs

@@ -148,10 +148,8 @@ fn build_css(build: &mut Build) -> Result<()> {
             },
         )?;
     }
-    let other_ts_css = build.inputs_with_suffix(
+    let other_ts_css =
-        inputs![":ts:editor", ":ts:editable", ":ts:reviewer:reviewer.css"],
+        build.inputs_with_suffix(inputs![":ts:editable", ":ts:reviewer:reviewer.css"], ".css");
-        ".css",
-    );
     build.add_action(
         "qt:aqt:data:web:css",
         CopyFiles {
@@ -192,10 +190,8 @@ fn build_js(build: &mut Build) -> Result<()> {
             inputs: files,
         },
     )?;
-    let files_from_ts = build.inputs_with_suffix(
+    let files_from_ts =
-        inputs![":ts:editor", ":ts:reviewer:reviewer.js", ":ts:mathjax"],
+        build.inputs_with_suffix(inputs![":ts:reviewer:reviewer.js", ":ts:mathjax"], ".js");
-        ".js",
-    );
     build.add_action(
         "qt:aqt:data:web:js",
         CopyFiles {

build/configure/src/web.rs

@@ -29,7 +29,6 @@ pub fn build_and_check_web(build: &mut Build) -> Result<()> {
     build_sveltekit(build)?;
     declare_and_check_other_libraries(build)?;
     build_and_check_pages(build)?;
-    build_and_check_editor(build)?;
     build_and_check_reviewer(build)?;
     build_and_check_mathjax(build)?;
     check_web(build)?;
@@ -170,7 +169,7 @@ fn declare_and_check_other_libraries(build: &mut Build) -> Result<()> {
             "components",
             inputs![":ts:lib", ":ts:sveltelib", glob!("ts/components/**")],
         ),
-        ("html-filter", inputs![glob!("ts/html-filter/**")]),
+        ("html-filter", inputs![glob!("ts/lib/html-filter/**")]),
     ] {
         let library_with_ts = format!("ts:{library}");
         build.add_dependency(&library_with_ts, inputs.clone());
@@ -187,7 +186,7 @@ fn build_and_check_pages(build: &mut Build) -> Result<()> {
         let entrypoint = if html {
             format!("ts/routes/{name}/index.ts")
         } else {
-            format!("ts/{name}/index.ts")
+            format!("ts/lib/{name}/index.ts")
         };
         build.add_action(
             &group,
@@ -208,7 +207,6 @@ fn build_and_check_pages(build: &mut Build) -> Result<()> {
         "editable",
         false,
         inputs![
-            //
             ":ts:lib",
             ":ts:components",
             ":ts:domlib",
@@ -232,33 +230,6 @@ fn build_and_check_pages(build: &mut Build) -> Result<()> {
     Ok(())
 }
 
-fn build_and_check_editor(build: &mut Build) -> Result<()> {
-    let editor_deps = inputs![
-        //
-        ":ts:lib",
-        ":ts:components",
-        ":ts:domlib",
-        ":ts:sveltelib",
-        ":ts:html-filter",
-        ":sass",
-        ":sveltekit",
-        glob!("ts/{editable,editor,routes/image-occlusion}/**")
-    ];
-
-    build.add_action(
-        "ts:editor",
-        EsbuildScript {
-            script: "ts/bundle_svelte.mjs".into(),
-            entrypoint: "ts/editor/index.ts".into(),
-            output_stem: "ts/editor/editor",
-            deps: editor_deps.clone(),
-            extra_exts: &["css"],
-        },
-    )?;
-
-    Ok(())
-}
-
 fn build_and_check_reviewer(build: &mut Build) -> Result<()> {
     let reviewer_deps = inputs![
         ":ts:lib",

proto/anki/frontend.proto

@@ -27,6 +27,8 @@ service FrontendService {
   rpc deckOptionsRequireClose(generic.Empty) returns (generic.Empty);
   // Warns python that the deck option web view is ready to receive requests.
   rpc deckOptionsReady(generic.Empty) returns (generic.Empty);
+
+  rpc editorReady(generic.Empty) returns (generic.Empty);
 }
 
 service BackendFrontendService {}

qt/aqt/editor.py

@@ -107,6 +107,17 @@ class EditorState(Enum):
     IO_FIELDS = 3
 
 
+def on_editor_ready(func: Callable) -> Callable:
+    @functools.wraps(func)
+    def decorated(self: Editor, *args: Any, **kwargs: Any) -> None:
+        if self._ready:
+            func(self, *args, **kwargs)
+        else:
+            self._ready_callbacks.append(lambda: func(self, *args, **kwargs))
+
+    return decorated
+
+
 class Editor:
     """The screen that embeds an editing widget should listen for changes via
     the `operation_did_execute` hook, and call set_note() when the editor needs
@@ -146,12 +157,14 @@ class Editor:
         self.state: EditorState = EditorState.INITIAL
         # used for the io mask editor's context menu
         self.last_io_image_path: str | None = None
+        self._ready = False
+        self._ready_callbacks: list[Callable[[], None]] = []
         self._init_links()
         self.setupOuter()
         self.add_webview()
         self.setupWeb()
         self.setupShortcuts()
-        gui_hooks.editor_did_init(self)
+        # gui_hooks.editor_did_init(self)
 
     # Initial setup
     ############################################################
@@ -175,21 +188,9 @@ class Editor:
             mode = "browse"
         else:
             mode = "review"
+        self.web.load_sveltekit_page(f"editor/?mode={mode}")
 
-        # then load page
+    def _set_ready(self) -> None:
-        self.web.stdHtml(
-            "",
-            css=["css/editor.css"],
-            js=[
-                "js/mathjax.js",
-                "js/editor.js",
-            ],
-            context=self,
-            default_css=False,
-        )
-        self.web.eval(f"setupEditor('{mode}')")
-        self.web.show()
-
         lefttopbtns: list[str] = []
         gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
 
@@ -218,6 +219,10 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
         )
 
         self.web.eval(f"{lefttopbtns_js} {righttopbtns_js}")
+        gui_hooks.editor_did_init(self)
+        self._ready = True
+        for cb in self._ready_callbacks:
+            cb()
 
     # Top buttons
     ######################################################################
@@ -543,6 +548,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
     def loadNoteKeepingFocus(self) -> None:
         self.loadNote(self.currentField)
 
+    @on_editor_ready
     def loadNote(self, focusTo: int | None = None) -> None:
         if not self.note:
             return

qt/aqt/mediasrv.py

@@ -337,6 +337,7 @@ def is_sveltekit_page(path: str) -> bool:
         "import-csv",
         "import-page",
         "image-occlusion",
+        "editor",
     ]
 
 
@@ -602,6 +603,18 @@ def deck_options_ready() -> bytes:
     return b""
 
 
+def editor_ready() -> bytes:
+    from aqt.editor import Editor
+
+    def handle_on_main() -> None:
+        window = aqt.mw.app.activeWindow()
+        if isinstance(getattr(window, "editor"), Editor):
+            window.editor._set_ready()  # type: ignore
+
+    aqt.mw.taskman.run_on_main(handle_on_main)
+    return b""
+
+
 post_handler_list = [
     congrats_info,
     get_deck_configs_for_update,
@@ -617,6 +630,7 @@ post_handler_list = [
     search_in_browser,
     deck_options_require_close,
     deck_options_ready,
+    editor_ready,
 ]
 
 

ts/editor/index.ts

@@ -1,8 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-import { globalExport } from "@tslib/globals";
-
-import * as base from "./base";
-
-globalExport(base);

ts/lib/editable/editable-base.scss

@@ -1,4 +1,4 @@
-@use "../lib/sass/scrollbar";
+@use "../sass/scrollbar";
 
 * {
     max-width: 100%;

ts/routes/editor/+page.svelte

@@ -0,0 +1,23 @@
+<!--
+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 } from "svelte";
+    import { setupEditor } from "./base";
+    import * as base from "./base";
+    import { page } from "$app/state";
+    import type { EditorMode } from "./types";
+    import { editorReady } from "@generated/backend";
+    import { globalExport } from "@tslib/globals";
+
+    const mode = (page.url.searchParams.get("mode") ?? "add") as EditorMode;
+
+    globalExport(base);
+
+    onMount(() => {
+        setupEditor(mode).then(() => {
+            editorReady({});
+        });
+    });
+</script>

ts/routes/editor/NoteEditor.svelte

@@ -57,8 +57,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import {
         type ImageLoadedEvent,
         resetIOImage,
-    } from "../routes/image-occlusion/mask-editor";
+    } from "../image-occlusion/mask-editor";
-    import { ChangeTimer } from "../editable/change-timer";
+    import { ChangeTimer } from "$lib/editable/change-timer";
     import { clearableArray } from "./destroyable";
     import DuplicateLink from "./DuplicateLink.svelte";
     import EditorToolbar from "./editor-toolbar";
@@ -417,16 +417,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import Shortcut from "$lib/components/Shortcut.svelte";
 
-    import { mathjaxConfig } from "../editable/mathjax-element.svelte";
+    import { mathjaxConfig } from "$lib/editable/mathjax-element.svelte";
-    import ImageOcclusionPage from "../routes/image-occlusion/ImageOcclusionPage.svelte";
+    import ImageOcclusionPage from "../image-occlusion/ImageOcclusionPage.svelte";
-    import ImageOcclusionPicker from "../routes/image-occlusion/ImageOcclusionPicker.svelte";
+    import ImageOcclusionPicker from "../image-occlusion/ImageOcclusionPicker.svelte";
-    import type { IOMode } from "../routes/image-occlusion/lib";
+    import type { IOMode } from "../image-occlusion/lib";
-    import { exportShapesToClozeDeletions } from "../routes/image-occlusion/shapes/to-cloze";
+    import { exportShapesToClozeDeletions } from "../image-occlusion/shapes/to-cloze";
     import {
         hideAllGuessOne,
         ioImageLoadedStore,
         ioMaskEditorVisible,
-    } from "../routes/image-occlusion/store";
+    } from "../image-occlusion/store";
     import CollapseLabel from "./CollapseLabel.svelte";
     import * as oldEditorAdapter from "./old-editor-adapter";
 

ts/routes/editor/[noteId]/+page.svelte

@@ -1,12 +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 { PageData } from "./$types";
-
-    export let data: PageData;
-
-</script>
-
-<div>{data.noteId}</div>

ts/routes/editor/[noteId]/+page.ts

@@ -1,10 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-import type { PageLoad } from "./$types";
-
-export const load = (async ({ params }) => {
-    const noteId = BigInt(params.noteId);
-
-    return { noteId };
-}) satisfies PageLoad;

ts/routes/editor/base.ts

@@ -34,6 +34,7 @@ declare global {
 
 import { ModuleName } from "@tslib/i18n";
 import { mount } from "svelte";
+import type { EditorMode } from "./types";
 
 export const editorModules = [
     ModuleName.EDITING,
@@ -70,16 +71,16 @@ async function setupReviewerEditor(): Promise<void> {
     mount(ReviewerEditor, { target: document.body, props: { uiResolve } });
 }
 
-export function setupEditor(mode: "add" | "browse" | "review") {
+export async function setupEditor(mode: EditorMode) {
     switch (mode) {
         case "add":
-            setupNoteCreator();
+            await setupNoteCreator();
             break;
         case "browse":
-            setupBrowserEditor();
+            await setupBrowserEditor();
             break;
         case "review":
-            setupReviewerEditor();
+            await setupReviewerEditor();
             break;
         default:
             alert("unexpected editor type");

ts/routes/editor/decorated-elements.ts

@@ -3,10 +3,10 @@
 
 import { BLOCK_ELEMENTS } from "@tslib/dom";
 
-import { CustomElementArray } from "../editable/decorated";
+import { CustomElementArray } from "$lib/editable/decorated";
-import { FrameElement } from "../editable/frame-element";
+import { FrameElement } from "$lib/editable/frame-element";
-import { FrameEnd, FrameStart } from "../editable/frame-handle";
+import { FrameEnd, FrameStart } from "$lib/editable/frame-handle";
-import { Mathjax } from "../editable/mathjax-element.svelte";
+import { Mathjax } from "$lib/editable/mathjax-element.svelte";
 import { parsingInstructions } from "./plain-text-input";
 
 const decoratedElements = new CustomElementArray();

ts/routes/editor/editor-toolbar/ImageOcclusionButton.svelte

@@ -20,8 +20,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import {
         ioImageLoadedStore,
         ioMaskEditorVisible,
-    } from "../../routes/image-occlusion/store";
+    } from "../../image-occlusion/store";
-    import { toggleMaskEditorKeyCombination } from "../../routes/image-occlusion/tools/shortcuts";
+    import { toggleMaskEditorKeyCombination } from "../../image-occlusion/tools/shortcuts";
 
     export let api = {};
 </script>

ts/routes/editor/editor-toolbar/LatexButton.svelte

@@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Shortcut from "$lib/components/Shortcut.svelte";
     import WithFloating from "$lib/components/WithFloating.svelte";
 
-    import { mathjaxConfig } from "../../editable/mathjax-element.svelte";
+    import { mathjaxConfig } from "$lib/editable/mathjax-element.svelte";
     import { context as noteEditorContext } from "../NoteEditor.svelte";
     import type { RichTextInputAPI } from "../rich-text-input";
     import { editingInputIsRichText } from "../rich-text-input";

ts/routes/editor/editor-toolbar/OptionsButton.svelte

@@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Popover from "$lib/components/Popover.svelte";
     import WithFloating from "$lib/components/WithFloating.svelte";
 
-    import { mathjaxConfig } from "../../editable/mathjax-element.svelte";
+    import { mathjaxConfig } from "$lib/editable/mathjax-element.svelte";
     import { shrinkImagesByDefault } from "../image-overlay/ImageOverlay.svelte";
     import { closeHTMLTags } from "../plain-text-input/PlainTextInput.svelte";
 

ts/routes/editor/mathjax-overlay/MathjaxOverlay.svelte

@@ -19,8 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { placeCaretAfter } from "$lib/domlib/place-caret";
     import { isComposing } from "$lib/sveltelib/composition";
 
-    import { escapeSomeEntities, unescapeSomeEntities } from "../../editable/mathjax";
+    import { escapeSomeEntities, unescapeSomeEntities } from "$lib/editable/mathjax";
-    import { Mathjax } from "../../editable/mathjax-element.svelte";
+    import { Mathjax } from "$lib/editable/mathjax-element.svelte";
     import type { EditingInputAPI } from "../EditingArea.svelte";
     import HandleBackground from "../HandleBackground.svelte";
     import { context } from "../NoteEditor.svelte";

ts/routes/editor/old-editor-adapter.ts

@@ -4,7 +4,7 @@
 import { updateAllState } from "$lib/components/WithState.svelte";
 import { execCommand } from "$lib/domlib";
 
-import { filterHTML } from "../html-filter";
+import { filterHTML } from "$lib/html-filter";
 
 export function pasteHTML(
     html: string,

ts/routes/editor/rich-text-input/RichTextInput.svelte

@@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import type { InputHandlerAPI } from "$lib/sveltelib/input-handler";
 
-    import type { ContentEditableAPI } from "../../editable/ContentEditable.svelte";
+    import type { ContentEditableAPI } from "$lib/editable/ContentEditable.svelte";
     import type { EditingInputAPI, FocusableInputAPI } from "../EditingArea.svelte";
     import type { SurroundedAPI } from "../surround";
 
@@ -74,7 +74,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import useInputHandler from "$lib/sveltelib/input-handler";
     import { pageTheme } from "$lib/sveltelib/theme";
 
-    import ContentEditable from "../../editable/ContentEditable.svelte";
+    import ContentEditable from "$lib/editable/ContentEditable.svelte";
     import { context as editingAreaContext } from "../EditingArea.svelte";
     import { Flag } from "../helpers";
     import { context as noteEditorContext } from "../NoteEditor.svelte";