I'd like to achieve etherpad UI effect when each user types in different colour. I use contenteditable div as a rich text editor.
What I've tried so far:
1) On any input change make a diff between original and changed text (using diff-match-patch, for example).
2) Look at the diff substring bounds and see if it lays inside user's text (defined by a couple of tags)
3) If true, do nothing. If false, insert two colour tags aside of that substring, and apply the change calling $(element).html(new_text)
There is a major problem - calling html() resets caret position to zero, which is kinda bad when you work in a text editor. I tried to extract caret position from contenteditable div and set it again with diff.length offset - that, too, doesn't work good, because I've got a lot of child nodes inside my div, and caret offset is relative to a parent.
UPDATE:
So, I can narrow down my problem a bit:
1) I know how to get caret position within TextNode element
2) I know how to set it within TextNode element (with Rangy or without)
3) The only question is how to find out which element is my caret on now?
I end up using Rangy's saveSelection and restoreSelection functions. Big thanks to Tim Down, of course.