JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

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

editor.addEventListener("focus", ()=>{setTimeout(()=>{
  var blockquote = document.getElementsByTagName("blockquote")[0];
  //window.getSelection().collapse(blockquote.firstChild, blockquote.firstChild.childNodes.length);
	window.getSelection().collapse(blockquote, blockquote.childNodes.length);
}, 100)})

document.addEventListener("selectionchange", ()=>{
  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 + ") }";
  }
});