TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
6.68k stars 459 forks source link

File drag-and-drop upload #715

Open justicecurcian opened 6 months ago

justicecurcian commented 6 months ago

Is your feature request related to a problem? Please describe. I want to build an extension to drop files in the editor (images/videos/pdf), upload them to my server and create a block where the file was dropped. There is no way of doing this on the blocknote level as i can see, tiptap extension with this functionality is behind a paywall, and doing this in prosemirror is kinda tricky: you need to replace dropcursor with the new block, and so you need a specific dropcursor for files because dropcursor works inside blocks too.

Describe the solution you'd like It would be perfect is there was a file drop plugin in blocknote that would handle the file drop itself and the editor would accept a function like

{ // BlockNoteEditorOptions
    fileDropHandler: (file: File) => {
        // User creates the node he needs, or a notification that
        // the editor can't handle a file of that type, handles upload, etc.
    }
}

Describe alternatives you've considered enableBlockNoteExtensions is kinda useless right now and to make it useful it needs to disable specific extensions. If I can disable dropcursor extension without disabling all other extensions, I will be able to create my own tiptap extension that will handle dropcursor and file upload.

justicecurcian commented 6 months ago

I just remembered that blocks have dropcursor only between blocks, but from what i can see block drag-and-drop is tied to sidemenu drag and drop, so i don't see how can i create a workaround.

YousefED commented 6 months ago

Hi! Would welcome a PR that makes enableBlockNoteExtensions more useful for your scenario. Meanwhile, we'll also be working on better file uploads so that might also address your requirements