Lexical: Added media resize support via drag handles

[bookstack] / resources / js / wysiwyg / index.ts

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index e53b9b057dd416f1995ac326037b7151c71a3b1c..64b59492be1318b21fbe9916920c2af62831aa8a 100644 (file)
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -4,11 +4,16 @@ 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 {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/image-resizer";
 
 export function createPageEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
     const config: CreateEditorArgs = {
@@ -41,11 +46,17 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
 
     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),
         registerTableResizer(editor, editWrap),
+        registerTableSelectionHandler(editor),
+        registerTaskListHandler(editor, editArea),
+        registerDropPasteHandling(context),
+        registerNodeResizer(context),
     );
 
     listenToCommonEvents(editor);
@@ -56,14 +67,31 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
     if (debugView) {
         debugView.hidden = true;
     }
-    editor.registerUpdateListener(({editorState}) => {
-        console.log('editorState', editorState.toJSON());
+
+    let changeFromLoading = true;
+    editor.registerUpdateListener(({editorState, dirtyElements, dirtyLeaves}) => {
+
+        // 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', '');
+            }
+        }
+
+        // Debug logic
+        // console.log('editorState', editorState.toJSON());
         if (debugView) {
             debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
         }
     });
 
-    const context: EditorUiContext = buildEditorUI(container, editArea, editWrap, editor, options);
+    // @ts-ignore
+    window.debugEditorState = () => {
+        console.log(editor.getEditorState().toJSON());
+    };
+
     registerCommonNodeMutationListeners(context);
 
     return new SimpleWysiwygEditorInterface(editor);