T/1436: Fixing selection that cross limit node boundaries. #1450

jodator · 2018-06-28T12:50:46Z

Suggested merge commit message (convention)

Other: Fixing selection that cross limit node boundaries. Closes ckeditor/ckeditor5#4360.

Other: The schema.getLimitElement() method now accepts also Range and Position as a parameter.

Additional information

This PR comes with some fixes in other repos all branches are available at https://github.com/ckeditor/ckeditor5/tree/%23t/ckeditor5-engine/1436:

Internal: Align code to the API changes (selection post-fixer). ckeditor5-enter#55
Internal: Align code to the API changes (selection post-fixer). ckeditor5-list#106
Internal: Align code to the API changes (selection post-fixer). ckeditor5-table#81
Internal: Align code to the API changes (selection post-fixer). ckeditor5-undo#87
Internal: Align code to the API changes (selection post-fixer). ckeditor5-widget#45

coveralls · 2018-06-28T13:08:50Z

Coverage remained the same at 100.0% when pulling 2445ef2 on t/1436 into d710524 on master.

Reinmar · 2018-06-29T19:14:50Z

Two conditions are not covered when running just the post-fixer's tests:

Reinmar · 2018-06-29T19:49:38Z

src/model/utils/selection-post-fixer.js

+	const start = range.start;
+	const end = range.end;
+
+	// Flat range on the same text node is always valid - no need to fix:


I think that this comment isn't entirely correct – I mean the "same" part. What about:

f[oo<inlineWidget/>ba]r

Also, what about:

[foo]

In this case, neither the start's nor end's textNode getter will return something.

And there's one more case which is missed here:

[<inlineWidget/>foo<inlineWidget/>]

You might've had a different goal by adding this condition – filtering some cases which might be broken by the following logic of this function. But, if the logic of such a check isn't "complete" in a bigger picture, a wider context of the entire algorithm, then it may be misleading. So, instead of patching this algorithm for a hidden purpose, let's thing wider.

E.g. what kind of non-collapsed selections don't need to be fixed? Those which meet the following criteria (all):

schema.getLimitElement( range.start ) == schema.getLimitElement( range.end ) – it means the selection starts and ends in the same limit element, so it does not cross any limit element boundary. If a range violates this rule, it needs to be extended to cover the lowest common limit element of both its ends (schem.getLimitElement( range )).

Note: Right now, schema.getLimitElement() works only with entire selections, but it's not hard to "downgrade" it to support single ranges (returns LCA like for the entire selection) and single positions (returns a lowest limit element in which this position is contained) too.

schema.checkChild( range.start, '$text' ) && schema.checkChild( range.end, '$text' ) – both its ends are in a place where a text is allowed. They don't need to be placed in/next to a text ([<inlineWidget/>...) – it's enough that a text is allowed there.

Note: A range containing a block widget will not be rooted in a place where text is allowed, so it will not pass this check. However, it doesn't mean that it's incorrect – I was describing a range which is certainly correct (i.e. a possible early return check), not an algorithm for deciding whether a range is correct or not.

Therefore, if a range violates this rule, it needs to be checked further:

Does it select an object element? If yes, it's ok. If not it needs to be fixed.

Hm... and that seems to be all.

By structuring the algorithm as I described above, the rules by which it works will be easier to read. Right now, it consists of "let's try fixing this, let's try that" which is harder for me to digest.

Reinmar · 2018-06-29T19:59:10Z

tests/model/schema.js

@@ -1123,12 +1123,12 @@ describe( 'Schema', () => {
 			schema.extend( 'img', { allowAttributes: 'bold' } );
 			schema.extend( '$text', { allowIn: 'img' } );

-			setData( model, '[<p>foo<img>xxx</img>bar</p>]' );


This changes the semantics of this test. Let's better use parse(), especially that later on we do selection.getRanges() anyway.

This is still not resolved.

Reinmar · 2018-06-29T20:01:23Z

tests/model/utils/selection-post-fixer.js

@@ -59,37 +63,41 @@ describe( 'Selection post-fixer', () => {
 		} );

 		it( 'should react to structure changes', () => {
+			setModelData( model, '<paragraph>[]foo</paragraph><image></image>' );


What was wrong with this test?

Ah, ok, you're simplifying the test.

Reinmar · 2018-06-29T20:12:43Z

OK, so far, the most important bit is my comment about structuring this algorithm. I think you could try to restructure it so the rules by which it works are more visible. I think I described the outline in my comment, but of course that's just the outline. You also need the "fix it" parts. In general, it should look more or less like this:

check something
- if it's wrong fix it; if possible return here; if not (cause something else may be still wrong), continue;
check something else
- if it's wrong fix it; if possible return here; if not, continue;
... and so on

This way you can easily separate the "check" from the "fix" code (you can even have a set of check*() and fix*() helpers). Usually the checks will be easier and will explain the rules this algorithm implements. The fixes will be more complicated but are not that important for overall understanding of the fix.

…ability.

…a._parse().

jodator · 2018-07-03T11:49:31Z

@Reinmar ready to re-review.

Reinmar · 2018-07-04T12:54:24Z

src/model/schema.js

@@ -586,22 +586,32 @@ export default class Schema {
 	 * Returns the lowest {@link module:engine/model/schema~Schema#isLimit limit element} containing the entire
 	 * selection or the root otherwise.
 	 *
-	 * @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
+	 * @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selectionOrRangeOrPosition


You forgot to update the type.

Reinmar · 2018-07-04T13:00:00Z

tests/conversion/downcast-selection-converters.js

@@ -542,7 +542,7 @@ describe( 'downcast-selection-converters', () => {
 		it( 'should add a class to the selected table cell', () => {
 			test(
 				// table tr#0 |td#0, table tr#0 td#0|


Are the comments up to date now?

Reinmar · 2018-07-04T13:00:10Z

tests/conversion/downcast-selection-converters.js

@@ -551,9 +551,9 @@ describe( 'downcast-selection-converters', () => {
 		it( 'should not be used if selection contains more than just a table cell', () => {
 			test(
 				// table tr td#1, table tr#2


And here too?

Reinmar · 2018-07-04T13:01:41Z

tests/model/schema.js

+			schema.extend( 'article', { isLimit: true } );
+			schema.extend( 'section', { isLimit: true } );
+
+			setData( model, '<div><section><article><paragraph>foo[]bar</paragraph></article></section></div>' );


Why do you set a selection anywhere if you're testing if this method works with a range?

You can use parse() here, btw.

Reinmar · 2018-07-04T13:02:42Z

tests/model/schema.js

@@ -1101,7 +1123,13 @@ describe( 'Schema', () => {
 				}
 			} );

-			setData( model, '<p>foo<img />bar</p>' );
+			// Parse data string to model.
+			const parsedResult = setData._parse( '[<p>foo<img />bar</p>]', model.schema, { context: [ root.name ] } );


Use the public export.

Reinmar · 2018-07-04T13:05:20Z

tests/model/schema.js

+
+			// Set parsed model data to prevent selection post-fixer from running.
+			model.change( writer => {
+				writer.insert( parsedResult.model, root );


I'm not sure you need to insert that into the model. Perhaps it works without that.

I don't really know how to do that - AFAICS it's easiest to just use writer.insert( node, root)...

The method we're testing there schema.getValidRanges() doesn't need to work on on a piece of a tree which is in the model. At least – I think that doesn't need that. It should be able to work on a detached tree.

OTOH, we can leave it with the insert() and test it just like it will be used most of the time (in an attached tree).

Reinmar · 2018-07-04T13:06:41Z

tests/model/utils/deletecontent.js

@@ -621,7 +621,7 @@ describe( 'DataController utils', () => {
 				deleteContent( model, selection );

 				expect( getData( model, { rootName: 'bodyRoot' } ) )
-					.to.equal( '[<paragraph>x</paragraph>]<paragraph></paragraph><paragraph>z</paragraph>' );
+					.to.equal( '<paragraph>[x]</paragraph><paragraph></paragraph><paragraph>z</paragraph>' );


You can change the initial selection too, so this test is less confusing (we're not checking the sel post-fixer here).

Reinmar · 2018-07-04T13:07:33Z

tests/model/utils/deletecontent.js

+						new Position( doc.getRoot( 'bodyRoot' ), [ 1 ] ),
+						new Position( doc.getRoot( 'bodyRoot' ), [ 2 ] )
+					);
+					writer.setSelection( range );


You don't have to set that selection. deleteContent() can work with any selection.

Also, it'd be good if you changed it in the setData() call above to something irrelevant to this test to not create a confusion.

Reinmar · 2018-07-04T13:08:56Z

tests/model/utils/deletecontent.js

+						new Position( doc.getRoot( 'bodyRoot' ), [ 1 ] ),
+						new Position( doc.getRoot( 'bodyRoot' ), [ 3 ] )
+					);
+					writer.setSelection( range );


The same as above– no need to set it. Also, it'd be good if you changed it in the setData() call above to something irrelevant to this test to not create a confusion.

…) calls.

jodator · 2018-07-05T12:01:19Z

@Reinmar the fix is on the branch already.

Reinmar · 2018-07-05T12:03:48Z

🎉

jodator · 2018-07-05T12:14:09Z

@Mgsy As this looks like finished could you check how the selection on widgets behaves now?

Also this one fixes selection on images in firefox: https://github.com/ckeditor/ckeditor5-engine/issues/1440 (not the flashing part though - only the selection problems).

Also on FF the multi-range selection that is fixed (ie on widgets) should be merge into one big (https://github.com/ckeditor/ckeditor5-engine/issues/1440#issuecomment-402653775).

Mgsy · 2018-07-05T13:29:21Z

Basically, it works fine (except Edge, where a widget steals the selection ) 👌

There is a problem with nested editables, see the caption in Chrome:

or the table in Firefox:

jodator · 2018-07-05T14:01:03Z

There is a problem with nested editables, see the caption in Chrome:

@Mgsy you mean that it blinks? If so I don't think we could do anything in particular in this PR as this is a bit different issue (cc @Reinmar) - we need to stop selection updates somehow do prevent this. I think that a follow-up is needed here.

or the table in Firefox:

It looks OK (selecting whole table) - could you describe what you mean here since I've might be missing something from the GIF.

Reinmar · 2018-07-05T14:04:48Z

Agree with @jodator regarding the first part – we need to extract this to a separate ticket.

Mgsy · 2018-07-06T07:23:02Z

It looks OK (selecting whole table) - could you describe what you mean here since I've might be missing something from the GIF.

Yep, that is what I meant - selecting the whole table. As this behaviour is expected, the whole fix looks good to me 👌

Reinmar and others added 2 commits June 21, 2018 13:54

Added more tests for selection post-fixer.

8be680d

Other: Update selection post-fixer to cover more cases.

de7ab75

jodator requested a review from Reinmar June 28, 2018 12:50

Merge branch 'master' into t/1436

93b927d

Reinmar reviewed Jun 29, 2018

View reviewed changes

Reinmar added the status:review- label Jun 29, 2018

jodator added 3 commits July 3, 2018 13:04

Code style: Change the selection post-fixer internals for better read…

c744608

…ability.

Merge branch 'master' into t/1436

4b381bf

Tests: Restore previous setSelection() tests semantics using setDat…

f16620d

…a._parse().

jodator force-pushed the t/1436 branch from cce5eff to f16620d Compare July 3, 2018 11:44

jodator removed the status:review- label Jul 3, 2018

Merge branch 'master' into t/1436

8ea5fb5

Reinmar reviewed Jul 4, 2018

View reviewed changes

jodator added 5 commits July 4, 2018 15:29

Tests: Use parse() method from model dev utils.

6060d76

Tests: Prefer parse() method or direct params instead of mode.change(…

a7b40b7

…) calls.

Docs: Update schema.getLimitElement() param type.

9a84bb2

Tests: Fix deletecontent tests.

f5bffd4

Fix: Complex selection brakes when spanning over widget.

2445ef2

jodator mentioned this pull request Jul 5, 2018

Other: Don't set contenteditable property for widgets on Edge. ckeditor/ckeditor5-widget#46

Merged

jodator requested a review from Mgsy July 5, 2018 12:11

Mgsy approved these changes Jul 6, 2018

View reviewed changes

Reinmar merged commit e0a5a0b into master Jul 6, 2018

Reinmar deleted the t/1436 branch July 6, 2018 08:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

T/1436: Fixing selection that cross limit node boundaries. #1450

T/1436: Fixing selection that cross limit node boundaries. #1450

jodator commented Jun 28, 2018 •

edited by pomek

Loading

coveralls commented Jun 28, 2018 •

edited

Loading

Reinmar commented Jun 29, 2018

Reinmar Jun 29, 2018 •

edited

Loading

Reinmar Jun 29, 2018

Reinmar Jun 29, 2018

Reinmar Jul 4, 2018

Reinmar Jun 29, 2018

Reinmar Jun 29, 2018

Reinmar commented Jun 29, 2018 •

edited

Loading

jodator commented Jul 3, 2018

Reinmar Jul 4, 2018

Reinmar Jul 4, 2018

Reinmar Jul 4, 2018

Reinmar Jul 4, 2018

Reinmar Jul 4, 2018

Reinmar Jul 4, 2018

jodator Jul 4, 2018

Reinmar Jul 4, 2018

Reinmar Jul 4, 2018

Reinmar Jul 4, 2018

Reinmar Jul 4, 2018

Reinmar Jul 4, 2018

jodator commented Jul 5, 2018

Reinmar commented Jul 5, 2018

jodator commented Jul 5, 2018

Mgsy commented Jul 5, 2018 •

edited

Loading

jodator commented Jul 5, 2018

Reinmar commented Jul 5, 2018

Mgsy commented Jul 6, 2018

T/1436: Fixing selection that cross limit node boundaries. #1450

T/1436: Fixing selection that cross limit node boundaries. #1450

Conversation

jodator commented Jun 28, 2018 • edited by pomek Loading

Suggested merge commit message (convention)

Additional information

coveralls commented Jun 28, 2018 • edited Loading

Reinmar commented Jun 29, 2018

Reinmar Jun 29, 2018 • edited Loading

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

Reinmar commented Jun 29, 2018 • edited Loading

jodator commented Jul 3, 2018

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

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

jodator commented Jul 5, 2018

Reinmar commented Jul 5, 2018

jodator commented Jul 5, 2018

Mgsy commented Jul 5, 2018 • edited Loading

jodator commented Jul 5, 2018

Reinmar commented Jul 5, 2018

Mgsy commented Jul 6, 2018

jodator commented Jun 28, 2018 •

edited by pomek

Loading

coveralls commented Jun 28, 2018 •

edited

Loading

Reinmar Jun 29, 2018 •

edited

Loading

Reinmar commented Jun 29, 2018 •

edited

Loading

Mgsy commented Jul 5, 2018 •

edited

Loading