JSFiddle - React, Tailwind, and code Playground

HTML

<div id=editor contenteditable=true>
<p>Apple <strong>oranges</strong>.</p>
</div>

JavaScript

const editor = document.getElementById( 'editor' );

editor.addEventListener( 'beforeinput', ( evt ) => {
	console.log( 'beforeinput', evt );
  
  console.log( editor.innerHTML );
  
  const range = evt.getTargetRanges()[ 0 ];
  
  if ( !range ) {
    console.log( 'No range ;<' );
    
    return;
  }
  
  console.log( 'collapsed:', range.collapsed, range.startContainer.data, range.startOffset, range.endContainer.data, range.endOffset );
} );

editor.addEventListener( 'input', ( evt ) => {
	console.log( 'input', evt );
  console.log( '-----------------------------------------------' );
} );