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 ) => {
	evt.preventDefault();
  
	console.log( 'beforeinput', evt );
  
  console.log( editor.innerHTML );
  
  const range = document.getSelection().getRangeAt( 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( '-----------------------------------------------' );
} );

setInterval( () => {
  // Replaces 2 last characters of "Apple" with two random digits.
	const text = editor.querySelector( 'p' ).firstChild;
  text.replaceData( text.length - 3, 2, String(Math.random()).slice( 2, 4 ) );
}, 500 );