Slack Dropzone Plugin

[hazirmagron]

The Slack editor allows file drag and drop (see 1st image below). I have implemented something similar (see 2nd image below) using a combination of Dropzone and Attachments plugin.

Slack editor

My custom editor

The way my custom plugins work:

1. User drags a file
2. My Dropzone Plugin listens to drag events and creates a Dropzone Node where the file can be dropped
3. The Dropzone Node dispatches an INSERT_ATTACHMENT command
4. My Attachments plugin creates an attachments node when INSERT_ATTACHMENT is dispatched which shows the file previews (shown in the image). This node is appended as the very last child of the root node

Everything works great but this approach introduces behaviours that are unintended:

1. When a file is attached the placeholder isn't shown when the editor is empty since root has the Attachments node. The expected behaviour is for the placeholder to be shown but I haven't found a good way of achieving this. See image below for reference.
2. When user "selects all" (using cmd+a) and deletes the Attachments node is also deleted.

Essentially, what I want to achieve is for the Attachments node to be treated as separate from the root children. One approach is to extract the Dropzone functionality from the editor but ideally it is part of the editor state since the shared state simplifies managing the attached files.

When deleting the only paragraph the placeholder isn't shown as the root has the Attachments node. The user would expect a placeholder here though.

[acywatson]

One approach is to extract the Dropzone functionality from the editor but ideally it is part of the editor state since the shared state simplifies managing the attached files.

I would advise you to do this outside of the editor if you don't care about the position of this attachment within a document. The tradeoffs of trying to shoehorn this into the editor state model are just not worth it (imo) if all you need is to attach some images to the document.

[hazirmagron]

One approach is to extract the Dropzone functionality from the editor but ideally it is part of the editor state since the shared state simplifies managing the attached files.

I would advise you to do this outside of the editor if you don't care about the position of this attachment within a document. The tradeoffs of trying to shoehorn this into the editor state model are just not worth it (imo) if all you need is to attach some images to the document.

I ended up following your advise. I feel like it is a compromise to keep the Dropzone functionality non-integrated since I have to manage the state for file uploads separately from everything else. It works well though so I'm somewhat satisfied.

Here is what I ended up doing for anyone who wants to implement similar functionality:

• A custom DropzonePlugin component that is responsible for: 1) drag / drop event handling; 2) Rendering a DropzoneArea UI; 3) Rendering thumbnail previews of uploaded images.
• Object URLs for selected files are stored in Redux state. This allows me to append files from sources other than the Dropzone (e.g. FileUploadButton in the toolbar).

Would appreciate your feedback on this approach @acywatson - for myself and future readers