Improved pastefromword to retain cell borders #2219

jacekbogdanski · 2018-07-12T13:56:04Z

What is the purpose of this pull request?

New feature

Does your PR contain necessary tests?

All patches which change the editor code must include tests. You can always read more
on PR testing,
how to set the testing environment and
how to create tests
in the official CKEditor documentation.

This PR contains

Unit tests
Manual tests

What changes did you make?

It's early PR which requires some changes. Among others:

I didn't cover tests thus proposed changes kills 134 unit tests only for chrome. I will fix it and cover with tests after early acceptance.
I was only able to test this feature on IE11, Chrome, Firefox. However, it looks like Safari and IE8 are not supported by pastefromword. Not sure about IE10 and IE9.

Closes #1490, closes #2924

Comandeer

It's hard to say anything about this fix as there is no manual test. Please at least add some manual tests for it.

mlewand

Just 2 cents: make sure to add unit test for this enhancement. Currently it is not covered.

plugins/pastefromword/filter/default.js

Comandeer

Seems like borders are not correctly parsed (tested on Chrome).

Excel:

CKEditor:

It doesn't work in Safari at all:

Raw HTML data: https://gist.github.com/Comandeer/ed20b6dd576b7350f972355f799cb29a

The unit tests are missing.

plugins/pastefromword/filter/default.js

Comandeer · 2018-11-15T12:42:08Z

plugins/pastefromword/filter/default.js

 					Style.createStyleStack( element, filter, editor,
 						/margin|text\-align|padding|list\-style\-type|width|height|border|white\-space|vertical\-align|background/i );
+
+					function mergeBorderStyles( borderType, borderValue ) {


I'm also thinking about moving this function into CKEDITOR.tools.style. What a pity that CKEDITOR.tools.style.border is a function, because it would be a great namespace for such functions.

Comandeer · 2018-11-15T12:49:53Z

tests/plugins/pastefromword/manual/pastetable.md

+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, pastefromword
+
+1. Using Microsoft Excel copy table with custom cell borders. Use different colors and border types.


It'd be nice to create ready to use asset.

Comandeer · 2018-11-15T12:50:02Z

tests/plugins/pastefromword/manual/pastetable.md

@@ -0,0 +1,14 @@
+@bender-tags: bug, 4.11.0, 1490, pastefromword


Please update version tags.

Comandeer · 2018-11-15T13:00:34Z

tests/plugins/pastefromword/manual/pastetable.md

@@ -0,0 +1,14 @@
+@bender-tags: bug, 4.11.0, 1490, pastefromword
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, pastefromword


Table from Excel is pastes as plain text. There are several missing plugins (e.g. table).

Comandeer · 2018-11-15T13:32:19Z

plugins/pastefromword/filter/default.js

-						delete styles[ style ];
-						styles[ style.toLowerCase() ] = temp;
-					}
+					for ( var i = 0; i < allowedBorderTypes.length; i++ ) {


You use CKEDITOR.tools.array.forEach just right after this loop. Won't be better to use also here?

Comandeer · 2018-11-15T13:43:41Z

plugins/pastefromword/filter/default.js

+						return borderObj.width + ' ' +
+							borderObj.style + ' ' +
+							// Replace old CSS2 `windowtext` color with `black`.
+							borderObj.color.replace( 'windowtext', 'black' );


windowtext isn't actually equal to black, it's platform dependent and could be changed by changing OS's theme or other settings. As for now every browser is supporting it, so I'm not sure if it's necessary to replace it.

I'm wondering here, it's tricky to work with these values.

95% (ofc my gut feeling) people use the default values, so it would kinda make sense to convert it anyway. And it is not rare to see MS Word using this:

We could expose a dedicated method in CKEDITOR.tools.style to replace these magic values. Then again I thought about possibility to adjust these values or even disable this replacement. So I kind of intuitively thought of CKEDITOR.config but on the second thought I'm not a fan of bloating (already enormous) config with very specific options like that.

So eventually it could hold some sort of public mapping in CKEDITOR.tools.style. That will allow only for global customization, but we don't need more than that.

jacekbogdanski · 2018-11-16T15:39:33Z

The feature doesn't work on Safari and IE8 thus the issue: #2609

jacekbogdanski · 2018-12-02T12:08:41Z

Just 2 cents: make sure to add a unit test for this enhancement. Currently, it is not covered.
The unit tests are missing.

Yes, I know that this PR is missing unit tests, I already wrote it in the PR description. No worries, I won't leave this code without test coverage. Although this implementation kills every test case which uses table (currently failing 132 unit tests only for chrome, some tests are written per browser so it may multiply fast) so I would really appropriate solid review before I start fixing unit tests. Small implementation change may require correcting all tests again and thus they are generated, it's a highly time-consuming task. Although I added a unit test for Chrome, so it will be easier to validate output HTML.

I'm wondering if https://github.com/ckeditor/ckeditor-dev/blob/015e1cc00b114d6a503421db9c0a35b71afe525e/plugins/pastefromword/plugin.js#L26-L27 ACF filter shouldn't be moved to the table plugin? As I know pastefromword should be a bit dumb in the case of allowed content inside the editor, so a user can decide which styles he wants to enable by importing correct plugin.

I'm not very fond of CKEDITOR.tools.style.parse.splitBorderStyles name and I think it may be misleading. Also, it doesn't play well with namespace when you look at the other function names. However, nothing else comes to my mind now. Maybe you have some idea about the name?

Comandeer

There are some differences between original table and pasted one:

Original:

Pasted one:

It's possible to fully mimic the behaviour of Excel by switching to border-collapse: separate and moving border-bottom from the first table cell (with [colspan=9]) to border-top of cells below:

Without moving borders we'd end with double borders:

Please also include changes described in #2219 (comment)

Comandeer · 2018-12-19T11:39:42Z

plugins/pastefromword/filter/default.js

@@ -533,7 +519,7 @@
 				return;
 			}

-			if ( value === '' ) {
+			if ( value === '' || value == null ) {


It will also remove styles with 0 value, which can lead to bugs (e.g. showing borders that shouldn't be shown).

I will remove this change because it's not important for this PR, although I'm curious how could it remove styles with 0 value? In JS 0 == null and '0' == null gives false logical value. I'm using double equal operator here to perform null == undefined coercion.

plugins/pastefromword/filter/default.js

Comandeer · 2018-12-19T11:57:33Z

plugins/pastefromword/plugin.js

@@ -23,6 +23,8 @@
 				// Snapshots are done manually by editable.insertXXX methods.
 				canUndo: false,
 				async: true,
+				allowedContent: 'table{border-collapse};' +


PFW shouldn't allow any content on its own. Content should be allowed by certain plugins. Such styles should be allowed by table, colorbutton etc.

Yep, I already mentioned it in #2219 (comment), so we agree on this one. However, not sure how far can we go with changing ACF of the table plugin for this feature.

Comandeer · 2018-12-19T12:43:18Z

core/tools.js

+				 * @returns {Number} return.left Left value.
+				 * @member CKEDITOR.tools.style.parse
+				 */
+				shorthand: function( value, split ) {


This name is a little bit misleading, because there are several types of shorthands in CSS (e.g. one in border-radius property).

mlewand · 2019-01-10T10:02:59Z

Just to add my 2 cents here, I like the proposal added by @Comandeer. Given that we're able to make it work 100% of the time and that it will not cause any side effects it would really improve the pasting experience.

However with this, this PR starts to do too many things™. We should extract this feature proposed by @Comandeer to a separate issue (as it is feature request) and fix the bug here.

mlewand · 2019-01-10T10:16:30Z

core/tools.js

+				 * @returns {String} return.border-left Border left style.
+				 * @member CKEDITOR.tools.style.parse
+				 */
+				splitBorderStyles: function( styles, fallback ) {


Naming: it's already in style namespace, so there's no reason to call it splitBorderStyles because it would be CKEDITOR.tools.style.parse.splitBorderStyles (note style twice).

CKEDITOR.tools.style.parse.splitBorder is definitely simpler.

mlewand · 2019-01-10T11:52:12Z

I have pushed t/1490-oop branch, where I added simplified introduction of BorderStyle. This is a type that I initially wanted to be returned by members like https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_tools_style_parse.html#method-border

But we decided not to add it in order to simplify the code (we didn't need this at this point). Now as there is more than 1 method working on borders it make sense to unify it.

Note that on this branch I didn't expose the type (for sure the types should be exposed, as they're useful).

Also I'd work on simplifying the shorthand interaction. It didn't work well inside splitBorderStyles in terms of API.

I think that BorderStyle type could accept object { size, type, color } instead of positioned arguments, or it could also handle simple array in a predefined order. Just do whatever makes the client-code simpler.

Finally this part is garbage, and should be simplfieid: https://github.com/ckeditor/ckeditor-dev/blob/t/1490-oop/core/tools.js#L1939-L1941 This acutally is related to the API mentioned before.

Anyway this is just a proposal for possible direction. As a result function returns border object that expose border information in a convenient way (just obj.color, obj.style instead of having to parse it over and over). It also stringifies well, so the use case that you're using in this particular ticket.

Note that with this approach there would be a little bit of API trickery - we should use BorderStyle for values returned by style.parse.border which we could change only in major release (but that's fine we'll extract it to a separate task).

jacekbogdanski · 2019-01-10T16:28:58Z

I updated the code with the new BorderStyle type. Not sure if we want to enable _normalizeMap as public API - maybe wait if someone ask for it?

@mlewand The issue for this PR is labeled feature and is targetted into major, although you set the milestone to 4.11.13 - is milestone valid? I see a little problem with the minor release - CKEDITOR.tools.style.parse.border -> BorderStyle return type is required for this feature, so windowtext is correctly updated into black when using existing cell styles: https://github.com/ckeditor/ckeditor-dev/blob/0ddcf1be883ed121b86eb4838ac75488af1a1c2a/plugins/pastefromword/filter/default.js#L365
It makes it a little harder to update CKEDITOR.tools.style.parse.border as followup task.

TODO Update changelog with:

API change: new BorderStyle type
API change: CKEDITOR.tools.style.parse.border returns new type
Fixed: _findColor ignores windowtext

I will update changelog once we are sure about the API / release version.

jacekbogdanski · 2019-01-10T16:41:01Z

At the moment BorderStyle._normalize a function is probably overcomplicated and should be inlined inside a constructor. However, I think it makes sense if we want to make normalizeMap public. WDYT?

Comandeer · 2019-06-03T08:17:32Z

Rebased onto latest major.

Comandeer

LGTM!

jacekbogdanski force-pushed the t/1490 branch from b457bba to 4c24c35 Compare July 12, 2018 14:04

mlewand added the review:easy Pull requests that can be reviewed by a Junior Developer before being reviewed by the Reviewer. label Aug 13, 2018

Comandeer self-assigned this Aug 27, 2018

Comandeer requested changes Aug 27, 2018

View reviewed changes

CKEditorBot unassigned Comandeer Aug 27, 2018

jacekbogdanski requested a review from Comandeer September 4, 2018 13:03

jacekbogdanski mentioned this pull request Oct 11, 2018

Paste from google docs support #2472

Closed

2 tasks

mlewand reviewed Nov 15, 2018

View reviewed changes

plugins/pastefromword/filter/default.js Outdated Show resolved Hide resolved

Comandeer self-assigned this Nov 15, 2018

Comandeer requested changes Nov 15, 2018

View reviewed changes

CKEditorBot unassigned Comandeer Nov 15, 2018

jacekbogdanski self-assigned this Nov 16, 2018

jacekbogdanski force-pushed the t/1490 branch from ec937a6 to 62c942d Compare November 19, 2018 13:30

jacekbogdanski requested a review from Comandeer December 2, 2018 12:08

CKEditorBot unassigned jacekbogdanski Dec 2, 2018

Comandeer self-assigned this Dec 19, 2018

Comandeer requested changes Dec 19, 2018

View reviewed changes

CKEditorBot unassigned Comandeer Dec 19, 2018

jacekbogdanski self-assigned this Dec 19, 2018

mlewand reviewed Jan 10, 2019

View reviewed changes

jacekbogdanski requested review from mlewand and Comandeer January 10, 2019 16:33

CKEditorBot unassigned jacekbogdanski Jan 10, 2019

Comandeer self-assigned this Jan 15, 2019

jacekbogdanski added 25 commits June 3, 2019 10:15

Moved border functions to borderStyle object.

7cf9de1

Corrected docs with new border namespace.

7e6854c

Updated borderStyle reference.

62da938

Inlined convert to px regex.

8f37434

Fixed callback return docs.

95795bf

Function name renaming.

c7ea003

Improved returned type.

f576eec

Linked external docs using markdown syntax.

b498a00

Deprecated parse.border method.

bee3616

Docs improvement.

d4f5146

Updated chrome tests.

c689b9d

Added revert keyword.

574bec3

Remove leftover border styles to avoid conflicts.

a35f34b

Fixed IE11 manual tests.

a2e799d

Unified background color property.

23fe8ad

Removed redundant css rules.

c1f1107

Border side property value is preferred over more more general styles.

230d92e

Corrected tests for the recent changes.

876890d

Test assertion refactoring.

3f8ec20

Added missing Border tests.

e0d4959

Improved docs.

c7411d5

Added generic table test for word and excel.

d82c748

Added changelog entry for #2923, updated tests.

4196177

Added missing changelog entries.

b065290

Removed leftovers.

f055da7

Comandeer force-pushed the t/1490 branch from f0e034d to f055da7 Compare June 3, 2019 08:17

Comandeer approved these changes Jun 3, 2019

View reviewed changes

Comandeer merged commit 10bd7f9 into major Jun 3, 2019

CKEditorBot deleted the t/1490 branch June 3, 2019 11:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improved pastefromword to retain cell borders #2219

Improved pastefromword to retain cell borders #2219

jacekbogdanski commented Jul 12, 2018 •

edited

Loading

Comandeer left a comment

mlewand left a comment

Comandeer left a comment

Comandeer Nov 15, 2018

Comandeer Nov 15, 2018

Comandeer Nov 15, 2018

Comandeer Nov 15, 2018

Comandeer Nov 15, 2018

Comandeer Nov 15, 2018

mlewand Dec 18, 2018

jacekbogdanski commented Nov 16, 2018

jacekbogdanski commented Dec 2, 2018

Comandeer left a comment

Comandeer Dec 19, 2018

jacekbogdanski Dec 20, 2018

Comandeer Dec 19, 2018

jacekbogdanski Dec 19, 2018

Comandeer Dec 19, 2018

mlewand commented Jan 10, 2019

mlewand Jan 10, 2019

mlewand commented Jan 10, 2019 •

edited

Loading

jacekbogdanski commented Jan 10, 2019 •

edited

Loading

jacekbogdanski commented Jan 10, 2019

Comandeer commented Jun 3, 2019

Comandeer left a comment

		@@ -0,0 +1,14 @@
		@bender-tags: bug, 4.11.0, 1490, pastefromword

Improved pastefromword to retain cell borders #2219

Improved pastefromword to retain cell borders #2219

Conversation

jacekbogdanski commented Jul 12, 2018 • edited Loading

What is the purpose of this pull request?

Does your PR contain necessary tests?

This PR contains

What changes did you make?

Comandeer left a comment

Choose a reason for hiding this comment

mlewand left a comment

Choose a reason for hiding this comment

Comandeer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jacekbogdanski commented Nov 16, 2018

jacekbogdanski commented Dec 2, 2018

Comandeer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mlewand commented Jan 10, 2019

Choose a reason for hiding this comment

mlewand commented Jan 10, 2019 • edited Loading

jacekbogdanski commented Jan 10, 2019 • edited Loading

jacekbogdanski commented Jan 10, 2019

Comandeer commented Jun 3, 2019

Comandeer left a comment

Choose a reason for hiding this comment

jacekbogdanski commented Jul 12, 2018 •

edited

Loading

mlewand commented Jan 10, 2019 •

edited

Loading

jacekbogdanski commented Jan 10, 2019 •

edited

Loading