X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/dc1a40ea7465277ae82027e07926e230549c89f0..refs/pull/5721/head:/resources/js/wysiwyg/ui/index.ts diff --git a/resources/js/wysiwyg/ui/index.ts b/resources/js/wysiwyg/ui/index.ts index 56ae9354a..c48386bb4 100644 --- a/resources/js/wysiwyg/ui/index.ts +++ b/resources/js/wysiwyg/ui/index.ts @@ -1,20 +1,42 @@ -import { - $getSelection, - COMMAND_PRIORITY_LOW, - LexicalEditor, - SELECTION_CHANGE_COMMAND -} from "lexical"; -import {getMainEditorFullToolbar} from "./toolbars"; +import {LexicalEditor} from "lexical"; +import {EditorUIManager} from "./framework/manager"; +import {EditorUiContext} from "./framework/core"; +import {el} from "../utils/dom"; -export function buildEditorUI(element: HTMLElement, editor: LexicalEditor) { - const toolbar = getMainEditorFullToolbar(); - toolbar.setContext({editor}); - element.before(toolbar.getDOMElement()); +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]); - // Update button states on editor selection change - editor.registerCommand(SELECTION_CHANGE_COMMAND, () => { - const selection = $getSelection(); - toolbar.updateState({editor, selection}); - return false; - }, COMMAND_PRIORITY_LOW); + containerDOM.append(scrollDOM); + containerDOM.classList.add('editor-container'); + containerDOM.setAttribute('dir', options.textDirection); + if (options.darkMode) { + containerDOM.classList.add('editor-dark'); + } + + const manager = new EditorUIManager(); + const context: EditorUiContext = { + editor, + containerDOM: containerDOM, + editorDOM: editorDOM, + scrollDOM: scrollDOM, + manager, + 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); + + return context; } \ No newline at end of file