Merge branch 't/16777' into major

ckeditor · Jan 27, 2017 · a7d8e4d · a7d8e4d
2 parents ebe3d3e + ae7d09b
commit a7d8e4d
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 1 deletion.
diff --git a/CHANGES.md b/CHANGES.md
@@ -9,6 +9,7 @@ Fixed Issues:
 * [#16810](http://dev.ckeditor.com/ticket/16810): Fixed: Vertical align in tables not supported by [Paste from Word](http://ckeditor.com/addon/pastefromword) plugin.
 * [#11956](http://dev.ckeditor.com/ticket/11956): [Blink, IE] Fixed: [Link](http://ckeditor.com/addon/link) dialog does not open on a double click on the second word of the link with background color or other styles.
 * [#10472](http://dev.ckeditor.com/ticket/10472): Fixed: Unable to use [Table Resize](http://ckeditor.com/addon/tableresize) on table's header and footer.
+* [#16777](https://dev.ckeditor.com/ticket/16777): [Edge] Fixed: [Clipboard](http://ckeditor.com/addon/clipboard) plugin doesn't allow to drop widgets into editor.
 
 ## CKEditor 4.6.2
 

diff --git a/plugins/clipboard/plugin.js b/plugins/clipboard/plugin.js
@@ -1373,6 +1373,12 @@
 			// we drop image it will overwrite document.
 
 			editable.attachListener( dropTarget, 'dragover', function( evt ) {
+				// Edge requires this handler to have `preventDefault()` regardless of the situation.
+				if ( CKEDITOR.env.edge ) {
+					evt.data.preventDefault();
+					return;
+				}
+
 				var target = evt.data.getTarget();
 
 				// Prevent reloading page when dragging image on empty document (#12619).
@@ -1863,7 +1869,7 @@
 				return dropEvt.data.testRange;
 
 			// Webkits.
-			if ( document.caretRangeFromPoint ) {
+			if ( document.caretRangeFromPoint && editor.document.$.caretRangeFromPoint( x, y ) ) {
 				$range = editor.document.$.caretRangeFromPoint( x, y );
 				range.setStart( CKEDITOR.dom.node( $range.startContainer ), $range.startOffset );
 				range.collapse( true );

diff --git a/tests/plugins/clipboard/drop.js b/tests/plugins/clipboard/drop.js
@@ -1177,6 +1177,25 @@ var testsForMultipleEditor = {
 
 			assert.isTrue( spy.called, 'preventDefault called.' );
 			assert.areEqual( 'none', data.$.dataTransfer.dropEffect, 'dropEffect reset to \'none\'' );
+		},
+
+		'test dragOver Edge': function() {
+			if ( !CKEDITOR.env.edge ) {
+				assert.ignore();
+			}
+
+			var editor = this.editors.divarea,
+				bot = this.editorBots[ editor.name ],
+				spy = sinon.spy(),
+				data = {
+					preventDefault: spy
+				};
+
+			bot.setHtmlWithSelection( '<p>Test area.</p>' );
+
+			editor.editable().fire( 'dragover', data );
+
+			assert.isTrue( spy.called, 'preventDefault called.' );
 		}
 	};
 

diff --git a/tests/plugins/clipboard/manual/draganddropdata.html b/tests/plugins/clipboard/manual/draganddropdata.html
@@ -0,0 +1,134 @@
+<style>
+	.contacts img {
+		height: 2em;
+	}
+	.contacts ul {
+		list-style-type: none;
+	}
+
+	.contact {
+		cursor: pointer;
+		min-height: 40px;
+	}
+</style>
+
+<textarea name="editor1" id="editor1" cols="30" rows="10">
+	<p>Drop contacts here.</p>
+	<p>Or here.</p>
+</textarea>
+<div class="contacts">
+	<h3>List of Droppable Contacts</h3>
+	<ul id="contactList"></ul>
+</div>
+
+<script>
+	/**
+	 * Test inspired by the SDK "Drag & Drop" sample.
+	 * */
+
+	if ( !CKEDITOR.env.edge ) {
+		bender.ignore();
+	}
+
+	var CONTACTS = [
+		{ name: 'Huckleberry Finn',			tel: '+48 1345 234 235', email: 'h.finn@example.com', avatar: 'hfin' },
+		{ name: 'D\'Artagnan',				tel: '+45 2345 234 235', email: 'dartagnan@example.com', avatar: 'dartagnan' },
+		{ name: 'Phileas Fogg',				tel: '+44 3345 234 235', email: 'p.fogg@example.com', avatar: 'pfog' },
+		{ name: 'Alice',					tel: '+20 4345 234 235', email: 'alice@example.com', avatar: 'alice' },
+		{ name: 'Little Red Riding Hood',	tel: '+45 2345 234 235', email: 'lrrh@example.com', avatar: 'lrrh' },
+		{ name: 'Winnetou',					tel: '+44 3345 234 235', email: 'winnetou@example.com', avatar: 'winetou' },
+		{ name: 'Edmond Dantès',			tel: '+20 4345 234 235', email: 'count@example.com', avatar: 'edantes' },
+		{ name: 'Robinson Crusoe',			tel: '+45 2345 234 235', email: 'r.crusoe@example.com', avatar: 'rcrusoe' }
+	];
+
+	CKEDITOR.plugins.add( 'hcard', {
+		requires: 'widget',
+
+		init: function( editor ) {
+			editor.widgets.add( 'hcard', {
+				allowedContent: 'span(!h-card); a[href](!u-email,!p-name); span(!p-tel)',
+				requiredContent: 'span(h-card)',
+				pathName: 'hcard',
+
+				upcast: function( el ) {
+					return el.name == 'span' && el.hasClass( 'h-card' );
+				}
+			} );
+
+			// This feature does not have a button, so it needs to be registered manually.
+			editor.addFeature( editor.widgets.registered.hcard );
+
+			// Handle dropping a contact by transforming the contact object into HTML.
+			// Note: All pasted and dropped content is handled in one event - editor#paste.
+			editor.on( 'paste', function( evt ) {
+				var contact = evt.data.dataTransfer.getData( 'contact' );
+				if ( !contact ) {
+					return;
+				}
+
+				evt.data.dataValue =
+					'<span class="h-card">' +
+					'<a href="mailto:' + contact.email + '" class="p-name u-email">' + contact.name + '</a>' +
+					' ' +
+					'<span class="p-tel">' + contact.tel + '</span>' +
+					'</span>';
+			} );
+		}
+	} );
+
+	CKEDITOR.on( 'instanceReady', function() {
+		// When an item in the contact list is dragged, copy its data into the drag and drop data transfer.
+		// This data is later read by the editor#paste listener in the hcard plugin defined above.
+		CKEDITOR.document.getById( 'contactList' ).on( 'dragstart', function( evt ) {
+			// The target may be some element inside the draggable div (e.g. the image), so get the div.h-card.
+			var target = evt.data.getTarget().getAscendant( 'div', true );
+
+			CKEDITOR.plugins.clipboard.initDragDataTransfer( evt );
+
+			var dataTransfer = evt.data.dataTransfer;
+
+			dataTransfer.setData( 'contact', CONTACTS[ target.data( 'contact' ) ] );
+
+			dataTransfer.setData( 'text/html', target.getText() );
+
+			if ( dataTransfer.$.setDragImage ) {
+				dataTransfer.$.setDragImage( target.findOne( 'img' ).$, 0, 0 );
+			}
+		} );
+	} );
+
+	CKEDITOR.replace( 'editor1', {
+		extraPlugins: 'hcard',
+		imageUploadUrl: 'http://sub.ckeditor.dev/'
+	} );
+
+	addItems(
+		CKEDITOR.document.getById( 'contactList' ),
+		new CKEDITOR.template(
+			'<div class="contact h-card" data-contact="{id}">' +
+			'<img src="/tests/_assets/lena.jpg" alt="avatar" class="u-photo" /> {name}' +
+			'</div>'
+		),
+		CONTACTS
+	);
+
+	function addItems( listElement, template, items ) {
+		for ( var i = 0, draggable, item; i < items.length; i++ ) {
+			item = new CKEDITOR.dom.element( 'li' );
+			draggable = CKEDITOR.dom.element.createFromHtml(
+				template.output( {
+					id: i,
+					name: items[ i ].name,
+					avatar: items[ i ].avatar
+				} )
+			);
+			draggable.setAttributes( {
+				draggable: 'true',
+				tabindex: '0'
+			} );
+
+			item.append( draggable );
+			listElement.append( item );
+		}
+	}
+</script>
diff --git a/tests/plugins/clipboard/manual/draganddropdata.md b/tests/plugins/clipboard/manual/draganddropdata.md
@@ -0,0 +1,17 @@
+@bender-tags: tc, 4.7.0, 16777, dataTransfer
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, sourcearea, elementspath, clipboard, image2, uploadimage, uploadwidget
+@bender-include: ../../../plugins/uploadwidget/manual/_helpers/xhr.js
+
+## Test scenario
+
+- Drop a few of the "Droppable Contacts" into the editable.
+- Drop an image from the filesystem into the editable.
+
+## Expected result
+
+Both operations possible, no errors.
+
+## Unexpected
+
+Impossible to drop either contacts, or image, or both.