JSFiddle - React, Tailwind, and code Playground

by caub

HTML

<div contenteditable>
<div>
<p style="text-align: center;">
  hello <span style="color:blue">world</span>
  </p>
  <table>
  <tr><td>1 111 </td><td>2 2 2</td></tr>
  <tr><td>1 111 </td><td>2 2 2</td></tr>
  </table>

</div>

paste here

</div>

CSS

table {
  border: 2px solid blue;
}

JavaScript

document.addEventListener('paste', e=>{
  var data = e.clipboardData.getData('text/html');
  var r=getRange(); 
  var frag =  r.createContextualFragment(data);
  console.log(fragHtml(frag));
});

var sel = document.getSelection();
var getRange = _=> sel.rangeCount?sel.getRangeAt(0):document.createRange();

function fragHtml(frag){
	let d=document.createElement('div');
	d.appendChild(frag);
	return d.innerHTML;
}