Revert "Revert [Breaking Change][lexical] Bug Fix: Commit updates on …

…editorSetRootElement(null) (#7023) (#7052)"

This reverts commit 29d733c.

packages/lexical/src/LexicalEditor.ts

@@ -1101,11 +1101,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);

packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx

@@ -1021,7 +1021,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>',
     );
@@ -1036,7 +1036,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(() => {