JSFiddle - React, Tailwind, and code Playground

by teleclimber

HTML

Placing cursor at beginning of SPAN: (click below)
<div id="editor" contentEditable="true"></div>
<div id="feedback"></div>

CSS

#editor {
    background-color: #fffaaa;
    padding: 5px;
}

JavaScript

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

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

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

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;
    }
}