From ed3d07eec8d843ca12d48d970270e315156ee4a5 Mon Sep 17 00:00:00 2001 From: godai78 Date: Wed, 27 Sep 2023 09:35:24 +0200 Subject: [PATCH] Docs: Changes to the drag and drop behaviorin guides. [short flow] --- docs/examples/builds/balloon-block-editor.md | 3 +- .../docs/features/drag-drop.md | 39 ++----------------- .../docs/features/blocktoolbar.md | 2 +- 3 files changed, 6 insertions(+), 38 deletions(-) diff --git a/docs/examples/builds/balloon-block-editor.md b/docs/examples/builds/balloon-block-editor.md index 9b86e80834c..279b41e2ad2 100644 --- a/docs/examples/builds/balloon-block-editor.md +++ b/docs/examples/builds/balloon-block-editor.md @@ -11,7 +11,8 @@ classes: main__content--no-toc {@link installation/getting-started/predefined-builds#balloon-block-editor Balloon block editor} lets you create your content directly in its target location with the help of two toolbars: * a balloon toolbar that appears next to the selected editable document element (offering inline content formatting tools), -* a {@link features/blocktoolbar block toolbar} accessible using a button attached to the editable content area and following the selection in the document (bringing additional block formatting tools). +* a {@link features/blocktoolbar block toolbar} accessible using a button (`⠿`) attached to the editable content area and following the selection in the document (bringing additional block formatting tools), +* the `⠿` toolbar is also a handle that can be used to drag and drop blocks around the content. {@snippet examples/balloon-block-editor} diff --git a/packages/ckeditor5-clipboard/docs/features/drag-drop.md b/packages/ckeditor5-clipboard/docs/features/drag-drop.md index 6d3dfa79d03..596eade16f4 100644 --- a/packages/ckeditor5-clipboard/docs/features/drag-drop.md +++ b/packages/ckeditor5-clipboard/docs/features/drag-drop.md @@ -57,15 +57,13 @@ The {@link module:clipboard/dragdrop~DragDrop `DragDrop`} plugin will activate a ## Drag and drop of content blocks -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. +The drag and drop plugin enables 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. Functions introduced in the initial release include: * Selection of the text, elements, multiple blocks, and moving these around. * Placement of blocks inside other blocks such as tables, blockquotes, etc. -* The pilcrow icon {@icon @ckeditor/ckeditor5-core/theme/icons/pilcrow.svg} in the balloon block editor now behaves as a drag handle. - -Feedback for the drag and drop of blocks is gathered in [issue #7731](https://github.com/ckeditor/ckeditor5/issues/7731). If you have any thoughts on what should work better, leave us a comment! +* The braille dots panel icon (`⠿`) in the balloon block editor now behaves as a drag handle. ### Classic editor demo @@ -73,43 +71,12 @@ Select a block or blocks, and drag them across the document. You can place block {@snippet features/block-drag-drop} -#### Installation - - - 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. - - ### Balloon block editor demo -In the balloon block editor, you can also drag content blocks using the drag handle. Select or focus on the block, and then drag the block with the pilcrow icon {@icon @ckeditor/ckeditor5-core/theme/icons/pilcrow.svg}. +In the balloon block editor, you can also drag content blocks using the drag handle. Select or focus on the block, and then drag the block with the braille dots panel icon (`⠿`). {@snippet features/block-balloon-drag-drop} -#### Installation - -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 { - DragDrop, - DragDropBlockToolbar, -} from '@ckeditor/ckeditor5-clipboard'; -import { BlockToolbar } from '@ckeditor/ckeditor5-ui'; - -BalloonEditor.create(document.querySelector( '#editor' ), { - plugins: [ - Clipboard, - DragDrop, - DragDropBlockToolbar, - BlockToolbar, - /* ... */ - ], -}) - .then( /* ... */ ) - .catch( /* ... */ ); -``` - ## Styling the drag and drop The drag and drop target line color is managed by CSS variable (`--ck-clipboard-drop-target-color`). You can use the following snippet to change the color of the line: diff --git a/packages/ckeditor5-ui/docs/features/blocktoolbar.md b/packages/ckeditor5-ui/docs/features/blocktoolbar.md index 870e177a5ad..e7901fdc1aa 100644 --- a/packages/ckeditor5-ui/docs/features/blocktoolbar.md +++ b/packages/ckeditor5-ui/docs/features/blocktoolbar.md @@ -10,7 +10,7 @@ The block toolbar plugin provides an additional [configurable](#configuration) t ## Demo - In the editor below, move the caret around the content. You'll see that the block toolbar button (¶) is following your selection. Click the button to show the toolbar. + In the editor below, move the caret around the content. You'll see that the block toolbar button (`⠿`) is following your selection. Click the button to show the toolbar. {@snippet features/blocktoolbar}