Paint user input text into specified colour as it's typed

Question

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?

Answer 1

I end up using Rangy's saveSelection and restoreSelection functions. Big thanks to Tim Down, of course.