JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="editor" style="border: none; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%">

</iframe>

JavaScript

function getSelectionBoundaryElement(win, isStart) {
  var range, sel, container = null;
  var doc = win.document;

  if (doc.selection) {
    // IE branch
    range = doc.selection.createRange();
    range.collapse(isStart);
    return range.parentElement();
  } else if (win.getSelection) {
    // Other browsers
    sel = win.getSelection();

    if (sel.rangeCount > 0) {
      range = sel.getRangeAt(0);
      container = range[isStart ? "startContainer" : "endContainer"];

      // Check if the container is a text node and return its parent if so
      if (container.nodeType === 3) {
        container = container.parentNode;
      }
    }
  }
  return container;
}

var editor = $('#editor').contents().find('body');

$('#editor').contents().prop('designMode', 'on');

editor.append("<p>Test <b>bold</b> text</p>");

editor.on("click", function(event) {
  console.log("clicked:" + $(event.target).prop("tagName"));
});

editor.on("keyup", function(event) {
  console.log('The element is:', getSelectionBoundaryElement($('#editor')[0].contentWindow, false));
});