Make dynamicComponents usable for addons, rather than the components directly

rawButton({ html: ... })

instead of

{ component: RawButton, html: ... }

qt/aqt/editor.py

@@ -155,7 +155,7 @@ class Editor:
         gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
 
         lefttopbtns_defs = [
-            f"$editorToolbar.addButton({{ component: editorToolbar.RawButton, html: `{button}` }}, 'notetype');"
+            f"$editorToolbar.addButton(editorToolbar.rawButton({{ html: `{button}` }}), 'notetype');"
             for button in lefttopbtns
         ]
         lefttopbtns_js = "\n".join(lefttopbtns_defs)
@@ -167,7 +167,7 @@ class Editor:
 
         righttopbtns_defs = "\n".join(
             [
-                f"{{ component: editorToolbar.RawButton, html: `{button}` }},"
+                f"editorToolbar.rawButton({{ html: `{button}` }}),"
                 for button in righttopbtns
             ]
         )
@@ -1277,13 +1277,9 @@ 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(
+        editor.web.eval('$editorToolbar.showButton("template", "cloze"); ')
-            'document.getElementById("editorToolbar").showButton("template", "cloze"); '
-        )
     else:
-        editor.web.eval(
+        editor.web.eval('$editorToolbar.hideButton("template", "cloze"); ')
-            'document.getElementById("editorToolbar").hideButton("template", "cloze"); '
-        )
 
 
 gui_hooks.editor_did_load_note.append(set_cloze_button)

ts/editor-toolbar/SelectButton.d.ts

@@ -0,0 +1,18 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import type { ToolbarItem } from "./types";
+
+export interface Option {
+    label: string;
+    value: string;
+    selected: boolean;
+}
+
+export interface SelectButtonProps {
+    id: string;
+    className?: string;
+    tooltip?: string;
+    buttons: ToolbarItem[];
+    disables: boolean;
+    options: Option[];
+}

ts/editor-toolbar/SelectButton.svelte

@@ -4,16 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
+    import type { Option } from "./SelectButton";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey } from "./contextKeys";
     import SelectOption from "./SelectOption.svelte";
 
-    interface Option {
-        label: string;
-        value: string;
-        selected: boolean;
-    }
-
     export let id: string;
     export let className = "";
     export let tooltip: string;

ts/editor-toolbar/dynamicComponents.ts

@@ -1,5 +1,6 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import RawButton from "./RawButton.svelte";
 import LabelButton from "./LabelButton.svelte";
 import type { LabelButtonProps } from "./LabelButton";
 import IconButton from "./IconButton.svelte";
@@ -8,6 +9,8 @@ import CommandIconButton from "./CommandIconButton.svelte";
 import type { CommandIconButtonProps } from "./CommandIconButton";
 import ColorPicker from "./ColorPicker.svelte";
 import type { ColorPickerProps } from "./ColorPicker";
+import SelectButton from "./SelectButton.svelte";
+import type { SelectButtonProps } from "./SelectButton";
 import ButtonGroup from "./ButtonGroup.svelte";
 import type { ButtonGroupProps } from "./ButtonGroup";
 
@@ -25,6 +28,9 @@ import type { WithShortcutProps } from "./WithShortcut";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 
+export const rawButton = dynamicComponent<typeof RawButton, { html: string }>(
+    RawButton
+);
 export const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(
     LabelButton
 );
@@ -38,6 +44,9 @@ export const commandIconButton = dynamicComponent<
 export const colorPicker = dynamicComponent<typeof ColorPicker, ColorPickerProps>(
     ColorPicker
 );
+export const selectButton = dynamicComponent<typeof SelectButton, SelectButtonProps>(
+    SelectButton
+);
 
 export const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(
     ButtonGroup

ts/editor/addons.ts

@@ -1,24 +1,31 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import { default as RawButton } from "editor-toolbar/RawButton.svelte";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
-import { default as LabelButton } from "editor-toolbar/LabelButton.svelte";
-import { default as IconButton } from "editor-toolbar/IconButton.svelte";
-import { default as CommandIconButton } from "editor-toolbar/CommandIconButton.svelte";
-import { default as SelectButton } from "editor-toolbar/SelectButton.svelte";
 
-import { default as DropdownMenu } from "editor-toolbar/DropdownMenu.svelte";
+import {
-import { default as DropdownItem } from "editor-toolbar/DropdownItem.svelte";
+    rawButton,
-import { default as ButtonDropdown } from "editor-toolbar/DropdownMenu.svelte";
+    labelButton,
-import { default as WithDropdownMenu } from "editor-toolbar/WithDropdownMenu.svelte";
+    iconButton,
+    commandIconButton,
+    selectButton,
+    dropdownMenu,
+    dropdownItem,
+    buttonDropdown,
+    withDropdownMenu,
+} from "editor-toolbar/dynamicComponents";
 
-export const editorToolbar = {
+export const editorToolbar: Record<
-    RawButton,
+    string,
-    LabelButton,
+    (props: Record<string, unknown>) => DynamicSvelteComponent
-    IconButton,
+> = {
-    CommandIconButton,
+    rawButton,
-    SelectButton,
+    labelButton,
-    DropdownMenu,
+    iconButton,
-    DropdownItem,
+    commandIconButton,
-    ButtonDropdown,
+    selectButton,
-    WithDropdownMenu,
+
+    dropdownMenu,
+    dropdownItem,
+    buttonDropdown,
+    withDropdownMenu,
 };

ts/sass/base.scss

@@ -9,6 +9,7 @@ $link-hover-decoration: none;
 @import "ts/sass/bootstrap/bootstrap-reboot";
 @import "ts/sass/bootstrap/bootstrap-utilities";
 
-body, html {
+body,
+html {
     overscroll-behavior: none;
 }