Defina a posição do cursor na div 'contenteditable' que tem filhos

Eu tenho uma estrutura HTML como esta:

<div contenteditable="true">This is some plain, boring content.</div>

Eu também tenho essa função que permite definir a posição do cursor para qualquer lugar que eu quiser dentro da div:

// Move caret to a specific point in a DOM element
function SetCaretPosition(object, pos)
{
    // Get key data
    var el = object.get(0); // Strip inner object from jQuery object
    var range = document.createRange();
    var sel = window.getSelection();

    // Set the range of the DOM element
    range.setStart(el.childNodes[0], pos);
    range.collapse(true);

    // Set the selection point
    sel.removeAllRanges();
    sel.addRange(range);
}

Esse código funciona completamente bem até eu começar a adicionar tags filho(span, b, i, u, strike, sup, sub) para a div p.

<div contenteditable="true">
    This is some <span class="fancy">plain</span>, boring content.
</div>

As coisas ficam mais complicadas quando essas tags filho terminam com tags filho, por exemplo,

<div contenteditable="true">
    This is some <span class="fancy"><i>plain</i></span>, boring content.
</div>

Essencialmente, o que acontece, é quesetStart lança umIndexSizeError quando eu tentoSetCaretPosition para um índice maior que o início de uma tag filho.setStart só funciona até atingir a primeira tag filho.

O que eu preciso é para oSetCaretPosition para manipular um número desconhecido dessas tags filho (e potencialmente um número desconhecido de tags filho aninhadas) para que a definição da posição funcione da mesma maneira que faria se não houvesse tags.

Então, para ambos:

<div contenteditable="true">This is some plain, boring content.</div>

e isto:

<div contenteditable="true">
    This is <u>some</u> <span class="fancy"><i>plain</i></span>, boring content.
</div>

SetCaretPosition(div, 20); colocaria o sinal de intercalação antes do 'b' em 'chato'.

Qual é o código que eu preciso? Muito Obrigado!