Skip to content

Commit

Permalink
Merge pull request #15016 from ckeditor/ck/14734-enable-block-drag-an…
Browse files Browse the repository at this point in the history
…d-drop-by-default

Feature (clipboard): Block drag and drop should be enabled by default. Closes #14734.
  • Loading branch information
niegowski authored Sep 26, 2023
2 parents 332d36a + dae7824 commit a9eff48
Show file tree
Hide file tree
Showing 17 changed files with 1,165 additions and 3,754 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
//

import {
DragDropExperimental,
DragDrop,
DragDropBlockToolbar
} from '@ckeditor/ckeditor5-clipboard';
import { BlockToolbar } from '@ckeditor/ckeditor5-ui';
Expand Down Expand Up @@ -141,14 +141,14 @@ ClassicEditor.defaultConfig = defaultConfig;
class ClassicEditorExperimental extends ClassicEditorBase {}
ClassicEditorExperimental.builtinPlugins = [
...defaultPlugins,
DragDropExperimental
DragDrop
];
ClassicEditorExperimental.defaultConfig = defaultConfig;

class BalloonEditorExperimental extends BalloonEditorBase {}
BalloonEditorExperimental.builtinPlugins = [
...defaultPlugins,
DragDropExperimental,
DragDrop,
DragDropBlockToolbar,
BlockToolbar
];
Expand Down
25 changes: 6 additions & 19 deletions packages/ckeditor5-clipboard/docs/features/drag-drop.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,6 @@ The {@link module:clipboard/dragdrop~DragDrop `DragDrop`} plugin will activate a

In the v38.0.0 release, we introduced plugins that enable dragging content blocks such as paragraphs, tables, or lists inside the editor. This allows you to select an entire block or multiple blocks, and move them before or after other blocks.

<info-box warning>
This block drag and drop is still an **experimental feature**. It is available for users, developers, and enthusiasts, who want to test the new functionality and provide feedback to the product team. Usage in production environments may result in errors.
</info-box>

Functions introduced in the initial release include:

* Selection of the text, elements, multiple blocks, and moving these around.
Expand All @@ -79,18 +75,9 @@ Select a block or blocks, and drag them across the document. You can place block

#### Installation

To enable the block drag and drop in a classic editor, you need to add the {@link module:clipboard/dragdropexperimental~DragDropExperimental `DragDropExperimental`} module to your editor configuration:

```js
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Clipboard, DragDropExperimental } from '@ckeditor/ckeditor5-clipboard';

ClassicEditor.create( document.querySelector( '#editor' ), {
plugins: [ Clipboard, DragDropExperimental, /* ... */ ],
})
.then( /* ... */ )
.catch( /* ... */ );
```
<info-box info>
This feature is required by the clipboard plugin and is enabled by default in all {@link installation/getting-started/predefined-builds predefined builds}. These installation instructions are for developers interested in building their own custom rich-text editor.
</info-box>

### Balloon block editor demo

Expand All @@ -100,20 +87,20 @@ In the balloon block editor, you can also drag content blocks using the drag han

#### Installation

To enable the block drag and drop in a balloon block editor, you need to add the {@link module:clipboard/dragdropexperimental~DragDropExperimental `DragDropExperimental`} and the {@link module:clipboard/dragdropblocktoolbar~DragDropBlockToolbar `DragDropBlockToolbar`} modules to your editor configuration::
To enable the block drag and drop in a balloon block editor, you need to add the {@link module:clipboard/dragdrop~DragDrop `DragDrop`} and the {@link module:clipboard/dragdropblocktoolbar~DragDropBlockToolbar `DragDropBlockToolbar`} modules to your editor configuration::

```js
import { BalloonEditor } from '@ckeditor/ckeditor5-editor-balloon';
import {
DragDropExperimental,
DragDrop,
DragDropBlockToolbar,
} from '@ckeditor/ckeditor5-clipboard';
import { BlockToolbar } from '@ckeditor/ckeditor5-ui';

BalloonEditor.create(document.querySelector( '#editor' ), {
plugins: [
Clipboard,
DragDropExperimental,
DragDrop,
DragDropBlockToolbar,
BlockToolbar,
/* ... */
Expand Down
2 changes: 0 additions & 2 deletions packages/ckeditor5-clipboard/src/augmentation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import type {
ClipboardPipeline,
PastePlainText,
DragDrop,
DragDropExperimental,
DragDropTarget,
DragDropBlockToolbar
} from './index';
Expand All @@ -19,7 +18,6 @@ declare module '@ckeditor/ckeditor5-core' {
[ ClipboardPipeline.pluginName ]: ClipboardPipeline;
[ PastePlainText.pluginName ]: PastePlainText;
[ DragDrop.pluginName ]: DragDrop;
[ DragDropExperimental.pluginName ]: DragDropExperimental;
[ DragDropTarget.pluginName ]: DragDropTarget;
[ DragDropBlockToolbar.pluginName ]: DragDropBlockToolbar;
}
Expand Down
Loading

0 comments on commit a9eff48

Please sign in to comment.