Merge branch 't/9856'

ckeditor · Sep 2, 2015 · dc88a6c · dc88a6c
2 parents a0c9b89 + 03d7bcb
commit dc88a6c
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 4 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -5,6 +5,7 @@ CKEditor 4 Changelog
 
 Fixed Issues:
 
+* [#9856](http://dev.ckeditor.com/ticket/9856): Fixed: Cannot use the native context menu together with the [Div Editing Area](http://ckeditor.com/addon/divarea) plugin.
 * [#13142](http://dev.ckeditor.com/ticket/13142): [Edge] Fixed: CTRL+A, backspace results in an empty div.
 * [#13599](http://dev.ckeditor.com/ticket/13599): Fixed: Cross-editor D&amp;D of inline widget ends up in error/artifacts.
 * [#13640](http://dev.ckeditor.com/ticket/13640): [IE] Fixed: Dropping a widget outside body is not handled correctly.

diff --git a/core/dom/element.js b/core/dom/element.js
@@ -1846,11 +1846,15 @@ CKEDITOR.dom.element.clearMarkers = function( database, element, removeFromDatab
 		 * Disables browser's context menu in this element.
 		 */
 		disableContextMenu: function() {
-			this.on( 'contextmenu', function( event ) {
+			this.on( 'contextmenu', function( evt ) {
 				// Cancel the browser context menu.
-				if ( !event.data.getTarget().hasClass( 'cke_enable_context_menu' ) )
-					event.data.preventDefault();
+				if ( !evt.data.getTarget().getAscendant( enablesContextMenu, true ) )
+					evt.data.preventDefault();
 			} );
+
+			function enablesContextMenu( node ) {
+				return node.type == CKEDITOR.NODE_ELEMENT && node.hasClass( 'cke_enable_context_menu' );
+			}
 		},
 
 		/**

diff --git a/plugins/divarea/plugin.js b/plugins/divarea/plugin.js
@@ -14,7 +14,9 @@ CKEDITOR.plugins.add( 'divarea', {
 		// Do that in the afterInit function, so it'll eventually overwrite
 		// the mode defined by the wysiwygarea plugin.
 		editor.addMode( 'wysiwyg', function( callback ) {
-			var editingBlock = CKEDITOR.dom.element.createFromHtml( '<div class="cke_wysiwyg_div cke_reset" hidefocus="true"></div>' );
+			var editingBlock = CKEDITOR.dom.element.createFromHtml(
+					'<div class="cke_wysiwyg_div cke_reset cke_enable_context_menu" hidefocus="true"></div>'
+				);
 
 			var contentSpace = editor.ui.space( 'contents' );
 			contentSpace.append( editingBlock );

diff --git a/tests/core/dom/element/element.html b/tests/core/dom/element/element.html
@@ -167,4 +167,9 @@ <h2>e<b>f</b></h2>
 	</table>
 
 	<input id="scrolled" style="position: absolute; top: 3000px; left: 3500px" value="You must scroll to reach me." />
+
+	<div id="disableContextMenu">
+		<p class="cke_enable_context_menu" id="disableContextMenu_1"><b id="disableContextMenu_2">foo</b></p>
+		<p><b id="disableContextMenu_3">foo</b></p>
+	</div>
 </body>
diff --git a/tests/core/dom/element/element.js b/tests/core/dom/element/element.js
@@ -1034,6 +1034,54 @@ bender.test( appendDomObjectTests(
 
 			el.forEach( recorder.fn, CKEDITOR.NODE_ELEMENT, true );
 			assert.areSame( 'p,i,div,h1,h2,b', recorder.tokens.join( ',' ) );
+		},
+
+		'test disableContextMenu - element with cke_enable_context_menu class': function() {
+			var target = doc.getById( 'disableContextMenu_1' ),
+				preventDefaultCalled = 0;
+
+			target.disableContextMenu();
+
+			target.fire( 'contextmenu', new CKEDITOR.dom.event( {
+				target: target.$,
+				preventDefault: function() {
+					++preventDefaultCalled;
+				}
+			} ) );
+
+			assert.areSame( 0, preventDefaultCalled, 'preventDefault was not called' );
+		},
+
+		'test disableContextMenu - ancestor with cke_enable_context_menu class': function() {
+			var target = doc.getById( 'disableContextMenu_2' ),
+				preventDefaultCalled = 0;
+
+			target.disableContextMenu();
+
+			target.fire( 'contextmenu', new CKEDITOR.dom.event( {
+				target: target.$,
+				preventDefault: function() {
+					++preventDefaultCalled;
+				}
+			} ) );
+
+			assert.areSame( 0, preventDefaultCalled, 'preventDefault was not called' );
+		},
+
+		'test disableContextMenu': function() {
+			var target = doc.getById( 'disableContextMenu_3' ),
+				preventDefaultCalled = 0;
+
+			target.disableContextMenu();
+
+			target.fire( 'contextmenu', new CKEDITOR.dom.event( {
+				target: target.$,
+				preventDefault: function() {
+					++preventDefaultCalled;
+				}
+			} ) );
+
+			assert.areSame( 1, preventDefaultCalled, 'preventDefault was called' );
 		}
 	}
 ) );
diff --git a/tests/plugins/divarea/manual/contextmenu.html b/tests/plugins/divarea/manual/contextmenu.html
@@ -0,0 +1,16 @@
+<body>
+	<h1>Native context menu</h1>
+	<div id="editor1"><p>Foo</p><p>Foo</p><p>Foo</p><p>Foo</p><p>Foo</p></div>
+	<h1>Custom context menu</h1>
+	<div id="editor2"><p>Foo</p><p>Foo</p><p>Foo</p><p>Foo</p><p>Foo</p></div>
+
+	<script>
+		CKEDITOR.replace( 'editor1', {
+			// Without this the ctx menu plugin will be loaded when testing a build.
+			removePlugins: 'contextmenu,tabletools,liststyle'
+		} );
+		CKEDITOR.replace( 'editor2', {
+			extraPlugins: 'contextmenu'
+		} );
+	</script>
+</body>
diff --git a/tests/plugins/divarea/manual/contextmenu.md b/tests/plugins/divarea/manual/contextmenu.md
@@ -0,0 +1,12 @@
+@bender-ui: collapsed
+@bender-tags: 4.5.4, tc
+@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, basicstyles, divarea, clipboard
+
+Test whether right-click opens correct context menu in the two editors.
+
+Note:
+
+* Right clicking within the editor should bring:
+  * native context menu in the first editor,
+  * custom context menu in the second editor.
+* Right clicking on the editor chrome should not bring any context menu.