JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<div contenteditable onselect="console.log('selecting')">

  <div style="color:red">Some <em>rich</em> <span style="font-size:2em">HTML</span><span class="hidden">!!!!</span> more text</div>

</div>

CSS

div[contenteditable] {
    height: 100px;
}

.hidden {
  width: 1px; 
  height: 1px;
  position: absolute;
  opacity: 0;
  overflow: hidden;
  display: inline-block;
}

JavaScript

/* document.querySelector("div[contenteditable]").addEventListener("copy", function(e) {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
//    document.execCommand("insertHTML", false, text);
    console.log(text);
}); */