JSFiddle - React, Tailwind, and code Playground

HTML

<div id="xyz" contenteditable="true">Hello world</div>
<br>
<br>
<br>
<br>
<span class="status">Selected text : </span>

JavaScript

function getTheSelection() {
    if (window.getSelection) {
        var selectionRange = window.getSelection();
        $('.status').text(selectionRange.toString());
    }
}

$('#xyz').on("mousedown", function () {
    clearTheSelection();
});

$('#xyz').on("mouseup", function () {
    getTheSelection();
});

function clearTheSelection() {
    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}