Rangy - Restore Cursor Position When Replacing Innerhtml

I am using Rangy to select and restore the cursor position. It does an excellent job but it has not been designed for when user input is manipulated programmatically and a shorter

Solution 1:

Putting the caret at the end of the contents of the <div> is quite easy:

var sel = rangy.getSelection();
sel.selectAllChildren(el);
sel.collapseToEnd();

For the more general case, you can create a range that encompasses the content from the start of the <div> to the caret position, get its text using the text() method of Rangy ranges, remove white space from that text and measure its length. Demo:

http://jsbin.com/ebeqoj/5/edit