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 https://github.com/ckeditor/ckeditor5/issues/9128 for updates.

UPDATE (Q3 2023): We are working on the block D&D: https://github.com/ckeditor/ckeditor5/issues/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: https://github.com/ckeditor/ckeditor5/issues/748#issuecomment-356893226.

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.

[hemand-mapview]

I have tried to implement this in my angular project ( i am using multiple editors in a single page ) which i achieved via below code. Don't know if its the right way.

      CKEDITOR.inline('editor1', {
      extraPlugins: 'hcard,sourcedialog,justify'
      });
      CKEDITOR.inline('editor2', {
        extraPlugins: 'hcard,sourcedialog,justify'
        });

What my problem is i tried use content from the my DB exact same text with html tags like in your drag and drop example as ---ts file---- emailTemp ="<span class="h-card" class="cke_widget_wrapper cke_widget_inline cke_widget_hcard cke_widget_wrapper_h-card cke_widget_selected" contenteditable="false"><span> rob maths </span></span>"; ---html File---

<div class="editor" style="width: 25%;float: left;">
        <div id="editor2" name="editor2" cols="10"  rows="10"  data-sample-short contenteditable="true" [innerHTML]="emailTemp">
        </div>
    </div>

But i am not getting the expected style for the hcard.. please have a look at the attachment

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

[mechanicals]

hi @Reinmar: which iteration will this be part of as now seems a lot of people are blocked on this solution?

[castroCrea]

Hello @Mgsy, any update on this ? Can we use https://github.com/ckeditor/ckeditor5/blob/e73554a8f95fa38e453a9cd2401ccb0e3d1d557c/packages/ckeditor5-widget/src/utils.js#L256 for the text insertion

And for the drag n drop maybe we can also use this by deleting drag content at original position and add it a final position ?

What do you think?

Maybe we can add it together ? or make it an open project ?

[castroCrea]

@Mgsy @Reinmar hello, any answer on my previous message? Thanks you

[Reinmar]

Hi @castroCrea! Hi all!

As for the general status: this is one of the most upvoted tickets. Normally, we add one or two such tickets to an iteration, so the math says that there should be a progress here within 2-3 months. But I don't want to promise anything, to be safe ;)

As for the drag&drop feature itself – I'm trying to understand how should we prioritise the following parts:

• (A) 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.
  • 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. Firefox, OTOH, allows dragging a selected content.
  • When I test dropping such a content to the editor in Firefox it works but there are two bugs:
    • The content is dropped to the previous selection position while it should take the range from the drop event. I remember it was a nightmare to get right in CKE4 but perhaps the browsers that we support in CKE5 got it right and we can rely on the drop range. That would have to be checked.
    • There's no focus in the editor after drop. I'd expect myself that the editor is focused so I can e.g. see where the selection ended up (cause that shows me where the content was dropped, otherwise it may be hard to understand that).
  • One more note: If we fix the above two issues, it will be possible to reliably drop non-textual content (e.g. links or things that were specifically made draggable by the app) to the editor, assuming that there's HTML representing that content in the data transfer. So, fixing these issues will have a wider effect than just on FF where textual content can be dragged.
  • However, my guess would be that this is not a huge priority for you, but it's a requirement for the (B) option.
• (B) Drag and drop of textual content within the editor.
  • This is similar to (A) but we have to do one more thing – delete the content that's been dragged once the user drops it somewhere else.
  • So, to make it clear – it'd be best if content dragged within the editor used the native data transfer (where it should be passed via HTML, just like when copying it). That ensures one more thing – that the content dragged from the editor can be dropped outside the editor – this can be either another CKEditor instance or any other editor. Potentially even a native app.
  • Also, to make it clear – we'd be targeting the behavior when the content is treated like by copy-paste. I can see that @castroCrea you went in a block-based direction (see #7324). IMO, that's a bit different story and I added (D) for that.
• (C) Drag and drop of block objects like images and tables within the editor.
  • This is a completely separate story – making it easy to rearrange images or tables within the editor. The solution has to be completely custom, just like in CKEditor 4 (see the original post for screencast).
  • It's a pretty big topic, potentially ~2 months for a starter.
• (D) Drag and drop of any block(s) in the editor.
  • This is something new that I didn't cover earlier in this post. We can see apps that allow rearranging e.g. items of a todo lists. Notion, that I really like myself, allows rearranging any block content. Also, it's possible there to select two+ blocks and move that.
  • Since we're talking about making widgets (images, blocks) draggable, I would find it a natural followup to make all types of blocks draggable. Taken (C) is implemented, adding (D) should not be that complex.

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?

EDIT: A+B and part of C is currently in progress in #9128.

[castroCrea]

Thank for the response @Reinmar I think that :

• C is the must have (because is a really natural behavior)
• A is a nice to have (because a H case, it actually already work to drag content from chrome to ckeditor5)
• B and D on my sens are different story but kind of the same, it will be great to have already one of it. But for me D will propulse ckeditor5 to the next level (a Notion like editor), witch start to be the norme. Don't you think ? So for me D is a must have

If I can help ?!

[zadam]

• C is the must have (people often don't know how to reposition the image/table without drag & drop)
• A + B are nice to have
• D is awesome to have

[demtzu]

• A = Nice to have
• B = Nice to have
• C = Must have!
• D = 😍

[neongreen]

C: must have ABD: don't care

[mechanicals]

C: definitely must have

[NathanDonovan]

C: must have D: super cool! Being able to move widgets solves a lot of problems I think.

[Reinmar]

Thank you, all :)!

I think it's perfectly clear now that C should be the first step.

[lkjx19812006]

A = Nice to have B = Nice to have C = Must have! D = 😍

[davebillmaier]

For our application, rearranging text blocks is key, so we're primarily looking for: B or D

[adamerose]

C and D for me too.

My current app design is a separate CKE component for each list item with an external drag handle, but would be nice if this was built right in. I'd love to hear what the current timeline looks like for this.

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

[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

https://github.com/ckeditor/ckeditor5/assets/9881379/081f6ebb-d467-4d21-9d26-bc0141c70256

• 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.