#16777 closed Bug (fixed)

Dragging widgets to editor doesn't work in Edge

Reported by: lskdjfalksdjflkajsd Owned by: Tade0
Priority: Nice to have (we want to work on it) Milestone: CKEditor 4.7.0
Component: UI : Widgets Version: 4.5.0
Keywords: edge drag and drop Cc:

Description

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.

Attachments (1)

screen-06.gif (1.4 MB) - added by lskdjfalksdjflkajsd 22 months ago.
Behavior for chrome, firefox and edge.

Download all attachments as: .zip

Change History (15)

Changed 22 months ago by lskdjfalksdjflkajsd

Attachment: screen-06.gif added

Behavior for chrome, firefox and edge.

comment:1 Changed 22 months ago by Tade0

Status: newconfirmed

Confirmed for Edge.

comment:2 Changed 21 months ago by Wiktor Walc

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

comment:3 in reply to:  2 Changed 21 months ago by 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.

comment:4 Changed 21 months ago by 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.

comment:5 Changed 21 months ago by 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?).

comment:6 Changed 21 months ago by 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

comment:7 Changed 21 months ago by Tade0

Owner: set to Tade0
Status: confirmedreview

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.

comment:8 Changed 21 months ago by Marek Lewandowski

Milestone: CKEditor 4.7.0

comment:9 Changed 21 months ago by Tomasz Jakut

Status: reviewreview_failed

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.

comment:10 in reply to:  9 Changed 21 months ago by 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.

comment:11 Changed 21 months ago by Tade0

Status: review_failedreview

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.

comment:12 Changed 21 months ago by Marek Lewandowski

Priority: NormalNice to have (we want to work on it)

Bumping priority.

comment:13 Changed 21 months ago by Jakub Ś

Version: 4.6.14.5.0

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.

comment:14 Changed 21 months ago by Tomasz Jakut

Resolution: fixed
Status: reviewclosed

LGTM after changes, fixed with git:a7d8e4d.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy