How to make contenteditable div reversible after change made using js?

Question

When I delete any text in the contenteditable div by mistake, I can undo it with Ctrl + z .

But after I made some change with javascript . I can not use Ctrl + z to return to the previous change.

For example, when I add a node to the selected text, such as <p> or <h1> , I could not cancel the content until the previous change. jsfiddle.net/NfGM3/ (bad coding because I'm new to window.getSelection() )

I use div instead of textarea because I want to add node to the content.

So, how can I make this reversible in the contenteditable div after a change made with js?

Answer 1

How about adding a keyup event handler that will keep track of the current text after each keystroke. You can then catch Ctrl + Z and return to the previous content if you find that the Ctrl + Z buttons were pressed. You could save revisions in an array to support a series of operations Ctrl + Z.