How to make a contenteditable div reversible after change made with js?

When I delete some text in the contenteditable div in mistake, I can reverse it with Ctrl + z.

But after I made some change with javascript. I can't use Ctrl + z to reverse to previous change.

For example, when I add node to the selected text ,like <p>or <h1>, I could not reverse the content to previous change. jsfiddle.net/NfGM3/ (bad coding because I am new to window.getSelection())

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

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

What about adding a keyup event handler that will keep track of the current text after every keyup. You can then trap Ctrl+Z and revert back to the previous content if you detect that Ctrl+Z have been pressed. You could potentially keep revisions in an array to support a series of Ctrl+Z operations.