JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editor" contenteditable>
<p>abc</p>
</div>
<p id="selection"></p>
<pre id="tree"></pre>

JavaScript

var editor = document.getElementById("editor");
var tree = document.getElementById("tree");
var selection = document.getElementById("selection");

function nodeName(aNode) {
  if (aNode.tagName) {
    return "<" + aNode.tagName.toLowerCase() + ">";
  }
  return "\"" + aNode.textContent + "\"";
}

editor.addEventListener("focus", ()=>{setTimeout(()=>{
  editor.innerHTML = "<p id=\"p\">abc<br></p>";
  var selection = window.getSelection();
  selection.collapse(document.getElementById("p"), 1);
  var range = selection.getRangeAt(0);
  var textNode1 = document.createTextNode("");
  range.insertNode(textNode1);
  var textNode2 = document.createTextNode("");
  range.insertNode(textNode2);
  var textNode3 = document.createTextNode("");
  range.insertNode(textNode3);
  selection.collapse(textNode2, 0);
  editor.dispatchEvent(new Event("input"));
}, 100)});

function printTree()
{
  tree.textContent = "no <p> element...";
  var p = document.getElementById("p");
  if (!p) { return; }
	var str =  "<p>\n";
  for (var i = 0; i < p.childNodes.length; i++) {
      str += "  " + nodeName(p.childNodes.item(i)) + "\n";
  }
  tree.textContent = str;
}

editor.addEventListener("input", printTree);

document.addEventListener("selectionchange", ()=>{
  printTree();
  var range = window.getSelection().getRangeAt(0);
  if (range.collapsed) {
    selection.textContent = "{ " + nodeName(range.startContainer) + ", " + range.startOffset + " }";
  } else {
    selection.textContent = "{ (" + nodeName(range.startContainer) + ", " + range.startOffset + ")-(" + nodeName(range.endContainer) + ", " + range.endOffset + ") }";
  }
});