JSFiddle - React, Tailwind, and code Playground

HTML

<div id=editor contenteditable=true><p>Apple</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( '-----------------------------------------------' );
} );

let i = 0;
setInterval( () => {
	const previousHeading = editor.firstElementChild;
	const newHeading = document.createElement( 'h' + ( i%6 + 1 ) );
  
  i++;
  
  editor.appendChild( newHeading );
	newHeading.appendChild( previousHeading.firstChild );
  previousHeading.remove();
}, 1000 );