Move toolbar initialization into toolbar.ts

This commit is contained in:
Henrik Giesel 2021-04-20 15:32:02 +02:00
parent 37ea39f779
commit 731f9d109f
3 changed files with 47 additions and 29 deletions

View file

@ -1,5 +1,5 @@
import type { EditorToolbar } from ".";
declare global {
var $editorToolbar: EditorToolbar;
declare namespace globalThis {
const $editorToolbar: EditorToolbar;
}

View file

@ -14,6 +14,7 @@ import { EditorField } from "./editorField";
import { LabelContainer } from "./labelContainer";
import { EditingArea } from "./editingArea";
import { Editable } from "./editable";
import { initToolbar } from "./toolbar";
export { setNoteId, getNoteId } from "./noteId";
export { saveNow } from "./changeTimer";
@ -167,32 +168,6 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
}
}
////////// EDITOR TOOLBAR
import { getNotetypeGroup } from "./notetype";
import { getFormatInlineGroup } from "./formatInline";
import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
import { getColorGroup } from "./color";
import { getTemplateGroup, getTemplateMenus } from "./template";
const i18n = setupI18n({ modules: [ModuleName.EDITING] });
document.addEventListener("DOMContentLoaded", () => {
i18n.then(() => {
$editorToolbar.buttonsPromise.then((buttons) => {
buttons.update(() => [
getNotetypeGroup(),
getFormatInlineGroup(),
getFormatBlockGroup(),
getColorGroup(),
getTemplateGroup(),
]);
return buttons;
});
$editorToolbar.menusPromise.then((menus) => {
menus.update(() => [...getFormatBlockMenus(), ...getTemplateMenus()]);
return menus;
});
});
});
initToolbar(i18n);

43
ts/editor/toolbar.ts Normal file
View file

@ -0,0 +1,43 @@
import type { ToolbarItem } from "editor-toolbar/types";
import type ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
import type { Writable } from "svelte/store";
import { getNotetypeGroup } from "./notetype";
import { getFormatInlineGroup } from "./formatInline";
import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
import { getColorGroup } from "./color";
import { getTemplateGroup, getTemplateMenus } from "./template";
export function initToolbar(i18n: Promise<void>): void {
document.addEventListener("DOMContentLoaded", () => {
i18n.then(() => {
globalThis.$editorToolbar.buttonsPromise.then(
(
buttons: Writable<
(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]
>
): Writable<(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]> => {
buttons.update(() => [
getNotetypeGroup(),
getFormatInlineGroup(),
getFormatBlockGroup(),
getColorGroup(),
getTemplateGroup(),
]);
return buttons;
}
);
globalThis.$editorToolbar.menusPromise.then(
(menus: Writable<ToolbarItem[]>): Writable<ToolbarItem[]> => {
menus.update(() => [
...getFormatBlockMenus(),
...getTemplateMenus(),
]);
return menus;
}
);
});
});
}