Type text -> Save changes -> Rebuild the UI based on the changes: Result issue of losing caret in between execution

[OttlikG]

I'm building a website builder that stores everything in a JSON state.
When I type in the live edit input a save action is triggered and then I reinitialise the UI from the saved JSON and restore the lexical state.
Unfortunately when I type and save the editor state in JSON that ignores the selection part. So I'm left with only text restoration but on every type I lose caret.

Is there any way restore caret?

There are few solution in my mind:

• Either implement section conversion to JSON and pass it in at editor initialisation.
• Or what is my current workaround is using OnChangePlugin's onChange function. And I employ listening on BLUR_COMMAND to save changes. This way I keep the focus while I'm typing.

Unfortunately the latter option doesn't provide a way to unsubscribe from BLUR_COMMAND.

Is there a way to save the editor state at every typed character and restore caret every time.

[etrepum]

Lexical is not designed to be a managed component, for performance reasons but also because it is dependent on DOM state such as selection and it doesn't use an expensive algorithm such as React's DOM diffing - there's a 1:1 correspondence between Lexical nodes and DOM nodes and if you create a new Lexical node (such as by restoring JSON) then it will create a new DOM node and destroy the old one. It's fine to save everything in a JSON state on change but you really don't want to load everything from JSON except for the initial state or maybe an explicit "reload" action.

Selection can not be persisted as-is, the keys used for anchor and focus are ephemeral, you will have to come up with your scheme for serializing selection (e.g. a path from the root) if you really choose to go down that route.