facebook / facebook/lexical

Slack Dropzone Plugin

Open
#5,898 2 comments 0 reactions 0 assignees View on GitHub
feature
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**
Screenshot 2024-04-16 at 10 40 39

**My custom editor**
![Screenshot 2024-04-16 at 10 43 40](https://github.com/facebook/lexical/assets/13097564/50a91445-8259-4bfa-a079-4a2766faba3a)

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.

![Screenshot 2024-04-16 at 11 04 04](https://github.com/facebook/lexical/assets/13097564/68da8089-6eb1-4a92-bfa2-dd4326156bd8)
_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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.