Add support for content drag&drop

[Reinmar]

Currently, we support:

• copy&paste of HTML and plain text (within the editor and from/to outside),
• and dropping/pasting files.

If you'd try to select and drag&drop a content into the editor (either from the editor or from outside) you will experience a lot of strange issues or the editor will blow up.

The reason why it works just a "bit" is that we don't support it at all and it's the typing feature intercepting some fragments of dropped content thinking it's typed. It's all by coincidence and boils down to writing a support for drag&drop from scratch.

I'll be closing many tickets which were already reported as a DUP of this one, so let's make sure to check those TC once we'll come up with d&d implementation.

---

Scope

There are 3 functionalities to cover:

• Dropping HTML/plain-text content from outside of the editor (other pages, the page in which the editor is embedded, external apps which provide HTML content in the clipboard) into the editor.

• Drag and drop of textual content within the editor.

• Drag and drop of block objects like images and tables within the editor.

  This part is most complex because block objects are, in CKEditor 4 at least, handled completely by the editor. We use the magicline's engine to display possible locations where e.g. an image can be moved:

  

• Drag and drop of any block content (e.g. paragraphs, list items, etc.) within the editor.

  This is a cool addition on top of d&d of objects like images. Why not making all blocks draggable?

See my comment for more detailed description of these items.

---

When?

If you'd like to see d&d support in CKEditor 5, please add 👍 to this comment.

Also: You can help us priorities the sub-features of drag&drop support.

UPDATE (1.03.2021): We're working on scenarios A+B and part of C. See #9128 for updates.

UPDATE (Q3 2023): We are working on the block D&D: #13933

[thedavidmeister]

@Reinmar i asked this in one of the DUP issues, but wasn't sure if i should ask in here instead...

given that the current behaviour is so buggy (i'm having real bad issues with serialised machine data being injected into the editor) - what is the best way to disable it completely until official support is further along?

example of what is getting injected:

[Reinmar]

This will be enough to block any drop:

		editor.editing.view.on( 'drop', ( evt, data ) => {
			evt.stop();
			data.preventDefault();
		} );

But it also prevents image upload. You'd need to improve the listener to check whether there's something interesting there in the data and let image upload handle those drop operations (by not stopping this event).

[thedavidmeister]

yes i should be able to detect my data very easily!

i'll try this out :)

[thedavidmeister]

@Reinmar this totally works - not 100% sure if the preventDefault() is necessary, but evt.stop() did what i needed

[Reinmar]

It's better to leave this preventDefault(). What it does is that it block the native drop's effect which is the browser inserting the content into your editor. Such a random change to the editor's DOM needs to be applied to the model and normally it wouldn't because no one would handle it. But sometimes the typing feature may catch it and handle it. The typing feature works based on mutations and if some mutations meet certain characteristic they are picked up by typing's heuristics and transformed into model's operations (and, hence, preserved). If not, the model's re-rendered and native changes are reverted.

I described this mechanism here: #748 (comment).

So, if you'll omit preventDefault() plain-text-like mutations might be handled by the typing feature.

[thedavidmeister]

this has come back in the latest beta for ckeditor... i assume maybe the events changed?

[thedavidmeister]

editing.view.document seems to help

[Reinmar]

I got two more requests about this on other channels recently. So 👍 👍

[mechanicals]

@Reinmar :
Although my team has integrated CKeditor into our platform.
Our operations team still needs to rely on Google Docs to Easily Rearrange Images.
This is one important feature that is still not letting us get rid of Google docs and it leads to duplicated effort.
Really looking forward to this feature. I hope it can be prioritized.

[Reinmar]

Thanks for feedback, @mechanicals.

The use cases for drag&drop are well known to us. But for now, no one reacted with 👍 to this ticket. If you'd like to help us prioritizing tickets, please react to the original post, as mentioned in it. Thanks to that we can sort tickets by the number of reactions.

[neongreen]

I'm building a commercial CMS, and not being able to rearrange blocks with drag-and-drop is currently the only thing that makes me worried about choosing CKEditor 5.

I thumb-upped the original post. Thanks for considering the feature!

[avele]

@Reinmar Is it possible to implement this feature as plugin using current plugin API?

[vinicius1209]

Any listenner about "drag start"? or "on drag"?

[sai-velamuri]

I'm waiting for this feature to come out.

[memocampos]

Will it be made any time soon?

[jemorape]

It will be awesome this feature come true.

[TheoGaxiola]

This feature is really important!. could this feature be ready soon???

[sai-velamuri]

Guys, can you check out the froala editor Their website itself is a demo, How cool is that? It is super cool, very easy to make plugins, no need to go through a ton of framework documentation, almost all the features are ready to use. More over, you can paste html and it will be converted by the editor and vice-versa(you can view the source code and edit it like you want. It's ease of use is the main strength of the editor). Just my two cents after going through a painful week.

[omaryahir]

Hi!, this is an essential feature for a project that I´ve been working on, so do you think we could have this feature soon?

[Reinmar]

There's been an old proposal for d&d of widgets ("C") in #1023. IDK, though, if we can go with something like that if we'd also work on "D".

[ryanmmale]

We're using CK Editor 4 at RocketLawyer.com to drag and drop sign blocks. If we upgrade to CK Editor 5 will we still be able to do this?

[logeshpaul]

Not able to update from CK Editor 4 to 5

Please implement Drag and Drop support in CK Editor 5, due to this reason we are not able to use Comments, Real-time collaboration and other nice features introduced in CK5.

[suhasg]

Agree with @logeshpaul pretty cool features split between CK Editor 4 & 5. Please bring drag and drop features in 5 as well.

[wwalc]

From what I can see, Chrome doesn't allow you to drag a textual content. It creates a new selection every time I try to do that.

It looks like that's no longer the case in Chrome (applies both to dragging text in the editor and from outside). Long left-click is needed to start dragging.

[timdatavizioner]

• (D) Drag and drop of any block(s) in the editor.

So, what are the priorities of (A+B), (C) and (D) to you? Could you write which are "must haves", "nice to haves" or "don't care" to you?

D would be the most useful for us! @Reinmar are there any updates on the likelihood of this being implemented? At the moment we're weighing up this vs another option that is less functional but can add custom blocks and re-arrange out of the box.

[fsolarv22]

Hi, any estimated date for this future?

[seancowan-dev]

Why would you ever push out a new product that removes an essential and existing feature? Being able to drag text like a real word editor was the #1 draw to CKEditor. Guess I'm downgrading to 4...

[niegowski]

FYI we are working on A, B and C scenarios (with the assumption that dropping is allowed only in text positions or on the widgets) here: #9128

[Reinmar]

FYI: #9128 has been merged and will be included in the upcoming release (end of March) 🎉

[MrMitch]

Thank you for looking into this, this is greatly appreciated !
I'm really eager to test this !

[Witoso]

We are excited to announce that we have released an experimental feature of blocks drag and drop in CKEditor 5. Please note that this feature is not yet fully developed or tested, and it may not be ready for production use.

Live demos are available in our docs:
https://ckeditor.com/docs/ckeditor5/latest/features/pasting/drag-drop.html#drag-and-drop-of-content-blocks

What works

Screen.Recording.2023-05-29.at.15.41.39.mov

• Selection of the whole text block and moving it inline and between blocks.
• Placement of blocks inside other blocks: tables, blockquote, etc.
• The pilcrow icon in the Ballon block editor behaves as a drag handle.

What needs improvement

• Scroll the content while dragging.
• Drag and drop inside the lists.
• The drag handle is only available for the Ballon block editor.
• The drag handle is only visible on select, and not on hover.

Setup

⚠️ This is an experimental feature, it is available for users, developers, and enthusiasts, who want to test out new functionality and provide feedback to the product team. ⚠️

1. Update the editor’s packages or build to the 38.0.1+ version.
2. Add the DragDropExperimental plugin from the clipboard package (available for all builds).
3. If you use the Ballon block editor, add the DragDropBlockToolbar to drag and drop with the icon.
4. Rebuild the editor if needed and reload the page.

Feedback

Let us know in comments, and in the reactions to this comment, what you think, and what enhancements would you like us to include in the stable release.

👍 - This looks great, keep it going!

👎 - I don’t like it, do something else.

🎉 - I want a drag handle for every editor type, e.g. classic, inline, etc. (something like: ⠿)

❤️ - The drag handle should be visible on hovering over blocks, next to them (let us know in comments how would you render that in your editor setups, what editor types you use, etc.?)

🚀 - Make it lists aware (placing inside lists, sublists creation).

[ctwhome]

this is awesome, becoming the perfect UX for modern note-taking apps!

[TheoGaxiola]

What a quick deliver!!

[Witoso]

Exciting update! 🎉 We've improved drag-and-drop of blocks in v40.0.0, which has just been released. Now you can place blocks between other blocks more intuitively. For those using an editor with a balloon block toolbar, you can even initiate a drag from there. Play with it out in our docs!

Got more thoughts or feedback? There are still improvements we would like to make, follow and 👍 the #15110, if you're interested.