X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/04c7e680fd8e86004ab27c517b3fa300c7091062..refs/pull/5689/head:/resources/js/wysiwyg/index.ts diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts index 09b6e060b..7ecf91d23 100644 --- a/resources/js/wysiwyg/index.ts +++ b/resources/js/wysiwyg/index.ts @@ -1,14 +1,23 @@ -import {createEditor, CreateEditorArgs, LexicalEditor} from 'lexical'; +import {$getSelection, createEditor, CreateEditorArgs, LexicalEditor} from 'lexical'; import {createEmptyHistoryState, registerHistory} from '@lexical/history'; import {registerRichText} from '@lexical/rich-text'; import {mergeRegister} from '@lexical/utils'; -import {getNodesForPageEditor} from './nodes'; +import {getNodesForPageEditor, registerCommonNodeMutationListeners} from './nodes'; import {buildEditorUI} from "./ui"; -import {getEditorContentAsHtml, setEditorContentFromHtml} from "./actions"; +import {getEditorContentAsHtml, setEditorContentFromHtml} from "./utils/actions"; import {registerTableResizer} from "./ui/framework/helpers/table-resizer"; -import {el} from "./helpers"; +import {EditorUiContext} from "./ui/framework/core"; +import {listen as listenToCommonEvents} from "./services/common-events"; +import {registerDropPasteHandling} from "./services/drop-paste-handling"; +import {registerTaskListHandler} from "./ui/framework/helpers/task-list-handler"; +import {registerTableSelectionHandler} from "./ui/framework/helpers/table-selection-handler"; +import {el} from "./utils/dom"; +import {registerShortcuts} from "./services/shortcuts"; +import {registerNodeResizer} from "./ui/framework/helpers/node-resizer"; +import {registerKeyboardHandling} from "./services/keyboard-handling"; +import {registerAutoLinks} from "./services/auto-links"; -export function createPageEditorInstance(container: HTMLElement, htmlContent: string): SimpleWysiwygEditorInterface { +export function createPageEditorInstance(container: HTMLElement, htmlContent: string, options: Record = {}): SimpleWysiwygEditorInterface { const config: CreateEditorArgs = { namespace: 'BookStackPageEditor', nodes: getNodesForPageEditor(), @@ -34,29 +43,51 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st const editWrap = el('div', { class: 'editor-content-wrap', }, [editArea]); + container.append(editWrap); container.classList.add('editor-container'); + container.setAttribute('dir', options.textDirection); + if (options.darkMode) { + container.classList.add('editor-dark'); + } const editor = createEditor(config); editor.setRootElement(editArea); + const context: EditorUiContext = buildEditorUI(container, editArea, editWrap, editor, options); mergeRegister( registerRichText(editor), registerHistory(editor, createEmptyHistoryState(), 300), - registerTableResizer(editor, editArea), + registerShortcuts(context), + registerKeyboardHandling(context), + registerTableResizer(editor, editWrap), + registerTableSelectionHandler(editor), + registerTaskListHandler(editor, editArea), + registerDropPasteHandling(context), + registerNodeResizer(context), + registerAutoLinks(editor), ); + listenToCommonEvents(editor); + setEditorContentFromHtml(editor, htmlContent); const debugView = document.getElementById('lexical-debug'); - editor.registerUpdateListener(({editorState}) => { - console.log('editorState', editorState.toJSON()); - if (debugView) { + if (debugView) { + debugView.hidden = true; + editor.registerUpdateListener(({dirtyElements, dirtyLeaves, editorState, prevEditorState}) => { + // Debug logic + // console.log('editorState', editorState.toJSON()); debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2); - } - }); + }); + } + + // @ts-ignore + window.debugEditorState = () => { + return editor.getEditorState().toJSON(); + }; - buildEditorUI(container, editArea, editor); + registerCommonNodeMutationListeners(context); return new SimpleWysiwygEditorInterface(editor); }