@ckeditor/ckeditor5-utils 29.1.0 → 31.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-utils",
-  "version": "29.1.0",
+  "version": "31.1.0",
   "description": "Miscellaneous utilities used by CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -14,12 +14,10 @@
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-build-classic": "^29.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^29.1.0",
-    "@ckeditor/ckeditor5-core": "^29.1.0",
-    "@ckeditor/ckeditor5-engine": "^29.1.0",
-    "assertion-error": "^1.1.0",
-    "js-beautify": "^1.11.0"
+    "@ckeditor/ckeditor5-build-classic": "^31.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^31.1.0",
+    "@ckeditor/ckeditor5-core": "^31.1.0",
+    "@ckeditor/ckeditor5-engine": "^31.1.0"
   },
   "engines": {
     "node": ">=12.0.0",

package/src/ckeditorerror.js

@@ -59,9 +59,7 @@ export default class CKEditorError extends Error {
 	 * data object will also be later available under the {@link #data} property.
 	 */
 	constructor( errorName, context, data ) {
-		const message = `${ errorName }${ ( data ? ` ${ JSON.stringify( data ) }` : '' ) }${ getLinkToDocumentationMessage( errorName ) }`;
-
-		super( message );
+		super( getErrorMessage( errorName, data ) );
 
 		/**
 		 * @type {String}
@@ -85,6 +83,7 @@ export default class CKEditorError extends Error {
 
 	/**
 	 * Checks if the error is of the `CKEditorError` type.
+	 * @returns {Boolean}
 	 */
 	is( type ) {
 		return type === 'CKEditorError';
@@ -142,7 +141,6 @@ export default class CKEditorError extends Error {
  *
  * @param {String} errorName The error name to be logged.
  * @param {Object} [data] Additional data to be logged.
- * @returns {String}
  */
 export function logWarning( errorName, data ) {
 	console.warn( ...formatConsoleArguments( errorName, data ) );
@@ -167,16 +165,52 @@ export function logWarning( errorName, data ) {
  *
  * @param {String} errorName The error name to be logged.
  * @param {Object} [data] Additional data to be logged.
- * @returns {String}
  */
 export function logError( errorName, data ) {
 	console.error( ...formatConsoleArguments( errorName, data ) );
 }
 
+// Returns formatted link to documentation message.
+//
+// @private
+// @param {String} errorName
+// @returns {string}
 function getLinkToDocumentationMessage( errorName ) {
 	return `\nRead more: ${ DOCUMENTATION_URL }#error-${ errorName }`;
 }
 
+// Returns formatted error message.
+//
+// @private
+// @param {String} errorName
+// @param {Object} [data]
+// @returns {string}
+function getErrorMessage( errorName, data ) {
+	const processedObjects = new WeakSet();
+	const circularReferencesReplacer = ( key, value ) => {
+		if ( typeof value === 'object' && value !== null ) {
+			if ( processedObjects.has( value ) ) {
+				return `[object ${ value.constructor.name }]`;
+			}
+
+			processedObjects.add( value );
+		}
+
+		return value;
+	};
+
+	const stringifiedData = data ? ` ${ JSON.stringify( data, circularReferencesReplacer ) }` : '';
+	const documentationLink = getLinkToDocumentationMessage( errorName );
+
+	return errorName + stringifiedData + documentationLink;
+}
+
+// Returns formatted console error arguments.
+//
+// @private
+// @param {String} errorName
+// @param {Object} [data]
+// @returns {Array}
 function formatConsoleArguments( errorName, data ) {
 	const documentationMessage = getLinkToDocumentationMessage( errorName );
 

package/src/collection.js

@@ -56,7 +56,7 @@ export default class Collection {
 	 *		console.log( collection.get( 'George' ) ); // -> { name: 'George' }
 	 *		console.log( collection.get( 'John' ) ); // -> { name: 'John' }
 	 *
-	 * @param {Iterable.<Object>|Object} initialItemsOrOptions The initial items of the collection or
+	 * @param {Iterable.<Object>|Object} [initialItemsOrOptions] The initial items of the collection or
 	 * the options object.
 	 * @param {Object} [options={}] The options object, when the first argument is an array of initial items.
 	 * @param {String} [options.idProperty='id'] The name of the property which is used to identify an item.

package/src/dom/emittermixin.js

@@ -52,19 +52,21 @@ const DomEmitterMixin = extend( {}, EmitterMixin, {
 	 * @param {Boolean} [options.usePassive=false] Indicates that the function specified by listener will never call preventDefault()
 	 * and prevents blocking browser's main thread by this event handler.
 	 */
-	listenTo( emitter, ...rest ) {
-		// Check if emitter is an instance of DOM Node. If so, replace the argument with
-		// corresponding ProxyEmitter (or create one if not existing).
+	listenTo( emitter, event, callback, options = {} ) {
+		// Check if emitter is an instance of DOM Node. If so, use corresponding ProxyEmitter (or create one if not existing).
 		if ( isNode( emitter ) || isWindow( emitter ) ) {
-			const proxy = this._getProxyEmitter( emitter ) || new ProxyEmitter( emitter );
+			const proxyOptions = {
+				capture: !!options.useCapture,
+				passive: !!options.usePassive
+			};
 
-			proxy.attach( ...rest );
+			const proxyEmitter = this._getProxyEmitter( emitter, proxyOptions ) || new ProxyEmitter( emitter, proxyOptions );
 
-			emitter = proxy;
+			this.listenTo( proxyEmitter, event, callback, options );
+		} else {
+			// Execute parent class method with Emitter (or ProxyEmitter) instance.
+			EmitterMixin.listenTo.call( this, emitter, event, callback, options );
 		}
-
-		// Execute parent class method with Emitter (or ProxyEmitter) instance.
-		EmitterMixin.listenTo.call( this, emitter, ...rest );
 	},
 
 	/**
@@ -83,35 +85,49 @@ const DomEmitterMixin = extend( {}, EmitterMixin, {
 	 * `event`.
 	 */
 	stopListening( emitter, event, callback ) {
-		// Check if emitter is an instance of DOM Node. If so, replace the argument with corresponding ProxyEmitter.
+		// Check if the emitter is an instance of DOM Node. If so, forward the call to the corresponding ProxyEmitters.
 		if ( isNode( emitter ) || isWindow( emitter ) ) {
-			const proxy = this._getProxyEmitter( emitter );
+			const proxyEmitters = this._getAllProxyEmitters( emitter );
 
-			// Element has no listeners.
-			if ( !proxy ) {
-				return;
+			for ( const proxy of proxyEmitters ) {
+				this.stopListening( proxy, event, callback );
 			}
-
-			emitter = proxy;
+		} else {
+			// Execute parent class method with Emitter (or ProxyEmitter) instance.
+			EmitterMixin.stopListening.call( this, emitter, event, callback );
 		}
+	},
 
-		// Execute parent class method with Emitter (or ProxyEmitter) instance.
-		EmitterMixin.stopListening.call( this, emitter, event, callback );
-
-		if ( emitter instanceof ProxyEmitter ) {
-			emitter.detach( event );
-		}
+	/**
+	 * Retrieves ProxyEmitter instance for given DOM Node residing in this Host and given options.
+	 *
+	 * @private
+	 * @param {Node} node DOM Node of the ProxyEmitter.
+	 * @param {Object} [options] Additional options.
+	 * @param {Boolean} [options.useCapture=false] Indicates that events of this type will be dispatched to the registered
+	 * listener before being dispatched to any EventTarget beneath it in the DOM tree.
+	 * @param {Boolean} [options.usePassive=false] Indicates that the function specified by listener will never call preventDefault()
+	 * and prevents blocking browser's main thread by this event handler.
+	 * @returns {module:utils/dom/emittermixin~ProxyEmitter|null} ProxyEmitter instance bound to the DOM Node.
+	 */
+	_getProxyEmitter( node, options ) {
+		return _getEmitterListenedTo( this, getProxyEmitterId( node, options ) );
 	},
 
 	/**
-	 * Retrieves ProxyEmitter instance for given DOM Node residing in this Host.
+	 * Retrieves all the ProxyEmitter instances for given DOM Node residing in this Host.
 	 *
 	 * @private
 	 * @param {Node} node DOM Node of the ProxyEmitter.
-	 * @returns {module:utils/dom/emittermixin~ProxyEmitter} ProxyEmitter instance or null.
+	 * @returns {Array.<module:utils/dom/emittermixin~ProxyEmitter>}
 	 */
-	_getProxyEmitter( node ) {
-		return _getEmitterListenedTo( this, getNodeUID( node ) );
+	_getAllProxyEmitters( node ) {
+		return [
+			{ capture: false, passive: false },
+			{ capture: false, passive: true },
+			{ capture: true, passive: false },
+			{ capture: true, passive: true }
+		].map( options => this._getProxyEmitter( node, options ) ).filter( proxy => !!proxy );
 	}
 } );
 
@@ -120,6 +136,8 @@ export default DomEmitterMixin;
 /**
  * Creates a ProxyEmitter instance. Such an instance is a bridge between a DOM Node firing events
  * and any Host listening to them. It is backwards compatible with {@link module:utils/emittermixin~EmitterMixin#on}.
+ * There is a separate instance for each combination of modes (useCapture & usePassive). The mode is concatenated with
+ * UID stored in HTMLElement to give each instance unique identifier.
  *
  *                                  listenTo( click, ... )
  *                    +-----------------------------------------+
@@ -128,14 +146,14 @@ export default DomEmitterMixin;
  *     | Host                       |                           |   +---------------------------------------------+
  *     +----------------------------+                           |   |       removeEventListener( click, ... )     |
  *     | _listeningTo: {            |                +----------v-------------+                                   |
- *     |   UID: {                   |                | ProxyEmitter           |                                   |
+ *     |   UID+mode: {              |                | ProxyEmitter           |                                   |
  *     |     emitter: ProxyEmitter, |                +------------------------+                      +------------v----------+
  *     |     callbacks: {           |                | events: {              |                      | Node (HTMLElement)    |
  *     |       click: [ callbacks ] |                |   click: [ callbacks ] |                      +-----------------------+
  *     |     }                      |                | },                     |                      | data-ck-expando: UID  |
  *     |   }                        |                | _domNode: Node,        |                      +-----------------------+
  *     | }                          |                | _domListeners: {},     |                                   |
- *     | +------------------------+ |                | _emitterId: UID        |                                   |
+ *     | +------------------------+ |                | _emitterId: UID+mode   |                                   |
  *     | | DomEmitterMixin        | |                +--------------^---------+                                   |
  *     | +------------------------+ |                           |   |                                             |
  *     +--------------^-------------+                           |   +---------------------------------------------+
@@ -150,14 +168,21 @@ export default DomEmitterMixin;
 class ProxyEmitter {
 	/**
 	 * @param {Node} node DOM Node that fires events.
-	 * @returns {Object} ProxyEmitter instance bound to the DOM Node.
+	 * @param {Object} [options] Additional options.
+	 * @param {Boolean} [options.useCapture=false] Indicates that events of this type will be dispatched to the registered
+	 * listener before being dispatched to any EventTarget beneath it in the DOM tree.
+	 * @param {Boolean} [options.usePassive=false] Indicates that the function specified by listener will never call preventDefault()
+	 * and prevents blocking browser's main thread by this event handler.
 	 */
-	constructor( node ) {
+	constructor( node, options ) {
 		// Set emitter ID to match DOM Node "expando" property.
-		_setEmitterId( this, getNodeUID( node ) );
+		_setEmitterId( this, getProxyEmitterId( node, options ) );
 
 		// Remember the DOM Node this ProxyEmitter is bound to.
 		this._domNode = node;
+
+		// And given options.
+		this._options = options;
 	}
 }
 
@@ -175,31 +200,23 @@ extend( ProxyEmitter.prototype, EmitterMixin, {
 	 * It attaches a native DOM listener to the DOM Node. When fired,
 	 * a corresponding Emitter event will also fire with DOM Event object as an argument.
 	 *
+	 * **Note**: This is automatically called by the
+	 * {@link module:utils/emittermixin~EmitterMixin#listenTo `EmitterMixin#listenTo()`}.
+	 *
 	 * @method module:utils/dom/emittermixin~ProxyEmitter#attach
 	 * @param {String} event The name of the event.
-	 * @param {Function} callback The function to be called on event.
-	 * @param {Object} [options={}] Additional options.
-	 * @param {Boolean} [options.useCapture=false] Indicates that events of this type will be dispatched to the registered
-	 * listener before being dispatched to any EventTarget beneath it in the DOM tree.
-	 * @param {Boolean} [options.usePassive=false] Indicates that the function specified by listener will never call preventDefault()
-	 * and prevents blocking browser's main thread by this event handler.
 	 */
-	attach( event, callback, options = {} ) {
+	attach( event ) {
 		// If the DOM Listener for given event already exist it is pointless
 		// to attach another one.
 		if ( this._domListeners && this._domListeners[ event ] ) {
 			return;
 		}
 
-		const listenerOptions = {
-			capture: !!options.useCapture,
-			passive: !!options.usePassive
-		};
-
-		const domListener = this._createDomListener( event, listenerOptions );
+		const domListener = this._createDomListener( event );
 
 		// Attach the native DOM listener to DOM Node.
-		this._domNode.addEventListener( event, domListener, listenerOptions );
+		this._domNode.addEventListener( event, domListener, this._options );
 
 		if ( !this._domListeners ) {
 			this._domListeners = {};
@@ -213,6 +230,9 @@ extend( ProxyEmitter.prototype, EmitterMixin, {
 	/**
 	 * Stops executing the callback on the given event.
 	 *
+	 * **Note**: This is automatically called by the
+	 * {@link module:utils/emittermixin~EmitterMixin#stopListening `EmitterMixin#stopListening()`}.
+	 *
 	 * @method module:utils/dom/emittermixin~ProxyEmitter#detach
 	 * @param {String} event The name of the event.
 	 */
@@ -228,6 +248,36 @@ extend( ProxyEmitter.prototype, EmitterMixin, {
 		}
 	},
 
+	/**
+	 * Adds callback to emitter for given event.
+	 *
+	 * @protected
+	 * @method module:utils/dom/emittermixin~ProxyEmitter#_addEventListener
+	 * @param {String} event The name of the event.
+	 * @param {Function} callback The function to be called on event.
+	 * @param {Object} [options={}] Additional options.
+	 * @param {module:utils/priorities~PriorityString|Number} [options.priority='normal'] The priority of this event callback. The higher
+	 * the priority value the sooner the callback will be fired. Events having the same priority are called in the
+	 * order they were added.
+	 */
+	_addEventListener( event, callback, options ) {
+		this.attach( event );
+		EmitterMixin._addEventListener.call( this, event, callback, options );
+	},
+
+	/**
+	 * Removes callback from emitter for given event.
+	 *
+	 * @protected
+	 * @method module:utils/dom/emittermixin~ProxyEmitter#_removeEventListener
+	 * @param {String} event The name of the event.
+	 * @param {Function} callback The function to stop being called.
+	 */
+	_removeEventListener( event, callback ) {
+		EmitterMixin._removeEventListener.call( this, event, callback );
+		this.detach( event );
+	},
+
 	/**
 	 * Creates a native DOM listener callback. When the native DOM event
 	 * is fired it will fire corresponding event on this ProxyEmitter.
@@ -236,13 +286,9 @@ extend( ProxyEmitter.prototype, EmitterMixin, {
 	 * @private
 	 * @method module:utils/dom/emittermixin~ProxyEmitter#_createDomListener
 	 * @param {String} event The name of the event.
-	 * @param {Object} [options] Additional options.
-	 * @param {Boolean} [options.capture=false] Indicates whether the listener was created for capturing event.
-	 * @param {Boolean} [options.passive=false] Indicates that the function specified by listener will never call preventDefault()
-	 * and prevents blocking browser's main thread by this event handler.
 	 * @returns {Function} The DOM listener callback.
 	 */
-	_createDomListener( event, options ) {
+	_createDomListener( event ) {
 		const domListener = domEvt => {
 			this.fire( event, domEvt );
 		};
@@ -251,7 +297,7 @@ extend( ProxyEmitter.prototype, EmitterMixin, {
 		// detach it from the DOM Node, when it is no longer necessary.
 		// See: {@link detach}.
 		domListener.removeListener = () => {
-			this._domNode.removeEventListener( event, domListener, options );
+			this._domNode.removeEventListener( event, domListener, this._options );
 			delete this._domListeners[ event ];
 		};
 
@@ -268,6 +314,26 @@ function getNodeUID( node ) {
 	return node[ 'data-ck-expando' ] || ( node[ 'data-ck-expando' ] = uid() );
 }
 
+// Gets id of the ProxyEmitter for the given node.
+//
+// Combines DOM Node identifier and additional options.
+//
+// @private
+// @param {Node} node
+// @param {Object} options Additional options.
+// @returns {String} ProxyEmitter id.
+function getProxyEmitterId( node, options ) {
+	let id = getNodeUID( node );
+
+	for ( const option of Object.keys( options ).sort() ) {
+		if ( options[ option ] ) {
+			id += '-' + option;
+		}
+	}
+
+	return id;
+}
+
 /**
  * Interface representing classes which mix in {@link module:utils/dom/emittermixin~EmitterMixin}.
  *