[Breaking Change][lexical] Bug Fix: Commit updates on editor.setRootE…

…lement(null) (#7023)
facebook · Jan 9, 2025 · d7abafd · d7abafd
1 parent 6add515
commit d7abafd
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/lexical/src/LexicalEditor.ts b/packages/lexical/src/LexicalEditor.ts
@@ -1096,11 +1096,15 @@ export class LexicalEditor {
           }
         }
       } else {
-        // If content editable is unmounted we'll reset editor state back to original
-        // (or pending) editor state since there will be no reconciliation
-        this._editorState = pendingEditorState;
-        this._pendingEditorState = null;
+        // When the content editable is unmounted we will still trigger a
+        // reconciliation so that any pending updates are flushed,
+        // to match the previous state change when
+        // `_editorState = pendingEditorState` was used, but by
+        // using a commit we preserve the readOnly invariant
+        // for editor.getEditorState().
         this._window = null;
+        this._updateTags.add('history-merge');
+        $commitPendingUpdates(this);
       }
 
       triggerListeners('root', this, false, nextRootElement, prevRootElement);

diff --git a/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx b/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx
@@ -1017,7 +1017,7 @@ describe('LexicalEditor tests', () => {
     });
 
     expect(rootListener).toHaveBeenCalledTimes(3);
-    expect(updateListener).toHaveBeenCalledTimes(3);
+    expect(updateListener).toHaveBeenCalledTimes(4);
     expect(container.innerHTML).toBe(
       '<span contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="ltr"><span data-lexical-text="true">Change successful</span></p></span>',
     );
@@ -1032,7 +1032,13 @@ describe('LexicalEditor tests', () => {
       init();
       const contentEditable = editor.getRootElement();
       editor.setEditable(editable);
+      editor.update(() => {
+        // Cause the editor to become dirty, so we can ensure
+        // that the getEditorState()._readOnly invariant holds
+        $getRoot().markDirty();
+      });
       editor.setRootElement(null);
+      expect(editor.getEditorState()._readOnly).toBe(true);
       const editorState = editor.parseEditorState(JSON_EDITOR_STATE);
       editor.setEditorState(editorState);
       editor.update(() => {