JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque. Pulvinar sapien et ligula ullamcorper malesuada proin. Ac auctor augue mauris augue neque gravida in. Sed arcu non odio euismod lacinia at. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Mauris cursus mattis molestie a iaculis at erat pellentesque. Duis convallis convallis tellus id interdum. Amet porttitor eget dolor morbi non arcu risus. Sit amet cursus sit amet dictum sit amet justo donec. Cursus risus at ultrices mi tempus. Morbi blandit cursus risus at ultrices mi. Id aliquet lectus proin nibh. Amet facilisis magna etiam tempor. Vitae aliquet nec ullamcorper sit amet risus nullam.

In hendrerit gravida rutrum quisque non tellus orci ac auctor. Sollicitudin nibh sit amet commodo nulla facilisi nullam. Eget duis at tellus at urna condimentum. Tellus molestie nunc non blandit. Scelerisque felis imperdiet proin fermentum leo vel orci. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Suspendisse potenti nullam ac tortor vitae purus. Habitant morbi tristique senectus et netus et malesuada fames. Nec nam aliquam sem et tortor consequat id. Volutpat maecenas volutpat blandit aliquam.

Ullamcorper velit sed ullamcorper morbi tincidunt. Tempor orci eu lobortis elementum. Et malesuada fames ac turpis egestas maecenas pharetra. Arcu ac tortor dignissim convallis aenean et tortor at risus. Et tortor consequat id porta. Amet mauris commodo quis imperdiet massa tincidunt. Volutpat diam ut venenatis tellus in metus vulputate eu. Amet aliquam id diam maecenas. Scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis. Leo a diam sollicitudin tempor id eu nisl. Ultricies leo integer malesuada nunc vel. Eu augue ut lectus arcu bibendum at varius. Nulla aliquet enim tortor at...

CSS

#test {
  font-family: consolas;
  font-size: 10px;
  max-height: 100px;
  overflow: auto;
  margin-bottom: 1em;
}

JavaScript

document.addEventListener('selectionchange', schandler);

const r = document.querySelector('#result');

function schandler(e){
	console.log(e.detail);
  r.innerText = document.getSelection().toString();
}