Drag and Drop of blocks

[Witoso]

Currently, CKEditor 5 allows dragging textual content and objects (like images or tables). Such content can be then dropped at any possible caret position. It allows the rearranging of parts of the content without cutting and pasting them. It’s a feature implemented by all rich text editors for decades.

However, the “inline” mode of this feature does not enable the user to quickly and efficiently rearrange content blocks (e.g. paragraphs, headings, list items, images, or tables). Therefore, modern content authoring tools such as Notion popularized a block-based drag-and-drop functionality. In such implementations, entire content blocks can be easily grabbed and moved up/down in the document.

We plan to introduce a block-based drag-and-drop functionality to CKEditor 5 to boost content creators’ productivity and “modernize” the UX of the editor.

Experiment

• [Experimental] Drag and Drop of blocks #14033

Stabilizing

The stabilization efforts will consist of bug fixing as well as adding a few new behaviors if the time frame allows.

Bug fixing

• [Drag & Drop] Preview logic requires tweaking.  #14968
• [Drag & drop] Upload image issues #14740
• [Drag & drop] Don't replace the image if dropped below #14710
• [Drag & drop, intro] Blockquote formatting is lost #14640
• Not able to select whole paragraph with triple click when there is a table right after it #11130
• [Drag & drop, intro] Prevent dropping in the impossible places (a.k.a. inception) #14709
• [Drag & drop] Balloon block button #15029

New behaviors

• [Drag & drop, intro] Improve the drop target line #14645
• [Drag & drop] Improve images preview #14744
• [Drag & drop + Balloon block, intro] Change the default icon #14646
• [Drag & drop] Handle of list item's selection and dropping (document lists) #14969

Enablement

• [Drag & drop] Enable block drag and drop by default #14734
• [Drag and drop] Test coverage #14831

Community feedback

• Add support for content drag&drop #2664
• Cannot drop between widgets #12894

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Witoso]

Further enhancements extracted to the #15110.