contenteditable=false in contenteditable=true

Question

Problem:

I have observed an undesirable behaviour in Chrome and Opera that occurs when one joins two p tags by deleting the separation between them. Chrome and Opera delete contenteditable=false element(widget) and text after.

Example:

example on jsfiddle

html:

<div contenteditable="true" class="editor">
<p>This is the first paragraph.</p>
<p>&larr;Place your cursor here and press backspace. <span class="widget" contenteditable="false">widget</span> Text after widget</p> 
</div>

css:

.widget{
    display: inline-block;
    padding: 5px;
    background-color: gray;
}

.editor{
    font: 20px Trebuchet MS
}

Question:

Why? How fix it?

Answer 1

I reported this bug long time ago for Blink and Webkit. It's kind of critical and there's no workaround. Webkit team tried to fix it, but as far as I can see, they introduced new bug ;|.

PS. Yes, this answer does not propose any fix, but the only fix is overriding delete and backspace keys behaviour.