FileDragging Extension is always on even without allowed files types

[goldensunliu]

http://codepen.io/poda/pen/XXoKeE

in this example, we added imageDragging to be false which causes the allowedTypes to be empty for the file dragging extension. No file can be dragged onto the editting area, however the dragNdrop events are still captured and related styles are being applied.

This is especially problematic, when you want its parent to handle DragNDrop events.

[goldensunliu]

got a PR open here, seem to work. #965

[nmielnik]

@goldensunliu there was a discussion about this in #876 as well. I'll try to provide some more details here though.

So there are a few different things that have contributed to the current state of the code:

• By default, dragging an image or other file into a contenteditable field will cause the browser to open the file either in a separate tab or in the current window. Basically, it will navigate away from the page and to the file itself.
• To prevent the browser from navigating away, we subscribe to the drop event, and call preventDefault(). We do this for all files.
• Previously, there was a built-in ImageDragging Extension which handled preventing all files from being drag-and-dropped, but had some special logic for when images are dropped. It inspected the clipboard, extracted the image data and embedded it within the editor as a <img> tag.
• The FileDragging Extension was created as a more generic replacement to the ImageDragging Extension, which would allow for additional file types to be handled in the future
• Since the ImageDragging Extension existed in the code as part of version 5.0.0, we aren't able to fully remove the extension until the next major release (6.0.0). This also means we have to support the imageDragging option until the next major release.
• The allowedTypes option is actually a bit misleading (a poor design on my part). Right now, we only have logic for handling inserting images via drag and drop, so even if you pass additional file types in via allowedTypes, nothing will actually happen. Also, this means that if you set allowedTypes to be an empty array, the code will still prevent drop, but the code will also NOT attempt to run the custom insert logic for images.

Since the ImageDragging Extension has been replaced with the FileDragging Extension and we need to remain backwards compatible, the current situation is a bit confusing. What makes it more confusing is that people can still provide their own custom ImageDragging extension, and if they do, we need to not break that behavior. The result:

1. imageDragging: true (default)
   • We use the FileDragging extension, with allowedTypes = ['image']
   • This disables all drop events on the editor, but if the file dropped is an image, the image will be inserted into the editor
2. imageDragging: false
   • We use the FileDragging extension, but with allowedTypes = []
   • This disables all drop events on the editor and doesn't attempt to do anything with images
3. User provides a custom ImageDragging extension
   • We don't instantiate the FileDragging extension, which means drag & drop will not be prevented
   • This means it's up to the custom extension to handle dragging and dropping however they seem fit
   • This also means by providing a 'dummy' extension, you can disable the code that prevents drag and drop

Again, the reason for all this complexity is for backwards compatibility. In 5.0.0, the editor ALWAYS prevented any drag and drop actions, and the imageDragging option being set to true or false was simply to say whether it would attempt to insert the image into the editor.

So, until 6.0.0, we unfortunately can't change this behavior.

However, if you just want the editor to stop preventing drag & drop events, you can just provide a dummy ImageDragging extension which does nothing (as shown in #876):

var editor = new MediumEditor('.editor', {
    extensions: {
        'imageDragging': {}
    }
});

Let me know if this allows you to work around your issue.

[goldensunliu]

Thank sounds good for now! I will file a little PR to include a little explanation in the doc