JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div id="edit-box" class="edit-box" contenteditable="true">Paste content here (contentEditable div)</div>
<p>Log:</p>
                    <ul id="log-box">
                    </ul>
                    <button id="clear-logs" type="button" class="buttonesque">Clear logs</button>

CSS

div {
    padding: 4px;
    -webkit-appearance: none; 
    -moz-appearance: none; 
    border: 2px solid #eee;
}

div:focus {
   box-shadow:0px 0px 5px #6192D1;
   -webkit-box-shadow: 0px 0px 5px  #6192D1;
   -webkit-padding: 3px;
    
    border-width: 2px;
    border-color: transparent;
    border-style: inset;
  
   outline: 0;
}

JavaScript

$(document).ready(function () { 
    var node = document.getElementById('edit-box');
    node.onpaste = function (e) {
        log('paste');
        if (e.clipboardData) {
            log('event.clipboardData');
            if (e.clipboardData.types) {
                log('event.clipboardData.types');

                // Look for a types property that is undefined
                if (!isArray(e.clipboardData.types)) {
                    log('event.clipboardData.types is undefined');
                }

                // Loop the data store in type and display it
                var i = 0;
                while (i < e.clipboardData.types.length) {
                    var key = e.clipboardData.types[i];
                    var val = e.clipboardData.getData(key);
                    log((i + 1) + ': ' + key + ' - ' + val);
                    i++;
                }

            } else {
                // Look for access to data if types array is missing 
                var text = e.clipboardData.getData('text/plain');
                var url = e.clipboardData.getData('text/uri-list');
                var html = e.clipboardData.getData('text/html');
                log('text/plain - ' + text);
                if (url !== undefined) {
                    log('text/uri-list - ' + url);
                }
                if (html !== undefined) {
                    log('text/html - ' + html);
                }
            }
        }

        // IE event is attached to the window object
        if (window.clipboardData) {
            log('window.clipboardData');
            // The schema is fixed
            var text = window.clipboardData.getData('Text');
            var url = window.clipboardData.getData('URL');
            log('Text - ' + text);
            if (url !== null) {
                log('URL - ' + url);
            }
        }

        // Needs a few msec to excute paste
        window.setTimeout(logContents, 50, true);

    };

    // Button events
  ...