JSFiddle - React, Tailwind, and code Playground

by JeyDotC

HTML

<script src="https://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js"></script>
<div>
    <label for="paste">Paste some text:</label>
</div>
<textarea id="paste"></textarea>

JavaScript

//From http://www.mattbenton.net/2012/01/jquery-plugin-paste-events/
$.fn.pasteEvents = function (delay) {
    if (delay === undefined) delay = 20;
    return $(this).each(function () {
        var $el = $(this);
        $el.bind("paste", function () {
            $el.trigger("prepaste");
            setTimeout(function () {
                $el.trigger("postpaste");
            }, delay);
        });
    });
};

//The cool plugin
$.fn.pasteFilter = function (paste_modifier) {

    var oldValue;
    var diff = new diff_match_patch();

    return $(this).each(function () {
        var $el = $(this);
        $el.bind("prepaste", function (e) {
            oldValue = e.target.value;
        }).bind("postpaste", function (e) {
            var diffs = diff.diff_main(oldValue, e.target.value);
            $.each(diffs, function (k, v) {
                var text = v[1];
                if (v[0] === 1) {
                    v[1] = paste_modifier(text);
                }
            });
            var newText = diff.patch_apply(diff.patch_make(diffs), oldValue)[0];
            e.target.value = newText;
        }).pasteEvents();
    });
};

$('#paste').pasteFilter(function (text) {
    if (text.match(/(^http:\/\/)|(^https:\/\/)/ig) !== null) {
        return '<a href="' + text.replace(/ /g, "%20") + '">' + text + '</a>';
    }

    return text;
});