X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/8a13a9df8092d1f7aad84fd960705380c181763e..refs/pull/5689/head:/resources/js/wysiwyg/ui/index.ts diff --git a/resources/js/wysiwyg/ui/index.ts b/resources/js/wysiwyg/ui/index.ts index bfa76bb82..e7ec6adbc 100644 --- a/resources/js/wysiwyg/ui/index.ts +++ b/resources/js/wysiwyg/ui/index.ts @@ -1,12 +1,11 @@ import {LexicalEditor} from "lexical"; import { - getCodeToolbarContent, + getCodeToolbarContent, getDetailsToolbarContent, getImageToolbarContent, getLinkToolbarContent, - getMainEditorFullToolbar, getTableToolbarContent -} from "./toolbars"; + getMainEditorFullToolbar, getMediaToolbarContent, getTableToolbarContent +} from "./defaults/toolbars"; import {EditorUIManager} from "./framework/manager"; -import {ImageDecorator} from "./decorators/image"; import {EditorUiContext} from "./framework/core"; import {CodeBlockDecorator} from "./decorators/code-block"; import {DiagramDecorator} from "./decorators/diagram"; @@ -20,16 +19,20 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, scro editorDOM: element, scrollDOM: scrollContainer, manager, - translate: (text: string): string => text, // TODO - Implement - error(error: string): void { - window.$events.error(error); // TODO - Translate + translate(text: string): string { + const translations = options.translations; + return translations[text] || text; + }, + error(error: string|Error): void { + const message = error instanceof Error ? error.message : error; + window.$events.error(message); // TODO - Translate }, options, }; manager.setContext(context); // Create primary toolbar - manager.setToolbar(getMainEditorFullToolbar()); + manager.setToolbar(getMainEditorFullToolbar(context)); // Register modals for (const key of Object.keys(modals)) { @@ -41,6 +44,10 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, scro selector: 'img:not([drawio-diagram] img)', content: getImageToolbarContent(), }); + manager.registerContextToolbar('media', { + selector: '.editor-media-wrap', + content: getMediaToolbarContent(), + }); manager.registerContextToolbar('link', { selector: 'a', content: getLinkToolbarContent(), @@ -53,7 +60,6 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, scro selector: '.editor-code-block-wrap', content: getCodeToolbarContent(), }); - manager.registerContextToolbar('table', { selector: 'td,th', content: getTableToolbarContent(), @@ -61,9 +67,12 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, scro return originalTarget.closest('table') as HTMLTableElement; } }); + manager.registerContextToolbar('details', { + selector: 'details', + content: getDetailsToolbarContent(), + }); // Register image decorator listener - manager.registerDecoratorType('image', ImageDecorator); manager.registerDecoratorType('code', CodeBlockDecorator); manager.registerDecoratorType('diagram', DiagramDecorator);