Contenteditable: prevent inner element from being deleted

Question

I have a simple contenteditable markup:

<div class="example" contenteditable="true">
     <div class="inside">Some content</div>
</div>

When I delete the "Some content", then class="inside" div also gets deleted. Is there a way to prevent the inside div from being removed when contents are deleted?

For example, this is the look I am trying to make once the contents are deleted.

<div class="example" contenteditable="true">
     <div class="inside"></div> <!-- The div is not deleted -->
</div>

I looked around but doesn't seem like there is a clear answer.

Any help will be much appreciated.

Thank you.

Answer 1

This might help someone

function onpaste(e: ClipboardEvent) {
  e.preventDefault();

  const selection = window.getSelection();
  // Don't allow deleting nodes
  if (selection.anchorNode.isSameNode(selection.focusNode)) {
    // get text representation of clipboard
    const text = e.clipboardData.getData("text/plain");

    // insert text manually, but without new line characters as can't support <br/>s yet
    document.execCommand("insertHTML", false, text.replace(/\n/g, ""));
  }
}

function onkeydownInEditable(e: KeyboardEvent) {
  if (e.key === "Enter") {
    e.preventDefault();
  }
  if (e.key === "Backspace" || e.key === "Delete" || e.key === "Paste") {
    const selection = window.getSelection();
    // Don't allow deleting nodes
    if (!selection.anchorNode.isSameNode(selection.focusNode))
      e.preventDefault();
  }
}

 elementEditing.addEventListener("keydown", onkeydownInEditable);
 elementEditing.addEventListener("paste", onpaste);