Dragging widgets to editor doesn't work in Edge

[lskdjfalksdjflkajsd]

Steps to reproduce

1. Open ​http://sdk.ckeditor.com/samples/draganddrop.html with Edge
2. Try to move contacts from the list on the right to editor

Expected result

When elements are being dragged over editor, cursor should not have red markings that disallow drop. And when dropped - the dragged element should be inserted to editor text.

Actual result

On Edge when dragging elements, cursor has red marker saying it cannot drop the element within editor. Dropping element anyway does nothing - the dragged element is not inserted to editor text.

Other details (browser, OS, CKEditor version, installed plugins)

Edge browser on Windows 10 64bit from official MS images (here for VirtualBox). VirtualBox run on Linux. No plugins installed, system is completely clean and run for the first time.

[lskdjfalksdjflkajsd]

Behavior for chrome, firefox and edge.

[Tade0]

Confirmed for Edge.

[Wiktor Walc]

@Tade0 Is it a problem with the editor or just with the sample? ​https://github.com/ckeditor/ckeditor-sdk/issues/196

[Tade0]

Replying to wwalc:

@Tade0 Is it a problem with the editor or just with the sample? ​https://github.com/ckeditor/ckeditor-sdk/issues/196

I tried the manual test from ticket:13468(that uses the dataTransfer object) and it worked in Edge.

The native demo also works: ​http://html5demos.com/drag.

I think there's something special in that sample.

[lskdjfalksdjflkajsd]

The native demo from html5demos.com doesn't use CKEditor and specifically doesn't drop anything not being pure text from outside of editor to its content.

Regarding the sample with contacts - there's really not too much code in it. Do you think you can fix the demo so that it works on Edge? This would prove that it's actually possible to support this kind of drag and drop with CKEditor and Edge (since other popular browsers have no problems here). It would also be a good sample for developers trying to achieve something similar in their apps.

[Tade0]

Apparently what Edge was complaining about was the lack of a dragover handler attached to the editable that would call preventDefault().

This piece:

editor.on( 'instanceReady', function() {
	editor.editable().on( 'dragover', function( evt ) {
		evt.data.preventDefault();
	} );
} );

placed in the init part of the hcard plugin was enough to make the sample work again.

This source: ​https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets confirms, that this is what should have been done, although I don't see code of this sort in CKE(or am I missing something?).

[Marek Lewandowski]

@Tade0 good finding. I can tell that dragover is already there, however it's prevented only under certain conditions, see ​https://github.com/ckeditor/ckeditor-dev/blob/7a3a51194875502fd00d9e4d23d5e87557d80d34/plugins/clipboard/plugin.js#L1375-L1394

[Tade0]

Added a simple check for Edge that always calls preventDefault() in this browser. This doesn't appear to disturb file upload like in IE.

Also added manual test inspired by the Drag & Drop sample from the SDK.

Changes pushed to ​branch:t/16777.

[Tomasz Jakut]

When I try to drop contact into empty space inside editor (e.g. everything below the text), error is thrown:

Unable to get property 'startContainer' of undefined or null reference

There are also some issues with tests:

• Tests could be moved into tests/plugins/clipboard (there are already some tests for drag&drop there).
• It would be nice to have unit test for that (probably tests from tests/plugins/clipboard/drop.js could be a source of inspiration).

I've also found that it's possible to drop contacts into the editor in SDK example if we drag the image, not the whole element. Maybe it's worth some more investigation.

[Tade0]

Replying to t.jakut:

When I try to drop contact into empty space inside editor (e.g. everything below the text), error is thrown:

Unable to get property 'startContainer' of undefined or null reference

This part is interesting, because it's caused by invoking a native method (document.caretRangeFromPoint) and using its result while not taking into account the fact, that this method can also return null. Shame.

[Tade0]

Fixed errors, moved the manual test, added a unit tests that ensures that preventDefault() is called on editable dragover in Edge.

Changes pushed to ​branch:t/16777.

[Marek Lewandowski]

Bumping priority.

[Jakub Ś]

Problem can be reproduced from CKEditor 4.5.0. To be honest Edge is supported from CKEditor 4.5.2 but the problem, without any errors being thrown, can be reproduced from 4.5.0 so I will leave the earlier version.

[Tomasz Jakut]

LGTM after changes, fixed with ​git:a7d8e4d.