JSFiddle - React, Tailwind, and code Playground

by ecmanaut

HTML

<div tabindex="0" id="ce" contenteditable>Try clicking somewhere in here, then hitting ⌘⌫ and ⌘⌦ respectively (to produce either deleteHardLineBackward and deleteHardLineForward input events, or ditto deleteSoftLine - depending on what these default bindings ought to generate)</div>

<pre id="log"></pre>

CSS

*[contenteditable] {
  outline: 1px solid blue;
}

.ct-input-manager {
    position: absolute;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
    user-select: auto;
    white-space: pre-wrap;
}

.ct-input-manager:focus {
  outline: none;
}

JavaScript

const e = document.querySelector('#ce');
const l = document.querySelector('#log');

function log(txt) {
   l.appendChild(document.createTextNode(txt + '\n'));
}

function show(e) {
   log(e.inputType +'['+ e.type +'] data:'+ e.data);
}

e.addEventListener('beforeinput', show);
e.addEventListener('input', show);
e.focus();