diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts index 43620b9b7..48bafb121 100644 --- a/ts/editor-toolbar/index.ts +++ b/ts/editor-toolbar/index.ts @@ -7,37 +7,44 @@ import EditorToolbarSvelte from "./EditorToolbar.svelte"; // @ts-ignore export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte"; -import { Writable, writable } from "svelte/store"; +import { writable } from "svelte/store"; import { notetypeButtons } from "./notetype"; import { formatButtons } from "./format"; import { colorButtons } from "./color"; import { templateButtons, templateMenus } from "./template"; -const defaultMenus = [...templateMenus]; - const defaultButtons = [notetypeButtons, formatButtons, colorButtons, templateButtons]; +const defaultMenus = [...templateMenus]; class EditorToolbar extends HTMLElement { component?: SvelteComponent; - disabled?: Writable; + + buttons = defaultButtons; + menus = defaultMenus; + disabled? = writable(false); connectedCallback(): void { - this.disabled = writable(false); - setupI18n({ modules: [ModuleName.EDITING] }).then(() => { this.component = new EditorToolbarSvelte({ target: this, props: { - menus: defaultMenus, - buttons: defaultButtons, - nightMode: checkNightMode(), + buttons: this.buttons, + menus: this.menus, disabled: this.disabled, + nightMode: checkNightMode(), }, }); }); } + update(): void { + this.component?.$set({ + button: this.buttons, + menus: this.menus, + }); + } + enableButtons(): void { this.disabled?.set(false); }