Drag and drop images from other sites does not work

[ellatrix]

Issue Overview

Dragging an image from a site into Gutenberg does not work. Nothing happens.

Steps to Reproduce (for bugs)

Testing in Chrome.

1. Open a site with an image.
2. Drag the image to the Gutenberg editor. You'll see a blue line where you can drop.
3. Drop the image. Nothing happens.

Or:

1. Create a new image block.
2. Open a site with an image.
3. Drag the image to the Gutenberg editor.
4. Drop it inside the image block placeholder. Nothing happens.

Expected Behavior

I expect an image block with the image.

Current Behavior

Nothing happens.

[ellatrix]

I'm having the same issue when I drag and drop images from other Mac apps like Notes, Mail, etc. The only thing that works for me is actual files from Finder.

[ephox-mogran]

The problem seems to be that the only drop handling that Gutenberg is currently doing is handling file transfers. However, in dragging and dropping, sometimes the browser just sends across images as HTML transfers.

Gutenberg doesn't seem to handle dragging and dropping text from another page into the editor. Is this an intentional design decision or hasn't dragging and dropping HTML been implemented yet?

[ephox-mogran]

There are a couple of things going on here:

1. The BlockDropZone only cares about files that are transferred through dataTransfer files.
2. The image block doesn't have a transform for HTML-based data through drag and drop

And the moment, the image block defines a raw type of transform, but that is only used for processing paste handling. When the type of transform is raw, the input to isMatch and transform is a node. It is expected that transform for raw types should mutate the passed through node.

When something is dropped inside the dropzone, it runs through the dataTransfer files it has and sees if there are any transform matches for them with type file. If it finds one, it calls transform to turn that file into a Promise<Block(s)>.

We can do the same thing for HTML drag and dropping. I'm spiked out a type html for transforms which gets passed through the data on the text/html section of the transfer object, but only if there are no files passed through. You'd have to fine-tune exactly when you want it to fire (only an image, contains an image etc.) ... this is just a rough approach.

[ellatrix]

@ephox-mogran This is why we have a rawHandler. Handles pretty much everything. :) I adjusted your PR heavily in #4577.