JSFiddle - React, Tailwind, and code Playground

by Tech Ninja

HTML

<div class="container" contenteditable="true">
This Content Should be Editable
<span contenteditable="false"
   style="display: inline;">
   &nbsp;This Should not be Editable</span>
</div>

JavaScript

// https://stackoverflow.com/questions/8694054/onchange-event-with-contenteditable
const DOMNodeRemoved = 'DOMNodeRemoved';

let unEditable = null;

const unEditableSelector = '*[contenteditable="false"]';
const container = document.querySelector(".container");

const appendUneditable = (evt) => unEditable &&
    !evt.relatedNode.querySelector(unEditableSelector) &&
    evt.relatedNode.append(unEditable);

const listener = (evt) => evt.type === DOMNodeRemoved && appendUneditable(evt);

container.addEventListener("focus", focus);
container.addEventListener("blur", blur);

function focus(e) {
  unEditable = e.target.querySelector(unEditableSelector);
  unEditable.addEventListener("DOMNodeRemoved", listener, false);
}

function blur(e) {
  unEditable && e.target.append(unEditable);
  unEditable && unEditable.removeEventListener("DOMNodeRemoved", listener);
}