JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Async Clipboard API WriteText/ReadText Demo</h1>

    <section>
      <button id="copy"><strong>Copy</strong><br><em>(write to clipboard)</em></button>
      <button id="paste"><strong>Paste</strong><br><em>(read from clipboard)</em></button>
    </section>

    <textarea id="out" placeholder="Text to copy"></textarea>
    <div id="editBox" contenteditable="true">Some text
    </div>
    <div id="logDiv"></div>

JavaScript

function stripStyleTags(docFragment) {
          var styleTag = docFragment.querySelector("style");
          docFragment.body.removeChild(styleTag);
        }

        document.addEventListener('copy', function(e) {
            e.clipboardData.setData('text/custom', '<html><head><meta http-equiv=Content-Type content=\"text/html; charset=utf-8\"><meta name=ProgId content=Excel.Sheet><meta name=Generator content=\"Microsoft Excel 15\"><style>div {color:blue}</style></head><body link=\"#0563C1\" vlink=\"#954F72\"><p style=\'color: red; font-style: oblique;\'>This text was copied using DT APIs</p></body></html>');
            //document.execCommand("copy", false)
            e.preventDefault();
        });
        document.addEventListener('paste', function(e) {
            if (e.clipboardData.types.indexOf('text/custom') > -1) {
                var oldData = e.clipboardData.getData('text/custom');
                // remove comments.
                oldData = oldData.replace( /<!--[\s\S]*?-->/g, '' );
                logDiv.innerHTML = oldData;
                /* var parser = new DOMParser();
                const doc = parser.parseFromString(oldData, 'text/html');
                stripStyleTags(doc);
                logDiv.appendChild(doc.body); */
                e.preventDefault();
            }
        });