Merge pull request #2622 from ckeditor/t/2565

Fix for ability to activate buttons using right click

CHANGES.md

@@ -12,6 +12,7 @@ Fixed Issues:
 * [#2292](https://github.com/ckeditor/ckeditor-dev/issues/2292): Fixed: Dropping list with link on editor's margin cause console error and removing dragged text from editor.
 * [#2756](https://github.com/ckeditor/ckeditor-dev/issues/2756): Fixed: The [Auto Link](https://ckeditor.com/cke4/addon/autolink) plugin causes an error when typing in [Source Editing Mode](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_sourcearea.html).
 * [#1986](https://github.com/ckeditor/ckeditor-dev/issues/1986): Fixed: Cell Properties dialog from [Table Tools](https://ckeditor.com/cke4/addon/tabletools) plugin shows styles that are not allowed through [`config.allowedContent`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent).
+* [#2565](https://github.com/ckeditor/ckeditor-dev/issues/2565): [IE, Edge] Fixed: Buttons in the [Editor Toolbar](https://ckeditor.com/cke4/addon/toolbar) are activated by clicking them with right mouse button.
 
 ## CKEditor 4.11.2
 

core/tools.js

@@ -1464,17 +1464,14 @@
 		 * Detects which mouse button generated a given DOM event.
 		 *
 		 * @since 4.7.3
-		 * @param {CKEDITOR.dom.event} evt DOM event.
+		 * @param {CKEDITOR.dom.event/MouseEvent} evt DOM event. Since 4.11.3 native DOM event can be passed.
 		 * @returns {Number|Boolean} Returns a number indicating the mouse button or `false`
 		 * if the mouse button cannot be determined.
 		 */
 		getMouseButton: function( evt ) {
-			var evtData = evt.data,
-				domEvent = evtData && evtData.$;
+			var domEvent = evt.data ? evt.data.$ : evt;
 
-			if ( !( evtData && domEvent ) ) {
-				// Added in case when there's no data available. That's the case in some unit test in built version which
-				// mock event but doesn't put data object.
+			if ( !domEvent ) {
 				return false;
 			}
 

plugins/button/plugin.js

@@ -27,10 +27,16 @@
 	if ( CKEDITOR.env.gecko )
 		template += ' onblur="this.style.cssText = this.style.cssText;"';
 
+	// IE and Edge needs special click handler based on mouseup event with additional check
+	// of which mouse button was clicked (https://dev.ckeditor.com/ticket/188, #2565).
+	var specialClickHandler = '';
+	if ( CKEDITOR.env.ie ) {
+		specialClickHandler = 'return false;" onmouseup="CKEDITOR.tools.getMouseButton(event)==CKEDITOR.MOUSE_BUTTON_LEFT&&';
+	}
+
 	template += ' onkeydown="return CKEDITOR.tools.callFunction({keydownFn},event);"' +
 		' onfocus="return CKEDITOR.tools.callFunction({focusFn},event);" ' +
-		( CKEDITOR.env.ie ? 'onclick="return false;" onmouseup' : 'onclick' ) + // https://dev.ckeditor.com/ticket/188
-			'="CKEDITOR.tools.callFunction({clickFn},this);return false;">' +
+		'onclick="' + specialClickHandler + 'CKEDITOR.tools.callFunction({clickFn},this);return false;">' +
 		'<span class="cke_button_icon cke_button__{iconName}_icon" style="{style}"';
 
 

tests/core/tools.js

@@ -858,27 +858,61 @@
 		'test getMouseButton': function() {
 			var isIe8 = CKEDITOR.env.ie && CKEDITOR.env.version < 9;
 
-			function generateMouseButtonAsserts( inputs ) {
-				function generateEvent( button ) {
-					return {
-						data: {
-							$: {
-								button: button
-							}
-						}
-					};
-				}
+			generateMouseButtonAsserts( [
+				[ CKEDITOR.MOUSE_BUTTON_LEFT, 1 ],
+				[ CKEDITOR.MOUSE_BUTTON_MIDDLE, 4 ],
+				[ CKEDITOR.MOUSE_BUTTON_RIGHT, 2 ]
+			] );
 
+			function generateMouseButtonAsserts( inputs ) {
 				CKEDITOR.tools.array.forEach( inputs, function( input ) {
-					assert.areSame( input[ 0 ], CKEDITOR.tools.getMouseButton( generateEvent( input[ 1 ] ) ) );
+					assert.areSame( input[ 0 ],
+						CKEDITOR.tools.getMouseButton( generateEvent( input[ isIe8 ? 1 : 0 ] ) ) );
 				} );
 			}
 
+			function generateEvent( button ) {
+				return {
+					data: {
+						$: {
+							button: button
+						}
+					}
+				};
+			}
+		},
+
+		// (#2565)
+		'test getMouseButton with native DOM event': function() {
+			var isIe8 = CKEDITOR.env.ie && CKEDITOR.env.version < 9;
+
 			generateMouseButtonAsserts( [
-				[ CKEDITOR.MOUSE_BUTTON_LEFT, isIe8 ? 1 : CKEDITOR.MOUSE_BUTTON_LEFT ],
-				[ CKEDITOR.MOUSE_BUTTON_MIDDLE, isIe8 ? 4 : CKEDITOR.MOUSE_BUTTON_MIDDLE ],
-				[ CKEDITOR.MOUSE_BUTTON_RIGHT, isIe8 ? 2 : CKEDITOR.MOUSE_BUTTON_RIGHT ]
+				[ CKEDITOR.MOUSE_BUTTON_LEFT, 1 ],
+				[ CKEDITOR.MOUSE_BUTTON_MIDDLE, 4 ],
+				[ CKEDITOR.MOUSE_BUTTON_RIGHT, 2 ]
 			] );
+
+			function generateMouseButtonAsserts( inputs ) {
+				CKEDITOR.tools.array.forEach( inputs, function( input ) {
+					assert.areSame( input[ 0 ],
+						CKEDITOR.tools.getMouseButton( generateEvent( input[ isIe8 ? 1 : 0 ] ) ) );
+				} );
+			}
+
+			function generateEvent( button ) {
+				var event;
+
+				if ( document.createEventObject ) {
+					event = document.createEventObject();
+					event.button = button;
+				} else {
+					event = document.createEvent( 'MouseEvent' );
+					event.initMouseEvent( 'click', true, true, window, 0, 0, 0, 80, 20,
+						false, false, false, false, button, null );
+				}
+
+				return event;
+			}
 		},
 
 		// #662

tests/plugins/button/button.js

@@ -5,10 +5,16 @@ var customCls = 'my_btn';
 
 bender.editor = {
 	config: {
-		toolbar: [ [ 'custom_btn', 'expandable_btn' ] ],
+		toolbar: [ [ 'custom_btn', 'expandable_btn', 'clickable_btn' ] ],
 		on: {
 			pluginsLoaded: function( evt ) {
-				var ed = evt.editor;
+				var ed = evt.editor,
+					buttonCmd = new CKEDITOR.command( ed, {
+						exec: function() {}
+					} );
+
+				ed.addCommand( 'buttonCmd', buttonCmd );
+
 				ed.ui.addButton( 'custom_btn', {
 					label: 'button with custom class',
 					className: customCls
@@ -18,6 +24,11 @@ bender.editor = {
 					label: 'expandable button',
 					hasArrow: true
 				} );
+
+				ed.ui.addButton( 'clickable_btn', {
+					label: 'clickable button',
+					command: 'buttonCmd'
+				} );
 			}
 		}
 	}
@@ -41,5 +52,45 @@ bender.test( {
 		btnEl = CKEDITOR.document.getById( btn._.id );
 
 		assert.isTrue( btnEl.hasClass( 'cke_button_expandable' ), 'check ui item expandable class name' );
+	},
+
+	// (#2565)
+	'test right-clicking button': function() {
+		if ( !CKEDITOR.env.ie ) {
+			assert.ignore();
+		}
+
+		var editor = this.editor,
+			btn = editor.ui.get( 'clickable_btn' ),
+			btnEl = CKEDITOR.document.getById( btn._.id ),
+			buttonCmd = editor.getCommand( 'buttonCmd' ),
+			spy = sinon.spy( buttonCmd, 'exec' );
+
+		dispatchMouseEvent( btnEl, 'mouseup', CKEDITOR.MOUSE_BUTTON_RIGHT );
+
+		assert.areSame( 0, spy.callCount );
 	}
 } );
+
+function dispatchMouseEvent( element, type, button ) {
+	var ie8ButtonMap = {
+			0: 1, // CKEDITOR.MOUSE_BUTTON_LEFT
+			1: 4, // CKEDITOR.MOUSE_BUTTON_MIDDLE
+			2: 2 // CKEDITOR.MOUSE_BUTTON_RIGHT
+		},
+		mouseEvent;
+	element = element.$;
+
+	// Thanks to http://help.dottoro.com/ljhlvomw.php
+	if ( document.createEventObject ) {
+		mouseEvent = document.createEventObject();
+
+		mouseEvent.button = ie8ButtonMap[ button ];
+		element.fireEvent( 'on' + type, mouseEvent );
+	} else {
+		mouseEvent = document.createEvent( 'MouseEvent' );
+
+		mouseEvent.initMouseEvent( type, true, true, window, 0, 0, 0, 80, 20, false, false, false, false, button, null );
+		element.dispatchEvent( mouseEvent );
+	}
+}

tests/plugins/button/manual/rightclick.html

@@ -0,0 +1,11 @@
+<div id="editor">
+	<p>Bold me!</p>
+</div>
+
+<script>
+	if ( !CKEDITOR.env.ie ) {
+		bender.ignore();
+	}
+
+	CKEDITOR.replace( 'editor' );
+</script>

tests/plugins/button/manual/rightclick.md

@@ -0,0 +1,30 @@
+@bender-tags: 4.11.3, 2565, bug, button
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, language
+
+## Procedure #1
+
+1. Select "Bold me!" text.
+2. Right click on "Bold" button.
+
+### Expected
+
+* Text remains unbolded.
+
+### Unexpected
+
+* Text is bolded.
+
+---
+
+## Procedure #2
+
+1. Right click "Language" button.
+
+### Expected
+
+* Language menu does not appear.
+
+### Unexpected
+
+* Language menu appears.