Merge pull request #14914 from ckeditor/ck/14646-drag-and-drop-change…

…-the-default-icon

Other (ui): Changed the default icon for `BallonEditor` and add ability to customize it. Closes #14646.

docs/features/toolbar.md

@@ -206,6 +206,8 @@ You can use one of the icons listed below for your dropdown:
 | `'paragraph'`     | {@icon @ckeditor/ckeditor5-core/theme/icons/paragraph.svg Paragraph}        |
 | `'text'`          | {@icon @ckeditor/ckeditor5-core/theme/icons/text.svg Text}                  |
 | `'plus'`          | {@icon @ckeditor/ckeditor5-core/theme/icons/plus.svg Plus}                  |
+| `'dragIndicator'` | {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} |
+| `'pilcrow'`       | {@icon @ckeditor/ckeditor5-core/theme/icons/pilcrow.svg Pilcrow}            |
 
 * The default icons are loaded from the `ckeditor5-core` package.
 * If no icon is specified, `'threeVerticalDots'` will be used as a default.

packages/ckeditor5-clipboard/tests/manual/dragdropexperimental.html

@@ -181,7 +181,7 @@ <h2>The editable</h2>
 <h2>Balloon Block Editor</h2>
 
 <div class="wrapper">
-	<div id="editor-balloon">
+	<div id="editor-balloon" class="editor-balloon">
 		<h2>The three greatest things you learn from traveling</h2>
 		<p>
 			Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons
@@ -222,8 +222,53 @@ <h3>Confidence</h3>
 	</div>
 </div>
 
+<h2>Balloon Block Editor with custom icon</h2>
+
+<div class="wrapper">
+	<div id="editor-balloon-custom-icon" class="editor-balloon">
+		<h2>The three greatest things you learn from traveling</h2>
+		<p>
+			Like all the great things on earth traveling teaches us by example. Here are some of the most precious
+			lessons
+			I’ve learned over the years of traveling.
+		</p>
+
+		<figure class="image">
+			<img src="sample.jpg" alt="Three monks ascending the stairs of an ancient temple.">
+			<figcaption>Three monks ascending the stairs of an ancient temple.</figcaption>
+		</figure>
+
+		<h3>Appreciation of diversity</h3>
+		<p>
+			Getting used to an entirely different culture can be challenging. While it’s also nice to learn about
+			cultures online or from books, nothing comes close to experiencing cultural diversity in person.
+			You learn to appreciate each and every single one of the differences while you become more culturally fluid.
+		</p>
+
+		<h3>Improvisation</h3>
+		<p>
+			Life doesn't allow us to execute every single plan perfectly. This especially seems to be the case when
+			you travel. You plan it down to every minute with a big checklist. But when it comes to executing it,
+			something always comes up and you’re left with your improvising skills. You learn to adapt as you go.
+			Here’s how my travel checklist looks now:
+		</p>
+
+		<ul>
+			<li>buy the ticket</li>
+			<li>start your adventure</li>
+		</ul>
+
+		<h3>Confidence</h3>
+		<p>
+			Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling
+			teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your
+			fear and see there is nothing to be afraid of, is the moment you discover bliss.
+		</p>
+	</div>
+</div>
+
 <style>
-	#editor-balloon {
+	.editor-balloon {
 		margin: 0 auto;
 		max-width: 800px;
 	}

packages/ckeditor5-clipboard/tests/manual/dragdropexperimental.js

@@ -303,3 +303,41 @@ BalloonEditor
 	.catch( err => {
 		console.error( err.stack );
 	} );
+
+BalloonEditor
+	.create( document.querySelector( '#editor-balloon-custom-icon' ), {
+		plugins: [
+			Essentials, List, Paragraph, Heading,
+			Image, ImageResize, ImageStyle, ImageToolbar, ImageCaption,
+			HeadingButtonsUI, ParagraphButtonUI, BlockToolbar, Table, TableToolbar,
+			CloudServices, ImageUpload, EasyImage, DragDropBlockToolbar, DragDropExperimental
+		],
+		cloudServices: CS_CONFIG,
+		blockToolbar: {
+			items: [ 'paragraph', 'heading1', 'heading2', 'heading3', 'bulletedList', 'numberedList',
+				'paragraph', 'heading1', 'heading2', 'heading3', 'bulletedList', 'numberedList', 'paragraph', 'heading1', 'heading2',
+				'heading3', 'bulletedList', 'numberedList', 'insertTable', 'uploadImage' ],
+			icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">' +
+			'<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>'
+		},
+		image: {
+			toolbar: [
+				'imageTextAlternative', 'toggleImageCaption', '|',
+				'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', 'imageStyle:side', '|',
+				'resizeImage'
+			]
+		},
+		table: {
+			contentToolbar: [
+				'tableColumn', 'tableRow', 'mergeTableCells', 'toggleTableCaption'
+			]
+		}
+	} )
+	.then( editor => {
+		window.editorBalloonCustomIcon = editor;
+
+		CKEditorInspector.attach( { balloonCustomIcon: editor } );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-core/src/editor/editorconfig.ts

@@ -375,7 +375,7 @@ export interface EditorConfig {
 	 *	* **Selecting an icon**
 	 *
 	 *		You can use one of the common icons provided by the editor (`'bold'`, `'plus'`, `'text'`, `'importExport'`, `'alignLeft'`,
-	 *		`'paragraph'`, `'threeVerticalDots'`):
+	 *		`'paragraph'`, `'threeVerticalDots'`, `'dragIndicator'`, `'pilcrow'`):
 	 *
 	 *		```ts
 	 *		{

packages/ckeditor5-core/src/index.ts

@@ -66,6 +66,7 @@ import pencil from './../theme/icons/pencil.svg';
 import pilcrow from './../theme/icons/pilcrow.svg';
 import quote from './../theme/icons/quote.svg';
 import threeVerticalDots from './../theme/icons/three-vertical-dots.svg';
+import dragIndicator from './../theme/icons/drag-indicator.svg';
 
 import bold from './../theme/icons/bold.svg';
 import paragraph from './../theme/icons/paragraph.svg';
@@ -111,7 +112,8 @@ export const icons = {
 	pencil,
 	pilcrow,
 	quote,
-	threeVerticalDots
+	threeVerticalDots,
+	dragIndicator
 };
 
 import './augmentation';

packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css

@@ -10,6 +10,7 @@
 	--ck-balloon-arrow-offset: 0px;
 	--ck-balloon-arrow-half-width: 4px;
 	--ck-balloon-arrow-height: 4px;
+	--ck-tooltip-text-padding: 4px;
 	--ck-color-panel-background: var(--ck-color-tooltip-background);
 
 	padding: 0 var(--ck-spacing-medium);
@@ -20,6 +21,12 @@
 		color: var(--ck-color-tooltip-text);
 	}
 
+	&.ck-tooltip_multi-line .ck-tooltip__text {
+		white-space: break-spaces;
+		display: inline-block;
+		padding: var(--ck-tooltip-text-padding) 0;
+	}
+
 	/* Reset balloon panel styles */
 	box-shadow: none;
 

packages/ckeditor5-ui/docs/features/blocktoolbar.md

@@ -112,6 +112,35 @@ BalloonEditor
 	.catch( /* ... */ );
 ```
 
+You can also change the current default toolbar icon `'dragIndicator'` {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} by choosing predefined icon from {@link features/toolbar#changing-the-icon list} using option `icon` or by passing a `SVG` string:
+
+```js
+import { BlockToolbar } from '@ckeditor/ckeditor5-ui';
+import { HeadingButtonsUI } from '@ckeditor/ckeditor5-heading';
+import { ParagraphButtonUI } from '@ckeditor/ckeditor5-paragraph';
+
+BalloonEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ BlockToolbar, ParagraphButtonUI, HeadingButtonsUI, /* ... */ ],
+		blockToolbar: {
+			items: [
+				'paragraph', 'heading1', 'heading2', 'heading3',
+				'|',
+				'bulletedList', 'numberedList',
+				'|',
+				'blockQuote', 'uploadImage'
+			],
+			icon: 'pilcrow',
+			// or
+			icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">' +
+					'<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>'
+		},
+		toolbar: [ /* ... */ ]
+	} )
+	.then( /* ... */ )
+	.catch( /* ... */ );
+```
+
 <info-box info>
 	Read more about {@link installation/plugins/installing-plugins installing plugins}.
 </info-box>

packages/ckeditor5-ui/lang/contexts.json

@@ -2,6 +2,8 @@
 	"Rich Text Editor": "Title of the CKEditor5 editor.",
 	"Editor editing area: %0": "Accessible label of the specific editing area belonging to a container with an ARIA application role.",
 	"Edit block": "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)",
+	"Click to edit block": "First part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)",
+	"Drag to move": "Second part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)",
 	"Next": "Label for a button showing the next thing (tab, page, etc.).",
 	"Previous": "Label for a button showing the previous thing (tab, page, etc.).",
 	"Editor toolbar": "Label used by assistive technologies describing a generic editor toolbar.",

packages/ckeditor5-ui/package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@ckeditor/ckeditor5-basic-styles": "39.0.2",
     "@ckeditor/ckeditor5-block-quote": "39.0.2",
+    "@ckeditor/ckeditor5-clipboard": "39.0.2",
     "@ckeditor/ckeditor5-editor-balloon": "39.0.2",
     "@ckeditor/ckeditor5-editor-classic": "39.0.2",
     "@ckeditor/ckeditor5-editor-multi-root": "39.0.2",

packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.ts

@@ -11,7 +11,6 @@
 
 import {
 	Plugin,
-	icons,
 	type Editor
 } from '@ckeditor/ckeditor5-core';
 
@@ -26,15 +25,14 @@ import type { DocumentSelectionChangeRangeEvent } from '@ckeditor/ckeditor5-engi
 
 import BlockButtonView from './blockbuttonview';
 import BalloonPanelView from '../../panel/balloon/balloonpanelview';
-import ToolbarView from '../toolbarview';
+import ToolbarView, { NESTED_TOOLBAR_ICONS } from '../toolbarview';
 import clickOutsideHandler from '../../bindings/clickoutsidehandler';
 import normalizeToolbarConfig from '../normalizetoolbarconfig';
 
 import type { ButtonExecuteEvent } from '../../button/button';
 import type { EditorUIUpdateEvent } from '../../editorui/editorui';
 
 const toPx = toUnit( 'px' );
-const { pilcrow } = icons;
 
 /**
  * The block toolbar plugin.
@@ -147,6 +145,20 @@ export default class BlockToolbar extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
+		const t = editor.t;
+
+		const editBlockText = t( 'Click to edit block' );
+		const dragToMoveText = t( 'Drag to move' );
+		const editBlockLabel = t( 'Edit block' );
+
+		const isDragDropBlockToolbarPluginLoaded = editor.plugins.has( 'DragDropBlockToolbar' );
+		const label = isDragDropBlockToolbarPluginLoaded ? `${ editBlockText }\n${ dragToMoveText }` : editBlockLabel;
+
+		this.buttonView.label = label;
+
+		if ( isDragDropBlockToolbarPluginLoaded ) {
+			this.buttonView.element!.dataset.ckeTooltipClass = 'ck-tooltip_multi-line';
+		}
 
 		// Hides panel on a direct selection change.
 		this.listenTo<DocumentSelectionChangeRangeEvent>( editor.model.document.selection, 'change:range', ( evt, data ) => {
@@ -255,10 +267,13 @@ export default class BlockToolbar extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 		const buttonView = new BlockButtonView( editor.locale );
+		const iconFromConfig = this._blockToolbarConfig.icon;
+
+		const icon = NESTED_TOOLBAR_ICONS[ iconFromConfig! ] || iconFromConfig || NESTED_TOOLBAR_ICONS.dragIndicator;
 
 		buttonView.set( {
 			label: t( 'Edit block' ),
-			icon: pilcrow,
+			icon,
 			withText: false
 		} );
 

packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.ts

@@ -41,6 +41,7 @@ export default function normalizeToolbarConfig(
 	items: Array<ToolbarConfigItem>;
 	removeItems: Array<string>;
 	shouldNotGroupWhenFull?: boolean;
+	icon?: string;
 } {
 	if ( Array.isArray( config ) ) {
 		return {

packages/ckeditor5-ui/src/toolbar/toolbarview.ts

@@ -47,14 +47,16 @@ import '../../theme/components/toolbar/toolbar.css';
 
 const { threeVerticalDots } = icons;
 
-const NESTED_TOOLBAR_ICONS: Record<string, string | undefined> = {
+export const NESTED_TOOLBAR_ICONS: Record<string, string | undefined> = {
 	alignLeft: icons.alignLeft,
 	bold: icons.bold,
 	importExport: icons.importExport,
 	paragraph: icons.paragraph,
 	plus: icons.plus,
 	text: icons.text,
-	threeVerticalDots: icons.threeVerticalDots
+	threeVerticalDots: icons.threeVerticalDots,
+	pilcrow: icons.pilcrow,
+	dragIndicator: icons.dragIndicator
 };
 
 /**