New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 335955 link

Starred by 17 users

Issue metadata

Status: Fixed
Closed: Oct 2016
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Sign in to add a comment

Unwanted spans inserted in contentEditable elements

Reported by, Jan 19 2014

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.76 Safari/537.36

Steps to reproduce the problem:
1. Select some text in a contentEditable element.
2. Run document.execCommand('insertUnorderedList')

What is the expected behavior?
The selection is wrapped in UL and LI.

What went wrong?
The selection is wrapped in SPAN with inline styles, then in UL and LI. This "breaks" the styling of the list. If there is already a span around the text, some attributes are removed from it (see the example where a class is removed).

Did this work before? N/A 

Chrome version: 32.0.1700.76  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 12.0 r0

Simple example:
More details:

Is this indeed considered a feature? All contentEditable based editors I've seen are trying to prevent these spans.

Lately Chrome seems to be inserting these spans even more aggressively. Could there be a way to turn this off please.
Labels: -Via-Wizard -OS-Windows Cr-Blink-HTML OS-All M-34
Status: Untriaged
Able to reproduce the issue on the mentioned chrome version on Win, MAC and Linux. Issue exists from M26 - 26.0.1393.2

Comment 2 by, Jan 21 2014

It's also related to #226941 and #246449 it seems that Blink/WebKit creates these merge span elements for all sorts of actions. Delete/Backspace/Cut/Drag & Drop/Lists and so on we could create a bug report for each of these cases but I think it must be some central logic doing something strange.

Other browsers doesn't create these span elements out of the current CSS runtime styles and it's an unwanted behavior. If some users want this behavior one could have some form of mode that can be switched on/off using a execCommand similar to the styleWithCSS execCommand. 

Here is one of the original reports for WebKit: but it ended up being reverted not sure if it can be re-merged into Blink.

Please fix this since it effects thousands of users using any rich text editor in the browser.

Comment 3 by, Jan 27 2014

This is a bug with contentEditable fields in chrome that is affecting thousands of developers, it is widely referenced online:

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 4 by, Jan 28 2014

Labels: -Cr-Blink-HTML Cr-Blink-Editing

Comment 5 by, Mar 3 2014

Labels: -M-34 MovedFrom-34 M-35
Moving all non essential bugs to the next Milestone.

Comment 6 by, Apr 7 2014

Labels: -M-35 MovedFrom-35
This issue has already been moved once and is lower than Priority 1,therefore removing mstone.
How about raising the priority then? My entire team of content writers is now using Firefox because of this defect. We cannot create content where some lines are widely spaced and others aren't - it looks ridiculous and completely unprofessional.

Comment 8 by, Jun 7 2014

I also do not understand why priority is being lowered. This is a very serious issue in many WYSIWYG editors. There are bug reports all over!... :)
Please reconsider to raise priority on this issue. 
Status: Available

Comment 11 by, Aug 29 2014

Labels: Cr-Blink-Editing-Command

Comment 12 by Deleted ...@, Oct 22 2014

Will we ever see a fix for this? 

Comment 13 by Deleted ...@, Jan 16 2015

Running into the same problem in my simple rich text editor. However, I've discovered that these execCommands are pulling in declarations from my own style sheet I'm using for presenting the editor content. For example, I had a style for {letter-spacing: 0.01em;} and that same style showed up in my content. When I removed the style from my stylesheet, the execCommand did not add that property to the commanded tag.
Project Member

Comment 14 by, Mar 25 2016

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been available for more than 365 days, and should be re-evaluated. Hotlist-Recharge-Cold label is added for tracking. Please re-triage this issue.

For more details visit - Your friendly Sheriffbot
Status: Available (was: Untriaged)

Comment 16 by, Jun 22 2016

Status: Started (was: Available)
In review:

yosin@ is a virtual owner, joone.hur@ is working on this.
Labels: TE-Verified-M53 TE-Verified-53.0.2782.0
Tested the issue on Windows 7, Mac 10.11.5, Ubuntu 14.04 using 53.0.2782.0.Unable to reproduce the issue.
Please find attached screencast.

Marking it as TE-Verified.
1.2 MB View Download
Status: Fixed (was: Started)

Sign in to add a comment