JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<p>Click in this window and do a paste (ctrl-v or cmd-v). The pasted text will show up in the boxes below. I hope... the left box will be the HTML and the right box will be the TEXT.</p>
<p>Browser support (current versions as of 2011/12/18 unless noted):<br />
    Chrome (Mac): Works<br />
    Chrome (Win): Works<br /> 
    Chrome (Linux): Works<br /> 
    IE 10: Works (fake)<br />
    Safari (Mac): Doesn't Work<br />
    Safari (Win): Works<br />
    Firefox (Mac): Works (fake)<br />
    Firefox (Win): Works (fake)<br/>
    Firefox (Linux): Works (fake)<br/>
    Opera (Mac): Doesn't Work<br />
    Opera (Win): Works (faker)<br />
    Opera (Linux): Works (faker)<br />
</p> 
<div id="status"></div>
<div id="data"></div>

<div id="resultA"></div>
<div id="resultB"></div>

CSS

#resultA, #resultB { float: left; margin-top:10px; border: 1px solid black; width: 200px; height: 200px; overflow-y: scroll}
#status, #data { height: 12pt; font-size: 12pt; }

JavaScript

$(document).ready(function() {
    // Fake paste
    var doFakePaste = false;
    $(document).on('keydown', function(e) {
        $('#status').html('metaKey: ' + e.metaKey + 
                          ' ctrlKey: ' + e.ctrlKey + 
                          ' which: ' + e.which);
        
        // These browser work with the real paste event
        if ($.client.browser === "Chrome")
            return;
        if ($.client.os === "Windows" && $.client.browser === "Safari")
            return;
        
        // Check for patse keydown event
        if (!doFakePaste &&
            ($.client.os === "Mac" && e.which == 86 && e.metaKey) ||
            ($.client.os !== "Mac" && e.which == 86 && e.ctrlKey)) {
            doFakePaste = true;
            // got a paste
            if (!$("*:focus").is("input") &&
                !$("*:focus").is("textarea")) {
                $('#status').html('fake paste');
                
                // Focus the offscreen editable
                $('#TribblePaste').focus();
                
                // Opera doesn't support onPaste events so we have
                // to use a timeout to get the paste
                if ($.client.browser === "Opera")
                {
                    setTimeout(function() {
                        doFakePaste = false;
                        var html = $('#TribblePaste').html();
                        var text = $('#TribblePaste').text();
                        if (text == '') text = $('#TribblePaste').val();
                        $('#resultA').text('[o] '+html);
                        $('#resultB').text('[o] '+text);
                        $('#TribblePaste').val('');
                        $('#TribblePaste').text('');
                        $('#TribblePaste').blur();
                    }, 1);
                }
            }
        }
    }).on('paste', function (e) {
        // Firefox is not supported - they don't
        // expose the real clipboard
        if...