X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/9a7edc6e52467501832202732dec2e61a515aae0..refs/pull/5689/head:/resources/js/wysiwyg/index.ts diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts index fee536572..7ecf91d23 100644 --- a/resources/js/wysiwyg/index.ts +++ b/resources/js/wysiwyg/index.ts @@ -1,15 +1,21 @@ -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, 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 "./common-events"; -import {handleDropEvents} from "./drop-handling"; +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, options: Record = {}): SimpleWysiwygEditorInterface { const config: CreateEditorArgs = { @@ -37,35 +43,50 @@ 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), + registerShortcuts(context), + registerKeyboardHandling(context), registerTableResizer(editor, editWrap), + registerTableSelectionHandler(editor), + registerTaskListHandler(editor, editArea), + registerDropPasteHandling(context), + registerNodeResizer(context), + registerAutoLinks(editor), ); listenToCommonEvents(editor); - handleDropEvents(editor); setEditorContentFromHtml(editor, htmlContent); const debugView = document.getElementById('lexical-debug'); if (debugView) { debugView.hidden = true; - } - editor.registerUpdateListener(({editorState}) => { - console.log('editorState', editorState.toJSON()); - if (debugView) { + 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(); + }; - const context: EditorUiContext = buildEditorUI(container, editArea, editWrap, editor, options); registerCommonNodeMutationListeners(context); return new SimpleWysiwygEditorInterface(editor);