JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable>
    <div>Try cursoring right from this block</div>
    <div contenteditable=false>
        <div>The cursor should not enter this block 1</div>
        <div>The cursor should not enter this block 2</div>
        <div>The cursor should not enter this block 3</div>
    </div>
    <div>Try cursoring left from this block</div>
</div>
<p>Expected behaviour: the cursor does not enter the blocks inside the contenteditable=false div.</p>
<p>Observed behaviour (Firefox): the cursor can reach the beginning/end of each block inside the contenteditable=false div.</p>

CSS

div[contenteditable] { border: dotted gray 1px }
div[contenteditable=false] { background-color: #fdd }

JavaScript

var sel = window.getSelection();
document.body.addEventListener( 'keydown', function () {
    setTimeout( function() {
        console.log( sel.focusNode, sel.focusOffset );
    } );
} );