X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/517c578a5f3c7718db9dc54603e553c0a935a89f..refs/pull/5676/head:/resources/js/wysiwyg/ui/index.ts diff --git a/resources/js/wysiwyg/ui/index.ts b/resources/js/wysiwyg/ui/index.ts index c823f9f95..c48386bb4 100644 --- a/resources/js/wysiwyg/ui/index.ts +++ b/resources/js/wysiwyg/ui/index.ts @@ -1,38 +1,42 @@ import {LexicalEditor} from "lexical"; -import {getMainEditorFullToolbar} from "./toolbars"; import {EditorUIManager} from "./framework/manager"; -import {image as imageFormDefinition, link as linkFormDefinition, source as sourceFormDefinition} from "./defaults/form-definitions"; -import {ImageDecorator} from "./decorators/image"; import {EditorUiContext} from "./framework/core"; +import {el} from "../utils/dom"; + +export function buildEditorUI(containerDOM: HTMLElement, editor: LexicalEditor, options: Record): EditorUiContext { + const editorDOM = el('div', { + contenteditable: 'true', + class: `editor-content-area ${options.editorClass || ''}`, + }); + const scrollDOM = el('div', { + class: 'editor-content-wrap', + }, [editorDOM]); + + containerDOM.append(scrollDOM); + containerDOM.classList.add('editor-container'); + containerDOM.setAttribute('dir', options.textDirection); + if (options.darkMode) { + containerDOM.classList.add('editor-dark'); + } -export function buildEditorUI(element: HTMLElement, editor: LexicalEditor) { const manager = new EditorUIManager(); const context: EditorUiContext = { editor, - editorDOM: element, + containerDOM: containerDOM, + editorDOM: editorDOM, + scrollDOM: scrollDOM, manager, - translate: (text: string): string => text, - lastSelection: null, + 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()); - - // Register modals - manager.registerModal('link', { - title: 'Insert/Edit link', - form: linkFormDefinition, - }); - manager.registerModal('image', { - title: 'Insert/Edit Image', - form: imageFormDefinition - }); - manager.registerModal('source', { - title: 'Source code', - form: sourceFormDefinition, - }); - - // Register image decorator listener - manager.registerDecoratorType('image', ImageDecorator); + return context; } \ No newline at end of file