Utilizo un div contenteditable como campo de entrada para escribir texto e insertar iconos a través de un botón (pequeñas imágenes html) dentro de ese texto.

Mientras el texto sea más angosto que el campo contento, está bien.

Una vez que el texto es más largo que el campo (por lo que está parcialmente oculto):

cuando ingreso un carácter de texto, todo está bien también, el último carácter se muestra automáticamente después de presionar la tecla para que siempre pueda ver lo que está escribiendo. Pero cuando ingreso un ícono a través del botón, el ícono está bien pero está oculto ya que el contenido del campo no se mueve para hacer visible el ícono recién ingresado, hasta que ingrese otro carácter de texto.

¿Alguna solución a esto para que el último elemento ingresado (texto o html) sea siempre visible para el usuario?

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>

Aquí está eljsFiddle

Y aquí está elhilo original Tomé la función "pasteIcon" de.

PD: Traté de activar un código clave 39 (flecha derecha), justo después de la función pasteIcon para simular una pulsación de tecla, pero simplemente no funcionó.