JSFiddle - React, Tailwind, and code Playground

by Paul Draper

HTML

<input id="input">
<div id="clipboard-input" contenteditable="true"></div>
<div id="clipboard-output" contenteditable="true"></div>
<button id="paste-button">Paste</button>

JavaScript

function beforePaste() {
    var element = document.getElementById('clipboard-input');    element.innerHTML = '';
    console.log('beforepaste');
    element.focus();
    var range = document.createRange();range.selectNodeContents((element));var selection = window.getSelection();selection.removeAllRanges();selection.addRange(range);}

document.addEventListener('beforepaste', beforePaste, true);

document.getElementById('paste-button').addEventListener('click', function() {
    beforePaste();
    console.log(document.execCommand('paste'))
});

document.addEventListener('copy', function() {
	var element = document.getElementById('clipboard-output');
    
    element.innerHTML = '<b>me</b><div hi="true">foo</div>';
    
    element.focus();
    
	var range = document.createRange();
	range.selectNodeContents(/** @type {!Node} */(element));
	var selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range);
    
    setTimeout(function() {
        document.getElementById('input').focus();
    }, 0);
}, true);


document.addEventListener('paste', function(e) {
	var element = document.getElementById('clipboard-input');
    console.log('paste');

    element.innerHTML = '';
    element.focus();

    setTimeout(function() {
        console.log(element.innerHTML);
        document.getElementById('input').focus();
    }, 0);
}, true);