Copy paste from google doc forces bold - removes underline and italics

[Nick M]

Steps to reproduce

1. Go to the nightly ckeditor demo ​http://nightly.ckeditor.com/15-10-28-07-07/full/samples/
2. Copy one word from a google doc that is both underlined and italicized
3. Paste it into editor

Expected result

The word is pasted in italicized and underlined.

Actual result

The word is bolded, no underlines or italics to be found.

Other details (browser, OS, CKEditor version, installed plugins)

[Nick M]

I am seeing the above behavior in chrome 45 and 46 (latest). Firefox 41 (latest) has slightly different behavior - in Firefox the text is not bolded, but the italics are still missing. Underline works as normal. I made sure to always copy paste the google doc text from within the same browser instance to eliminate any weirdness from copying between browsers.

This is happening on both Mac OSX Yosemite and Windows 7.

[Jakub Ś]

I can't reproduce this in Firefox (perhaps ACF configuration in your editor instance blocks it) but I can reproduce this problem in Blink starting from CKEditor 4.5.0.

[Tomasz Jakut]

'semantic-content' filter seems to be too strict to be a default paste filter in Webkit/Blink as it strips off all inline styles. Therefore content pasted from Google Docs is unstyled, as there is no semantics in it, just spans with bunch of inline styles.

I propose creating new filter, specially to be default filter in Webkit/Blink. I named it 'webkit-default-filter' and it's based on 'semantic-content' with some additional rules applied.

At the moment there is only one more rule, for Google Docs. Actually it's easy to check if content is pasted from Google Docs, because it wraps everything with element with [id^=docs-internal-guid-], so we just need to ​check if element with that attribute is present. The only downside of that approach is the chance that Google Docs would change their implementation… and force us to change ours. On the other hand, that [id] is the only distinguishable part of Google Doc's span[style]s.

Pushed my proposal to ​branch:t/13877.

[mr_j936]

Hello, I have the same problem. I tried your fix jakut and I like it, except for a tiny problem, everything still comes out bold. What exactly should I fix to avoid that from happening?

And why is the problem altogether non existant on firefox? Does the clipboard filter work differently depending on the browser?

[Tomasz Jakut]

What exactly should I fix to avoid that from happening?

Pasted content is wrapped in b, so probably you should replace it with span. However in my case that b tag comes with [style="font-weight: normal;"] and problem doesn't exist.

Does the clipboard filter work differently depending on the browser?

Maybe not the clipboard itself, but dfault ​paste filter is different for Webkit/Blink.

[mr_j936]

They are coming out wrapped in <strong></strong> tags. I guess I should find a way to let it remove all strong tags. I am still new to this code... Thanks for the help so far.

[Jakub Ś]

I also confirm what @mr_j936 has found. Copying underlined and italic word from Google docs into editor (in Blink) pastes word wrapped in strong.

I'm not sure if this is the case here but perhaps @t.jakut has custom setting for core styles bold - ​http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-coreStyles_bold ?

Using below code seems to solve this problem but I believe it should work like this without manipulation of core styles?

CKEDITOR.replace( 'editor1', {
	coreStyles_bold : {
		element: 'span',
		attributes: { 'class': 'Bold' },
		overrides: 'strong'
	}
} );

[Tomasz Jakut]

Actually problem was caused by disabling Advanced Content Filter.

I've added processing function to the filter to change meaningless GDocs markup into semantic one. Pushed changes to ​branch:t/13877.

[mr_j936]

Yes that fixed it thank you.

[kkrzton]

There is also an issue in Firefox, while copying text formatted only with italics or underlined it works fine but if text is formatted with both underlined and italics - only underlined is preserved on paste (tested on FF 46.0 on Ubuntu - Google Docs also opened in FF). So the exact case described in ​this comment. This behavior is same for Chrome for CKEditor versions before 4.5.0 (checked 4.4.8 and 4.3.5). It seems like native beahviour before the custom copy paste was introduced in 4.5.0. We should also take care of FF.

---

As for existing solution for Webkit/Blink:

Adding special filter on top of semantic-filter seems reasonable and as you (@t.jakut) mentioned, recognizing content pasted from Google Docs by id is the best approach for now. If they are going to change the implementation the may also change their markup structure or style attribute so I believe relaying on id is the way to go.

The overall solution looks good, I just refactored ​isPastedFromGDocs function to make it shorter.

The only concern I have is the processDataFromGDocs function which I would like to use more general approach. Instead of having ​specialized code for this specific case:

if ( styles[ 'font-style' ] == 'italic' && styles[ 'text-decoration' ] == 'underline' ) {
	element.name = 'em';
	element.wrapWith( new CKEDITOR.htmlParser.element( 'u' ) );
} else if ( styles[ 'text-decoration' ] == 'underline' ) {
	element.name = 'u';
} else if ( styles[ 'font-style' ] == 'italic' ) {
	element.name = 'em';
}

I would go with something like:

if ( styles[ 'font-style' ] == 'italic' ) {
	element.name = 'em';
}
if ( styles[ 'text-decoration' ] == 'underline' ) {
	element.wrapWith( new CKEDITOR.htmlParser.element( 'u' ) ); // if element was not already renamed do element.name = 'u'; else wrap
}
if ( styles['font-weight'] == 700 ) {
	element.wrapWith( new CKEDITOR.htmlParser.element( 'strong' ) ); // same here if element was not already renamed do element.name = 'strong'; else wrap
}

so every style is processed independently and it will be easier to extend in the future with additional elements (if there is need for that).

I know this ticket is only about underline and italics but if we already working on this I would like to add also handling for bold styles (which after above change shouldn't be much work). For bold google docs sets font-weight: 700.

I also noticed there is one unit test added ('test default filter preserving Google Docs formatting') which is ok but I would like to see test checking if pasted data was correctly transformed to semantic markup (if possible in unit tests).

[Marek Lewandowski]

Moving to 4.6.2 minor release, as 4.6.1 is mostly about polishing 4.6.0.

[Marek Lewandowski]

Moving to the nice to have list.