JSFiddle - React, Tailwind, and code Playground

by timdown

HTML

<script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-selectionsaverestore.js"></script>
<div id="inlineEditor" contenteditable="true">asd</div>
<textarea id="cleanUp"></textarea>

CSS

#cleanUp {
    position: absolute;
    left: -10000px;
}

JavaScript

$(document).ready(function() {
    //CLEAN UP LOGIC  (removing the style of the text)
    
    $('#inlineEditor').keydown(function(e) {
        if(e.ctrlKey && e.which == 86) {
            cleanUp();
        }
    });
    
    $('#inlineEditor').mousedown(function(e) {
       if (e.which === 3) {
           alert("Please use CRTL + V for pasting");
       }
    });
    
    function cleanUp() {
        savedSel = rangy.saveSelection(); 
        
        $('#cleanUp').focus();
        
        setTimeout(function() {
            $('#inlineEditor').focus();
            console.log($('#inlineEditor').html());
            rangy.restoreSelection(savedSel);
            var x = $('#cleanUp').val();
            paste(x.replace(/\r?\n/g, '<br>'));
            $('#cleanUp').val('');
        }, 100);
    }
});


function paste(html) {
    var sel = rangy.getSelection();
    if (html && sel.rangeCount > 0) {
        var range = sel.getRangeAt(0);
        range.deleteContents();
        var frag = range.createContextualFragment(html);
        var lastChild = frag.lastChild;
        range.insertNode(frag);
        range.collapseAfter(lastChild);
        sel.setSingleRange(range);
    }
}