Fix Preview button not showing and cloze button not hiding (#1437)

qt/aqt/browser/browser.py

@@ -408,7 +408,7 @@ class Browser(QMainWindow):
         def add_preview_button(editor: Editor) -> None:
             editor._links["preview"] = lambda _editor: self.onTogglePreview()
             editor.web.eval(
-                "$editorToolbar.then(({ notetypeButtons }) => notetypeButtons.appendButton({ component: editorToolbar.PreviewButton, id: 'preview' }));"
+                "noteEditorPromise.then(noteEditor => noteEditor.toolbar.then(toolbar => toolbar.notetypeButtons.appendButton({ component: editorToolbar.PreviewButton, id: 'preview' })));",
             )
 
         gui_hooks.editor_did_init.append(add_preview_button)

qt/aqt/editor.py

@@ -137,7 +137,7 @@ class Editor:
         gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
 
         lefttopbtns_defs = [
-            f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.Raw, props: {{ html: {json.dumps(button)} }} }}, -1));"
+            f"noteEditorPromise.then((noteEditor) => noteEditor.toolbar.then((toolbar) => toolbar.notetypeButtons.appendButton({{ component: editorToolbar.Raw, props: {{ html: {json.dumps(button)} }} }}, -1)));"
             for button in lefttopbtns
         ]
         lefttopbtns_js = "\n".join(lefttopbtns_defs)
@@ -150,7 +150,7 @@ class Editor:
         righttopbtns_defs = ", ".join([json.dumps(button) for button in righttopbtns])
         righttopbtns_js = (
             f"""
-$editorToolbar.then(({{ toolbar }}) => toolbar.appendGroup({{
+noteEditorPromise.then(noteEditor => noteEditor.toolbar.then((toolbar) => toolbar.toolbar.appendGroup({{
     component: editorToolbar.AddonButtons,
     id: "addons",
     props: {{ buttons: [ {righttopbtns_defs} ] }},
@@ -1323,11 +1323,11 @@ gui_hooks.editor_will_munge_html.append(reverse_url_quoting)
 def set_cloze_button(editor: Editor) -> None:
     if editor.note.note_type()["type"] == MODEL_CLOZE:
         editor.web.eval(
-            '$editorToolbar.then(({ templateButtons }) => templateButtons.showButton("cloze")); '
+            'noteEditorPromise.then((noteEditor) => noteEditor.toolbar.then((toolbar) => toolbar.templateButtons.showButton("cloze"))); '
         )
     else:
         editor.web.eval(
-            '$editorToolbar.then(({ templateButtons }) => templateButtons.hideButton("cloze")); '
+            'noteEditorPromise.then((noteEditor) => noteEditor.toolbar.then(({ templateButtons }) => templateButtons.hideButton("cloze"))); '
         )
 
 

ts/editor/EditorToolbar.svelte

@@ -14,6 +14,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         resetAllState(false);
     }
 
+    export interface EditorToolbarAPI {
+        toolbar: any;
+        notetypeButtons: any;
+        formatInlineButtons: any;
+        formatBlockButtons: any;
+        colorButtons: any;
+        templateButtons: any;
+    }
+
     /* Our dynamic components */
     import AddonButtons from "./AddonButtons.svelte";
     import PreviewButton from "./PreviewButton.svelte";
@@ -41,12 +50,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let textColor: string;
     export let highlightColor: string;
 
-    export const toolbar = {};
+    const toolbar = {};
-    export const notetypeButtons = {};
+    const notetypeButtons = {};
-    export const formatInlineButtons = {};
+    const formatInlineButtons = {};
-    export const formatBlockButtons = {};
+    const formatBlockButtons = {};
-    export const colorButtons = {};
+    const colorButtons = {};
-    export const templateButtons = {};
+    const templateButtons = {};
+
+    export const api = {
+        toolbar,
+        notetypeButtons,
+        formatInlineButtons,
+        formatBlockButtons,
+        colorButtons,
+        templateButtons,
+    };
 </script>
 
 <StickyHeader>

ts/editor/OldEditorAdapter.svelte

@@ -6,6 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { EditorFieldAPI } from "./EditorField.svelte";
     import type { RichTextInputAPI } from "./RichTextInput.svelte";
     import type { PlainTextInputAPI } from "./PlainTextInput.svelte";
+    import type { EditorToolbarAPI } from "./EditorToolbar.svelte";
+
     import contextProperty from "../sveltelib/context-property";
 
     export interface NoteEditorAPI {
@@ -13,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         currentField: Writable<EditorFieldAPI>;
         activeInput: Writable<RichTextInputAPI | PlainTextInputAPI | null>;
         focusInRichText: Writable<boolean>;
+        toolbar: EditorToolbarAPI;
     }
 
     const key = Symbol("noteEditor");
@@ -49,6 +52,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { writable, get } from "svelte/store";
     import { bridgeCommand } from "../lib/bridgecommand";
     import { isApplePlatform } from "../lib/platform";
+    import { promiseWithResolver } from "../lib/promise";
     import { ChangeTimer } from "./change-timer";
     import { alertIcon } from "./icons";
 
@@ -221,12 +225,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const activeInput = writable<RichTextInputAPI | PlainTextInputAPI | null>(null);
     const focusInRichText = writable<boolean>(false);
 
+    const [toolbarPromise, toolbarResolve] = promiseWithResolver<EditorToolbarAPI>();
+    let toolbar: EditorToolbarAPI;
+    $: if (toolbar) {
+        toolbarResolve(toolbar);
+    }
+
     export const api = set(
         Object.create(
             {
                 currentField,
                 activeInput,
                 focusInRichText,
+                toolbar: toolbarPromise,
             },
             {
                 fields: { get: () => fieldApis },
@@ -244,7 +255,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <NoteEditor>
     <FieldsEditor>
-        <EditorToolbar {size} {wrap} {textColor} {highlightColor} />
+        <EditorToolbar {size} {wrap} {textColor} {highlightColor} bind:api={toolbar} />
 
         {#if hint}
             <Absolute bottom right --margin="10px">

ts/editor/index.ts

@@ -7,10 +7,8 @@
  */
 
 import { filterHTML } from "../html-filter";
+import { execCommand } from "./helpers";
 import { updateAllState } from "../components/WithState.svelte";
-import { noop } from "../lib/functional";
-
-export const $editorToolbar = new Promise(noop);
 
 export function pasteHTML(
     html: string,
@@ -25,10 +23,12 @@ export function pasteHTML(
 }
 
 export function setFormat(cmd: string, arg?: string, _nosave = false): void {
-    document.execCommand(cmd, false, arg);
+    execCommand(cmd, false, arg);
     updateAllState(new Event(cmd));
 }
 
+export { editorToolbar } from "./EditorToolbar.svelte";
+
 import "../sveltelib/export-runtime";
 import "../lib/register-package";
 
@@ -60,18 +60,14 @@ export const i18n = setupI18n({
 });
 
 import OldEditorAdapter from "./OldEditorAdapter.svelte";
+import type { NoteEditorAPI } from "./OldEditorAdapter.svelte";
 import { nightModeKey } from "../components/context-keys";
 
 import "./editor-base.css";
 import "./bootstrap.css";
 import "./legacy.css";
 
-function setupNoteEditor(i18n: Promise<void>): Promise<OldEditorAdapter> {
+async function setupNoteEditor(): Promise<NoteEditorAPI> {
-    let editorResolve: (value: OldEditorAdapter) => void;
-    const editorPromise = new Promise<OldEditorAdapter>((resolve) => {
-        editorResolve = resolve;
-    });
-
     const context = new Map<symbol, unknown>();
 
     context.set(
@@ -79,34 +75,29 @@ function setupNoteEditor(i18n: Promise<void>): Promise<OldEditorAdapter> {
         document.documentElement.classList.contains("night-mode"),
     );
 
-    i18n.then(() => {
+    await i18n;
-        const noteEditor = new OldEditorAdapter({
-            target: document.body,
-            props: {
-                class: "h-100",
-            },
-            context,
-        } as any);
 
-        Object.assign(globalThis, {
+    const noteEditor = new OldEditorAdapter({
-            setFields: noteEditor.setFields,
+        target: document.body,
-            setFonts: noteEditor.setFonts,
+        context,
-            focusField: noteEditor.focusField,
-            setColorButtons: noteEditor.setColorButtons,
-            setTags: noteEditor.setTags,
-            setSticky: noteEditor.setSticky,
-            setBackgrounds: noteEditor.setBackgrounds,
-            setClozeHint: noteEditor.setClozeHint,
-            saveNow: noteEditor.saveFieldNow,
-            activateStickyShortcuts: noteEditor.activateStickyShortcuts,
-            focusIfField: noteEditor.focusIfField,
-            setNoteId: noteEditor.setNoteId,
-        });
-
-        editorResolve(noteEditor);
     });
 
-    return editorPromise;
+    Object.assign(globalThis, {
+        setFields: noteEditor.setFields,
+        setFonts: noteEditor.setFonts,
+        focusField: noteEditor.focusField,
+        setColorButtons: noteEditor.setColorButtons,
+        setTags: noteEditor.setTags,
+        setSticky: noteEditor.setSticky,
+        setBackgrounds: noteEditor.setBackgrounds,
+        setClozeHint: noteEditor.setClozeHint,
+        saveNow: noteEditor.saveFieldNow,
+        activateStickyShortcuts: noteEditor.activateStickyShortcuts,
+        focusIfField: noteEditor.focusIfField,
+        setNoteId: noteEditor.setNoteId,
+    });
+
+    return noteEditor.api;
 }
 
-export const noteEditorPromise = setupNoteEditor(i18n);
+export const noteEditorPromise = setupNoteEditor();