Eu possuo um HTML nesse estilo:

<div id="text" contenteditable="true">abcd<img src="icon.gif"/>efgh</div> 

e eu possuo o valor numérico ao qual o cursor deve ficar, por exemplo cursor = 5

cujo qual deveria fixar o cursor após a imagem, contudo ele não identifica a imagem como um caractere e a ignora, eu obtenho erros como esse:

Uncaught DOMException: Failed to execute ‘setStart’ on ‘Range’: The offset 5 is larger than or equal to the node’s length (4).

Meu código:

  function setCaret(el, pos) {             for (var node of el.childNodes) {                 if (node.nodeType == 3) {                     if (node.length >= pos) {                         var range = document.createRange(),                             sel = window.getSelection();                         range.setStart(node, pos);                         range.collapse(true);                         sel.removeAllRanges();                         sel.addRange(range);                         return -1;                     } else {                         pos -= node.length;                     }                 } else {                     pos = setCaret(node, pos);                     if (pos == -1) {                         return -1;                     }                 }             }             return pos;         } 

pergunta relacionada: Como definir a posição do cursor em um elemento editável?