JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div id="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non elit nisl. Aliquam cursus semper sollicitudin. Nulla et ante turpis. Proin faucibus malesuada dignissim. Suspendisse vitae porttitor orci. Duis et augue vel dolor viverra dignissim eu ac lacus. In hendrerit quam turpis, vel sagittis nibh porttitor eu. Pellentesque finibus eleifend ligula sed blandit. Cras molestie quis leo vitae vestibulum.</p>
  <p>Duis finibus lectus eros, a convallis nibh sagittis sed. Morbi porttitor ut sem vitae malesuada. Phasellus eget magna mollis, dictum metus eget, condimentum eros. Integer ornare dolor gravida, ultricies purus nec, ultrices sapien. Nunc mauris mi, cursus eget mi et, malesuada consequat turpis. Donec ac nibh nisl. Donec eu elit porttitor, mollis sapien quis, vulputate nibh.</p>

<p>Sed vel porta sem, non venenatis justo. Quisque porta euismod nulla, nec accumsan libero convallis ac. Nunc eget ultrices diam, et varius purus. Morbi posuere posuere rhoncus. Sed elementum, nisi quis semper dignissim, magna quam vestibulum ligula, vel dapibus ligula quam in ligula. Quisque sed mi commodo, efficitur ante quis, elementum nibh. Maecenas condimentum vehicula odio non porttitor. Etiam placerat a tellus in imperdiet. Ut pharetra, urna ut sagittis tincidunt, ante lectus dictum ante, in commodo tellus augue nec quam. Curabitur pretium iaculis lobortis. Pellentesque interdum, ipsum nec sollicitudin rhoncus, nisi dolor vulputate nisl, ac fringilla eros libero et turpis. Maecenas sodales, orci imperdiet pharetra vulputate, nisl erat feugiat eros, vitae porttitor dolor lectus semper dolor. In convallis erat ut nunc eleifend accumsan. Ut lorem nisi, cursus molestie porttitor sit amet, tincidunt eget est. Nam pellentesque elit sit amet sollicitudin convallis. Curabitur volutpat est ornare malesuada elementum.</p>

<p>Integer sodales arcu metus, nec fringilla sem posuere ut. Nam sapien enim, elementum et finibus at, pellentesque non libero. Nam commodo...

CSS

html, body {
  padding: 0px;
  margin: 0px;
}

#box {
  width: 712px;
  height: 930px;
  overflow: hidden;
  outline: 1px dotted lightgray;
}

.wrap {
  outline: 1px dotted red;
}

JavaScript

const box = document.getElementById('box');
window.addEventListener('click', ({x, y}) => {

	const pageRange = document.caretRangeFromPoint(x, y);
  pageRange.setStart(box, 0);
  
  const newEl = document.createElement('div');
  newEl.className = 'wrap';
  
  const contents = pageRange.extractContents();
  newEl.appendChild(contents);
  box.insertBefore(newEl, box.firstChild);

});