JSFiddle - React, Tailwind, and code Playground

by sauravmishra

HTML

<div class="ddfreetext" contenteditable>

<div class = "ddtagged">DIV1 some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text</div> free text outside DIVS <div class = "ddtagged">DIV2 some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text</div></div>

JavaScript

function cursor_position() {
    var sel = document.getSelection();
    sel.modify("extend", "backward", "paragraphboundary");
    var pos = sel.toString().length;
    if(sel.anchorNode != undefined) sel.collapseToEnd();

    return pos;
}

var elm = document.querySelector('[contenteditable]');
elm.addEventListener('click', printCaretPosition)
elm.addEventListener('keyup', printCaretPosition)

function printCaretPosition(){
  console.log( cursor_position(), 'length:', this.textContent.trim().length )
}