Lexical: Linked up change/draft management

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);
         }

resources/js/wysiwyg/todo.md

@@ -2,7 +2,7 @@
 
 ## In progress
 
-- Draft/change management (connect with page editor component)
+//
 
 ## Main Todo
 

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(),