JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable> <span contenteditable="false">not editable</span> ;</div>

JavaScript

const editingHost = document.querySelector("div[contenteditable]");
editingHost.focus();
getSelection().selectAllChildren(editingHost);
getSelection().collapse(editingHost.firstChild, 0);
getSelection().modify("move", "forward", "character");
console.log(
  `focusNode=${
    getSelection().focusNode.outerHTML || `#text: "${getSelection().focusNode.textContent}"`
  }, anchorNode=${
    getSelection().anchorNode.outerHTML || `#text: "${getSelection().anchorNode.textContent}"`
  }`);