Dragging nested spans inside contenteditable area results in destroying the parent span elements

• Component: HTML Editing
• Status: NEW ---

[Hristo Chakarov]

If I have nested span elements inside a contenteditable element, e.g.

<div contenteditable="true">
   <span><span><span>drag me</span></span></span>
</div>

and I select the root <span> element and drag the selection around the contenteditable <div>, when I drop the selection only the most nested <span> element is preserved. Others get destroyed.

Reproduced in Chrome and Safari (both latest): http://jsfiddle.net/ickata/s2Vz7/1/

In Chrome, if I replace <span> with <b> it works perfectly: http://jsfiddle.net/ickata/s2Vz7/2/ unless I add font-weight: normal to the <b> elements: http://jsfiddle.net/ickata/s2Vz7/3/

Same situation with <i> element: http://jsfiddle.net/ickata/s2Vz7/4/

In Safari both don't work properly - using <b> will work if I remove the display: inline-block property: http://jsfiddle.net/s2Vz7/5/

Video: http://ge.tt/100kPOK1/v/0