JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable>
<p>Try to delete the following image from here:</p>
<p contenteditable="false"><img src="https://bugzilla.mozilla.org/skins/contrib/Mozilla/tabzilla.png"></p>
<p>Try to delete the preceding image from here</p>
</div>

CSS

:focus{
  outline: red solid 10px;
}

JavaScript

document.querySelector("div[contenteditable]").addEventListener("focus", ()=>{
setTimeout(()=>{var sel = document.getSelection();
var uneditable = document.querySelector("p[contenteditable=false]");
sel.removeAllRanges();
var range = document.createRange();
range.setStart(uneditable, 0);
sel.addRange(range);
}, 100);});