Contenteditable div set caret после замены текста HTML

Question

Я пытаюсь создать редактор кода на основе веб-страниц, и я придумал способ подметать весь текст и заменять все, что соответствует моему супер простому регулярному выражению, цветному HTML. Смотрите его здесь:

$("#text-area").on('keyup', function(e){ 
    var html = $("#text-area").html(); 
    var filter = html.replace(/function/g, '<span style="color:pink;">function</span>'); 
    $("#text-area").html(filter); 
}); 

Я проводил часы землеройных StackOverflow и нашел подобные ситуации, но немного отличается, что я не могу применить к моей ситуации здесь. Вот в чем проблема:

1) Как только я подметаю текст и заменяю выборочные слова на цветной HTML, каретка возвращается в начало div.

2) Поскольку это код-редактор (чтение других файлов), мне нужно пустое пространство: pre или pre-wrap. Но тогда позиции каретки одинаковы для любого количества разрывов строк, поэтому каретка не перемещается, а новые строки просто добавляются ниже каретки, и из любой новой пустой строки она перескакивает до любой строки, которая не пуста.

У меня есть упрощенный вариант моей ситуации в JSFiddle