JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<div contenteditable="true">
  <header>
    <h1>Rich Text Editing Development</h1>
    <p>I'm <strong><em>really</em> annoyed</strong> with trying to figure out this answer.</p>
  </header>
</div>

JavaScript

document.addEventListener('mouseup', () => {
  
  console.clear();
  
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  
  const range = selection.getRangeAt(0);
  
  console.log('Selected elements:');
  range.cloneContents().querySelectorAll('*').forEach(e => console.log(e));
  
  //console.log('Selected text/elements parent:');
  //console.log(range.commonAncestorContainer.parentNode);

});