@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 35.1.0 to 35.2.0

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "35.1.0",
+  "version": "35.2.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -14,25 +14,25 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^35.1.0",
-    "@ckeditor/ckeditor5-core": "^35.1.0",
+    "@ckeditor/ckeditor5-utils": "^35.2.0",
+    "@ckeditor/ckeditor5-core": "^35.2.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^35.1.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^35.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^35.1.0",
-    "@ckeditor/ckeditor5-engine": "^35.1.0",
-    "@ckeditor/ckeditor5-enter": "^35.1.0",
-    "@ckeditor/ckeditor5-essentials": "^35.1.0",
-    "@ckeditor/ckeditor5-font": "^35.1.0",
-    "@ckeditor/ckeditor5-find-and-replace": "^35.1.0",
-    "@ckeditor/ckeditor5-heading": "^35.1.0",
-    "@ckeditor/ckeditor5-image": "^35.1.0",
-    "@ckeditor/ckeditor5-link": "^35.1.0",
-    "@ckeditor/ckeditor5-list": "^35.1.0",
-    "@ckeditor/ckeditor5-mention": "^35.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^35.1.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^35.1.0",
-    "@ckeditor/ckeditor5-table": "^35.1.0",
-    "@ckeditor/ckeditor5-typing": "^35.1.0"
+    "@ckeditor/ckeditor5-basic-styles": "^35.2.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.2.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^35.2.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.2.0",
+    "@ckeditor/ckeditor5-engine": "^35.2.0",
+    "@ckeditor/ckeditor5-enter": "^35.2.0",
+    "@ckeditor/ckeditor5-essentials": "^35.2.0",
+    "@ckeditor/ckeditor5-font": "^35.2.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^35.2.0",
+    "@ckeditor/ckeditor5-heading": "^35.2.0",
+    "@ckeditor/ckeditor5-image": "^35.2.0",
+    "@ckeditor/ckeditor5-link": "^35.2.0",
+    "@ckeditor/ckeditor5-list": "^35.2.0",
+    "@ckeditor/ckeditor5-mention": "^35.2.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.2.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^35.2.0",
+    "@ckeditor/ckeditor5-table": "^35.2.0",
+    "@ckeditor/ckeditor5-typing": "^35.2.0"
   },
@@ -39,0 +39,0 @@ "engines": {

src/dropdown/dropdownview.js

@@ -12,2 +12,3 @@ /**
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import { FocusTracker } from '@ckeditor/ckeditor5-utils';
 
@@ -174,2 +175,10 @@ import '../../theme/components/dropdown/dropdown.css';
 
+		/**
+		 * Tracks information about the DOM focus in the dropdown.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
 		this.setTemplate( {
@@ -246,2 +255,5 @@ tag: 'div',
 
+		this.focusTracker.add( this.buttonView.element );
+		this.focusTracker.add( this.panelView.element );
+
 		// Toggle the dropdown when its button has been clicked.
@@ -257,7 +269,4 @@ this.listenTo( this.buttonView, 'open', () => {
 		// be updated every time the dropdown is open.
-		this.on( 'change:isOpen', () => {
-			if ( !this.isOpen ) {
-				// If the dropdown was closed, move the focus back to the button (#12125).
-				this.focus();
-
+		this.on( 'change:isOpen', ( evt, name, isOpen ) => {
+			if ( !isOpen ) {
 				return;
@@ -278,5 +287,2 @@ }
 			}
-
-			// Focus the first item in the dropdown when the dropdown opened
-			this.panelView.focus();
 		} );
@@ -283,0 +289,0 @@

src/dropdown/utils.js

@@ -22,3 +22,3 @@ /**
 
-import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { global, priorities, logWarning } from '@ckeditor/ckeditor5-utils';
 
@@ -292,3 +292,6 @@ import '../../theme/components/dropdown/toolbardropdown.css';
 		}
-	}, { priority: 'low' } );
+
+	// * Let the panel show up first (do not focus an invisible element).
+	// * Execute after focusDropdownPanelOnOpen(). See focusDropdownPanelOnOpen() to learn more.
+	}, { priority: priorities.low - 10 } );
 }
@@ -300,5 +303,8 @@
 function addDefaultBehavior( dropdownView ) {
+	closeDropdownOnClickOutside( dropdownView );
+	closeDropdownOnExecute( dropdownView );
 	closeDropdownOnBlur( dropdownView );
-	closeDropdownOnExecute( dropdownView );
 	focusDropdownContentsOnArrows( dropdownView );
+	focusDropdownButtonOnClose( dropdownView );
+	focusDropdownPanelOnOpen( dropdownView );
 }
@@ -309,3 +315,3 @@
 // @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
-function closeDropdownOnBlur( dropdownView ) {
+function closeDropdownOnClickOutside( dropdownView ) {
 	dropdownView.on( 'render', () => {
@@ -338,2 +344,13 @@ clickOutsideHandler( {
 
+// Adds a behavior to a dropdown view that closes opened dropdown when it loses focus.
+//
+// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+function closeDropdownOnBlur( dropdownView ) {
+	dropdownView.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
+		if ( dropdownView.isOpen && !isFocused ) {
+			dropdownView.isOpen = false;
+		}
+	} );
+}
+
 // Adds a behavior to a dropdownView that focuses the dropdown's panel view contents on keystrokes.
@@ -360,2 +377,39 @@ //
 
+// Adds a behavior that focuses the #buttonView when the dropdown was closed but focus was within the #panelView element.
+// This makes sure the focus is never lost.
+//
+// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+function focusDropdownButtonOnClose( dropdownView ) {
+	dropdownView.on( 'change:isOpen', ( evt, name, isOpen ) => {
+		if ( isOpen ) {
+			return;
+		}
+
+		// If the dropdown was closed, move the focus back to the button (#12125).
+		// Don't touch the focus, if it moved somewhere else (e.g. moved to the editing root on #execute) (#12178).
+		// Note: Don't use the state of the DropdownView#focusTracker here. It fires #blur with the timeout.
+		if ( dropdownView.panelView.element.contains( global.document.activeElement ) ) {
+			dropdownView.buttonView.focus();
+		}
+	} );
+}
+
+// Adds a behavior that focuses the #panelView when dropdown gets open (accessibility).
+//
+// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+function focusDropdownPanelOnOpen( dropdownView ) {
+	dropdownView.on( 'change:isOpen', ( evt, name, isOpen ) => {
+		if ( !isOpen ) {
+			return;
+		}
+
+		// Focus the first item in the dropdown when the dropdown opened.
+		dropdownView.panelView.focus();
+
+	// * Let the panel show up first (do not focus an invisible element).
+	// * Also, execute before focusChildOnDropdownOpen() to make sure this helper does not break the
+	//   focus of a specific child by kicking in too late and resetting the focus in the panel.
+	}, { priority: 'low' } );
+}
+
 /**
@@ -362,0 +416,0 @@ * A definition of the list item used by the {@link module:ui/dropdown/utils~addListToDropdown}

src/toolbar/block/blocktoolbar.js

@@ -28,2 +28,3 @@ /**
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
+import env from '@ckeditor/ckeditor5-utils/src/env';
 
@@ -284,2 +285,3 @@ const toPx = toUnit( 'px' );
 		const buttonView = new BlockButtonView( editor.locale );
+		const bind = buttonView.bindTemplate;
 
@@ -292,2 +294,19 @@ buttonView.set( {
 
+		// 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.
@@ -294,0 +313,0 @@ buttonView.bind( 'isOn' ).to( this.panelView, 'isVisible' );

src/toolbar/toolbarview.js

@@ -24,2 +24,4 @@ /**
 import normalizeToolbarConfig from './normalizetoolbarconfig';
+import { isObject } from 'lodash-es';
+
 import threeVerticalDots from '@ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg';
@@ -29,2 +31,14 @@
 
+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
+};
+
 /**
@@ -291,7 +305,37 @@ * The toolbar view class.
 	 * @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();
+				}
 
-		const itemsToClean = config.items
+				return factory.create( name );
+			} )
+			.filter( item => item );
+
+		this.items.addMany( itemsToAdd );
+	}
+
+	/**
+	 * 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 ) => {
@@ -303,3 +347,3 @@ if ( name === '|' ) {
 				// 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;
@@ -337,3 +381,3 @@ }
 				// 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 ) ) {
 					/**
@@ -364,15 +408,3 @@ * There was a problem processing the configuration of the toolbar. The item with the given
 
-		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 );
 	}
@@ -385,4 +417,5 @@
 	 * @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 !== '|' );
@@ -392,6 +425,11 @@ 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()
@@ -403,3 +441,3 @@ .reverse()
 			// Return items without the leading and trailing separators.
-			.slice( firstCommandItem, lastCommandItem )
+			.slice( firstCommandItemIndex, lastCommandItemIndex )
 			// Remove duplicated separators.
@@ -418,2 +456,75 @@ .filter( ( name, idx, items ) => {
 	/**
+	 * 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
@@ -420,0 +531,0 @@ * in the toolbar geometry.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

683448

increased by1.71%

Lines of code

11965

increased by1.42%

Dependency changes

• Updated@ckeditor/ckeditor5-core@^35.2.0

• Updated@ckeditor/ckeditor5-utils@^35.2.0