Lexical: Linked up change/draft management

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index fee5365728eed4b44fcba4a9cc09fe65aa057b17..4130f41e8a3459d2c56ba373306967f75d46abf9 100644 (file)
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -58,8 +58,21 @@ 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);
         }

diff --git a/resources/js/wysiwyg/todo.md b/resources/js/wysiwyg/todo.md
index 73521df9b254cdab97c16e50dd134ae7d4f8a77c..5e6cdd2cc885434c4d3f91d4400a553c0d98d977 100644 (file)
--- a/resources/js/wysiwyg/todo.md
+++ b/resources/js/wysiwyg/todo.md
@@ -2,7 +2,7 @@
 
 ## In progress
 
-- Draft/change management (connect with page editor component)
+//
 
 ## Main Todo
 

diff --git a/resources/js/wysiwyg/ui/framework/manager.ts b/resources/js/wysiwyg/ui/framework/manager.ts
index c0357c3ea80f9f9225ea9affb65dedb3472e588f..29d959910757573d77484ef741c5a6b3281ef285 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/manager.ts
+++ b/resources/js/wysiwyg/ui/framework/manager.ts
@@ -175,7 +175,6 @@ export class EditorUIManager {
     protected setupEditor(editor: LexicalEditor) {
         // Update button states on editor selection change
         editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-            console.log('select change', arguments);
             this.triggerStateUpdate({
                 editor: editor,
                 selection: $getSelection(),