JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<script src="http://tomprogramming.com/Files/rangy-core.js"></script>
<div contenteditable="true">

</div>

CSS

[contenteditable=true]{ 
  border:1px dashed #ff0000;
  min-height:50px;
  margin:20px;   
    outline:0;
    padding:10px;
}

JavaScript

$("[contenteditable]").on("paste", function(e){
   console.log("paste event"); 
    console.log(e);
    var txt = e.originalEvent.clipboardData.getData('text').replace(/\r\n|\n/g,"<br/>");
    
    console.log(txt);
    var id = "6eb70fd8-3fb4-45c0-b269-f5a6dad0a232";//should use UUID, pretend this is unique
    var jqNode = $('<span id="'  + id + '"></span>').html(txt);
    rangy.getSelection().deleteFromDocument();//handles "pasting over" text
    var range = rangy.getSelection().getRangeAt(0);
    range.insertNode(jqNode[0]);
    $("#" + id).contents().unwrap();//remove our scaffolding
    e.preventDefault();
    
});