From 268adf1d039434ae89f94a9e4909dd764a2797e5 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sun, 25 Apr 2021 19:15:00 +0200 Subject: [PATCH] Move EditorToolbar API into EditorToolbar.svelte --- qt/aqt/editor.py | 8 +- ts/editor-toolbar/EditorToolbar.svelte | 88 ++++++++++++++++-- ts/editor-toolbar/index.ts | 122 ++----------------------- ts/editor/toolbar.ts | 8 +- 4 files changed, 95 insertions(+), 131 deletions(-) diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 6b2b3b2ac..5065abb29 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -1277,9 +1277,13 @@ 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")); ') + editor.web.eval( + '$editorToolbar.then(({ showButton }) => showButton("template", "cloze")); ' + ) else: - editor.web.eval('$editorToolbar.then(({ hideButton }) => hideButton("template", "cloze")); ') + editor.web.eval( + '$editorToolbar.then(({ hideButton }) => hideButton("template", "cloze")); ' + ) gui_hooks.editor_did_load_note.append(set_cloze_button) diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte index c11f6ee7f..5626973dc 100644 --- a/ts/editor-toolbar/EditorToolbar.svelte +++ b/ts/editor-toolbar/EditorToolbar.svelte @@ -18,19 +18,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
- {#each _menus as menu} + {#each menus as menu} {/each}
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts index ff6e645c7..0e64430cb 100644 --- a/ts/editor-toolbar/index.ts +++ b/ts/editor-toolbar/index.ts @@ -1,46 +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, IterableToolbarItem } from "./types"; -import type { Identifier } from "./identifiable"; -import { writable } from "svelte/store"; - -import EditorToolbarSvelte from "./EditorToolbar.svelte"; +import EditorToolbar from "./EditorToolbar.svelte"; +export { default as EditorToolbar } from "./EditorToolbar.svelte"; import "./bootstrap.css"; -import { add, insert, updateRecursive } from "./identifiable"; -import { showComponent, hideComponent, toggleComponent } from "./hideable"; - -export interface EditorToolbarAPI { - // Button API - updateButton( - update: (component: ToolbarItem) => ToolbarItem, - ...identifiers: Identifier[] - ): void; - showButton(...identifiers: Identifier[]): void; - hideButton(...identifiers: Identifier[]): void; - toggleButton(...identifiers: Identifier[]): void; - insertButton(newButton: ToolbarItem, ...identifiers: Identifier[]): void; - addButton(newButton: ToolbarItem, ...identifiers: Identifier[]): void; - - // Menu API - updateMenu( - update: (component: ToolbarItem) => ToolbarItem, - ...identifiers: Identifier[] - ): void; - addMenu(newMenu: ToolbarItem, ...identifiers: Identifier[]): void; -} - export function editorToolbar( target: HTMLElement, - initialButtons: IterableToolbarItem[] = [], - initialMenus: ToolbarItem[] = [] -): EditorToolbarAPI { - const buttons = writable(initialButtons); - const menus = writable(initialMenus); - - new EditorToolbarSvelte({ + buttons: IterableToolbarItem[] = [], + menus: ToolbarItem[] = [] +): EditorToolbar { + return new EditorToolbar({ target, props: { buttons, @@ -48,88 +20,6 @@ export function editorToolbar( nightMode: document.documentElement.classList.contains("night-mode"), }, }); - - function updateButton( - update: (component: ToolbarItem) => ToolbarItem, - ...identifiers: Identifier[] - ): void { - buttons.update( - (items: IterableToolbarItem[]): IterableToolbarItem[] => - updateRecursive( - update, - ({ items } as unknown) as ToolbarItem, - ...identifiers - ).items as IterableToolbarItem[] - ); - } - - function showButton(...identifiers: Identifier[]): void { - updateButton(showComponent, ...identifiers); - } - - function hideButton(...identifiers: Identifier[]): void { - updateButton(hideComponent, ...identifiers); - } - - function toggleButton(...identifiers: Identifier[]): void { - updateButton(toggleComponent, ...identifiers); - } - - function insertButton(newButton: ToolbarItem, ...identifiers: Identifier[]): void { - const initIdentifiers = identifiers.slice(0, -1); - const lastIdentifier = identifiers[identifiers.length - 1]; - updateButton( - (component: ToolbarItem) => - insert(component as IterableToolbarItem, newButton, lastIdentifier), - - ...initIdentifiers - ); - } - - function addButton(newButton: ToolbarItem, ...identifiers: Identifier[]): void { - const initIdentifiers = identifiers.slice(0, -1); - const lastIdentifier = identifiers[identifiers.length - 1]; - updateButton( - (component: ToolbarItem) => - add(component as IterableToolbarItem, newButton, lastIdentifier), - ...initIdentifiers - ); - } - - function updateMenu( - update: (component: ToolbarItem) => ToolbarItem, - ...identifiers: Identifier[] - ): void { - menus.update( - (items: ToolbarItem[]): ToolbarItem[] => - updateRecursive( - update, - ({ items } as unknown) as ToolbarItem, - ...identifiers - ).items as ToolbarItem[] - ); - } - - function addMenu(newMenu: ToolbarItem, ...identifiers: Identifier[]): void { - const initIdentifiers = identifiers.slice(0, -1); - const lastIdentifier = identifiers[identifiers.length - 1]; - updateMenu( - (component: ToolbarItem) => - add(component as IterableToolbarItem, newMenu, lastIdentifier), - ...initIdentifiers - ); - } - - return { - updateButton, - showButton, - hideButton, - toggleButton, - insertButton, - addButton, - updateMenu, - addMenu, - }; } /* Exports for editor */ diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts index b74de5ccf..930c3ee41 100644 --- a/ts/editor/toolbar.ts +++ b/ts/editor/toolbar.ts @@ -1,6 +1,6 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -import { editorToolbar, EditorToolbarAPI } from "editor-toolbar"; +import { editorToolbar, EditorToolbar } from "editor-toolbar"; import { getNotetypeGroup } from "./notetype"; import { getFormatInlineGroup } from "./formatInline"; @@ -8,9 +8,9 @@ import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock"; import { getColorGroup } from "./color"; import { getTemplateGroup, getTemplateMenus } from "./template"; -export function initToolbar(i18n: Promise): Promise { - let toolbarResolve: (value: EditorToolbarAPI) => void; - const toolbarPromise = new Promise((resolve) => { +export function initToolbar(i18n: Promise) { + let toolbarResolve: (value: EditorToolbar) => void; + const toolbarPromise = new Promise((resolve) => { toolbarResolve = resolve; });