Newlines and contenteditable with nested non-editable tags

I have an odd case for contenteditableelements inside HTML. We have a rich text editor in which customers download ready-made templates (by us), and then can change this template, but they want (mostly).

Parts of our templates are marked as not editable, but can still be deleted, etc. However, there seems to be a problem where one of these elements is the first element in the line (immediately after the <br/>tag) and the user clicks DELin the line above. Since it contenteditable=false, the browser, it seems, does not delete <br/>, but the entire immutable range.

An example HTML looks like this

<div contenteditable=true>
    <span>blah blah blah</span><br/>
    <span contenteditable="false">You cant edit this value directly</span>
</div>

If the user places his cursor after blah blah blahand accesses DEL, all of the next editable content is deleted, not a line break.

Is there any way, javascript or otherwise, to fix this behavior?

Ive been fooling myself by trying to detect the cursor position (using rangy), and inserting temporary spaces, etc., but I cannot make it have the desired behavior, namely, that the non-editable tag is brought up to the previous line.

We restricted the use of the editor to Chrome only, so we don’t have to worry about IE or FF.

jsfiddle example