JSFiddle - React, Tailwind, and code Playground
HTML
<div id="textarea" contenteditable="true">
drag some content here!
</div>
<b>like this <i>text with some <span style="color:red;">wacky</span> styling</i></b>
CSS
#textarea{
padding:10px;
background:teal;
color:#fff;
}
JavaScript
textarea = document.getElementById("textarea");
textarea.addEventListener("drop", function(event){
event.preventDefault();
textBuffer = event.dataTransfer.getData("text/plain");
textarea.addEventListener("focus", function(){
console.log(document.activeElement, textBuffer);
document.execCommand(
"insertText",
false,
textBuffer
);
//this.removeEventListener("focus", arguments.callee);
});
textarea.focus();
});