114791 2013-04-18 00:58:03 -0700 Contenteditable issues related to backspace handling 2014-05-15 02:13:24 -0700 1 1 1 Unclassified WebKit HTML Editing 528+ (Nightly build) Unspecified Unspecified NEW InRadar P2 Normal --- 1 pkoszulinski webkit-unassigned arpitabahuguna azaozz bjhomer darin david enrica ggaren hainam kling rniwa sam webkit oldest_to_newest 877732 0 pkoszulinski 2013-04-18 00:58:03 -0700 Crossposted on http://code.google.com/p/chromium/issues/detail?id=226941 Chrome Version : 25.0.1364.172 Other browsers tested: Safari 6: TC1&TC2 OK, TC3&TC4 BAD Firefox 19.x: TC1 OK, TC2 :|, TC3 OK, TC4 mostly OK IE 9: TC1&TC2&TC3 OK, TC4 mostly OK Hi, I'm a CKEditor core developer. Our users reported few issues for how backspace works. They complain mainly about undesirable elements, but also about other aspects. I gathered four test cases in backspace.html (which I'm attaching). It contains scenarios, expected and actual outputs. I'm aware that these are separate issues, but I report them together because I noticed that they are related to the same concept. When handling backspace (and other actions too) Webkit/Blink, instead of working on DOM, works on internal representation of editable element contents which seems to be something like "unstructured styled text". E.g. in TC2 Webkit does not merge <h1> and elements, but text having big font size and text having small font size and the result is element which keeps the style of removed paragraph. TC3 is another interesting example. Webkit removes element, but internally keeps information about the style and when user starts typing again it tries to recreate this style... which gives us element or even worse elements in other cases. TC4.2 is another interesting case - even if entire paragraph is deleted, Webkit recreates the style. Conclusion From our (CKEditor's) and most of our users' POV current behaviour is undesirable. Webkit pays attention to visual result, but HTML it produces is terrible. It's impossible to create decent WYSIWYG editor for people that care about semantically correct HTML without writing custom backspace (and other keys) handling from scratch. Two most important proposals: * Webkit should not keep internally information about styles - everything should be "on paper". In DOM there is a element, then we are editing element, not bold text. The element has been removed from DOM, then it's gone forever. When I press delete between header and paragraph, paragraph should be merged to header, not small text to big text. * All actions should be done from DOM POV. As an operations on DOM, not on visual representation of editable element contents. 877733 1 198690 pkoszulinski 2013-04-18 00:59:09 -0700 Created attachment 198690 Test cases 879063 2 hainam 2013-04-22 03:45:59 -0700 Quick description of the problem: line1 line2 => line1 line2 instead of line1 line2 899169 3 webkit 2013-06-11 02:37:06 -0700 Any news about this? There is a lot of people complaining about this in the CKEditor side and people ofc don't care that this is a WebKit issue. The only option we would have is creating custom handlers for BACKSPACE and DEL, but this would be extremely hard and pointless, as keyboard handling is one of the basic features one expect from the browser implementation of contenteditable. We'll be waiting for your opinion to take a decision on what to do here. Thanks! 932850 4 david 2013-09-24 19:14:15 -0700 It would be great if this could be fixed. It all effects Raptor Editor and is very frustrating to users. 933063 5 ap 2013-09-25 10:15:29 -0700 <rdar://problem/15077939> 933070 6 rniwa 2013-09-25 10:31:26 -0700 It appears to me that we almost need two modes: visual and semantic. It's impractical to satisfy both needs simultaneously. 933494 7 pkoszulinski 2013-09-26 07:53:31 -0700 > It appears to me that we almost need two modes: visual and semantic. > It's impractical to satisfy both needs simultaneously. I'm not sure if I understand. Excluding TC1 and TC2 which are not reproducible on Safari (they are only reproducible on Chrome, so I guess it's a Blink's thing only) - how're TC3 and TC4 "visible"? There's semantic broken (but that's mostly under the hood for non-technical end users), and even if some behaviour is broken, then... why forking? Why not fixing it? For example - in the TC3 user deletes text, text gets removed - it's already correct for the user. What's broken is under the hood - there's no tag in the DOM, but when user starts typing again it's recreated. So, why is it recreated if there was nothing in the DOM and why isn't it again, but ? Non-technical users won't notice if this was fixed, but technical users will be pleased that weird span/font/b/i tags are not created. The TC1 and TC2 are different though, because they heavily affect UX. For example, end users are reporting us that they find it strange that paragraph merged into header still looks like a paragraph. More technical ones also don't like the fact that there's span with inline styles created, because it completely breaks the cleanliness of the code. But fortunately it doesn't happen on Safari. 959007 8 azaozz 2013-12-11 18:19:25 -0800 This also happens on InsertUnorderedList, InsertOrderedList, and possibly other contenteditable commands. Also on dragging selected text from one node to another. We've been dealing with these spans in WordPress for a while now. TinyMCE (the default editor in WordPress) includes several DOM level fixes, but these spans still get inserted sometimes. The only sure way to stop them is to remove all text styling inside the editor. Of course this is the exact opposite of what WYSIWYG is all about. 1001371 9 bjhomer 2014-04-16 15:46:26 -0700 Note that Safari 7.0.3 fails TC2 as well, though Safari 6 was reported to pass it. 198690 2013-04-18 00:59:09 -0700 2013-04-18 00:59:09 -0700 Test cases backspace.html text/html 4262 pkoszulinski 77u/PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4K CTx0aXRsZT5Db250ZW50ZWRpdGFibGUgaXNzdWVzIHJlbGF0ZWQgdG8gYmFja3NwYWNlIGhhbmRs aW5nPC90aXRsZT4KCTxzdHlsZT4KCmJvZHkgewoJd2lkdGg6IDYwMHB4OwoJbWFyZ2luOiAyMHB4 IGF1dG87Cn0KCi5lZGl0YWJsZSB7Cglib3JkZXI6IHNvbGlkIDJweCBibHVlOwoJcGFkZGluZzog NXB4Owp9Cgoub3V0cHV0IHsKCWJvcmRlcjogc29saWQgMnB4IHllbGxvdzsKCXBhZGRpbmc6IDVw eDsKfQoKLnRjIHsKCW92ZXJmbG93OiBhdXRvOwp9CgoudGMxIC5lZGl0YWJsZSBwIHsKCWxpbmUt aGVpZ2h0OiAxLjVlbTsKfQoKLnRjMiAuZWRpdGFibGUgcCB7CglsaW5lLWhlaWdodDogMS41ZW07 Cglmb250LXNpemU6IDE0cHg7Cn0KCi50YzQgLm1hcmtlciB7CgliYWNrZ3JvdW5kLWNvbG9yOiBi bHVlOwp9CgoJPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KCTxzZWN0aW9uIGNsYXNzPSJ0YyB0YzEi PgoJCTxoMT5UQzE8L2gxPgoJCTxvbD4KCQkJPGxpPlBsYWNlIGNhcmV0IG5leHQgdG8gPGNvZGU+ XjwvY29kZT4uPC9saT4KCQkJPGxpPlByZXNzIGVudGVyIGFuZCBiYWNrc3BhY2UuPC9saT4KCQkJ PGxpPk91dHB1dDogPGNvZGU+Jmx0O3A+Zm9vXiZsdDtzcGFuIHN0eWxlPSJsaW5lLWhlaWdodDog MS41ZW07Ij5iYXImbHQ7L3NwYW4+Jmx0Oy9wPjwvY29kZT4uPC9saT4KCQkJPGxpPkV4cGVjdGVk OiA8Y29kZT4mbHQ7cD5mb29eYmFyJmx0Oy9wPjwvY29kZT4uPC9saT4KCQk8L29sPgoJCTxkaXYg Y29udGVudGVkaXRhYmxlPSJ0cnVlIiBjbGFzcz0iZWRpdGFibGUiPgoJCQk8cD5mb29eYmFyPC9w PgoJCTwvZGl2PgoJCTxwcmUgY2xhc3M9Im91dHB1dCI+PC9wcmU+Cgk8L3NlY3Rpb24+CgoJPHNl Y3Rpb24gY2xhc3M9InRjIHRjMiI+CgkJPGgxPlRDMjwvaDE+CgkJPG9sPgoJCQk8bGk+UGxhY2Ug Y2FyZXQgYmVmb3JlIDxjb2RlPl48L2NvZGU+LjwvbGk+CgkJCTxsaT5QcmVzcyBiYWNrc3BhY2Uu PC9saT4KCQkJPGxpPk91dHB1dDogPGNvZGU+Jmx0O2gxPmZvbyZsdDtzcGFuIHN0eWxlPSJmb250 LXNpemU6IDEycHg7IGxpbmUtaGVpZ2h0OiAxLjVlbTsiPl5iYXImbHQ7L3NwYW4+Jmx0Oy9oMT48 L2NvZGU+LjwvbGk+CgkJCTxsaT5FeHBlY3RlZDogPGNvZGU+Jmx0O2gxPmZvb15iYXImbHQ7L2gx PjwvY29kZT4uPC9saT4KCQk8L29sPgoJCTxkaXYgY29udGVudGVkaXRhYmxlPSJ0cnVlIiBjbGFz cz0iZWRpdGFibGUiPgoJCQk8aDE+Zm9vPC9oMT4KCQkJPHA+XmJhcjwvcD4KCQk8L2Rpdj4KCQk8 cHJlIGNsYXNzPSJvdXRwdXQiPjwvcHJlPgoJPC9zZWN0aW9uPgoKCTxzZWN0aW9uIGNsYXNzPSJ0 YyB0YzMiPgoJCTxoMT5UQzM8L2gxPgoJCTxvbD4KCQkJPGxpPlBsYWNlIGNhcmV0IGFmdGVyIDxj b2RlPl48L2NvZGU+LjwvbGk+CgkJCTxsaT5QcmVzcyBiYWNrc3BhY2UgNCB0aW1lcyAodG8gZGVs ZXRlICJmb29eIikuPC9saT4KCQkJPGxpPlR5cGUgc3RoLjwvbGk+CgkJCTxsaT5PdXRwdXQ6IDxj b2RlPiZsdDtwPiZsdDtiPnN0aCZsdDsvYj4gYmFyJmx0Oy9wPjwvY29kZT4uPC9saT4KCQkJPGxp PkV4cGVjdGVkOiA8Y29kZT4mbHQ7cD4mbHQ7c3Ryb25nPnN0aCZsdDsvc3Ryb25nPiBiYXImbHQ7 L3A+PC9jb2RlPi48L2xpPgoJCQk8bGk+T3RoZXIgdW53YW50ZWQgdHJhbnNmb3JtYXRpb25zOiA8 Y29kZT4mbHQ7ZW0+PC9jb2RlPiB0byA8Y29kZT4mbHQ7aT48L2NvZGU+LCA8Y29kZT4mbHQ7c3Vi PjwvY29kZT4sIDxjb2RlPiZsdDtzdXA+PC9jb2RlPiwKCQkJCTxjb2RlPiZsdDtzcGFuPjwvY29k ZT4gd2l0aCA8Y29kZT5mb250LXNpemU8L2NvZGU+IG9yIDxjb2RlPmNvbG9yPC9jb2RlPiBzdHls ZXMgdG8gPGNvZGU+Jmx0O2ZvbnQ+PC9jb2RlPig/ISkgYW5kIG1hbnkgbW9yZS48L2xpPgoJCTwv b2w+CgkJPGRpdiBjb250ZW50ZWRpdGFibGU9InRydWUiIGNsYXNzPSJlZGl0YWJsZSI+CgkJCTxw PjxzdHJvbmc+Zm9vXjwvc3Ryb25nPiBiYXI8L3A+CgkJPC9kaXY+CgkJPHByZSBjbGFzcz0ib3V0 cHV0Ij48L3ByZT4KCTwvc2VjdGlvbj4KCgk8c2VjdGlvbiBjbGFzcz0idGMgdGM0Ij4KCQk8aDE+ VEM0PC9oMT4KCQk8b2w+CgkJCTxsaT5QcmVzcyBDVFJMK0EgYW5kIHRoZW4gYmFja3NwYWNlIChv bmNlIG9yIGZldyB0aW1lcykgb3IgdXNlIGJhY2tzcGFjZSB0byBkZWxldGUgZXZlcnl0aGluZy48 L2xpPgoJCQk8bGk+VHlwZSBzdGguPC9saT4KCQkJPGxpPkluIHRoZSBmaXJzdCBhbmQgc2Vjb25k IGVkaXRhYmxlcyB5b3Ugd29uJ3QgYmUgYWJsZSB0byByZW1vdmUgZm9ybWF0dGluZy4gQWZ0ZXIg eW91IHN0YXJ0IHR5cGluZyB0aGUgc3R5bGUgd2lsbCBiZSByZXN0b3JlZC4KCQkJCVRoaXMgd2ls bCBoYXBwZW4gZm9yIG1vc3Qgb2YgdGhlICJzdHlsaW5nIiBlbGVtZW50cyAoPGNvZGU+Yiwgc3Ry b25nLCBlbSwgaSwgc3ViLCBzdWI8L2NvZGU+KSBhbmQgPGNvZGU+Jmx0O3NwYW4+PC9jb2RlPiB3 aXRoIGlubGluZSBzdHlsZXMgbGlrZQoJCQkJPGNvZGU+Zm9udC1zaXplLCBjb2xvciwgZXRjPC9j b2RlPi4gTm90ZSB0aGF0IGluIHRoZSBzZWNvbmQgZWRpdGFibGUgZXZlbiBpZiB5b3UgcmVtb3Zl ZCBlbnRpcmUgcGFyYWdyYXBoIGJ5IHByZXNzaW5nIGJhY2tzcGFjZQoJCQkJZmV3IHRpbWVzLCB0 aGUgc3R5bGUgd2lsbCBiZSByZXN0b3JlZC4gSG93ZXZlciwgdGhhdCBkb2VzIG5vdCBoYXBwZW4g aW4gdGhlIHRoaXJkIGVkaXRhYmxlIHdoaWNoIGNvbnRhaW5zIHN0eWxlIGFwcGxpZWQgYnkKCQkJ CWEgY2xhc3MuIFdoZW4gYWxsIGxldHRlcnMgYXJlIHJlbW92ZWQgZW50aXJlIHNwYW4gZGlzYXBw ZWFycy48L2xpPgoJCQk8bGk+SSB0aGluayB0aGF0IHRoaXMgaXMgdGhlIGV4cGVjdGVkIGJlaGF2 aW91cjoKCQkJCTxvbD4KCQkJCQk8bGk+Y29udGVudDogPGNvZGU+Jmx0O2VtPmZvbyZsdDsvZW0+ PC9jb2RlPiAoY2FyZXQgYXQgdGhlIGVuZCksPC9saT4KCQkJCQk8bGk+YmFja3NwYWNlIHByZXNz ZWQgMyB0aW1lczogPGNvZGU+Jmx0O2VtPltmaWxsZXI/XSZsdDsvZW0+PC9jb2RlPjsgaWYgdXNl ciBzdGFydHMgdHlwaW5nIG5vdyB0aGUgc3R5bGUgc2hvdWxkIGJlIHJlc3RvcmVkICh0aGUgb3Jp Z2luYWwgb25lLCBub3QgdHJhbnNmb3JtZWQpOwoJCQkJCQlub3RlIHRoYXQgdGhlIGVsZW1lbnQg c2hvdWxkIG5vdCBiZSByZW1vdmVkIChhcyBXZWJraXQgZG9lcyBub3cpLCB0aGFua3MgdG8gdGhh dCBXWVNJV1lHIGVkaXRvcnMgd2lsbCBiZSBhYmxlIHRvIGNoZWNrIHRoZQoJCQkJCQlzdGF0ZSBv ZiBhIHN0eWxlIChlLmcuIGlmIGJvbGQgaXMgYWN0aXZhdGVkKSw8L2xpPgoJCQkJCTxsaT40dGgg YmFja3NwYWNlIHJlbW92ZXMgdGhlIHN0eWxlIHdoaWNoIHdvbid0IGJlIHJlc3RvcmVkIHdoZW4g dXNlciBzdGFydHMgdHlwaW5nIGFnYWluLjwvbGk+CgkJCQk8L29sPgoJCQk8L2xpPgoJCTwvb2w+ CgkJPGRpdiBjb250ZW50ZWRpdGFibGU9InRydWUiIGNsYXNzPSJlZGl0YWJsZSI+CgkJCTxzcGFu IHN0eWxlPSJmb250LXNpemU6MTJweCI+Zm9vPC9zcGFuPgoJCTwvZGl2PgoJCTxwcmUgY2xhc3M9 Im91dHB1dCI+PC9wcmU+CgoJCTxkaXYgY29udGVudGVkaXRhYmxlPSJ0cnVlIiBjbGFzcz0iZWRp dGFibGUiPgoJCQk8cD48c3BhbiBzdHlsZT0iY29sb3I6Z3JlZW4iPmZvbzwvc3Bhbj48L3A+CgkJ PC9kaXY+CgkJPHByZSBjbGFzcz0ib3V0cHV0Ij48L3ByZT4KCgkJPGRpdiBjb250ZW50ZWRpdGFi bGU9InRydWUiIGNsYXNzPSJlZGl0YWJsZSI+CgkJCTxzcGFuIGNsYXNzPSJtYXJrZXIiPmZvbzwv c3Bhbj4KCQk8L2Rpdj4KCQk8cHJlIGNsYXNzPSJvdXRwdXQiPjwvcHJlPgoJPC9zZWN0aW9uPgoK CTxzY3JpcHQ+Cgp2YXIgZWRpdGFibGVzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCggJy5l ZGl0YWJsZScgKTsKCmZvciAoIHZhciBpID0gMDsgaSA8IGVkaXRhYmxlcy5sZW5ndGg7ICsraSAp Cgl1cGRhdGVPdXRwdXQoIGVkaXRhYmxlc1sgaSBdICk7CgpmdW5jdGlvbiB1cGRhdGVPdXRwdXQo IGVkaXRhYmxlICkgewoJdmFyIHByZSA9IGVkaXRhYmxlLm5leHRFbGVtZW50U2libGluZzsKCXNl dEludGVydmFsKCBmdW5jdGlvbigpIHsKCQlwcmUuaW5uZXJIVE1MID0gZWRpdGFibGUuaW5uZXJI VE1MLnJlcGxhY2UoIC88L2csICcmbHQ7JyApLnJlcGxhY2UoIC8oXnxcbilccysvZywgJyQxJyAp OwoJfSwgMTAwMCApOwp9CgoJPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPgo=