search

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
5.89k stars 381 forks source link

feat: Pasting & dropping files #852

Closed dcadavez66 closed 1 week ago

dcadavez66 commented 1 week ago

Added support to paste images from the clipboard into the editor

vercel[bot] commented 1 week ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
blocknote ✅ Ready (Inspect) Visit Preview Jun 24, 2024 7:11pm
blocknote-website ✅ Ready (Inspect) Visit Preview Jun 24, 2024 7:11pm
vercel[bot] commented 1 week ago

@dcadavez66 is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

matthewlipski commented 1 week ago

Awesome, thanks for this! I also extended your code to work with all file block types in the editor based on the pasted file's MIME type, and added the same functionality for dragging and dropping files:)

Besides refactoring, I made one fairly major change in that the files pasted/dropped are uploaded using editor.uploadFile instead of converting them to a URL using the helper function you created. This is just a bit more in line architecturally with how we want file blocks to work, but also means that a backend has to be provided for file pasting/dropping to work. That being said, it's a more robust solution overall and I expect that the vast majority of people using BlockNote will already have some kind of backend for this.

Closes #715 Closes #693