Merge branch 't/13184c'

Author: oleq

CHANGES.md

@@ -17,6 +17,7 @@ Fixed Issues:
 * [#11616](http://dev.ckeditor.com/ticket/11616): [Chrome] Fixed: Resizing the editor while it is not displayed breaks the editable. Fixed also [#9160](http://dev.ckeditor.com/ticket/9160) and [#9715](http://dev.ckeditor.com/ticket/9715).
 * [#13397](http://dev.ckeditor.com/ticket/13397): Fixed: Drag&drop a widget inside its nested widget crashes the editor.
 * [#13420](http://dev.ckeditor.com/ticket/13420): Fixed: The [Auto Embed](http://ckeditor.com/addon/autoembed) plugin ignores encoded characters in URL parameters.
+* [#13184](http://dev.ckeditor.com/ticket/13184): Fixed: Web page reloaded after drop on editor UI.
 
 ## CKEditor 4.5.1
 

plugins/clipboard/plugin.js

@@ -1252,6 +1252,11 @@
 		return data;
 	}
 
+	function preventDefaultSetDropEffectToNone( evt ) {
+		evt.data.preventDefault();
+		evt.data.$.dataTransfer.dropEffect = 'none';
+	}
+
 	function initDragDrop( editor ) {
 		var clipboard = CKEDITOR.plugins.clipboard;
 
@@ -1263,14 +1268,9 @@
 
 			// -------------- DRAGOVER TOP & BOTTOM --------------
 
-			function preventDefaultSetDropEffectToNone( evt ) {
-				evt.data.preventDefault();
-				evt.data.$.dataTransfer.dropEffect = 'none';
-			}
-
 			// Not allowing dragging on toolbar and bottom (#12613).
-			top && top.on( 'dragover', preventDefaultSetDropEffectToNone );
-			bottom && bottom.on( 'dragover', preventDefaultSetDropEffectToNone );
+			clipboard.preventDefaultDropOnElement( top );
+			clipboard.preventDefaultDropOnElement( bottom );
 
 			// -------------- DRAGSTART --------------
 			// Listed on dragstart to mark internal and cross-editor drag & drop
@@ -1995,6 +1995,16 @@
 			} else {
 				return new this.dataTransfer( null, sourceEditor );
 			}
+		},
+
+		/**
+		 * Prevents dropping on the specified element.
+		 *
+		 * @since 4.5
+		 * @param {CKEDITOR.dom.element} element The element on which dropping should be disabled.
+		 */
+		preventDefaultDropOnElement: function( element ) {
+			element && element.on( 'dragover', preventDefaultSetDropEffectToNone );
 		}
 	};
 

plugins/dialog/plugin.js

@@ -177,6 +177,9 @@ CKEDITOR.DIALOG_STATE_BUSY = 2;
 			title = body.getChild( 0 ),
 			close = body.getChild( 1 );
 
+		// Don't allow dragging on dialog (#13184).
+		editor.plugins.clipboard && CKEDITOR.plugins.clipboard.preventDefaultDropOnElement( body );
+
 		// IFrame shim for dialog that masks activeX in IE. (#7619)
 		if ( CKEDITOR.env.ie && !CKEDITOR.env.quirks ) {
 			var src = 'javascript:void(function(){' + encodeURIComponent( 'document.open();(' + CKEDITOR.tools.fixDomain + ')();document.close();' ) + '}())', // jshint ignore:line

plugins/notification/plugin.js

@@ -125,6 +125,9 @@ function Notification( editor, options ) {
 	}
 
 	this.element = this._createElement();
+
+	// Don't allow dragging on notification (#13184).
+	editor.plugins.clipboard && CKEDITOR.plugins.clipboard.preventDefaultDropOnElement( this.element );
 }
 
 /**

tests/plugins/clipboard/drop.js

@@ -1102,6 +1102,30 @@ var testsForMultipleEditor = {
 			dropTarget.fire( 'drop', evt );
 
 			assert.isFalse( dropSpy.called );
+		},
+
+		'test preventDefaultDropOnElement': function() {
+			var editor = this.editors.divarea,
+				bot = this.editorBots[ editor.name ],
+				spy = sinon.spy(),
+				data = {
+					preventDefault: spy,
+					$: {
+						dataTransfer: {}
+					}
+				};
+
+			bot.setHtmlWithSelection( '<div><p>foo</p></div>' );
+			editor.resetUndo();
+
+			var element = editor.editable().findOne( 'p' );
+
+			CKEDITOR.plugins.clipboard.preventDefaultDropOnElement( element );
+
+			element.fire( 'dragover', data );
+
+			assert.isTrue( spy.called, 'preventDefault called.' );
+			assert.areEqual( 'none', data.$.dataTransfer.dropEffect, 'dropEffect reset to \'none\'' );
 		}
 	};
 

tests/plugins/uploadwidget/manual/droponnotallowedparts.html

@@ -2,39 +2,42 @@
 	File uploading is not supported on Internet Explorer 9 and below.
 </div>
 
-<textarea id="editor1">
-	The true&lt;br/&gt;
-	mark of maturity&lt;br/&gt;
-	is when&lt;br/&gt;
-	somebody hurts&lt;br/&gt;
-</textarea>
-<div id="editor2" contenteditable="true" >
-	you and you try<br/>
-	to understand<br/>
-	their situation<br/>
-</div>
-<textarea id="editor3">
-	instead of trying&lt;br/&gt;
-	to hurt them&lt;br/&gt;
-	back&lt;br/&gt;
-</textarea>
+<h2>Classic instance</h2>
+<textarea id="editor1">x</textarea>
+
+<h2>Inline instance</h2>
+<div id="editor2" contenteditable="true" >y</div>
+
+<h2>Div Editing Area</h2>
+<textarea id="editor3">z</textarea>
+
+<hr/>
+<input onclick="showNotifications();" type="button" value="Show notification" />
 
 <script>
-	CKEDITOR.replace( 'editor1', {
-		imageUploadUrl: 'http://sub.ckeditor.dev/',
-		extraPlugins: 'elementspath'
-	} );
+	var editors = [
+		CKEDITOR.replace( 'editor1', {
+			imageUploadUrl: 'http://sub.ckeditor.dev/',
+			extraPlugins: 'elementspath'
+		} ),
 
-	CKEDITOR.inline( 'editor2', {
-		imageUploadUrl: 'http://sub.ckeditor.dev/'
-	} );
+		CKEDITOR.inline( 'editor2', {
+			imageUploadUrl: 'http://sub.ckeditor.dev/'
+		} ),
 
-	CKEDITOR.replace( 'editor3', {
-		imageUploadUrl: 'http://sub.ckeditor.dev/',
-		extraPlugins: 'divarea'
-	} );
+		CKEDITOR.replace( 'editor3', {
+			imageUploadUrl: 'http://sub.ckeditor.dev/',
+			extraPlugins: 'divarea'
+		} )
+	];
 
 	if ( CKEDITOR.env.ie && CKEDITOR.env.version < 10 ) {
 		document.getElementById( 'ignore' ).style.display = 'block';
 	}
+
+	function showNotifications() {
+		for ( var i = editors.length; i--; ) {
+			editors[ i ].showNotification( 'Drag an image here.', 'warning' );
+		}
+	}
 </script>

tests/plugins/uploadwidget/manual/droponnotallowedparts.md

@@ -3,10 +3,14 @@
 @bender-ckeditor-plugins: wysiwygarea, image2, uploadimage, toolbar, floatingspace
 @bender-include: _helpers/xhr.js
 
-1. Drag and drop some image into not allowed elements (toolbar, bottom).
+1. Drag an image from the hard drive and drop it on disallowed UI elements:
+ * toolbar (both static and floating),
+ * bottom space,
+ * dialog,
+ * notification (use button to display).
 
-**Expected result:** There should be visible an no drop cursor on that elements (expect IE).
+**Expected:**
+ * **Page shouldn't be reloaded!**
+ * The `no–drop` cursor is visible (except IE)
 
-**Unexpected result:** Page shouldn't be reloaded.
-
-**Note:** This test use upload mock which will show you *Lena* instead of the real uploaded image.
+**Note:** This test uses upload mock, which means it shows a dummy image.