JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<p>
  Cursor Position:
  <span id="x">0</span>,
  <span id="y">0</span>
</p>
<textarea rows="10" cols="50">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac lacus a nisi bibendum porta at in arcu. Curabitur efficitur dolor ac semper vulputate. Quisque consectetur dui vel eros dictum, at semper orci maximus. Suspendisse vulputate erat quam, vitae gravida orci aliquet vitae. Praesent suscipit, ipsum non dignissim semper, turpis felis dapibus odio, quis lacinia elit odio ut quam. Aliquam ac bibendum ex. Maecenas tincidunt justo nulla, eu porttitor purus ultricies at. Nam rhoncus quis nisi tristique pharetra. Sed eget varius sem. Proin iaculis justo mauris, at mollis lorem maximus id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis vitae augue at gravida. Phasellus malesuada turpis tellus, in ultricies dolor hendrerit at. Vestibulum viverra turpis nisi, elementum vestibulum erat pellentesque a. Aenean quis quam vestibulum, aliquet sem vel, tempor purus. Morbi at luctus nunc.

Suspendisse viverra tristique nulla. Donec mollis aliquam congue. Pellentesque tincidunt mi ipsum, euismod interdum massa consequat non. Nam fringilla orci at eros convallis, id ullamcorper quam viverra. Vestibulum quis mi ut felis rutrum volutpat. Curabitur consequat tincidunt urna, sed facilisis neque suscipit quis. Nulla venenatis accumsan accumsan. Mauris sit amet leo varius, semper mi et, ullamcorper ipsum. Fusce sit amet rhoncus sem.

Vestibulum lacinia lobortis dolor vel venenatis. Quisque pharetra suscipit sem non fringilla. Cras faucibus et quam quis scelerisque. Praesent imperdiet lectus nibh, quis dapibus leo lobortis interdum. Proin massa nisl, porta et turpis vitae, malesuada tincidunt eros. Donec porttitor magna imperdiet odio rhoncus viverra. Phasellus sodales tempus pellentesque. Aliquam tempus nunc sed vulputate ultricies. Fusce vehicula vel lacus ac viverra. Duis sed enim nulla. Nulla vitae posuere...

JavaScript

const x = document.getElementById('x');

function doUpdate() {
  const selection = document.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
		
  }
//  x.innerText = .getRangeAt(0).startOffset ?? 'x'
	window.requestAnimationFrame(doUpdate);
}

doUpdate();