Add addMenu and updateMenu, avoid using {buttons,menus}Promise outside of class

ts/editor-toolbar/index.ts

@@ -1,6 +1,5 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { SvelteComponentDev } from "svelte/internal";
 import type { ToolbarItem, IterableToolbarItem } from "./types";
 import type { Identifier } from "./identifiable";
 
@@ -17,16 +16,16 @@ let buttonsResolve: (value: Writable<IterableToolbarItem[]>) => void;
 let menusResolve: (value: Writable<ToolbarItem[]>) => void;
 
 export class EditorToolbar extends HTMLElement {
-    component?: SvelteComponentDev;
-
-    buttonsPromise: Promise<Writable<IterableToolbarItem[]>> = new Promise(
+    private buttonsPromise: Promise<Writable<IterableToolbarItem[]>> = new Promise(
         (resolve) => {
             buttonsResolve = resolve;
         }
     );
-    menusPromise: Promise<Writable<ToolbarItem[]>> = new Promise((resolve): void => {
+    private menusPromise: Promise<Writable<ToolbarItem[]>> = new Promise(
+        (resolve): void => {
             menusResolve = resolve;
-    });
+        }
+    );
 
     connectedCallback(): void {
         globalThis.$editorToolbar = this;
@@ -34,7 +33,7 @@ export class EditorToolbar extends HTMLElement {
         const buttons = writable([]);
         const menus = writable([]);
 
-        this.component = new EditorToolbarSvelte({
+        new EditorToolbarSvelte({
             target: this,
             props: {
                 buttons,
@@ -59,7 +58,7 @@ export class EditorToolbar extends HTMLElement {
                     (items: IterableToolbarItem[]): IterableToolbarItem[] =>
                         updateRecursive(
                             update,
-                            { component: EditorToolbarSvelte, items },
+                            ({ items } as unknown) as ToolbarItem,
                             ...identifiers
                         ).items as IterableToolbarItem[]
                 );
@@ -101,6 +100,36 @@ export class EditorToolbar extends HTMLElement {
             ...initIdentifiers
         );
     }
+
+    updateMenu(
+        update: (component: ToolbarItem) => ToolbarItem,
+        ...identifiers: Identifier[]
+    ): void {
+        this.menusPromise.then(
+            (menus: Writable<ToolbarItem[]>): Writable<ToolbarItem[]> => {
+                menus.update(
+                    (items: ToolbarItem[]): ToolbarItem[] =>
+                        updateRecursive(
+                            update,
+                            ({ items } as unknown) as ToolbarItem,
+                            ...identifiers
+                        ).items as ToolbarItem[]
+                );
+
+                return menus;
+            }
+        );
+    }
+
+    addMenu(newMenu: ToolbarItem, ...identifiers: Identifier[]): void {
+        const initIdentifiers = identifiers.slice(0, -1);
+        const lastIdentifier = identifiers[identifiers.length - 1];
+        this.updateMenu(
+            (component: ToolbarItem) =>
+                add(component as IterableToolbarItem, newMenu, lastIdentifier),
+            ...initIdentifiers
+        );
+    }
 }
 
 customElements.define("anki-editor-toolbar", EditorToolbar);

ts/editor/addons.ts

@@ -9,7 +9,6 @@ import {
     iconButton,
     commandIconButton,
     selectButton,
-
     dropdownMenu,
     dropdownItem,
     buttonDropdown,

ts/editor/toolbar.ts

@@ -1,8 +1,5 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { ToolbarItem, IterableToolbarItem } from "editor-toolbar/types";
-import type { Writable } from "svelte/store";
-
 import { getNotetypeGroup } from "./notetype";
 import { getFormatInlineGroup } from "./formatInline";
 import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
@@ -12,30 +9,18 @@ import { getTemplateGroup, getTemplateMenus } from "./template";
 export function initToolbar(i18n: Promise<void>): void {
     document.addEventListener("DOMContentLoaded", () => {
         i18n.then(() => {
-            globalThis.$editorToolbar.buttonsPromise.then(
-                (
-                    buttons: Writable<IterableToolbarItem[]>
-                ): Writable<IterableToolbarItem[]> => {
-                    buttons.update(() => [
+            const buttons = [
                 getNotetypeGroup(),
                 getFormatInlineGroup(),
                 getFormatBlockGroup(),
                 getColorGroup(),
                 getTemplateGroup(),
-                    ]);
-                    return buttons;
-                }
-            );
+            ];
 
-            globalThis.$editorToolbar.menusPromise.then(
-                (menus: Writable<ToolbarItem[]>): Writable<ToolbarItem[]> => {
-                    menus.update(() => [
-                        ...getFormatBlockMenus(),
-                        ...getTemplateMenus(),
-                    ]);
-                    return menus;
-                }
-            );
+            const menus = [...getFormatBlockMenus(), ...getTemplateMenus()];
+
+            globalThis.$editorToolbar.updateButton(() => ({ items: buttons }));
+            globalThis.$editorToolbar.updateMenu(() => ({ items: menus }));
         });
     });
 }