In Google Chrome, when toggling a list item (ie: on-off-on or bullet-number-bullet) the original style is lost

[darcyparker]

This problem does not occur in FF 24.0

I tested this on Google Chrome Version 30.0.1599.69 m and also on Version 32.0.1667.0 canary Aura.

When I toggle a list item such as one in the demo: http://textangular.com/, I see a span element wrapped around the text node like:

<span style="font-size: 1.2em; line-height: 1.428571429;"> .... </span>

Perhaps it is a bug with execCommand on Chrome that textAngular needs to work around?

Markup at beginning:

<h2>Try me!</h2><p>textAngular is a super cool WYSIWYG Text Editor directive for AngularJS</p><p><b>Features:</b></p><ol><li>Automatic Seamless Two-Way-Binding</li><li>Super Easy <b>Theming</b> Options</li><li>Simple Editor Instance Creation</li><li>Safely Parses Html for Custom Toolbar Icons</li><li>Doesn't Use an iFrame</li><li>Works with Firefox, Chrome, and IE10+</li></ol><p><b>Code at GitHub:</b> <a href="https://github.com/fraywing/textAngular">Here</a> </p>

After putting cursor in the line with item 1 and clicking ordered list.

<h2>Try me!</h2><p>textAngular is a super cool WYSIWYG Text Editor directive for AngularJS</p><p><b>Features:</b></p><span style="font-size: 1.2em; line-height: 1.428571429;">Automatic Seamless Two-Way-Binding</span><br><ol><li>Super Easy <b>Theming</b> Options</li><li>Simple Editor Instance Creation</li><li>Safely Parses Html for Custom Toolbar Icons</li><li>Doesn't Use an iFrame</li><li>Works with Firefox, Chrome, and IE10+</li></ol><p><b>Code at GitHub:</b> <a href="https://github.com/fraywing/textAngular">Here</a> </p>

Continuing to toggle ordered list does not wrap the text() node with an additional span element.

As mentioned in description, similar behaviour occurs when toggling between unordered list and ordered list too.

[fraywing]

Oh man, that style garbage is just ridiculous. Chrome, chrome, chrome 👎

Thank you for letting me know, I'm going to release a patch where at least that style "style="font-size: 1.2em; line-height: 1.428571429;" trash is taken out.

As for the spans, that will have to wait a bit.

I would suggest perhaps submitting a bug to http://code.google.com/p/chromium/issues/list about the spans wrapping the text when execCommand is used for Unordered lists.

Until then, thank you for letting me know! I really appreciate it!

[darcyparker]

Thanks. See https://code.google.com/p/chromium/issues/detail?id=306662

[fraywing]

You are awesome! Thanks Darcy!

[simonfox]

I know this is old, but I got here via the related chromium issue (using the pell editor).

I've tracked this down to the existence of a style that contains a font-size definition that uses em, rem or pt units that cascades to the contenteditable element i.e. I had the following in my styles

body {
  font-size: 0.9em;
}

which resulted in a additional span wrapper with attribute style="font-size: 0.9em;". Either removing font-size from the body style or setting the font-size directly on the contenteditable using px units returns the expected behavior.

Hope this helps anyone who stumbles across this!