JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<div id="subjectWrapper"></div>
<input id="subject" type='text' value="Some subject text" />
<div id="example">
    <textarea id="editor" rows="5" cols="10" style="width:100%;height:400px">
        <p>Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in</p>
        <p>Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in
            <p>Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in</p>Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in Some random text to place the cursor in</p>
    </textarea>
</div>
<div id="treeview"></div>

CSS

#subject {
    width: 100%;
}
#example {
    width:80%;
    float:left;
}
.overlay {
    background-color:white;
    opacity:0;
    border:0;
    margin:0;
    padding:0;
    display:inline-block;
    vertical-align:top;
    position:absolute;
    z-index: 10;
}
#editorOverlay {
}
#subjectOverlay {
    font: -webkit-small-control;
    font-size:90%;
    padding: 1px 0px;
}

JavaScript

var editorOffset;
var editorWidth;
var editorHeight;
var inEditor = false;
var inSubject = false;
var dragX = 0;
var dragY = 0;
var iframeDoc;
var editor;

function treenodeDragstart(e) {
    var kContent = $('.k-content');
    var kContentParent = $(kContent).parent();
    $(kContentParent).prepend('<div id="editorOverlay" class="overlay"></div>');
    $("#editorOverlay").css({
        "width": ($(kContent).outerWidth() - 2),
            "height": ($(kContent).outerHeight() - 2),
            "left": $(kContent).offset().left
    });

    $(".overlay").kendoDropTarget({
        drop: dropTargetDrop,
        dragenter: dropTargetDragEnter,
        dragleave: dropTargetDragLeave
    });

    var subjectWrapper = $('#subjectWrapper');
    $('#subjectWrapper').append('<div id="subjectOverlay" class="overlay">' + $('#subject').val() + '</div>');
    $("#subjectOverlay").css({
        "width": $(subjectWrapper).outerWidth(),
            "height": $(subjectWrapper).outerHeight(),
            "left": $(subjectWrapper).offset().left
    });

    $("#subjectOverlay").kendoDropTarget({
        drop: subjectDropTargetDrop,
        dragenter: subjectDropTargetDragEnter,
        dragleave: subjectDropTargetDragLeave
    });
}

function treenodeDrop(e) {
    $('#editorOverlay').remove();
    $("#subjectOverlay").remove();
}

function treenodeDrag(event) {
    if (inEditor) {
        var x = event.x.client - editorOffset.left;
        var y = event.y.client - editorOffset.top;
        //        var x = event.x.client;
        //var y = event.y.client;
        dragX = x;
        dragY = y;
        console.log(x+","+y);
            // Try the standards-based way first
            if (iframeDoc.caretPositionFromPoint) {
                var sel = iframeDoc.getSelection();
                var pos = iframeDoc.caretPositionFromPoint(x, y);
                range = iframeDoc.createRange();
                range.setStart(pos.offsetNode, pos.offset);
               ...