JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="showCaretPos();">

  <p><i>Click on the button to move the caret to the right of its last position.</i></p>

  <input type="button" value="Move Caret" onclick="moveCaret();">

  <div id="editableDiv" contenteditable="true" spellcheck="false">Here is some <b>bold</b> and <i>italic and <b>bold</b></i> text.</div>

  <div id="caretPos">Caret position: </div>

</body>

CSS

body {
  padding: 20px;
  font-family: sans-serif;
}

input {
  margin-top: 20px;
  padding: 5px 10px;
}

#editableDiv {
  margin: 20px 0;
  padding: 10px;
  border: solid 1px #000;
}

JavaScript

// Adding The autofocus attribute to the contenteditable div doesn't seem to work, for some reason...
  document.getElementById('editableDiv').focus();

  function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument || element.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(element);
        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(element);
      preCaretTextRange.setEndPoint("EndToEnd", textRange);
      caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
  }

  function showCaretPos() {
    var el = document.getElementById("editableDiv");
    var caretPosEl = document.getElementById("caretPos");
    caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el);
    localStorage.setItem("caretPosition", getCaretCharacterOffsetWithin(el));
  }

  document.getElementById('editableDiv').onkeyup = showCaretPos;
  document.getElementById('editableDiv').onmouseup = showCaretPos;

  function setCursor(pos) {
    var tag = document.getElementById("editableDiv");
    var setpos = document.createRange();
    var set = window.getSelection();
    setpos.setStart(tag.childNodes[0], pos);
    setpos.collapse(true);
    set.removeAllRanges();
    set.addRange(setpos);
    tag.focus();
  }

  function moveCaret() {
    document.getElementById('editableDiv').focus();
    var x = Number(localStorage.getItem("caretPosition"));
   ...