Merge pull request #1627 from ckeditor/t/1451

Fixed: Context menu is incorrectly positioned when opened with Shift-F10
ckeditor · Sep 4, 2018 · 317b819 · 317b819
2 parents dbc0240 + 9bce709
commit 317b819
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 2 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -9,6 +9,10 @@ Fixed Issues:
 * [#2276](https://github.com/ckeditor/ckeditor-dev/issues/2276): [iOS] Fixed: [Button](https://ckeditor.com/cke4/addon/button) state doesn't refresh properly.
 * [#1489](https://github.com/ckeditor/ckeditor-dev/issues/1489): Fixed: [Table Selection](https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_plugins_tableselection.html) table contents can be removed in readonly mode.
 
+API Changes:
+
+* [#1451](https://github.com/ckeditor/ckeditor-dev/issues/1451): Fixed: Context menu is incorrectly positioned when opened with `Shift-F10`.
+
 ## CKEditor 4.10.1
 
 Fixed Issues:

diff --git a/plugins/contextmenu/plugin.js b/plugins/contextmenu/plugin.js
@@ -142,8 +142,23 @@ CKEDITOR.plugins.add( 'contextmenu', {
 		} );
 
 		editor.addCommand( 'contextMenu', {
-			exec: function() {
-				editor.contextMenu.open( editor.document.getBody() );
+			exec: function( editor ) {
+				var offsetX = 0,
+					offsetY = 0,
+					ranges = editor.getSelection().getRanges(),
+					rects,
+					rect;
+
+				// When opening context menu via keystroke there is no offsetX and Y passed (#1451).
+				rects = ranges[ ranges.length - 1 ].getClientRects( editor.editable().isInline() );
+				rect = rects[ rects.length - 1 ];
+
+				if ( rect ) {
+					offsetX = rect[ editor.lang.dir === 'rtl' ? 'left' : 'right' ];
+					offsetY = rect.bottom;
+				}
+
+				editor.contextMenu.open( editor.document.getBody().getParent(), null, offsetX, offsetY );
 			}
 		} );
 

diff --git a/tests/plugins/contextmenu/keystroke.js b/tests/plugins/contextmenu/keystroke.js
@@ -0,0 +1,50 @@
+/* bender-tags: editor, bug */
+/* bender-ckeditor-plugins: clipboard,contextmenu */
+
+( function() {
+	'use strict';
+
+	bender.editors = {
+		classic: {
+			name: 'classic'
+		},
+		inline: {
+			name: 'inline',
+			creator: 'inline'
+		}
+	};
+
+	var tests = {
+		'test opening context menu with keystroke': function( editor ) {
+			var range = new CKEDITOR.dom.range( editor.document ),
+				selectionRect,
+				frame = CKEDITOR.document.getWindow().getFrame();
+
+			// Context menu uses frame height to calculate if it fits inside and bender dashboard puts tests in frame with 70px height.
+			if ( frame ) {
+				frame.setStyle( 'height', '500px' );
+			}
+
+			range.setStart( editor.editable().getFirst(), 0 );
+			range.select();
+
+			selectionRect = range.getClientRects().pop();
+
+			var stub = sinon.stub( editor.contextMenu, 'open' );
+
+			editor.execCommand( 'contextMenu' );
+
+			assert.areSame( 1, stub.callCount );
+			assert.areSame( editor.document.getBody().getParent(), stub.args[ 0 ][ 0 ] );
+			assert.isNull( stub.args[ 0 ][ 1 ] );
+			assert.areSame( selectionRect.left, stub.args[ 0 ][ 2 ] );
+			assert.areSame( selectionRect.bottom, stub.args[ 0 ][ 3 ] );
+
+			stub.restore();
+		}
+	};
+
+
+	bender.test( bender.tools.createTestsForEditors( CKEDITOR.tools.objectKeys( bender.editors ), tests ) );
+
+} )();
diff --git a/tests/plugins/contextmenu/manual/keystroke.html b/tests/plugins/contextmenu/manual/keystroke.html
@@ -0,0 +1,133 @@
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+<H1> Left to right editors:</H1>
+<textarea id="classic-ltr">
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mag</p>
+	<p>na aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons</p>
+	<table border="1">
+		<thead>
+			<tr>
+				<th>Head</th>
+				<th>Head</th>
+				<th>Head</th>
+				<th>Head</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>Cell</td>
+				<td>Cell</td>
+				<td>Cell</td>
+				<td>Cell</td>
+			</tr>
+			<tr>
+				<td>Cell</td>
+				<td>Cell</td>
+				<td>Cell</td>
+				<td>Cell</td>
+			</tr>
+		</tbody>
+	</table>
+</textarea>
+
+<div>
+	<div id="inline-ltr" contenteditable="true">
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mag</p>
+		<p>na aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons</p>
+		<table border="1">
+			<thead>
+				<tr>
+					<th>Head</th>
+					<th>Head</th>
+					<th>Head</th>
+					<th>Head</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Cell</td>
+					<td>Cell</td>
+					<td>Cell</td>
+					<td>Cell</td>
+				</tr>
+				<tr>
+					<td>Cell</td>
+					<td>Cell</td>
+					<td>Cell</td>
+					<td>Cell</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+<H1> Right to left editors:</H1>
+<textarea id="classic-rtl">
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mag</p>
+	<p>na aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons</p>
+		<table border="1">
+		<thead>
+			<tr>
+				<th>Head</th>
+				<th>Head</th>
+				<th>Head</th>
+				<th>Head</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>Cell</td>
+				<td>Cell</td>
+				<td>Cell</td>
+				<td>Cell</td>
+			</tr>
+			<tr>
+				<td>Cell</td>
+				<td>Cell</td>
+				<td>Cell</td>
+				<td>Cell</td>
+			</tr>
+		</tbody>
+	</table>
+</textarea>
+
+<div>
+	<div id="inline-rtl" dir="rtl" contenteditable="true">
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mag</p>
+		<p>na aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cons</p>
+		<table border="1">
+			<thead>
+				<tr>
+					<th>Head</th>
+					<th>Head</th>
+					<th>Head</th>
+					<th>Head</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Cell</td>
+					<td>Cell</td>
+					<td>Cell</td>
+					<td>Cell</td>
+				</tr>
+				<tr>
+					<td>Cell</td>
+					<td>Cell</td>
+					<td>Cell</td>
+					<td>Cell</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+<script>
+	CKEDITOR.replace( 'classic-ltr', {
+	} );
+	CKEDITOR.inline( 'inline-ltr' );
+	CKEDITOR.replace( 'classic-rtl', {
+		language: 'he'
+	} );
+	CKEDITOR.inline( 'inline-rtl', {
+		language: 'he'
+	} );
+</script>
diff --git a/tests/plugins/contextmenu/manual/keystroke.md b/tests/plugins/contextmenu/manual/keystroke.md
@@ -0,0 +1,21 @@
+@bender-tags: bug, 4.10.2, 1451
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea,toolbar,contextmenu,clipboard,table,tableselection,floatingspace
+
+## For each editor:
+1. Scroll page so editor as at the top.
+1. Select some editor context with mouse or keyboard.
+1. Press `Shift + F10` to open context menu from keyboard.
+
+### Expected
+
+#### Left to right editors:
+- The panel shows itself on the right side of selection.
+
+#### Right to left editors:
+- The panel shows itself on the left side of selection.
+
+
+### Note:
+
+IE8: There is known bug [#549](https://github.com/ckeditor/ckeditor-dev/issues/549) with wrong context menu position in inline editors.