JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable>first editor</div>
<div contenteditable>second editor</div>
<button onclick="onClick(event);">move caret to the first editor</button>
<button onclick="onClick(event);">move caret to the second editor</button>
<button onclick="onClick(event);">set selection range from first editor to second editor</button>
<button onclick="onClick(event);">set selection range from second editor to first editor</button>
<p id="activeElement"></p>

JavaScript

function printActiveElement()
{
  document.getElementById("activeElement").textContent = "document.activeElement=" + document.activeElement ? document.activeElement.nodeName : "<null>";
}

function onClick(aEvent)
{
  var editor1 = document.getElementsByTagName("div")[0];
  var editor2 = document.getElementsByTagName("div")[1];
  switch (aEvent.target) {
    case document.getElementsByTagName("button")[0]:
      window.getSelection().collapse(editor1.firstChild, editor1.firstChild.length / 2);
      break;
    case document.getElementsByTagName("button")[1]:
      window.getSelection().collapse(editor2.firstChild, editor2.firstChild.length / 2);
      break;
    case document.getElementsByTagName("button")[2]:
      window.getSelection().collapse(editor1.firstChild, editor1.firstChild.length / 2);
      window.getSelection().extend(editor2.firstChild, editor2.firstChild.length / 2);
      break;
    case document.getElementsByTagName("button")[3]:
      window.getSelection().collapse(editor2.firstChild, editor2.firstChild.length / 2);
      window.getSelection().extend(editor1.firstChild, editor1.firstChild.length / 2);
      break;
  }
}

document.addEventListener("focus", printActiveElement, true);
document.addEventListener("blur", printActiveElement, true);
document.addEventListener("load", printActiveElement, true);