Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable block drag and drop by default #15016

Merged
merged 13 commits into from
Sep 26, 2023
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