Contenteditable, bizarre behaviour of child elements, and NOT whitespace independent?

Question

I've been playing around with contenteditable fields, and have come across an odd behaviour that I cannot figure out.

Check out fiddle for this particular problem.

I have two identical contenteditable divs. Both of them have the same <span> child, followed by a single blank character (otherwise carrot issues ensue). The only difference between the two is that the second div has been "prettified", and made more readable by indenting the <span> on a new line.

<div style="margin-bottom: 15px;" contenteditable="true"><span class="lead" contenteditable="false">Something something</span>&#8203;</div>


<div contenteditable="true">
  <span class="lead" contenteditable="false">Something something</span>&#8203;
</div>

Try this in both of the divs...

1. Place the carrot to the right-end of the content (i.e. after the blank character)
2. Then hit backspace a couple times

You'll notice that in the top (first) contenteditable div, you can delete the <span> element, as though it were one giant character. You should also notice that that in the second div, no amount of backspacing will ever clear it out. At least not in Safari.

So what gives!? I thought HTML was whitespace independent - why the difference in behaviour of the two?

Viewing the source, they have slightly different markup...

... but it still behooves me as to why there would be any difference.

I would like it to be deletable, and so the solution is obviously just to use the former version, but it is still curious as to why this issue exists at all.

Also! If you happen to be a contenteditable guru, I've been fighting with another issue over here. Any help on that one is welcome!

Answer 1

HTML is not white-space independent; instead, mulitple white-space characters are considered the same thing as one space symbol. The issue here is not about contenteditable, rather it's about beautifying changes actual DOM here. Check out this fiddle, it illustrates the issue. HTML:

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

<div style="clear: both;"></div>

<div class="left"></div><div class="center"></div><div class="right"></div>

CSS:

.left, .right { width: 25%; }
.center { width: 50%; }
.left, .right, .center { display: inline-block; height: 1em; }
.left { background-color: red; }
.center { background-color: green; }
.right { background-color: blue; }

As you can see one linebreak (equal to one space) makes some space between the blocks while when there's no whitespace at all, everything works "as expected".

Still, I have to admit, the behaviour is rather strange: when DOM inspector is open, it shows me (in Chrome)

(zero width space character here) and if I put the cursor to the end and hit backspace once, get identical DOM elements (ok, I've tried removing margin as well):

However, backpace doesn't work as expected in the second case. The only way to delete the non-editable span is to add an character after it, then move cursor before it and delete. This may be a bug, although it is present in both Safari (as you say) and Chrome (according to my tests).

I think this is to be discussed further with browser vendors' support. By the way, in FireFox this behaves quite consistently: the span can't be deleted in both cases, and in the first one there's nothing after it while in the second one there's a space after the span (which can be deleted, of'course).