Tiptap: Dragging and dropping work on firefox but not on chrome

[MihaitaN]

Hello, I have the following single file component on top of which I drop an image:
`

export default {
components: {
'editor': Editor,
},
data() {
return {
extensions: [
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ImageNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
]
}
}
`
The dragging and dropping of an image works on firefox , but not on chrome.

On chrome I receive a Resource interpreted as Document but transferred with MIME type image/gif: "file:///home/mihaita/Pictures/giphy.gif". warning and then the browser proceeds to navigate to the dropped file file:///home/mihaita/Pictures/giphy.gif;

Any ideas what goes wrong?

[philippkuehn]

Can you provide a minimal test repo or an example at codesandbox.io?

[MihaitaN]

I can, hang on.

[MihaitaN]

Here you go: https://codesandbox.io/s/7ylzoylj10

[philippkuehn]

Hey I can‘t find any drag and drop code in your example. 👀

[MihaitaN]

What do you mean? I just copied your example over from https://github.com/heyscrumpy/tiptap/blob/master/examples/Components/Routes/Images/index.vue .
It doesn't have any specific drag & drop logic, but I supposed the editor component already handles this.

Try opening the codesandbox on chrome and firefox and dragging and dropping an image from your machine onto the editor component (between Test & Text works best :) ).

On firefox the image gets loaded into the editor component, but chrome just opens a new tab with the image you dropped (it navigates to the file address on your machine).

PS: I'm using chrome 69.0.3497.100

[philippkuehn]

Ah sorry, my fault 🙃

Hmm this is strange. Drop an image works fine on the official images example but not for your example on codesandbox. I'll check it out.

[childonline]

Hey, it seems I stumbled over this exact same issue.

I'm also using chrome build 69.0.3497.100 and experiencing the same behavior.

The official image example does indeed work with chrome, but not when on localhost. Maybe it's something related to the build config of the examples page? I tried having a look, but couldn't find anything immediately obvious :disappointed: .

[childonline]

I just noticed this issue also present on prosemirror, you can replicate the drag & drop behavior over at http://prosemirror.net/examples/dino/ . :upside_down_face: So this is tehnically a ProseMirror issue not a TipTap issue.

But what really baffles me is why it works on chrome on the official images example.

[philippkuehn]

@childonline Yeah super strange. Didn't find anything until yet. The demo page setup is indeed different because I don't use the tiptap packages from npm. Instead I added some alias with webpack to grab these packages directly from the src folders of the repository. But I don't think that's what makes the difference.

[qyloxe]

I would bet that it has something to do with headers, origin, feature detection, accept, https or anything else linked to browser-server context. Chrome has lately a "dark" history for implementation of those things and breaking many previously working use cases. Of course, it is done in the name of "security" so nobody should complain.

[philippkuehn]

This is strange. In this sandbox I import a custom ImageNode extension (it's a copy from the image extension from tiptap-extensions) and it works fine. So it seems that something goes wrong in the build process? 🤷‍♂️

[childonline]

Yup, I can confirm, loading an identical "custom" ImageNode works on localhost aswell.

[philippkuehn]

This is fixed in tiptap-extensions 0.16.3

[childonline]

thx, mate!