Request: Support dragging & dropping text

[justinhaaheim]

[justinhaaheim]

Didn't make much progress on this before my leave. Putting up for grabs.

[maasencioh]

@trueadm is this something I could help contribute? I'm new to the project / repo so any additional details would be helpful if so.

[acywatson]

@trueadm is this something I could help contribute? I'm new to the project / repo so any additional details would be helpful if so.

We'd be more than happy to have a contribution here, if you're still interested. This should probably work like the drag and drop feature of any similar text editor. For example, Google Docs:

Screen.Recording.2022-07-06.at.11.27.09.PM.mov

The interesting question is how to organize this code. We probably want to keep it out of the core library to avoid bloating that package for users who don't need this feature. Another option is to build this into a separate package, something like @lexical/draggable-text? I don't think we should make it a plugin in @lexical/react, as other frameworks would have to re-implement it. Maybe it belongs in @lexical/plain-text and @lexical/rich-text. Open to ideas there.

For how to make the actual DnD functionality work, I might suggest you look at the work @LuciNyan has done on Image drag and drop.

[LuciNyan]

The interesting question is how to organize this code. We probably want to keep it out of the core library to avoid bloating that package for users who don't need this feature. Another option is to build this into a separate package, something like @lexical/draggable-text? I don't think we should make it a plugin in @lexical/react, as other frameworks would have to re-implement it. Maybe it belongs in @lexical/plain-text and @lexical/rich-text. Open to ideas there.

I think it would be better to put this feature in a separate package (@lexical/draggable-text). It should be an optional feature, not a feature that comes with @lexical/plain-text and @lexical/rich-text. 🤔

[LuciNyan]

Hi @maasencioh!
I was wondering if you are still interested in this feature. If not, I can start get my hands on it.

[frontsideair]

I'm not related to this project, but just my 2 cents. I don't know about other operating systems but on macOS this is the default behavior of any native textbox. Using Lexical and losing this feature doesn't sound right to me. Lexical should add features, not remove them, in my opinion. So I think it makes sense to make this core to the project and not an addon.

When I'm thinking from the point of view of a developer, it's tempting to think that you can omit this functionality to shave off a few kilobytes, but since it's a native functionality many users may already be depending on it. I, as a user, wouldn't like that honestly.

This is merely a suggestion, since I have no say in the direction of this project. By the way, while writing this comment I tried to drag text and since GitHub's composer is broken it copied text, not moved it, which was frustrating.

[acywatson]

I'm not related to this project, but just my 2 cents. I don't know about other operating systems but on macOS this is the default behavior of any native textbox. Using Lexical and losing this feature doesn't sound right to me. Lexical should add features, not remove them, in my opinion. So I think it makes sense to make this core to the project and not an addon.

When I'm thinking from the point of view of a developer, it's tempting to think that you can omit this functionality to shave off a few kilobytes, but since it's a native functionality many users may already be depending on it. I, as a user, wouldn't like that honestly.

This is merely a suggestion, since I have no say in the direction of this project. By the way, while writing this comment I tried to drag text and since GitHub's composer is broken it copied text, not moved it, which was frustrating.

@frontsideair The suggestion and thoughtful delivery thereof are greatly appreciated!

As I was looking more into this, it looks like we actually have placeholder to add DnD functionality in @lexical/plain-text, which is one of the lowest level packages we provide, aside from the core library itself:

https://github.com/facebook/lexical/blob/main/packages/lexical-plain-text/src/index.ts#L432

Perhaps this is the right path - we expect most users of lexical to start with either @lexical/plain-text or @lexical/rich-text and build up from there. Those who want to do otherwise would basically be starting from scratch on top of the core library, and could copy over the logic into their own command listeners to create a similar experience.