Opened 3 years ago

Last modified 2 years ago

#13877 review_failed Bug

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

Reported by: Nick M Owned by: Tomasz Jakut
Priority: Nice to have (we want to work on it) Milestone:
Component: General Version: 4.5.0
Keywords: Blink, FF Cc: dp@…

Description

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)

Change History (16)

comment:1 Changed 3 years ago by 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.

Last edited 3 years ago by Nick M (previous) (diff)

comment:2 Changed 3 years ago by Jakub Ś

Keywords: Blink added
Status: newconfirmed
Version: 4.5.44.5.0

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.

comment:3 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.0

comment:4 Changed 3 years ago by Tomasz Jakut

Owner: set to Tomasz Jakut
Status: confirmedassigned

comment:5 Changed 3 years ago by Tomasz Jakut

Status: assignedreview

'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.

comment:6 Changed 3 years ago by 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?

comment:7 Changed 3 years ago by 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.

comment:8 Changed 3 years ago by 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.

comment:9 Changed 3 years ago by 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'
	}
} );

comment:10 Changed 3 years ago by 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.

comment:11 Changed 3 years ago by mr_j936

Yes that fixed it thank you.

comment:12 Changed 3 years ago by kkrzton

Keywords: FF added
Status: reviewreview_failed

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).

comment:13 Changed 2 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.0CKEditor 4.6.1

comment:14 Changed 2 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.1CKEditor 4.6.2

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

comment:15 Changed 2 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.2
Priority: NormalNice to have (we want to work on it)

Moving to the nice to have list.

comment:16 Changed 2 years ago by Damien Pobel

Cc: dp@… added
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy