Bug: SharedHistoryExtension doesn't work with external editor update

[levensta]

Lexical version: 0.45

Steps To Reproduce

1. Create a decorator node containing a nested lexical instance with a registered SharedHistoryExtension.
2. In the node component, register a listener for updating the nested editor instance. In the callback, trigger the update of the outer editor
3. Write text in an external editor and in a nested editor
4. Press Ctrl + Z in the nested editor

Link to code example: https://codesandbox.io/p/sandbox/5qg5ff

The current behavior

Shared history between editors doesn't work. Undo doesn't undo actions within a nested editor. But it correctly if the update has HISTORIC_TAG or you don't call the external editor update at all

The expected behavior

The shared history works regardless of whether the external editor is updated when the nested one is updated or not.

Impact of fix

Synchronizing updates between nested editors and the external one is important to trigger node serialization. But this pattern causes a non-obvious bug with a shared history

[etrepum]

I've only done a quick look but I believe this is working as designed. It's not a particularly good design.

What's probably happening:

1. Nested editor updates, unconditionally pushes an entry on the history stack because the last entry was from another editor
2. Parent editor updates, unconditionally pushes an entry on the history stack because the last entry was from another editor
3. Undo happens, which cascades an update (I think you're just ignoring selection, but not historic) and unconditionally pushes an entry onto the history stack

Basically the stack only ever grows because undo also pushes a new entry

[etrepum]

I'm pretty sure this is the case, if you add this to the update listener it will let you undo (but it takes two undos per character, for the same reasons as above):

          if (tags.has("historic")) {
            return;
          }

If you change the design to not use shared history, it will work better. In order for the parent history to manipulate the inner editor you'd need to store the EditorState on the node rather than just the LexicalEditor and make sure that the state propagates to setEditorState (but only when editor.getEditorState() !== newEditorState) then it will work better and essentially centralize all of the history to one editor instead of interleaving two histories into one undoStack.

Shared history just won't work well if you're cascading updates like this from one editor to the other, because any interleave of editors will generate a new entry regardless of delay.

[levensta]

In order for the parent history to manipulate the inner editor you'd need to store the EditorState on the node rather than just the LexicalEditor and make sure that the state propagates to setEditorState (but only when editor.getEditorState() !== newEditorState)

I'm not quite sure what you mean by state propagation. If you store EditorState in a node and update the node's state property every time a nested editor is updated, that wouldn't eliminate cascading updates, would it?

<LexicalExtensionEditorComposer initialEditor={captionEditor}>
  <OnChangePlugin
    ignoreSelectionChange
    onChange={() => {
      editor.update(
        (captionState) => {
          const node = $getNodeByKey(nodeKey);
          // trigger an update to the main editor to trigger serialization
          if (node) {
            node.getWritable().__captionState = captionState;
          }
        }
      );
    }}
  />
</LexicalExtensionEditorComposer>

[etrepum]

If you turn off history in the nested editor, and you have a way for updateDOM to propagate the state to the inner editor (at least on historic tagged updates) so undo/redo effects the nested editor, then you’re basically just lifting all changes from the nested editor into the parent editor so it’s a flat history for one editor. You do have to be careful to propagate the state only under the correct conditions to prevent loops.

[levensta]

This could work, but then the state would not only need to be stored, but also read by the nested editor on every update. I'm afraid that the selection might get lost when typing text inside the editor

[etrepum]

Like I said, you have to be careful to only propagate the state under the correct conditions. Shared history only works if state isn't interleaved between two different editors. If you have interleaved state, you either need independent non-shared histories or you need to de-interleave them somehow, whether that's in this way or replacing the implementation with something else entirely that can handle interleaved histories.

[levensta]

In the same sandbox example, I tried storing EditorState in a node and updating it when the nested editor is updated. To my surprise, the selection doesn't reset when calling captionEditor.setEditorState(captionState), but this still doesn't unify the history. Apparently, the Undo command propagates to the parent main editor, but isn't processed, and the history stack remains unchanged

[etrepum]

If done correctly it will work, you probably didn't implement the part where the state only propagates under the correct conditions (e.g. not in response to historic).

[etrepum]

To do it correctly you will need to conditionally do the parent editor update (when the change originated from the nested editor), and conditionally call setEditorState (when the change initiated from the parent editor) and also pass a tag through there so you know how to update the parent editor based on an update to the nested editor caused by the call to setEditorState.

[levensta]

Got it! The tag worked, thanks for the tip. But there's still the issue of resetting the nested editor to its initial state when the undoStack is cleared

Screen.Recording.2026-06-05.at.03.23.32.mov

My first thought was to initialize the state property with a value from the created editor, but an exception is thrown, even though $initialEditorState can be passed when creating the editor

this.__caption = caption || buildEditorFromExtensions(MyBlockEditorExtension);
// setEditorState: the editor state is empty. Ensure the editor state's root node never becomes empty.
this.__captionState = this.__caption.getEditorState();

[levensta]

No, it seems the problem isn't with restoring the initial state. Each new entry in the nested editor leaves an irreversible entry with the first character. Also, the Undo operation is unavailable after a certain delay after entering

delay.input.mov