JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" id="field">edit me</div>

JavaScript

Element.prototype.getCaretPosition = function() {
  var caretOffset = 0;
  var doc = this.ownerDocument || this.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(this);
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      caretOffset = preCaretRange.toString().length;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(this);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
  }
  return caretOffset;
}

Element.prototype.setCaretPosition = function(pos) {
	var range = document.createRange();
  var nodes = this.childNodes;
  for (var i = 0; i < nodes.length; i++) {
  	var len = nodes[i].innerText.length;
  	if (len > pos) {
    	range.setStart(nodes[i], len - pos);
      break;
    }
    pos -= len;
  }
  range.collapse(true);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  this.focus();
}

var field = document.getElementById('field');

function breakField() {
	var text = field.innerText;
  var html = '';
  for (var i = 0; i < text.length; i++) {
  	html += '<span>' + text[i] + '</span>';
  }
  field.innerHTML = html;
}

field.oninput = function() {
  var caret = field.getCaretPosition();
  breakField();
  field.setCaretPosition(caret-1);
};