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

let unEditable = null;

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

container.addEventListener("focus", function(e) {
		const div = e.target;
    unEditable = div.querySelector(unEditableSelector);
    unEditable.style.display = 'none';
    
    console.log("focused")
});

container.addEventListener("blur", function(e) {
		const div = e.target;
    if (!div.querySelector(unEditableSelector)) {
    	e.target.append(unEditable);
    }
    unEditable.style.display = 'inline-block';
    console.log("unfocus")
});