JSFiddle - React, Tailwind, and code Playground

by teleclimber

HTML

<div id="editor" contentEditable="true"></div>
<div id="feedback"></div>

JavaScript

var editor = document.getElementById('editor');
var feedback_elem = document.getElementById('feedback');

var node1 = document.createTextNode('hello');
var node2 = document.createTextNode('world' );

editor.appendChild( node1 );
editor.appendChild( node2 );

editor.addEventListener( 'click', function() {
    editor.focus();
    
    var range = document.createRange();
    range.setStart(node2, 0);
    range.collapse(true);
    
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
} );


editor.addEventListener('keyup', feedback );
setInterval( feedback, 100 );

function feedback() {
    var html = 'node1: '+node1.data;
    
    var sel = window.getSelection();
    if( sel.rangeCount ) {
        var range = sel.getRangeAt(0);
        
        html += '<br />starts in node 2? ';
        html += (range.startContainer == node2 ? 'yes' : 'no');
       
        feedback_elem.innerHTML = html;
    }
}