JSFiddle - React, Tailwind, and code Playground

by bateast

HTML

<div id="box">
  <div id="input" contenteditable></div>
  Then click this grey area.
</div>
<div id="log"></div>

CSS

#input {
  width: 180px;
  height: 120px;
  border: 1px solid #ccc;
  background-color: #fff;
}

#input:empty:before {
  content: 'Focus here.';
  color: #666;
}

#box {
  width: 300px;
  height: 200px;
  background-color: #ccc;
  color: #666;
}

JavaScript

function log(str) {
	$('<div/>').text(str).appendTo('#log');
}

function getSelId() {
	var sel = window.getSelection();

  if (sel.rangeCount > 0) {
  console.info(sel.getRangeAt(0))
    return sel.getRangeAt(0).commonAncestorContainer.id
    		|| sel.getRangeAt(0).commonAncestorContainer.parentElement.id;
  }
}

function printSel(e) {
  	return log(e.type + ': Anchor parent(#' + getSelId() + ')');
}

$('#input')
	.on('blur', printSel)
  .on('mousedown mouseup focus', function(e) { e.stopPropagation(); });
$('#box')
	.on('mousedown mouseup focus', printSel);
$(document)
	.on('selectionchange', function () {
  	log('Document selectionchange: Anchor parent(#' + getSelId() + ')');
  })