JSFiddle - React, Tailwind, and code Playground

by Johannes Wilm

HTML

<div>
<h1>
Instructions
</h1>
  <ul>
    <li>Select "THIS IS SOME TEXT" below.</li>
    <li>Copy the text.</li>
    <li>Put the caret in the editor (red)</li>
    <li>Paste</li>
    <li>Observe paste html</li>
  </ul>

</div>

<div oncopy="onCopy(event)">
  <p style="text-transform: uppercase;">This is some text.</p>
</div>
<h1>Editor</h1>
<div id="editor" contenteditable="true" onpaste="onPaste(event)">
</div>
<h1>Log</h1>
<div id="log"></div>

CSS

#editor {
  background-color: red;
  min-height: 40px;
}

JavaScript

function onPaste(event) {
  let logDiv = document.createElement('div')
  logDiv.innerHTML = "<h2>Paste</h2><div></div>"
  logDiv.lastChild.textContent = event.clipboardData.getData('text/html')
  document.querySelector('#log').appendChild(logDiv)
}


function onCopy(event) {
  let logDiv = document.createElement('div')
  logDiv.innerHTML = "<h2>Copy</h2><div></div>"
  logDiv.lastChild.textContent = event.clipboardData.getData('text/html')
  document.querySelector('#log').appendChild(logDiv)
}