JSFiddle - React, Tailwind, and code Playground

HTML

<p>selection ranges: 0</p>
<div contenteditable>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</div>

JavaScript

document.getElementsByTagName("div")[0].addEventListener("click", (aEvent)=>{
  setTimeout(()=>{
    var lis = document.getElementsByTagName("li");
    var selection = window.getSelection();
    selection.removeAllRanges();
    for (var i = 0; i < lis.length; i++) {
      if (!lis[i].firstChild) {
        continue;
      }
      var range = document.createRange();
      range.setStart(lis[i].firstChild, 0);
      range.setEnd(lis[i].firstChild, 1);
      selection.addRange(range);
    }
    printSelectionRangeCount();
  }, 0);
});

document.addEventListener("load", printSelectionRangeCount)
document.addEventListener("selectionchange", printSelectionRangeCount);

function printSelectionRangeCount()
{
 var p = document.getElementsByTagName("p")[0];
 p.textContent = "selection ranges: " + window.getSelection().rangeCount;
}