X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/7c504a10a8026135bd5237911a91446b3c727f57..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 7e1f8d981..c48386bb4 100644 --- a/resources/js/wysiwyg/ui/index.ts +++ b/resources/js/wysiwyg/ui/index.ts @@ -1,37 +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 {link as linkFormDefinition} from "./defaults/form-definitions"; +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 = { + const context: EditorUiContext = { editor, + containerDOM: containerDOM, + editorDOM: editorDOM, + scrollDOM: scrollDOM, manager, - translate: (text: string): string => text, + 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 - const toolbar = getMainEditorFullToolbar(); - toolbar.setContext(context); - element.before(toolbar.getDOMElement()); - - // Register modals - manager.registerModal('link', { - title: 'Insert/Edit link', - form: linkFormDefinition, - }); - - // Update button states on editor selection change - editor.registerCommand(SELECTION_CHANGE_COMMAND, () => { - const selection = $getSelection(); - toolbar.updateState({editor, selection}); - return false; - }, COMMAND_PRIORITY_LOW); + return context; } \ No newline at end of file