I have a contenteditable div which gets it's innerhtml via a websocket from another client's contenteditable div. Everytime a client's div html is received and set, both clients lose their selection range and caret position. I've been using rangy to set selection spans which save a user's selection in the div but I can't replace them into the update html string received from the websocket. For example,
OLD div innerhtml:
<p>test<b><rangy span></span>12<rangy span></span>3</b> (the rangy spans indicate the selected text)
received div innerhtml:
<p>foobar<i>newtext</i>
ideally:
<p>foob<rangy span></span>ar<rangy span></span><i>newtext</i>
How can I reinsert the rangy spans like this to maintain my selection? Is there an easier way besides using rangy? Only one continous region of the div is modified each time I need to reinsert the caret position and selection.
I have also tried rangy's character index based save and restore but this function is broken. http://rangy.googlecode.com/svn/trunk/demos/textrange.html If you remove a character from the range, rangy's character index method fails to restore the range.
