Fixed: Context menu is incorrectly positioned when opened with Shift-F10 #1627

engineering-this · 2018-02-08T16:00:46Z

What is the purpose of this pull request?

Bug fix

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?

~~This fix branches from t/1498: pull request.~~

Whenever there is no offsetX or offsetY toolbar will appear next to selection.

Closes #1451

Comandeer · 2018-03-30T09:45:34Z

CHANGES.md

@@ -10,6 +10,7 @@ New Features:
 * [#1365](https://github.com/ckeditor/ckeditor-dev/issues/1365): [File Browser](https://ckeditor.com/cke4/addon/filebrowser) plugin uses XHR requests by default.
 * [#1399](https://github.com/ckeditor/ckeditor-dev/issues/1399): Added possibility to set [`CKEDITOR.config.startupFocus`](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-startupFocus) as `start` or `end` to specify where editor focus should be after initialization.
 * [#1441](https://github.com/ckeditor/ckeditor-dev/issues/1441): [Magic Line](https://ckeditor.com/cke4/addon/magicline) line element can now be identified by `data-cke-magic-line="1"` attribute.
+* [#1498](https://github.com/ckeditor/ckeditor-dev/issues/1498) : Added new method 'getClientRects()' to CKEDITOR.dom.range, which returns list of rects for each selected element.


IMO it's more API change than new feature.

Comandeer · 2018-03-30T09:57:30Z

core/dom/range.js

+		/**
+		 * Returns array with rectangles of areas covered by ranges. For each DOM element within range there is one rectangle, but it represents only part of element which is within range, not whole element.
+		 *
+		 * @since 4.9.0


Please update version tag.

Comandeer · 2018-03-30T10:06:30Z

core/dom/range.js

+		 * Returns array with rectangles of areas covered by ranges. For each DOM element within range there is one rectangle, but it represents only part of element which is within range, not whole element.
+		 *
+		 * @since 4.9.0
+		 * @returns {Array}


I wonder if we could introduce DOMRect abstract class to nicely describe, what is returned from this function or CKEDITOR.dom.element.getClientRect. Then we would have DOMRect[] instead of Array.

Extracted this task to #1866.

Comandeer · 2018-03-30T11:04:13Z

core/dom/range.js

+				return rect;
+			}
+
+			if ( this.document.$.getSelection !== undefined ) {


I'm wondering if more readable feature detection won't be better (e.g. range.getClientRects).

Comandeer · 2018-03-30T11:17:12Z

tests/plugins/floatpanel/manual/keystroke.md

+
+#### Right to left editors:
+- The panel shows itself on the left side of selection.
+g


Probably it shouldn't be here.

Comandeer · 2018-03-30T11:19:26Z

plugins/floatpanel/plugin.js

+					rect,
+					rtl = this._.dir == 'rtl';
+				if ( offsetX === undefined || offsetY === undefined ) {
+					rectList = this._.editor.getSelection().getRanges()[ 0 ].getClientRects(  );


Unnecessary space inside parentheses.

Comandeer · 2018-03-30T11:40:01Z

core/dom/range.js

+			}
+
+			// Fallback helper for browsers that don't support native getClientRects()
+			function getRect( context ) {


This polyfill is not correct. It always return one range, but other browsers often return more, eg when selection is multiline.

Comandeer · 2018-03-30T11:48:16Z

tests/plugins/floatpanel/manual/keystroke.md

@@ -0,0 +1,16 @@
+@bender-tags: bug, 4.9.1, 1451


Update version tag.

Comandeer · 2018-03-30T14:37:46Z

It seems that this issue is blocked on #1498.

mlewand · 2018-04-17T13:41:52Z

Issue #1498 was merged to the 4.10.0 release, so this issue is no longer blocked.

Comandeer

I'd think of adding some unit tests, e.g. selecting several places in the editor and checking if position of the menu changes. Tests should also cover case, when there are no valid client rects for selection.

Comandeer · 2018-05-02T12:05:20Z

plugins/floatpanel/plugin.js

+					rect,
+					rtl = this._.dir == 'rtl';
+				if ( offsetX === undefined || offsetY === undefined ) {
+					rectList = this._.editor.getSelection().getRanges()[ 0 ].getClientRects();


It would be better to have also fallback for case when getClientRects return empty array (e.g. due to w3c/csswg-drafts#2514). Because now this code fails for programatically opened context menus:

var editor = CKEDITOR.instances.editor, range = editor.createRange(), element = editor.editable().getFirst(); range.setStart( element, CKEDITOR.POSITION_AFTER_START ); range.select(); editor.execCommand( 'contextMenu' );

When getting position of the selection is not possible, falling back to opening menu in position (0,0) seems reasonable.

After recent changes to getClientRects it's highly unlikely to get empty array as rect list, however I will add this fallback in case of future changes to our or native getClientRects.

Comandeer · 2018-05-02T12:07:41Z

plugins/floatpanel/plugin.js

+					rectList,
+					rect,
+					rtl = this._.dir == 'rtl';
+				if ( offsetX === undefined || offsetY === undefined ) {


Please add comment referencing the issue.

engineering-this · 2018-05-25T10:59:02Z

I've moved logic from floatpanel plugin to contextmenu.

Comandeer

Menu covers selected content:

IMO it should be located below it. It's easy to do after obtaining rect.

There is also missing unit test. It's easy to write it as it'd be basically calling a command.

Comandeer · 2018-05-28T10:03:22Z

plugins/contextmenu/plugin.js

+					offsetY = 0,
+					rect;
+
+				// #1451 when opening context menu via keystroke there is no offsetX and Y passed.


Format for such comments is different:

// Comment (#1451).

Comandeer · 2018-05-28T10:11:33Z

plugins/contextmenu/plugin.js

+					rect;
+
+				// #1451 when opening context menu via keystroke there is no offsetX and Y passed.
+				if ( data.from === 'keystrokeHandler' ) {


Is this command used in non-keyboard situations? If not, then this conditional seems unnecessary.

Probably it could be used also in programmatic way, but the question is: what are drawbacks of disabling positioning menu in such situation?

Comandeer · 2018-07-20T12:32:54Z

Rebased onto latest master.

Comandeer

Behaviour of LTR editors is inconsistent with behaviour of RTL editors. In LTR case context menu is pinned to the right edge of the selection. In RTL context menu is also pinned to the right edge of the selection. The only difference is the direction in which menu opens:

IMO in RTL editor context menu should be pinned to the left edge of the selection.

I'm also wondering about behaviour of context menu with multirange selections, e.g. in table selection:

Comandeer · 2018-07-20T13:17:31Z

tests/plugins/contextmenu/keystroke.js

+
+			editor.once( 'panelShow', function( evt ) {
+				setTimeout( function() {
+					resume();


All assertions should be inside resume callback. Otherwise tests will pass even if assertions themselves fail:

Comandeer · 2018-07-20T13:52:46Z

tests/plugins/contextmenu/keystroke.js

+	};
+
+	var tests = {
+		'Opening context menu with keystroke': function( editor ) {


Tests' names should begin with "test".

Comandeer · 2018-07-20T13:52:56Z

tests/plugins/contextmenu/manual/keystroke.md

@@ -0,0 +1,15 @@
+@bender-tags: bug, 4.10, 1451


Please update version tags.

Comandeer

Context menu is not correctly positioned for inline editors.

Additionally unit tests are failing when they are launched via Bender Dashboard.

engineering-this · 2018-08-21T10:13:11Z

Context menu is not correctly positioned for inline editors.

It looks correct for me, except for the missing dir="rtl" attribute in second inline editor element.

…` property.

…l plugin to contextmenu

…st selected range

… selected element in rtl editors

Comandeer

LGTM!

Comandeer requested changes Mar 30, 2018

View reviewed changes

Comandeer mentioned this pull request Mar 30, 2018

Added method 'getClientRects()' to CKEDITOR.dom.range #1499

Merged

2 tasks

mlewand mentioned this pull request Apr 6, 2018

Create an abstract API doc type for DOM rectangle #1866

Closed

engineering-this force-pushed the t/1451 branch from fa97bdf to c4c7024 Compare April 26, 2018 08:14

engineering-this requested a review from Comandeer April 26, 2018 08:16

engineering-this force-pushed the t/1451 branch from 57d4669 to 8f93758 Compare April 26, 2018 08:22

Comandeer requested changes May 2, 2018

View reviewed changes

engineering-this force-pushed the t/1451 branch from 8f93758 to e3c145d Compare May 25, 2018 09:42

engineering-this requested a review from Comandeer May 25, 2018 10:58

Comandeer requested changes May 28, 2018

View reviewed changes

engineering-this requested a review from Comandeer June 4, 2018 11:29

engineering-this force-pushed the t/1451 branch from 9fb315f to 4654515 Compare June 4, 2018 11:35

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

Comandeer force-pushed the t/1451 branch from 4654515 to 9b00eb6 Compare July 20, 2018 12:31

Comandeer changed the base branch from major to master July 20, 2018 12:32

Comandeer requested changes Jul 20, 2018

View reviewed changes

engineering-this force-pushed the t/1451 branch from 9b00eb6 to f0abdfc Compare July 25, 2018 08:58

engineering-this requested a review from Comandeer July 25, 2018 09:03

Comandeer self-assigned this Aug 9, 2018

Comandeer requested changes Aug 10, 2018

View reviewed changes

CKEditorBot unassigned Comandeer Aug 10, 2018

engineering-this self-assigned this Aug 20, 2018

engineering-this force-pushed the t/1451 branch from 81ae6d2 to 44e8b1d Compare August 20, 2018 14:23

engineering-this requested a review from Comandeer August 21, 2018 10:15

CKEditorBot unassigned engineering-this Aug 21, 2018

engineering-this and others added 26 commits September 4, 2018 19:02

Removed unnecessary line

a2081d2

Updated version tag, fixed typo

66890f1

Adding comment, using our getName method instead of native `tagName…

604164d

…` property.

Added fallback when rectList is empty

2213faa

Moved logic on contextmenu positioning with keystrokes from floatpane…

6c36815

…l plugin to contextmenu

Moved tests to correct plugin

57b67d1

Removed check from contextMenu command

56e4af7

Added unit test

7eb4dd9

Added comment

4111707

Changed test name

4978dec

Moved assertions to resume callback

a4a2a8e

Updated version tag

c7a8ec5

Context menu opened by keystroke will be positioned in relation to la…

36a75a4

…st selected range

Context menu opened with keystroke will be positioned on left side of…

9e1eef0

… selected element in rtl editors

Added table and tableselection plugins to test, changed editor ids

d87f96e

Fixing comments

86a66e8

Fixed test failing in dashboard

e0702c7

Added dir=rtl attribute to inline editor

0ac283c

Fixed test

078e7b3

Fixed wrong position of context menu when for scrolled inline editors

c5a7b25

Added brs to required page scroll

915aa83

Added test step

3c1b45e

Comment regarding wrong position of context menu in IE8

c77ac0e

Update manual test.

ed2709f

Simplified test, now it is stable

cb0e2d1

Updated version tag

9bce709

Comandeer force-pushed the t/1451 branch from f34c481 to 9bce709 Compare September 4, 2018 17:03

Comandeer approved these changes Sep 4, 2018

View reviewed changes

Comandeer merged commit 317b819 into next Sep 4, 2018

Comandeer deleted the t/1451 branch September 4, 2018 17:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed: Context menu is incorrectly positioned when opened with Shift-F10 #1627

Fixed: Context menu is incorrectly positioned when opened with Shift-F10 #1627

engineering-this commented Feb 8, 2018 •

edited

Loading

Comandeer Mar 30, 2018

Comandeer Mar 30, 2018

Comandeer Mar 30, 2018

mlewand Apr 6, 2018

Comandeer Mar 30, 2018

Comandeer Mar 30, 2018

Comandeer Mar 30, 2018

Comandeer Mar 30, 2018

Comandeer Mar 30, 2018

Comandeer commented Mar 30, 2018

mlewand commented Apr 17, 2018

Comandeer left a comment

Comandeer May 2, 2018

engineering-this May 25, 2018

Comandeer May 2, 2018

engineering-this commented May 25, 2018

Comandeer left a comment

Comandeer May 28, 2018

Comandeer May 28, 2018

Comandeer commented Jul 20, 2018

Comandeer left a comment

Comandeer Jul 20, 2018

Comandeer Jul 20, 2018

Comandeer Jul 20, 2018

Comandeer left a comment

engineering-this commented Aug 21, 2018

Comandeer left a comment

Fixed: Context menu is incorrectly positioned when opened with Shift-F10 #1627

Fixed: Context menu is incorrectly positioned when opened with Shift-F10 #1627

Conversation

engineering-this commented Feb 8, 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?

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

Comandeer commented Mar 30, 2018

mlewand commented Apr 17, 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

engineering-this commented May 25, 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

Comandeer commented Jul 20, 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

Comandeer left a comment

Choose a reason for hiding this comment

engineering-this commented Aug 21, 2018

Comandeer left a comment

Choose a reason for hiding this comment

engineering-this commented Feb 8, 2018 •

edited

Loading