Slack Dropzone Plugin
- Dominant language
- TypeScript
- Stars
- 23.9k
- Forks
- 2.2k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 61
Description
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._
Contributor guide
Research direction
Start by tracing the custom Dropzone and Attachments plugins, especially the INSERT_ATTACHMENT command and the attachment node appended to the root. Confirm how the root handles its children and selection; done means the placeholder remains visible when attachments exist and select-all deletion does not remove the attachment node.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100