JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true">asdf asdf<br>z</div>
<p id="selection"></p>

JavaScript

function printSelection()
{
  var selection = window.getSelection();
  if (!selection.rangeCount) {
    document.getElementById("selection").textContent = "no selection ranges";
    return;
  }
  var ranges = "";
  for (var i = 0; i < selection.rangeCount; i++) {
    var range = selection.getRangeAt(i);
    ranges += "selection range (" + i + "): " + range.startContainer.nodeName + " " + range.startOffset + " - " + range.endContainer.nodeName + " " + range.endOffset
  }
  document.getElementById("selection").textContent = ranges;
}

document.addEventListener("focus", printSelection);
document.addEventListener("blur", printSelection);
document.addEventListener("selectionchange", printSelection);
document.addEventListener("load", printSelection);