How to handle backspace and delete in editable div with nested spans and divs?

Question

I have an editable div, which may contain plain text but also another tags. It may contain div and br (added by Chrome as the user types text and hits ENTER) and it can also contain some span elements with contenteditable=false (because they are updated dynamically from external events.

Like this:

<div contenteditable="true" spellcheck="true">
      aaaaaaaa<span style="background-color:#cecece;font-weight: bold;" contenteditable="false">He</span>
      said something.
</div>

The two problems are:

1 - If the user hits Enter between "aaaaaaaa" and the "He", we will have, from a user perspective, two line breaks:

2 - Then, with the cursor in the line between, if you then hit delete, then browser also deletes the span (with "He"):

This is an "electron wrapped site", thus running in Chrome, or Chromium to be exact. I guess I'd would have to interfere when Delete and Backspace are pressed, but I am really struggling to build it.

Anyone faced the same problem?

Answer 1

To fix this problem, I've applied the strategy other developers here used: avoid DIV creation when hitting ENTER, instead, use only a BR. Used the solution from this post