Drop image fails to clear drop area after image is displayed

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.44k stars 440 forks source link

Drop image fails to clear drop area after image is displayed #1095

Open HenrikBechmann opened 6 days ago

HenrikBechmann commented 6 days ago

Describe the bug <what's going wrong!?> When an image is dropped on the image drop area for (automatic) upload, the drop area persists (fails to clear) after the image is displayed. The drop area even persists after save, with editable = {false}

The select file method (clicking on the Upload image button) on the other hand, clears the drop area just fine after the image is displayed To Reproduce <clear steps to reproduce are super helpful! Best is to provide an online sandbox, click to create one> On desktop, invoke the image drop area with the suggestion menu, and drop an image for upload onto the drop area. Note that after the image appears, the drop area persists. Misc

Node version: 20.5.1
Package manager: webpack
Browser: latest chrome for mac
[ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

YousefED commented 5 days ago

Hi @HenrikBechmann.

If you mean the gray field with "Add Image"; it's currently not intended as a drop-area, but as a button. What happens is that we added drag and drop to the editor in general, and then it inserts a new image block wherever you drop the file.

I agree it would be nice if the image block "placeholder" would support file dropping.

PS: what are you building?

HenrikBechmann commented 5 days ago

Wow. So cool! It never occurred to me to try dropping on the editor as a whole.

I'm building an information manager that I call workboxes. Each workbox has a document builder on the left and a resource builder on the right. The resource builder is a list manager, with each item in the list being... a workbox!

Early stages; been thinking about it for decades. Now that I'm retired I get to work on it.

BlockNote is perfect for this as part of the document builder -- conceived of as building a document in blocks. Thank you so much for your work!

HenrikBechmann commented 5 days ago

But yeah, if you could turn the "Add Image" button into a drop zone so that it would clear after upload, I think that would be intuitive for the user.

Or just go straight to the upload options area with the upload image button?