TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.

Home Page:https://www.blocknotejs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

File drag-and-drop upload

justicecurcian opened this issue · comments

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.

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.

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