JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="main-input" contenteditable="true">

                                <span style="font-size: 24px">Hello <span style="color: rgb(255, 0, 0)"> red world!</span> and black text</span><br>
                                <span style="color: rgb(0, 255, 0)"><b>Green text</b></span>

                            </div>

JavaScript

var lastCaretIndex = null;
document.addEventListener('selectionchange', function(event) {
    var taget = event.target;
    if (taget.activeElement.id == 'main-input') {
        lastCaretIndex = getSelectionRange();
    }
});

function getSelectionRange() {
    var sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection) {
        return document.createRange();
    }
    return null;
}

var $mainInput = $('#main-input');
$mainInput.on('paste', function(e) {
    e.preventDefault();
    var text = e.originalEvent.clipboardData.getData("text/plain");
    lastCaretIndex.insertNode(document.createTextNode(text));
});

$mainInput.on('dragstart', function(e) {
    var text =  lastCaretIndex.toString();
    e.originalEvent.dataTransfer.setData("text/plain", text);
});

$mainInput.on('dragend', function(e) {
    window.getSelection().getRangeAt(0).insertNode(document.createTextNode(strip(t)));
});


$mainInput.bind('drop', function (e) {
    event.target.textContent = e.originalEvent.dataTransfer.getData("text/plain");
    event.preventDefault();
});