Javascript textarea undo redo

Question

I'm making a small javascript editor (for a chrome extension) somewhat like the one on SO.

There's a toolbar for manipulation of the text in the textarea. (e.g. surround the selected text with some template)

I was wondering if there is a easy way to achieve this, currently when using the system undo/redo, it messes the text up (I think the system is only keeping track of deltas between edits).

Answer 1

If the textarea has focus and its caret is at the correct position,

document.execCommand("insertText", false, "the text to insert");

will insert the text "the text to insert", preserving the browser's native undo stack. (See the work in progress HTML Editing API spec.) Chrome 18 supports this, but I'm unsure of the exact version it was introduced.