Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Starred by 17 users
Status: Fixed
Owner:
Closed: Oct 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment
Unwanted spans inserted in contentEditable elements
Reported by aza...@gmail.com, Jan 19 2014 Back to list
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')
3. 

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: http://jsfiddle.net/eWsGv/6/
More details: https://bugs.webkit.org/show_bug.cgi?id=127242

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.
 
Cc: ranjitkan@chromium.org
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 spo...@gmail.com, 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: https://bugs.webkit.org/show_bug.cgi?id=81656 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 ide...@gmail.com, Jan 27 2014
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 4 by tkent@chromium.org, Jan 28 2014
Labels: -Cr-Blink-HTML Cr-Blink-Editing
Comment 5 by dxie@chromium.org, Mar 3 2014
Labels: -M-34 MovedFrom-34 M-35
Moving all non essential bugs to the next Milestone.
Comment 6 by kareng@google.com, 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 sygmo...@gmail.com, 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 yosin@chromium.org, 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 sheriffbot@chromium.org, Mar 25 2016
Labels: Hotlist-Recharge-Cold
Status: Untriaged
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 https://sites.google.com/a/chromium.org/dev/issue-tracking/autotriage - Your friendly Sheriffbot
Status: Available
Comment 16 by yosin@chromium.org, Jun 22 2016
Cc: joone....@intel.com
Owner: yosin@chromium.org
Status: Started
In review: http://crrev.com/2072093002

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.
335955.mp4
1.2 MB View Download
Status: Fixed
Sign in to add a comment