GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Move EditorToolbar API into EditorToolbar.svelte

Browse source
This commit is contained in:
Henrik Giesel 2021-04-25 19:15:00 +02:00
parent f5fba15435
commit 268adf1d03
4 changed files with 95 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
qt/aqt/editor.py
View file

@ -1277,9 +1277,13 @@ gui_hooks.editor_will_munge_html.append(reverse_url_quoting)
def set_cloze_button(editor: Editor) -> None: def set_cloze_button(editor: Editor) -> None:
if editor.note.model()["type"] == MODEL_CLOZE: 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: 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) gui_hooks.editor_did_load_note.append(set_cloze_button)

88
ts/editor-toolbar/EditorToolbar.svelte
View file

@ -18,19 +18,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<script lang="typescript"> <script lang="typescript">
import type { Readable } from "svelte/store"; import type { Identifier } from "./identifiable";
import type { ToolbarItem, IterableToolbarItem } from "./types"; import type { ToolbarItem, IterableToolbarItem } from "./types";
import { setContext } from "svelte"; import { setContext } from "svelte";
import { disabledKey, nightModeKey } from "./contextKeys"; import { disabledKey, nightModeKey } from "./contextKeys";
import { add, insert, updateRecursive } from "./identifiable";
import { showComponent, hideComponent, toggleComponent } from "./hideable";
import ButtonGroup from "./ButtonGroup.svelte"; import ButtonGroup from "./ButtonGroup.svelte";
export let buttons: Readable<IterableToolbarItem[]>; export let buttons: IterableToolbarItem[];
export let menus: Readable<ToolbarItem[]>; export let menus: ToolbarItem[];
$: _buttons = $buttons;
$: _menus = $menus;
export let nightMode: boolean; export let nightMode: boolean;
setContext(nightModeKey, nightMode); setContext(nightModeKey, nightMode);
@ -42,6 +41,77 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: style = `--toolbar-size: ${size}px; --toolbar-wrap: ${ $: style = `--toolbar-size: ${size}px; --toolbar-wrap: ${
wraps ? "wrap" : "nowrap" wraps ? "wrap" : "nowrap"
}`; }`;
export function updateButton(
update: (component: ToolbarItem) => ToolbarItem,
...identifiers: Identifier[]
): void {
buttons = updateRecursive(
update,
({ items: buttons } as unknown) as ToolbarItem,
...identifiers
).items as IterableToolbarItem[];
}
export function showButton(...identifiers: Identifier[]): void {
updateButton(showComponent, ...identifiers);
}
export function hideButton(...identifiers: Identifier[]): void {
updateButton(hideComponent, ...identifiers);
}
export function toggleButton(...identifiers: Identifier[]): void {
updateButton(toggleComponent, ...identifiers);
}
export 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
);
}
export 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
);
}
export function updateMenu(
update: (component: ToolbarItem) => ToolbarItem,
...identifiers: Identifier[]
): void {
menus = updateRecursive(
update,
({ items: menus } as unknown) as ToolbarItem,
...identifiers
).items as ToolbarItem[];
}
export 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
);
}
</script> </script>
<style lang="scss"> <style lang="scss">
@ -57,11 +127,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</style> </style>
<div {style}> <div {style}>
{#each _menus as menu} {#each menus as menu}
<svelte:component this={menu.component} {...menu} /> <svelte:component this={menu.component} {...menu} />
{/each} {/each}
</div> </div>
<nav {style}> <nav {style}>
<ButtonGroup items={_buttons} className="p-0 mb-1" /> <ButtonGroup items={buttons} className="p-0 mb-1" />
</nav> </nav>

122
ts/editor-toolbar/index.ts
View file

@ -1,46 +1,18 @@
// Copyright: Ankitects Pty Ltd and contributors // Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { ToolbarItem, IterableToolbarItem } from "./types"; import type { ToolbarItem, IterableToolbarItem } from "./types";
import type { Identifier } from "./identifiable";
import { writable } from "svelte/store"; import EditorToolbar from "./EditorToolbar.svelte";
export { default as EditorToolbar } from "./EditorToolbar.svelte";
import EditorToolbarSvelte from "./EditorToolbar.svelte";
import "./bootstrap.css"; 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( export function editorToolbar(
target: HTMLElement, target: HTMLElement,
initialButtons: IterableToolbarItem[] = [], buttons: IterableToolbarItem[] = [],
initialMenus: ToolbarItem[] = [] menus: ToolbarItem[] = []
): EditorToolbarAPI { ): EditorToolbar {
const buttons = writable(initialButtons); return new EditorToolbar({
const menus = writable(initialMenus);
new EditorToolbarSvelte({
target, target,
props: { props: {
buttons, buttons,
@ -48,88 +20,6 @@ export function editorToolbar(
nightMode: document.documentElement.classList.contains("night-mode"), 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 */ /* Exports for editor */

8
ts/editor/toolbar.ts
View file

@ -1,6 +1,6 @@
// Copyright: Ankitects Pty Ltd and contributors // Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html // 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 { getNotetypeGroup } from "./notetype";
import { getFormatInlineGroup } from "./formatInline"; import { getFormatInlineGroup } from "./formatInline";
@ -8,9 +8,9 @@ import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
import { getColorGroup } from "./color"; import { getColorGroup } from "./color";
import { getTemplateGroup, getTemplateMenus } from "./template"; import { getTemplateGroup, getTemplateMenus } from "./template";
export function initToolbar(i18n: Promise<void>): Promise<EditorToolbarAPI> { export function initToolbar(i18n: Promise<void>) {
let toolbarResolve: (value: EditorToolbarAPI) => void; let toolbarResolve: (value: EditorToolbar) => void;
const toolbarPromise = new Promise<EditorToolbarAPI>((resolve) => { const toolbarPromise = new Promise<EditorToolbar>((resolve) => {
toolbarResolve = resolve; toolbarResolve = resolve;
}); });