Enable setting of PreviewButton and hiding of cloze button again

qt/aqt/browser/browser.py

@@ -383,23 +383,11 @@ class Browser(QMainWindow):
 
             editor._links["preview"] = lambda _editor: self.onTogglePreview()
             editor.web.eval(
-                f"""
+                f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
-$editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.labelButton({{
-    label: `{tr.actions_preview()}`,
-    tooltip: `{tr.browsing_preview_selected_card(val=shortcut(preview_shortcut))}`,
-    onClick: () => bridgeCommand("preview"),
-    disables: false,
-}}), "notetype", -1));
-"""
             )
 
-        def add_preview_shortcut(cuts: List[Tuple], editor: Editor) -> None:
-            cuts.append(("Ctrl+Shift+P", self.onTogglePreview, True))
-
         gui_hooks.editor_did_init.append(add_preview_button)
-        gui_hooks.editor_did_init_shortcuts.append(add_preview_shortcut)
         self.editor = aqt.editor.Editor(self.mw, self.form.fieldsArea, self)
-        gui_hooks.editor_did_init_shortcuts.remove(add_preview_shortcut)
         gui_hooks.editor_did_init.remove(add_preview_button)
 
     @ensure_editor_saved

qt/aqt/editor.py

@@ -145,7 +145,7 @@ class Editor:
         gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
 
         lefttopbtns_defs = [
-            f"$editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.rawButton({{ html: `{button}` }}), 'notetype', -1));"
+            f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.addButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));"
             for button in lefttopbtns
         ]
         lefttopbtns_js = "\n".join(lefttopbtns_defs)
@@ -156,10 +156,7 @@ class Editor:
         righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
 
         righttopbtns_defs = "\n".join(
-            [
+            [f"editorToolbar.Raw({{ html: `{button}` }})," for button in righttopbtns]
-                f"editorToolbar.rawButton({{ html: `{button}` }}),"
-                for button in righttopbtns
-            ]
         )
         righttopbtns_js = (
             f"""
@@ -172,7 +169,7 @@ $editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.buttonGroup({{
             else ""
         )
 
-        self.web.eval(f"{lefttopbtns_js} {righttopbtns_js}")
+        self.web.eval(f"{lefttopbtns_js}")
 
     # Top buttons
     ######################################################################
@@ -1268,11 +1265,11 @@ gui_hooks.editor_will_munge_html.append(reverse_url_quoting)
 def set_cloze_button(editor: Editor) -> None:
     if editor.note.model()["type"] == MODEL_CLOZE:
         editor.web.eval(
-            '$editorToolbar.then(({ showButton }) => showButton("template", "cloze")); '
+            '$editorToolbar.then(({ templateButtons }) => templateButtons.showButton("cloze")); '
         )
     else:
         editor.web.eval(
-            '$editorToolbar.then(({ hideButton }) => hideButton("template", "cloze")); '
+            '$editorToolbar.then(({ templateButtons }) => templateButtons.hideButton("cloze")); '
         )
 
 

ts/components/ButtonGroup.svelte

@@ -51,11 +51,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return registration;
     }
 
+    interface SvelteComponent {
+        id: string | undefined;
+        component: SvelteComponentTyped;
+        props: Record<string, unknown>;
+    }
+
     const dynamicItems: ButtonRegistration[] = [];
-    let dynamic: SvelteComponentTyped[] = [];
+    let dynamic: SvelteComponent[] = [];
 
     function addButton(
-        button: SvelteComponentTyped,
+        button: SvelteComponent,
         add: (added: Element, parent: Element) => number
     ): void {
         const registration = makeRegistration();
@@ -86,10 +92,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         dynamic = [...dynamic, button];
     }
 
-    const insertButton = (button: SvelteComponentTyped, id: Identifier = 0) =>
+    const insertButton = (button: SvelteComponent, position: Identifier = 0) =>
-        addButton(button, (added, parent) => insert(added, parent, id));
+        addButton(button, (added, parent) => insert(added, parent, position));
-    const appendButton = (button: SvelteComponentTyped, id: Identifier = -1) =>
+    const appendButton = (button: SvelteComponent, position: Identifier = -1) =>
-        addButton(button, (added, parent) => add(added, parent, id));
+        addButton(button, (added, parent) => add(added, parent, position));
 
     function updateRegistration(
         f: (registration: ButtonRegistration) => void,
@@ -137,9 +143,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div bind:this={buttonGroupRef} {id} class={className} dir="ltr">
     <slot />
-    {#each dynamic as component, i}
+    {#each dynamic as item, i}
-        <ButtonGroupItem registration={dynamicItems[i]}>
+        <ButtonGroupItem id={item.id} registration={dynamicItems[i]}>
-            <svelte:component this={component} />
+            <svelte:component this={item.component} {...item.props} />
         </ButtonGroupItem>
     {/each}
 </div>

ts/components/ButtonGroupItem.svelte

@@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { getContext, hasContext } from "svelte";
     import { buttonGroupKey } from "./contextKeys";
 
+    export let id: string | undefined = undefined;
     export let registration: ButtonRegistration | undefined = undefined;
 
     let detach_: boolean;
@@ -53,7 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <!-- div in WithTheming is necessary to preserve item position -->
-<WithTheming {style}>
+<WithTheming {id} {style}>
     <Detachable detach={detach_}>
         <slot />
     </Detachable>

ts/components/Raw.svelte

@@ -3,12 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { onMount, createEventDispatcher } from "svelte";
-
     export let html: string;
-
-    const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: null }));
 </script>
 
 {@html html}

ts/components/WithTheming.svelte

@@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    export let id: string | undefined = undefined;
     export let style: string;
 </script>
 
@@ -12,6 +13,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<div {style}>
+<div {id} {style}>
     <slot />
 </div>

ts/editor/ColorButtons.svelte

@@ -16,6 +16,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import "./color.css";
 
+    export let api = {};
+
     const foregroundColorKeyword = "--foreground-color";
     let color = "black";
 
@@ -32,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="color">
+<ButtonGroup id="color" {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
             <IconButton

ts/editor/EditorToolbar.svelte

@@ -28,10 +28,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     /* Export components */
+    import PreviewButton from "./PreviewButton.svelte";
     import LabelButton from "components/LabelButton.svelte";
     import IconButton from "components/IconButton.svelte";
+    import Raw from "components/Raw.svelte";
 
-    export const editorToolbar = { LabelButton, IconButton };
+    export const editorToolbar = {
+        PreviewButton,
+        LabelButton,
+        IconButton,
+        Raw,
+    };
 </script>
 
 <script lang="typescript">
@@ -48,6 +55,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import TemplateButtons from "./TemplateButtons.svelte";
 
     export const notetypeButtons = {};
+    export const formatInlineButtons = {};
+    export const formatBlockButtons = {};
+    export const colorButtons = {};
+    export const templateButtons = {};
 
     export let nightMode: boolean;
 
@@ -65,9 +76,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <WithTheming {style}>
     <StickyBar>
         <NoteTypeButtons api={notetypeButtons} />
-        <FormatInlineButtons />
+        <FormatInlineButtons api={formatInlineButtons} />
-        <FormatBlockButtons />
+        <FormatBlockButtons api={formatBlockButtons} />
-        <ColorButtons />
+        <ColorButtons api={colorButtons} />
-        <TemplateButtons />
+        <TemplateButtons api={templateButtons} />
     </StickyBar>
 </WithTheming>

ts/editor/PreviewButton.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="typescript">
+    import { bridgeCommand } from "lib/bridgecommand";
+    import * as tr from "lib/i18n";
+
+    import WithShortcut from "components/WithShortcut.svelte";
+    import LabelButton from "components/LabelButton.svelte";
+</script>
+
+<WithShortcut shortcut="Control+Shift+KeyP" let:createShortcut let:shortcutLabel>
+    <LabelButton
+        tooltip="{`${tr.browsingPreviewSelectedCard({
+            val: 'test',
+        })} (${shortcutLabel})`},"
+        disables={false}
+        on:click={() => bridgeCommand('preview')}
+        on:mount={createShortcut}>
+        {tr.actionsPreview()}
+    </LabelButton>
+</WithShortcut>

ts/editor/TemplateButtons.svelte

@@ -19,6 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { appendInParentheses } from "./helpers";
     import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
 
+    export let api = {};
+
     function onAttachment(): void {
         bridgeCommand("attach");
     }
@@ -32,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="template">
+<ButtonGroup id="template" {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
             <IconButton
@@ -55,7 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </WithShortcut>
     </ButtonGroupItem>
 
-    <ButtonGroupItem>
+    <ButtonGroupItem id="cloze">
         <ClozeButton />
     </ButtonGroupItem>
 

ts/editor/index.ts

@@ -166,7 +166,9 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
     }
 }
 
-const i18n = setupI18n({ modules: [ModuleName.EDITING, ModuleName.KEYBOARD] });
+const i18n = setupI18n({
+    modules: [ModuleName.EDITING, ModuleName.KEYBOARD, ModuleName.ACTIONS, ModuleName.BROWSING],
+});
 
 import type EditorToolbar from "./EditorToolbar.svelte";