Bug 127242

Summary: Unwanted spans inserted in contentEditable elements
Product: WebKit Reporter: Andrew Ozz <azaozz>
Component: HTML EditingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: ahmad.saleem792, cshu, ideami, rniwa
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
See Also: https://bugs.webkit.org/show_bug.cgi?id=246938

Description Andrew Ozz 2014-01-18 16:34:45 PST
I'm one of the WordPress lead developers. We are by far the largest contentEditable "user" considering that WordPress powers 21% of the top 10,000,000 web sites (http://w3techs.com/technologies/overview/content_management/all). Every day hundreds of thousands web pages are created  by using WordPress' contentEditable based editor, TinyMCE.

Unfortunately we've been having more and more problems with spans with inline styles being inserted into the editor. TinyMCE has several routines to prevent these spans but it seems lately the spans are being inserted even more aggressively and in more cases.

I've made a very simple example to illustrate the problem: http://jsfiddle.net/eWsGv/6/. Note that execCommand('insertUnorderedList') and execCommand('insertOrderedList') are only wto cases where the unwanted spans appear. There are many other cases.

We've been trying to make the editor look as close to the "front-end" as possible. That generally means a lot of styles are applied in the contentEditable element. As reported by out users, it seems the more styles are there, the higher the chance that unwanted spans will be inserted.

I've tried to find out why WebKit browsers insert these spans, but couldn't. Neither of the other top browsers does anything similar. It looks like this is some sort of user-facing feature to maintain text styling, but in reality it breaks the styling. Even worse: it removes attributes from existing spans. All contentEditable editors I've seen implement some methods of removing these pesky spans.

If this indeed is considered an essential feature in contentEditable, could there be a straightforward way of turning if off, please.
Comment 1 javismiles 2014-01-27 10:47:59 PST
This is a bug with contentEditable fields in chrome that is affecting thousands of developers, it is widely referenced online:

http://www.neotericdesign.com/blog/2013/3/working-around-chrome-s-contenteditable-span-bug

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=226941

http://stackoverflow.com/questions/15015019/prevent-chrome-from-wrapping-contents-of-joined-p-with-a-span

We really need to have this fixed,
please google chrome team, could you please do something about it, it's really affecting our work and apps, thanks very much
Comment 2 Ahmad Saleem 2022-12-02 18:43:03 PST
*** STEP 1 ****

> Safari 16.1


	    <ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
	    <li><span style="color: rgb(136, 136, 136); font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Paragraph 1</span><br></li><li><span style="color: rgb(136, 136, 136); font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Paragraph 2</span><br></li><li><span style="color: rgb(136, 136, 136); font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Paragraph 3</span><br></li></ul>

> Chrome Canary 110

<ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
<li>Paragraph 1</li><li>Paragraph 2</li><li><span class="special">Paragraph 3</span></li></ul>

> Firefox Nightly 109

ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
	    </ul>
	    <ul><li>Paragraph 1</li><li>    
	    <br></li><li>Paragraph 2</li><li>
	    <br></li><li><span class="special">Paragraph 3</span></li></ul>
	
__________

STEP 1 - Chrome and Firefox are matching each other except Firefox is adding <br> extra, which don't make any sense visually as well.

_____________

*** STEP 2 ****

> Safari 16.1


	    <ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
	    </ul>
	    <p><ol><li><span style="font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Paragraph 1</span><br></li><li><span style="font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Paragraph 2</span><br></li><li><span style="font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Paragraph 3</span><br></li></ol></p>

> Chrome Canary 110

<ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
	    </ul>
	    <p><ol><li>Paragraph 1</li><li>Paragraph 2</li><li><span class="special">Paragraph 3</span><br></li></ol></p>

> Firefox Nightly 108


	    <ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
	    </ul>
	    <ol><li>Paragraph 1</li><li>    
	    <br></li><li>Paragraph 2</li><li>
	    <br></li><li><span class="special">Paragraph 3</span></li></ol>

_____________

STEP 2 - Chrome and Firefox are matching each other except Firefox is adding <br> extra, which don't make any sense visually as well.

_____________

*** STEP 3 ****

> Safari 16.1

  <ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
	    </ul>
	    <p>Paragraph 1</p>    
	    <p>Paragraph 2</p>
	    <p><ol><li><span style="font-size: 16px; font-family: Arial, Helvetica, sans-serif;">Paragraph 3</span><br></li></ol></p>

> Chrome Canary 110

<ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
	    </ul>
	    <p>Paragraph 1</p>    
	    <p>Paragraph 2</p>
	    <p><ol><li><span class="special">Paragraph 3</span><br></li></ol></p>

> Firefox Nightly 109:

    <ul>
	        <li>list item 1</li>
	        <li>list item 2</li>
	        <li>list item 3</li>
	    </ul>
	    <p>Paragraph 1</p>    
	    <p>Paragraph 2</p>
	    <ol><li><span class="special">Paragraph 3</span></li></ol>
______

STEP 2 - Chrome and Firefox are matching each other except Firefox is not adding <p> extra to last one.
Comment 3 Ahmad Saleem 2022-12-02 18:44:11 PST
@rniwa - I tried to merge Blink patch via Bug 246938 and it did removed extra <span> and if it pushes us to match Blink behavior. I think it would be less broken than current one as from the output in Comment 02.

Any input?
Comment 4 Ryosuke Niwa 2023-01-09 19:15:49 PST
The current behavior is expected because we try to match NSTextView's behavior where applicable.