@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 21.0.0 to 22.0.0

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "21.0.0",
+  "version": "22.0.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -12,22 +12,23 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^21.0.0",
-    "@ckeditor/ckeditor5-utils": "^21.0.0",
+    "@ckeditor/ckeditor5-core": "^22.0.0",
+    "@ckeditor/ckeditor5-utils": "^22.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^21.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^21.0.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^21.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^21.0.0",
-    "@ckeditor/ckeditor5-engine": "^21.0.0",
-    "@ckeditor/ckeditor5-enter": "^21.0.0",
-    "@ckeditor/ckeditor5-essentials": "^21.0.0",
-    "@ckeditor/ckeditor5-heading": "^21.0.0",
-    "@ckeditor/ckeditor5-image": "^21.0.0",
-    "@ckeditor/ckeditor5-link": "^21.0.0",
-    "@ckeditor/ckeditor5-list": "^21.0.0",
-    "@ckeditor/ckeditor5-mention": "^21.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^21.0.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^21.0.0",
-    "@ckeditor/ckeditor5-typing": "^21.0.0"
+    "@ckeditor/ckeditor5-basic-styles": "^22.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^22.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^22.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^22.0.0",
+    "@ckeditor/ckeditor5-engine": "^22.0.0",
+    "@ckeditor/ckeditor5-enter": "^22.0.0",
+    "@ckeditor/ckeditor5-essentials": "^22.0.0",
+    "@ckeditor/ckeditor5-heading": "^22.0.0",
+    "@ckeditor/ckeditor5-image": "^22.0.0",
+    "@ckeditor/ckeditor5-link": "^22.0.0",
+    "@ckeditor/ckeditor5-list": "^22.0.0",
+    "@ckeditor/ckeditor5-mention": "^22.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^22.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^22.0.0",
+    "@ckeditor/ckeditor5-table": "^22.0.0",
+    "@ckeditor/ckeditor5-typing": "^22.0.0"
   },
@@ -34,0 +35,0 @@ "engines": {

src/bindings/clickoutsidehandler.js

@@ -28,3 +28,3 @@ /**
 export default function clickOutsideHandler( { emitter, activator, callback, contextElements } ) {
-	emitter.listenTo( document, 'mousedown', ( evt, { target } ) => {
+	emitter.listenTo( document, 'mousedown', ( evt, domEvt ) => {
 		if ( !activator() ) {
@@ -34,4 +34,8 @@ return;
 
+		// Check if `composedPath` is `undefined` in case the browser does not support native shadow DOM.
+		// Can be removed when all supported browsers support native shadow DOM.
+		const path = typeof domEvt.composedPath == 'function' ? domEvt.composedPath() : [];
+
 		for ( const contextElement of contextElements ) {
-			if ( contextElement.contains( target ) ) {
+			if ( contextElement.contains( domEvt.target ) || path.includes( contextElement ) ) {
 				return;
@@ -38,0 +42,0 @@ }

src/componentfactory.js

@@ -80,16 +80,2 @@ /**
 	add( name, callback ) {
-		if ( this.has( name ) ) {
-			/**
-			 * The item already exists in the component factory.
-			 *
-			 * @error componentfactory-item-exists
-			 * @param {String} name The name of the component.
-			 */
-			throw new CKEditorError(
-				'componentfactory-item-exists: The item already exists in the component factory.',
-				this,
-				{ name }
-			);
-		}
-
 		this._components.set( getNormalized( name ), { callback, originalName: name } );
@@ -96,0 +82,0 @@ }

src/toolbar/balloon/balloontoolbar.js

@@ -168,2 +168,11 @@ /**
 		}
+
+		// Listen to the toolbar view and whenever it changes its geometry due to some items being
+		// grouped or ungrouped, update the position of the balloon because a shorter/longer toolbar
+		// means the balloon could be pointing at the wrong place. Once updated, the balloon will point
+		// at the right selection in the content again.
+		// https://github.com/ckeditor/ckeditor5/issues/6444
+		this.listenTo( this.toolbarView, 'groupedItemsUpdate', () => {
+			this._updatePosition();
+		} );
 	}
@@ -226,5 +235,5 @@
 
-		// Do not show the toolbar when there is more than one range in the selection and they fully contain object elements.
+		// Do not show the toolbar when there is more than one range in the selection and they fully contain selectable elements.
 		// See https://github.com/ckeditor/ckeditor5/issues/6443.
-		if ( selectionContainsOnlyMultipleObjects( selection, schema ) ) {
+		if ( selectionContainsOnlyMultipleSelectables( selection, schema ) ) {
 			return;
@@ -241,3 +250,3 @@ }
 		this.listenTo( this.editor.ui, 'update', () => {
-			this._balloon.updatePosition( this._getBalloonPositionData() );
+			this._updatePosition();
 		} );
@@ -307,2 +316,14 @@
 	/**
+	 * Updates the position of the {@link #_balloon} to make up for changes:
+	 *
+	 * * in the geometry of the selection it is attached to (e.g. the selection moved in the viewport or expanded or shrunk),
+	 * * or the geometry of the balloon toolbar itself (e.g. the toolbar has grouped or ungrouped some items and it is shorter or longer).
+	 *
+	 * @private
+	 */
+	_updatePosition() {
+		this._balloon.updatePosition( this._getBalloonPositionData() );
+	}
+
+	/**
 	 * @inheritDoc
@@ -371,3 +392,3 @@ */
 
-// Returns "true" when the selection has multiple ranges and each range contains an object
+// Returns "true" when the selection has multiple ranges and each range contains a selectable element
 // and nothing else.
@@ -379,3 +400,3 @@ //
 // @returns {Boolean}
-function selectionContainsOnlyMultipleObjects( selection, schema ) {
+function selectionContainsOnlyMultipleSelectables( selection, schema ) {
 	// It doesn't contain multiple objects if there is only one range.
@@ -389,3 +410,3 @@ if ( selection.rangeCount === 1 ) {
 
-		return element && schema.isObject( element );
+		return element && schema.isSelectable( element );
 	} );
@@ -392,0 +413,0 @@ }

src/toolbar/toolbarview.js

@@ -307,2 +307,15 @@ /**
 	}
+
+	/**
+	 * Fired when some toolbar {@link #items} were grouped or ungrouped as a result of some change
+	 * in the toolbar geometry.
+	 *
+	 * **Note**: This event is always fired **once** regardless of the number of items that were be
+	 * grouped or ungrouped at a time.
+	 *
+	 * **Note**: This event is fired only if the items grouping functionality was enabled in
+	 * the first place (see {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull}).
+	 *
+	 * @event groupedItemsUpdate
+	 */
 }
@@ -423,2 +436,10 @@
 		/**
+		 * A toolbar view this behavior belongs to.
+		 *
+		 * @readonly
+		 * @member {module:ui/toolbar~ToolbarView}
+		 */
+		this.view = view;
+
+		/**
 		 * A collection of toolbar children.
@@ -649,2 +670,5 @@ *
 
+		// Remember how many items were initially grouped so at the it is possible to figure out if the number
+		// of grouped items has changed. If the number has changed, geometry of the toolbar has also changed.
+		const initialGroupedItemsCount = this.groupedItems.length;
 		let wereItemsGrouped;
@@ -678,2 +702,6 @@
 		}
+
+		if ( this.groupedItems.length !== initialGroupedItemsCount ) {
+			this.view.fire( 'groupedItemsUpdate' );
+		}
 	}
@@ -680,0 +708,0 @@

No alert changes

Improved metrics

Total package byte prevSize

581190

increased by0.4%

Lines of code

10543

increased by0.39%

Worsened metrics

Dev dependency count

16

increased by6.67%

Dependency changes

• + Added@ckeditor/ckeditor5-core@22.0.0(transitive)

• + Added@ckeditor/ckeditor5-engine@22.0.0(transitive)

• + Added@ckeditor/ckeditor5-utils@22.0.0(transitive)

• - Removed@ckeditor/ckeditor5-core@21.0.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@21.0.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@21.0.0(transitive)

• Updated@ckeditor/ckeditor5-core@^22.0.0

• Updated@ckeditor/ckeditor5-utils@^22.0.0