Request: Support dragging & dropping text

[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:

https://user-images.githubusercontent.com/14864325/177706250-d542dc3d-4dee-4be1-8539-965527d6963e.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.

[frontsideair]

@acywatson I'm not knowledgeable about the architecture, but from what you said, it certainly makes sense to me. From what I can understand, the core package is very lightweight and users usually don't go around without depending on @lexical/plain-text or @lexical/rich-text. Looks like @lexical/react also depends on these two, so I think it's the right way to go.

Thanks for giving my feedback your consideration!

[ScottLy426]

@maasencioh @LuciNyan I was wondering if you guys started on this issue yet? Would love to contribute to this!

[LuciNyan]

@ScottLy426 Go ahead and I think it's yours! 🚀

[maasencioh]

Same from me, thank you

[Nantris]

I don't understand the issue. Is it still relevant? I dragged text in the playground and it worked fine as far as I can tell.

[frontsideair]

It doesn't work in the plain text example at all, and in the playground I can drag text but when I drop nothing changes. (I'm on desktop Safari.)

Tried on Chrome, it works if you move from a block to another one, but if you move within the same block it moves the dragged text to the beginning of the block. (This is playground, plain text example doesn't work here either.)

[Nantris]

Playground works fine for me when dragging across blocks, but you're right - dragging within blocks moves the word to the beginning of the block.

Additionally the plaintext example doesn't work for dragging at all.

Windows/Chrome here.

[joanjeremiah]

I want to work on this, can you assign me this issue?