Chrome empty contenteditable retaining styling

Question

Chrome appears to be doing something odd/interesting/confusing when I have a contenteditable section within a page. If you have a section of text that is wrapped with a <span> (maybe other tags, I dont know) that has a class applied to it that applies additional styling to the text (font family, color, etc) and then delete all the text in the editable section. When you start typing again, the text looks the same as you had when you started deleting text, but seems to be styled with the raw computed CSS, rather than having a span with the appropriate classes.

http://jsfiddle.net/tomprogramming/wS4Gp/

Any idea why this happens, or if I can turn it off? Firefox and IE both seem to keep the span with the class in it.

This is what I start with

<span class="level1" style="font-weight:bold;">This is level'd text</span>

and this is what I end up with

<span style="color: rgb(255, 255, 255); font-family: helvetica, arial, sans-serif; font-size: 48.18181610107422px; font-weight: bold;">This is level'd text</span>

And the relevant CSS

.editable .level1 {
    color: #fff;
    font-size:3em;
    font-family:helvetica, arial, sans-serif;
}

I understand what's going on, it's trying to behave like Word and other processors that retain your styling; however, these levels are important in our editor and should be retained. If they can't I'd rather just turn off this "feature".

Answer 1

One way to prevent Chrome of retaining the old computed styles of the caret position is to clear the browser selection and then restoring it (to retain the selection). This should be done after the deletion of the styled element and before new content gets inserted. Doing something on the line of the following:

let selection = window.getSelection();
if (selection && selection.rangeCount > 0 && selection.isCollapsed) {
  let range = selection.getRangeAt(0);
  selection.removeAllRanges();
  selection.addRange(range);
}