JSFiddle - React, Tailwind, and code Playground

HTML

<div id="edit" contenteditable="true">
  This is an<br>editable paragraph.
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>

CSS

#myDiv{width:100%;height:200px;border:solid 1px #000;box-sizing:border-box;}

JavaScript

function getWordsBefore(containerEl) {
  var preceding = "",
    sel,
    range,
    precedingRange;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount > 0) {
      range = sel.getRangeAt(0).cloneRange();
      range.collapse(true);
      range.setStart(containerEl, 0);
      preceding = range.toString();
    }
  } else if ((sel = document.selection) && sel.type != "Control") {
    range = sel.createRange();
    precedingRange = range.duplicate();
    precedingRange.moveToElementText(containerEl);
    precedingRange.setEndPoint("EndToStart", range);
    preceding = precedingRange.text;
  }

  return preceding;

}

$('#edit').on('keyup focus click', function() {
  console.log(getWordsBefore(this));
});