X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/49546cd627f4595cc245cad7e282d6c1f8506fd6..refs/pull/5280/head:/resources/js/wysiwyg/index.ts

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index 266866c62..c4403773b 100644
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -1,70 +1,129 @@
-import {
-    $createParagraphNode,
-    $getRoot,
-    $getSelection,
-    COMMAND_PRIORITY_LOW,
-    createCommand,
-    createEditor, CreateEditorArgs,
-} from 'lexical';
+import {$getSelection, createEditor, CreateEditorArgs, isCurrentlyReadOnlyMode, LexicalEditor} from 'lexical';
 import {createEmptyHistoryState, registerHistory} from '@lexical/history';
 import {registerRichText} from '@lexical/rich-text';
-import {$getNearestBlockElementAncestorOrThrow, mergeRegister} from '@lexical/utils';
-import {$generateNodesFromDOM} from '@lexical/html';
-import {$setBlocksType} from '@lexical/selection';
-import {getNodesForPageEditor} from './nodes';
-import {$createCalloutNode, $isCalloutNode, CalloutCategory} from './nodes/callout';
+import {mergeRegister} from '@lexical/utils';
+import {getNodesForPageEditor, registerCommonNodeMutationListeners} from './nodes';
+import {buildEditorUI} from "./ui";
+import {getEditorContentAsHtml, setEditorContentFromHtml} from "./utils/actions";
+import {registerTableResizer} from "./ui/framework/helpers/table-resizer";
+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";
 
-export function createPageEditorInstance(editArea: HTMLElement) {
+export function createPageEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
     const config: CreateEditorArgs = {
         namespace: 'BookStackPageEditor',
         nodes: getNodesForPageEditor(),
         onError: console.error,
+        theme: {
+            text: {
+                bold: 'editor-theme-bold',
+                code: 'editor-theme-code',
+                italic: 'editor-theme-italic',
+                strikethrough: 'editor-theme-strikethrough',
+                subscript: 'editor-theme-subscript',
+                superscript: 'editor-theme-superscript',
+                underline: 'editor-theme-underline',
+                underlineStrikethrough: 'editor-theme-underline-strikethrough',
+            }
+        }
     };
 
-    const startingHtml = editArea.innerHTML;
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(startingHtml, 'text/html');
+    const editArea = el('div', {
+        contenteditable: 'true',
+        class: 'editor-content-area page-content',
+    });
+    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),
     );
 
-    editor.update(() => {
-        const startingNodes = $generateNodesFromDOM(editor, dom);
-        const root = $getRoot();
-        root.append(...startingNodes);
-    });
+    listenToCommonEvents(editor);
 
-    const debugView = document.getElementById('lexical-debug');
-    editor.registerUpdateListener(({editorState}) => {
-        console.log('editorState', editorState.toJSON());
-        debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
-    });
+    setEditorContentFromHtml(editor, htmlContent);
 
-    // Todo - How can we store things like IDs and alignment?
-    //   Node overrides?
-    //   https://lexical.dev/docs/concepts/node-replacement
+    const debugView = document.getElementById('lexical-debug');
+    if (debugView) {
+        debugView.hidden = true;
+    }
 
-    // Example of creating, registering and using a custom command
+    let changeFromLoading = true;
+    editor.registerUpdateListener(({dirtyElements, dirtyLeaves, editorState, prevEditorState}) => {
+        // Watch for selection changes to update the UI on change
+        // Used to be done via SELECTION_CHANGE_COMMAND but this would not always emit
+        // for all selection changes, so this proved more reliable.
+        const selectionChange = !(prevEditorState._selection?.is(editorState._selection) || false);
+        if (selectionChange) {
+            editor.update(() => {
+                const selection = $getSelection();
+                context.manager.triggerStateUpdate({
+                    editor, selection,
+                });
+            });
+        }
 
-    const SET_BLOCK_CALLOUT_COMMAND = createCommand();
-    editor.registerCommand(SET_BLOCK_CALLOUT_COMMAND, (category: CalloutCategory = 'info') => {
-        const selection = $getSelection();
-        const blockElement = $getNearestBlockElementAncestorOrThrow(selection.getNodes()[0]);
-        if ($isCalloutNode(blockElement)) {
-            $setBlocksType(selection, $createParagraphNode);
-        } else {
-            $setBlocksType(selection, () => $createCalloutNode(category));
+        // Emit change event to component system (for draft detection) on actual user content change
+        if (dirtyElements.size > 0 || dirtyLeaves.size > 0) {
+            if (changeFromLoading) {
+                changeFromLoading = false;
+            } else {
+                window.$events.emit('editor-html-change', '');
+            }
         }
-        return true;
-    }, COMMAND_PRIORITY_LOW);
 
-    const button = document.getElementById('lexical-button');
-    button.addEventListener('click', event => {
-        editor.dispatchCommand(SET_BLOCK_CALLOUT_COMMAND, 'info');
+        // Debug logic
+        // console.log('editorState', editorState.toJSON());
+        if (debugView) {
+            debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
+        }
     });
+
+    // @ts-ignore
+    window.debugEditorState = () => {
+        console.log(editor.getEditorState().toJSON());
+    };
+
+    registerCommonNodeMutationListeners(context);
+
+    return new SimpleWysiwygEditorInterface(editor);
 }
+
+export class SimpleWysiwygEditorInterface {
+    protected editor: LexicalEditor;
+
+    constructor(editor: LexicalEditor) {
+        this.editor = editor;
+    }
+
+    async getContentAsHtml(): Promise<string> {
+        return await getEditorContentAsHtml(this.editor);
+    }
+}
\ No newline at end of file