Eu uso uma div editável como um campo de entrada para digitar algum texto e inserir ícones por meio de um botão (pequenas imagens html) dentro desse texto.

Contanto que o texto seja mais estreito que o campo editável por conteúdo, tudo bem.

Depois que o texto for maior que o campo (oculto parcialmente):

quando insiro um caractere de texto, tudo fica bem também; o último caractere é exibido automaticamente depois que a tecla é pressionada, para que você possa sempre ver o que está digitando. Mas quando insiro um ícone por meio do botão, ele fica bem, mas fica oculto, pois o conteúdo do campo não se move para tornar visível o ícone recém-inserido, até que eu insira outro caractere de texto.

Alguma solução para isso, para que o último elemento inserido (texto ou html) esteja sempre visível para o usuário?

function pasteIcon(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(),
        node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);
      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    document.selection.createRange().pasteIcon(html);
  }
}

$(document).ready(function() {
  $('.buttOn').click(function() {
    $('.contEd').focus();
    pasteIcon('<img class="icOn" src="http://www.bmgstuff.com/files/interface/generator_frame/text_blood.png">');
  })
});

[contenteditable="true"] {
  display: inline;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: inherit;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

[contenteditable="true"] br {
  display: none;
}

.contAiner {
  display: flex;
}

.buttOn {
  width: 24px;
  height: 24px;
  border: none;
  background: #666;
  color: white;
}

.contEd {
  height: 22px;
  text-align: center;
  width: 100px;
  line-height: 23px;
  color: black;
  font-size: 10.5px;
  font-family: arial;
  border: 1px solid black;
}

.icOn {
  width: 9px;
  height: 13px;
  top: 1px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contAiner">
  <input class="buttOn" type="button" value="B">
  <div class="contEd" contenteditable="true" spellcheck="false" autocomplete="off"></div>
</div>

Aqui está ojsFiddle

E aqui está ofio original Eu peguei a função "pasteIcon" de.

PS: Tentei acionar um código de tecla 39 (seta à direita), logo após a função pasteIcon, a fim de simular um pressionamento de tecla, mas simplesmente não funcionou.