Раскрасить вводимый пользователем текст в указанный цвет по мере его ввода

Я бы хотел получить эффект интерфейса etherpad, когда каждый пользователь вводит разные цвета. Я использую contenteditable div как богатый текстовый редактор.

То, что я пробовал до сих пор:

1) При любом изменении ввода сделайте разницу между оригинальным и измененным текстом (например, с помощью diff-match-patch).

2) Посмотрите на границы подстроки diff и посмотрите, лежит ли он внутри текста пользователя (определяется несколькими тегами)

3) Если это правда, ничего не делайте. Если false, вставьте две цветовые метки в сторону этой подстроки и примените изменение, вызывающее $(element).html(new_text)

Существует большая проблема - вызов html() сбрасывает позицию каретки на ноль, что плохо работает при работе в текстовом редакторе. Я попытался извлечь позицию каретки из contenteditable div и снова установить ее с помощью diff.length offset - это тоже не работает хорошо, потому что у меня есть много дочерних узлов внутри моего div, а смещение каретки - относительно родитель.

ОБНОВИТЬ:

Итак, я немного могу сузить свою проблему:

1) Я знаю, как получить позицию каретки в элементе TextNode

2) Я знаю, как установить его в элементе TextNode (с Rangy или без)

3) Вопрос только в том, как узнать, какой элемент мой карет сейчас?