JSFiddle - React, Tailwind, and code Playground

by tms

HTML

<div>
    <textarea id="editor" cols="20" rows="6"></textarea>
</div>
<div id="preview">
    This is some text
</div>

CSS

#preview { border:2px solid #404040; padding:8px; margin:8px; }

JavaScript

$('#preview').bind('mouseup', function () {
    var selection;
    
    if (document.getSelection) {
        selection = document.getSelection();
        
        if (selection && !selection.isCollapsed) {
            selection = selection.focusNode.parentNode;
        } else {
            selection = null;
        }
    } else if (document.selection) {
        selection = document.selection.createRange();
        
        if (selection && selection.text.length) {
            selection = selection.parentElement();
        } else {
            selection = null;
        }
    }
                
    if (selection && $(selection).closest('#preview').length) {
        return false;
    }
            
    $('#editor').focus();
});