@ckeditor/ckeditor5-ui 35.0.1 → 35.2.0

package/src/toolbar/balloon/balloontoolbar.js

@@ -79,6 +79,13 @@ export default class BalloonToolbar extends Plugin {
 			this.focusTracker.add( this.toolbarView.element );
 		} );
 
+		// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+		editor.ui.addToolbar( this.toolbarView, {
+			beforeFocus: () => this.show( true ),
+			afterBlur: () => this.hide(),
+			isContextual: true
+		} );
+
 		/**
 		 * An instance of the resize observer that allows to respond to changes in editable's geometry
 		 * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
@@ -196,12 +203,14 @@ export default class BalloonToolbar extends Plugin {
 	 * @returns {module:ui/toolbar/toolbarview~ToolbarView}
 	 */
 	_createToolbarView() {
+		const t = this.editor.locale.t;
 		const shouldGroupWhenFull = !this._balloonConfig.shouldNotGroupWhenFull;
 		const toolbarView = new ToolbarView( this.editor.locale, {
 			shouldGroupWhenFull,
 			isFloating: true
 		} );
 
+		toolbarView.ariaLabel = t( 'Editor contextual toolbar' );
 		toolbarView.render();
 
 		return toolbarView;
@@ -211,8 +220,11 @@ export default class BalloonToolbar extends Plugin {
 	 * Shows the toolbar and attaches it to the selection.
 	 *
 	 * Fires {@link #event:show} event which can be stopped to prevent the toolbar from showing up.
+	 *
+	 * @param {Boolean} [showForCollapsedSelection=false] When set `true`, the toolbar will show despite collapsed selection in the
+	 * editing view.
 	 */
-	show() {
+	show( showForCollapsedSelection = false ) {
 		const editor = this.editor;
 		const selection = editor.model.document.selection;
 		const schema = editor.model.schema;
@@ -223,7 +235,7 @@ export default class BalloonToolbar extends Plugin {
 		}
 
 		// Do not show the toolbar when the selection is collapsed.
-		if ( selection.isCollapsed ) {
+		if ( selection.isCollapsed && !showForCollapsedSelection ) {
 			return;
 		}
 
@@ -361,8 +373,8 @@ export default class BalloonToolbar extends Plugin {
 		const positions = isSafariIniOS ? generatePositions( {
 			// 20px when zoomed out. Less then 20px when zoomed in; the "radius" of the native selection handle gets
 			// smaller as the user zooms in. No less than the default v-offset, though.
-			verticalOffset: Math.max(
-				BalloonPanelView.arrowVerticalOffset,
+			heightOffset: Math.max(
+				BalloonPanelView.arrowHeightOffset,
 				Math.round( 20 / global.window.visualViewport.scale )
 			)
 		} ) : BalloonPanelView.defaultPositions;
@@ -426,7 +438,7 @@ function selectionContainsOnlyMultipleSelectables( selection, schema ) {
  * You can also use `'|'` to create a separator between groups of items:
  *
  *		const config = {
- *			balloonToolbar: [ 'bold', 'italic', | 'undo', 'redo' ]
+ *			balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
  *		};
  *
  * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.

package/src/toolbar/block/blocktoolbar.js

@@ -25,6 +25,7 @@ import normalizeToolbarConfig from '../normalizetoolbarconfig';
 import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
 
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
+import env from '@ckeditor/ckeditor5-utils/src/env';
 
 const toPx = toUnit( 'px' );
 
@@ -166,6 +167,12 @@ export default class BlockToolbar extends Plugin {
 				this._hidePanel();
 			}
 		} );
+
+		// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+		editor.ui.addToolbar( this.toolbarView, {
+			beforeFocus: () => this._showPanel(),
+			afterBlur: () => this._hidePanel()
+		} );
 	}
 
 	/**
@@ -221,12 +228,15 @@ export default class BlockToolbar extends Plugin {
 	 * @returns {module:ui/toolbar/toolbarview~ToolbarView}
 	 */
 	_createToolbarView() {
+		const t = this.editor.locale.t;
 		const shouldGroupWhenFull = !this._blockToolbarConfig.shouldNotGroupWhenFull;
 		const toolbarView = new ToolbarView( this.editor.locale, {
 			shouldGroupWhenFull,
 			isFloating: true
 		} );
 
+		toolbarView.ariaLabel = t( 'Editor block content toolbar' );
+
 		// When toolbar lost focus then panel should hide.
 		toolbarView.focusTracker.on( 'change:isFocused', ( evt, name, is ) => {
 			if ( !is ) {
@@ -271,6 +281,7 @@ export default class BlockToolbar extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 		const buttonView = new BlockButtonView( editor.locale );
+		const bind = buttonView.bindTemplate;
 
 		buttonView.set( {
 			label: t( 'Edit block' ),
@@ -278,6 +289,23 @@ export default class BlockToolbar extends Plugin {
 			withText: false
 		} );
 
+		// Note that this piece over here overrides the default mousedown logic in ButtonView
+		// to make it work with BlockToolbar. See the implementation of the ButtonView class to learn more.
+		buttonView.extendTemplate( {
+			on: {
+				mousedown: bind.to( evt => {
+					// On Safari we have to force the focus on a button on click as it's the only browser
+					// that doesn't do that automatically. See #12115.
+					if ( env.isSafari && this.panelView.isVisible ) {
+						this.toolbarView.focus();
+					}
+
+					// Workaround to #12184, see https://github.com/ckeditor/ckeditor5/issues/12184#issuecomment-1199147964.
+					evt.preventDefault();
+				} )
+			}
+		} );
+
 		// Bind the panelView observable properties to the buttonView.
 		buttonView.bind( 'isOn' ).to( this.panelView, 'isVisible' );
 		buttonView.bind( 'tooltip' ).to( this.panelView, 'isVisible', isVisible => !isVisible );
@@ -363,6 +391,14 @@ export default class BlockToolbar extends Plugin {
 	 * @private
 	 */
 	_showPanel() {
+		// Usually, the only way to show the toolbar is by pressing the block button. It makes it impossible for
+		// the toolbar to show up when the button is invisible (feature does not make sense for the selection then).
+		// The toolbar navigation using Alt+F10 does not access the button but shows the panel directly using this method.
+		// So we need to check whether this is possible first.
+		if ( !this.buttonView.isVisible ) {
+			return;
+		}
+
 		const wasVisible = this.panelView.isVisible;
 
 		// So here's the thing: If there was no initial panelView#show() or these two were in different order, the toolbar

package/src/toolbar/toolbarview.js

@@ -21,10 +21,24 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import { createDropdown, addToolbarToDropdown } from '../dropdown/utils';
 import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import normalizeToolbarConfig from './normalizetoolbarconfig';
+import { isObject } from 'lodash-es';
+
 import threeVerticalDots from '@ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg';
 
 import '../../theme/components/toolbar/toolbar.css';
 
+import { icons } from '@ckeditor/ckeditor5-core';
+
+const NESTED_TOOLBAR_ICONS = {
+	alignLeft: icons.alignLeft,
+	bold: icons.bold,
+	importExport: icons.importExport,
+	paragraph: icons.paragraph,
+	plus: icons.plus,
+	text: icons.text,
+	threeVerticalDots: icons.threeVerticalDots
+};
+
 /**
  * The toolbar view class.
  *
@@ -286,18 +300,48 @@ export default class ToolbarView extends View {
 	 *
 	 * @param {Array.<String>|Object} itemsOrConfig The toolbar items or the entire toolbar configuration object.
 	 * @param {module:ui/componentfactory~ComponentFactory} factory A factory producing toolbar items.
+	 * @param {Array.<String>} [removeItems] An array of items names to be removed from the configuration. When present, applies
+	 * to this toolbar and all nested ones as well.
 	 */
-	fillFromConfig( itemsOrConfig, factory ) {
+	fillFromConfig( itemsOrConfig, factory, removeItems ) {
 		const config = normalizeToolbarConfig( itemsOrConfig );
+		const normalizedRemoveItems = removeItems || config.removeItems;
+		const itemsToAdd = this._cleanItemsConfiguration( config.items, factory, normalizedRemoveItems )
+			.map( name => {
+				if ( isObject( name ) ) {
+					return this._createNestedToolbarDropdown( name, factory, normalizedRemoveItems );
+				} else if ( name === '|' ) {
+					return new ToolbarSeparatorView();
+				} else if ( name === '-' ) {
+					return new ToolbarLineBreakView();
+				}
+
+				return factory.create( name );
+			} )
+			.filter( item => item );
+
+		this.items.addMany( itemsToAdd );
+	}
 
-		const itemsToClean = config.items
+	/**
+	 * Cleans up the {@link module:ui/toolbar/toolbarview~ToolbarView#items} of the toolbar by removing unwanted items and
+	 * duplicated (obsolete) separators or line breaks.
+	 *
+	 * @private
+	 * @param {Array.<String>} items The toolbar items configuration.
+	 * @param {module:ui/componentfactory~ComponentFactory} factory A factory producing toolbar items.
+	 * @param {Array.<String>} removeItems An array of items names to be removed from the configuration.
+	 * @returns {Array.<String>}  Items after the clean-up.
+	 */
+	_cleanItemsConfiguration( items, factory, removeItems ) {
+		const filteredItems = items
 			.filter( ( name, idx, items ) => {
 				if ( name === '|' ) {
 					return true;
 				}
 
 				// Items listed in `config.removeItems` should not be added to the toolbar.
-				if ( config.removeItems.indexOf( name ) !== -1 ) {
+				if ( removeItems.indexOf( name ) !== -1 ) {
 					return false;
 				}
 
@@ -330,7 +374,7 @@ export default class ToolbarView extends View {
 				}
 
 				// For the items that cannot be instantiated we are sending warning message. We also filter them out.
-				if ( !factory.has( name ) ) {
+				if ( !isObject( name ) && !factory.has( name ) ) {
 					/**
 					 * There was a problem processing the configuration of the toolbar. The item with the given
 					 * name does not exist so it was omitted when rendering the toolbar.
@@ -356,19 +400,7 @@ export default class ToolbarView extends View {
 				return true;
 			} );
 
-		const itemsToAdd = this._cleanSeparators( itemsToClean )
-			// Instantiate toolbar items.
-			.map( name => {
-				if ( name === '|' ) {
-					return new ToolbarSeparatorView();
-				} else if ( name === '-' ) {
-					return new ToolbarLineBreakView();
-				}
-
-				return factory.create( name );
-			} );
-
-		this.items.addMany( itemsToAdd );
+		return this._cleanSeparatorsAndLineBreaks( filteredItems );
 	}
 
 	/**
@@ -376,23 +408,29 @@ export default class ToolbarView extends View {
 	 *
 	 * @private
 	 * @param {Array.<String>} items
+	 * @returns {Array.<String>} Toolbar items after the separator and line break clean-up.
 	 */
-	_cleanSeparators( items ) {
+	_cleanSeparatorsAndLineBreaks( items ) {
 		const nonSeparatorPredicate = item => ( item !== '-' && item !== '|' );
 		const count = items.length;
 
 		// Find an index of the first item that is not a separator.
-		const firstCommandItem = items.findIndex( nonSeparatorPredicate );
+		const firstCommandItemIndex = items.findIndex( nonSeparatorPredicate );
+
+		// Items include separators only. There is no point in displaying them.
+		if ( firstCommandItemIndex === -1 ) {
+			return [];
+		}
 
 		// Search from the end of the list, then convert found index back to the original direction.
-		const lastCommandItem = count - items
+		const lastCommandItemIndex = count - items
 			.slice()
 			.reverse()
 			.findIndex( nonSeparatorPredicate );
 
 		return items
 			// Return items without the leading and trailing separators.
-			.slice( firstCommandItem, lastCommandItem )
+			.slice( firstCommandItemIndex, lastCommandItemIndex )
 			// Remove duplicated separators.
 			.filter( ( name, idx, items ) => {
 				// Filter only separators.
@@ -405,6 +443,79 @@ export default class ToolbarView extends View {
 			} );
 	}
 
+	/**
+	 * Creates a user-defined dropdown containing a toolbar with items.
+	 *
+	 * @private
+	 * @param {Object} definition A definition of the nested toolbar dropdown.
+	 * @param {String} definition.label A label of the dropdown.
+	 * @param {String|Boolean} [definition.icon] An icon of the drop-down. One of 'bold', 'plus', 'text', 'importExport', 'alignLeft',
+	 * 'paragraph' or an SVG string. When `false` is passed, no icon will be used.
+	 * @param {Boolean} [definition.withText=false] When set `true`, the label of the dropdown will be visible. See
+	 * {@link module:ui/button/buttonview~ButtonView#withText} to learn more.
+	 * @param {Boolean|String|Function} [definition.tooltip=true] A tooltip of the dropdown button. See
+	 * {@link module:ui/button/buttonview~ButtonView#tooltip} to learn more.
+	 * @param {module:ui/componentfactory~ComponentFactory} componentFactory Component factory used to create items
+	 * of the nested toolbar.
+	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
+	 */
+	_createNestedToolbarDropdown( definition, componentFactory, removeItems ) {
+		let { label, icon, items, tooltip = true, withText = false } = definition;
+
+		items = this._cleanItemsConfiguration( items, componentFactory, removeItems );
+
+		// There is no point in rendering a dropdown without items.
+		if ( !items.length ) {
+			return null;
+		}
+
+		const locale = this.locale;
+		const dropdownView = createDropdown( locale );
+
+		if ( !label ) {
+			/**
+			 * A dropdown definition in the toolbar configuration is missing a text label.
+			 *
+			 * Without a label, the dropdown becomes inaccessible to users relying on assistive technologies.
+			 * Make sure the `label` property is set in your drop-down configuration:
+			 *
+ 			 *		{
+ 			 *			label: 'A human-readable label',
+			 *			icon: '...',
+			 *			items: [ ... ]
+ 			 *		},
+			 *
+			 * Learn more about {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar configuration}.
+			 *
+			 * @error toolbarview-nested-toolbar-dropdown-missing-label
+			 */
+			logWarning( 'toolbarview-nested-toolbar-dropdown-missing-label', definition );
+		}
+
+		dropdownView.class = 'ck-toolbar__nested-toolbar-dropdown';
+		dropdownView.buttonView.set( {
+			label,
+			tooltip,
+			withText: !!withText
+		} );
+
+		// Allow disabling icon by passing false.
+		if ( icon !== false ) {
+			// A pre-defined icon picked by name, SVG string, a fallback (default) icon.
+			dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[ icon ] || icon || NESTED_TOOLBAR_ICONS.threeVerticalDots;
+		}
+		// If the icon is disabled, display the label automatically.
+		else {
+			dropdownView.buttonView.withText = true;
+		}
+
+		addToolbarToDropdown( dropdownView, [] );
+
+		dropdownView.toolbarView.fillFromConfig( items, componentFactory, removeItems );
+
+		return dropdownView;
+	}
+
 	/**
 	 * Fired when some toolbar {@link #items} were grouped or ungrouped as a result of some change
 	 * in the toolbar geometry.