How to restore history data when using single instance of EditorView

The content being edited in my application is a dynamic list, so I can only instantiate one EditorView, But I hope that every edited content has its own independent undo/redo records." So, I need to restore the previous editing history every time I edit. Because the ‘toJSON’ API of ‘State’ will not save history, So I’ve tried the following solutions, but there seem to be various problems with each.

  1. via. this topic

    I saved the current EditorState in memory, When I need it again, use EditorView.updateState() to switch the previous State. but when I edit, The editor behaves abnormally, and console prompt errors like ‘Position X out of range’".

  2. Replay transactions

    I add a plugin to store every transaction by “appendTransaction” event, and after EditorView created, I dispatch all “tr”. in this case, I got “Applying a mismatched transaction” error.

  3. Use “history$” that attribute of EditorState.

    I just replaced history$ with the history$ stored in memory, ( I know this is a very crude solution, but I still tried it. lol) It works for undo action only, when redo it prompt errors like “Invalid content for node doc XXXX”

I know that a particular solution may be correct, there might be some issues in the details, but perhaps my direction is completely wrong. I want to know what the best implementation for restoring history data should look like.

Also, my English is mediocre, I hope I have expressed myself clearly. If anyone could help me, I would be so grateful.

This should actually work. Maybe you have some other code running that assumes the editor state isn’t changing?

You are truly insightful. I made an obvious mistake of assigning State to a reactive variable within the framework, which led to all properties of State being recursively converted. But now it’s working great, thank you.