[Bug]: Canvas onDrop handler swallows non file events

[elstob]

What happened?

The current onDrop handler for the TLDraw canvas immediately bails if the firing event doesn't have any files within the dataTransfer.

async function onDrop(e: React.DragEvent<Element>) {
				preventDefault(e)
				stopEventPropagation(e)
				if (!e.dataTransfer?.files?.length) return
    ...

If a drop event is triggered that doesn't have any files (for example from a draggable html element elsewhere in the browser then nothing happens.

https://github.com/user-attachments/assets/a7cc0aa2-28ce-48e7-9f6d-ff9e8822459d

It would be nice instead if these events weren't swallowed but instead were handled in a smart way. One potential approach could be to treat the data received in the dataTransfer according to the type that has been set (e.g text/html) in the same way pasting content onto the canvas works. So URLs would be checked as embeds before falling back to bookmarks, html would preserve formatting etc. The video below shows all options just being inserted as text directly.

https://github.com/user-attachments/assets/ded74d46-bf40-4df5-bad0-fcb30080665f

How can we reproduce the bug?

I've forked and created a branch that updates the development example with some draggable elements and updated onDrop in useCanvasEvents here: https://github.com/elstob/tldraw/tree/bug/canvas-swallows-non-file-ondrops - so that you can play around with it and hopefully see what is going on.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Where did this happen?

The developer package

Contact Details

[email protected]

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[linear[bot]]

TLD-2864 [Bug]: Canvas onDrop handler swallows non file events

[an5rag]

Hi, any update on this? Currently making it impossible to handle basic shapes like sticker with drag and drop

[SomeHats]

We recently added support for dropping URLs here, but it would be interesting to try and expand this to more types of content using the current putExternalContent system. We'd happily accept a PR doing that if anyone would like to have a go at implementing it

[github-actions[bot]]

This issue has been marked as stale because it has been open for 150 days with no activity. If there's no further discussion, it'll be closed in 30 days time. If you would like to ensure it stays open, you can comment on the issue and revive the discussion. Or, you can add the 'keep' label to prevent it from being closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 30 days since being marked as stale.