[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