Merge pull request #8649 from ckeditor/i/7945

Feature (ui): Items baked into editor bundles can be removed from the toolbar by using `config.toolbar.removeItems`. Closes #7945. MINOR BREAKING CHANGE (ui): Configuration passed to `ToolbarView.fillFromConfig()` will be stripped off of leading, trailing, and duplicated separators ('|' and '-').
ckeditor · Dec 22, 2020 · 1af9e7b · 1af9e7b
2 parents 6175a20 + 09a6a83
commit 1af9e7b
Show file tree

Hide file tree

Showing 17 changed files with 300 additions and 85 deletions.
diff --git a/docs/_snippets/examples/multi-root-editor.js b/docs/_snippets/examples/multi-root-editor.js
@@ -14,7 +14,6 @@ import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
-import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
 import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
 import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
@@ -159,14 +158,6 @@ class MultirootEditorUI extends EditorUI {
 		 * @member {module:ui/editorui/editoruiview~EditorUIView} #view
 		 */
 		this.view = view;
-
-		/**
-		 * A normalized `config.toolbar` object.
-		 *
-		 * @type {Object}
-		 * @private
-		 */
-		this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );
 	}
 
 	/**
@@ -285,7 +276,7 @@ class MultirootEditorUI extends EditorUI {
 		const view = this.view;
 		const toolbar = view.toolbar;
 
-		toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
+		toolbar.fillFromConfig( editor.config.get( 'toolbar' ), this.componentFactory );
 
 		enableToolbarKeyboardFocus( {
 			origin: editor.editing.view,

diff --git a/docs/builds/guides/integration/configuration.md b/docs/builds/guides/integration/configuration.md
@@ -51,7 +51,7 @@ ClassicEditor
 	} );
 ```
 <info-box>
-	Be careful when removing plugins from CKEditor builds using `config.removePlugins`. If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build will become invalid. In such case you need to provide the {@link features/toolbar updated toolbar configuration} as in the example above.
+	Be careful when removing plugins from CKEditor builds using `config.removePlugins`. If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build will become invalid. In such case you need to provide the {@link features/toolbar updated toolbar configuration} as in the example above or by providing only items that need to be removed using `config.toolbar.removeItems`.
 </info-box>
 
 ### List of plugins

diff --git a/docs/features/toolbar.md b/docs/features/toolbar.md
@@ -71,6 +71,8 @@ toolbar: {
 
  * **`items`** &ndash; An array of toolbar item names. Most of the components (buttons, dropdowns, etc.) which can be used as toolbar items are described under the {@link features/index Features} tab. A full list is defined in {@link module:ui/componentfactory~ComponentFactory editor.ui.componentFactory} and can be listed using the following snippet: `Array.from( editor.ui.componentFactory.names() )`. Besides button names, you can also use the dedicated separators for toolbar groups (`'|'`) and toolbar lines (`'-'`).
 
+ * **`removeItems`** &ndash; An array of toolbar item names. With this setting you can modify the default toolbar configuration without the need of defining the entire list (you can specify a couple of buttons that you want to remove instead of specifying all the buttons you want to keep). If, after removing an item, toolbar will have two or more consecutive separators (`'|'`), the duplicates will be removed automatically.
+
  * **`viewportTopOffset`** &ndash; The offset (in pixels) from the top of the viewport used when positioning a sticky toolbar. Useful when a page with which the editor is being integrated has some other sticky or fixed elements (e.g. the top menu). Thanks to setting the toolbar offset, the toolbar will not be positioned underneath or above the page's UI.
 
  * **`shouldNotGroupWhenFull`** &ndash; When set to `true`, the toolbar will stop grouping items and let them wrap to the next line when there is not enough space to display them in a single row. This setting is `false` by default, which enables items grouping.

diff --git a/docs/framework/guides/custom-editor-creator.md b/docs/framework/guides/custom-editor-creator.md
@@ -126,7 +126,6 @@ The `*EditorUI` class is the main UI class which initializes UI components (the
 ```js
 import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
-import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
 import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
 
 /**
@@ -151,14 +150,6 @@ class MultirootEditorUI extends EditorUI {
 		 * @member {module:ui/editorui/editoruiview~EditorUIView} #view
 		 */
 		this.view = view;
-
-		/**
-		 * A normalized `config.toolbar` object.
-		 *
-		 * @type {Object}
-		 * @private
-		 */
-		this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );
 	}
 
 	/**
@@ -276,7 +267,7 @@ class MultirootEditorUI extends EditorUI {
 		const view = this.view;
 		const toolbar = view.toolbar;
 
-		toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
+		toolbar.fillFromConfig( editor.config.get( 'toolbar' ), this.componentFactory );
 
 		enableToolbarKeyboardFocus( {
 			origin: editor.editing.view,

diff --git a/packages/ckeditor5-build-classic/tests/ckeditor.js b/packages/ckeditor5-build-classic/tests/ckeditor.js
@@ -200,6 +200,21 @@ describe( 'ClassicEditor build', () => {
 					expect( editor.ui.view.stickyPanel.viewportTopOffset ).to.equal( 42 );
 				} );
 		} );
+
+		it( 'allows removing built-in toolbar items', () => {
+			return ClassicEditor
+				.create( editorElement, {
+					toolbar: {
+						removeItems: [ 'italic' ]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					expect( editor.ui.view.toolbar.items.length ).to.equal( 16 );
+					expect( editor.ui.view.toolbar.items.find( item => item.label === 'Italic' ) ).to.be.undefined;
+				} );
+		} );
 	} );
 
 	describeMemoryUsage( () => {

diff --git a/packages/ckeditor5-editor-classic/src/classiceditorui.js b/packages/ckeditor5-editor-classic/src/classiceditorui.js
@@ -148,7 +148,7 @@ export default class ClassicEditorUI extends EditorUI {
 			view.stickyPanel.viewportTopOffset = this._toolbarConfig.viewportTopOffset;
 		}
 
-		view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
+		view.toolbar.fillFromConfig( this._toolbarConfig, this.componentFactory );
 
 		enableToolbarKeyboardFocus( {
 			origin: editingView,

diff --git a/packages/ckeditor5-editor-classic/tests/classiceditorui.js b/packages/ckeditor5-editor-classic/tests/classiceditorui.js
@@ -198,6 +198,24 @@ describe( 'ClassicEditorUI', () => {
 							return editor.destroy();
 						} );
 				} );
+
+				it( 'can be removed using config.toolbar.removeItems', () => {
+					return VirtualClassicTestEditor
+						.create( '', {
+							toolbar: {
+								items: [ 'foo', 'bar' ],
+								removeItems: [ 'bar' ]
+							}
+						} )
+						.then( editor => {
+							const items = editor.ui.view.toolbar.items;
+
+							expect( items.get( 0 ).name ).to.equal( 'foo' );
+							expect( items.length ).to.equal( 1 );
+
+							return editor.destroy();
+						} );
+				} );
 			} );
 		} );
 

diff --git a/packages/ckeditor5-editor-decoupled/src/decouplededitorui.js b/packages/ckeditor5-editor-decoupled/src/decouplededitorui.js
@@ -9,7 +9,6 @@
 
 import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
-import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
 import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
 
 /**
@@ -34,14 +33,6 @@ export default class DecoupledEditorUI extends EditorUI {
 		 * @member {module:ui/editorui/editoruiview~EditorUIView} #view
 		 */
 		this.view = view;
-
-		/**
-		 * A normalized `config.toolbar` object.
-		 *
-		 * @type {Object}
-		 * @private
-		 */
-		this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );
 	}
 
 	/**
@@ -114,7 +105,7 @@ export default class DecoupledEditorUI extends EditorUI {
 		const view = this.view;
 		const toolbar = view.toolbar;
 
-		toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
+		toolbar.fillFromConfig( editor.config.get( 'toolbar' ), this.componentFactory );
 
 		enableToolbarKeyboardFocus( {
 			origin: editor.editing.view,

diff --git a/packages/ckeditor5-editor-decoupled/tests/decouplededitorui.js b/packages/ckeditor5-editor-decoupled/tests/decouplededitorui.js
@@ -170,6 +170,24 @@ describe( 'DecoupledEditorUI', () => {
 							return editor.destroy();
 						} );
 				} );
+
+				it( 'can be removed using config.toolbar.removeItems', () => {
+					return VirtualDecoupledTestEditor
+						.create( '', {
+							toolbar: {
+								items: [ 'foo', 'bar' ],
+								removeItems: [ 'bar' ]
+							}
+						} )
+						.then( editor => {
+							const items = editor.ui.view.toolbar.items;
+
+							expect( items.get( 0 ).name ).to.equal( 'foo' );
+							expect( items.length ).to.equal( 1 );
+
+							return editor.destroy();
+						} );
+				} );
 			} );
 		} );
 

diff --git a/packages/ckeditor5-editor-inline/src/inlineeditorui.js b/packages/ckeditor5-editor-inline/src/inlineeditorui.js
@@ -142,7 +142,7 @@ export default class InlineEditorUI extends EditorUI {
 			}
 		} );
 
-		toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
+		toolbar.fillFromConfig( this._toolbarConfig, this.componentFactory );
 
 		enableToolbarKeyboardFocus( {
 			origin: editingView,

diff --git a/packages/ckeditor5-editor-inline/tests/inlineeditorui.js b/packages/ckeditor5-editor-inline/tests/inlineeditorui.js
@@ -223,6 +223,24 @@ describe( 'InlineEditorUI', () => {
 						return editor.destroy();
 					} );
 			} );
+
+			it( 'can be removed using config.toolbar.removeItems', () => {
+				return VirtualInlineTestEditor
+					.create( '', {
+						toolbar: {
+							items: [ 'foo', 'bar' ],
+							removeItems: [ 'bar' ]
+						}
+					} )
+					.then( editor => {
+						const items = editor.ui.view.toolbar.items;
+
+						expect( items.get( 0 ).name ).to.equal( 'foo' );
+						expect( items.length ).to.equal( 1 );
+
+						return editor.destroy();
+					} );
+			} );
 		} );
 
 		it( 'initializes keyboard navigation between view#toolbar and view#editable', () => {

diff --git a/packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js b/packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js
@@ -185,7 +185,7 @@ export default class BalloonToolbar extends Plugin {
 	afterInit() {
 		const factory = this.editor.ui.componentFactory;
 
-		this.toolbarView.fillFromConfig( this._balloonConfig.items, factory );
+		this.toolbarView.fillFromConfig( this._balloonConfig, factory );
 	}
 
 	/**

diff --git a/packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js b/packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js
@@ -179,7 +179,7 @@ export default class BlockToolbar extends Plugin {
 		const factory = this.editor.ui.componentFactory;
 		const config = this._blockToolbarConfig;
 
-		this.toolbarView.fillFromConfig( config.items, factory );
+		this.toolbarView.fillFromConfig( config, factory );
 
 		// Hide panel before executing each button in the panel.
 		for ( const item of this.toolbarView.items ) {

diff --git a/packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js b/packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js
@@ -18,6 +18,7 @@
  *
  *		toolbar: {
  *			items: [ 'heading', 'bold', 'italic', 'link', ... ],
+ *			removeItems: [ 'bold' ],
  *			...
  *		}
  *
@@ -31,17 +32,20 @@
 export default function normalizeToolbarConfig( config ) {
 	if ( Array.isArray( config ) ) {
 		return {
-			items: config
+			items: config,
+			removeItems: []
 		};
 	}
 
 	if ( !config ) {
 		return {
-			items: []
+			items: [],
+			removeItems: []
 		};
 	}
 
 	return Object.assign( {
-		items: []
+		items: [],
+		removeItems: []
 	}, config );
 }