@ckeditor/ckeditor5-engine 35.0.1 → 35.1.0

package/src/view/observer/compositionobserver.js

@@ -2,13 +2,10 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module engine/view/observer/compositionobserver
  */
-
 import DomEventObserver from './domeventobserver';
-
 /**
  * {@link module:engine/view/document~Document#event:compositionstart Compositionstart},
  * {@link module:engine/view/document~Document#event:compositionupdate compositionupdate} and
@@ -19,26 +16,21 @@ import DomEventObserver from './domeventobserver';
  * @extends module:engine/view/observer/domeventobserver~DomEventObserver
  */
 export default class CompositionObserver extends DomEventObserver {
-	constructor( view ) {
-		super( view );
-
-		this.domEventType = [ 'compositionstart', 'compositionupdate', 'compositionend' ];
-		const document = this.document;
-
-		document.on( 'compositionstart', () => {
-			document.isComposing = true;
-		} );
-
-		document.on( 'compositionend', () => {
-			document.isComposing = false;
-		} );
-	}
-
-	onDomEvent( domEvent ) {
-		this.fire( domEvent.type, domEvent );
-	}
+    constructor(view) {
+        super(view);
+        this.domEventType = ['compositionstart', 'compositionupdate', 'compositionend'];
+        const document = this.document;
+        document.on('compositionstart', () => {
+            document.isComposing = true;
+        });
+        document.on('compositionend', () => {
+            document.isComposing = false;
+        });
+    }
+    onDomEvent(domEvent) {
+        this.fire(domEvent.type, domEvent);
+    }
 }
-
 /**
  * Fired when composition starts inside one of the editables.
  *
@@ -51,7 +43,6 @@ export default class CompositionObserver extends DomEventObserver {
  * @event module:engine/view/document~Document#event:compositionstart
  * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data.
  */
-
 /**
  * Fired when composition is updated inside one of the editables.
  *
@@ -64,7 +55,6 @@ export default class CompositionObserver extends DomEventObserver {
  * @event module:engine/view/document~Document#event:compositionupdate
  * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data.
  */
-
 /**
  * Fired when composition ends inside one of the editables.
  *

package/src/view/observer/domeventdata.js

@@ -2,81 +2,71 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module engine/view/observer/domeventdata
  */
-
 import { extend } from 'lodash-es';
-
 /**
  * Information about a DOM event in context of the {@link module:engine/view/document~Document}.
  * It wraps the native event, which usually should not be used as the wrapper contains
  * additional data (like key code for keyboard events).
  */
 export default class DomEventData {
-	/**
-	 * @param {module:engine/view/view~View} view The instance of the view controller.
-	 * @param {Event} domEvent The DOM event.
-	 * @param {Object} [additionalData] Additional properties that the instance should contain.
-	 */
-	constructor( view, domEvent, additionalData ) {
-		/**
-		 * Instance of the view controller.
-		 *
-		 * @readonly
-		 * @member {module:engine/view/view~View} module:engine/view/observer/observer~Observer.DomEvent#view
-		 */
-		this.view = view;
-
-		/**
-		 * The instance of the document.
-		 *
-		 * @readonly
-		 * @member {module:engine/view/document~Document} module:engine/view/observer/observer~Observer.DomEvent#document
-		 */
-		this.document = view.document;
-
-		/**
-		 * The DOM event.
-		 *
-		 * @readonly
-		 * @member {Event} module:engine/view/observer/observer~Observer.DomEvent#domEvent
-		 */
-		this.domEvent = domEvent;
-
-		/**
-		 * The DOM target.
-		 *
-		 * @readonly
-		 * @member {HTMLElement} module:engine/view/observer/observer~Observer.DomEvent#target
-		 */
-		this.domTarget = domEvent.target;
-
-		extend( this, additionalData );
-	}
-
-	/**
-	 * The tree view element representing the target.
-	 *
-	 * @readonly
-	 * @type module:engine/view/element~Element
-	 */
-	get target() {
-		return this.view.domConverter.mapDomToView( this.domTarget );
-	}
-
-	/**
-	 * Prevents the native's event default action.
-	 */
-	preventDefault() {
-		this.domEvent.preventDefault();
-	}
-
-	/**
-	 * Stops native event propagation.
-	 */
-	stopPropagation() {
-		this.domEvent.stopPropagation();
-	}
+    /**
+     * @param {module:engine/view/view~View} view The instance of the view controller.
+     * @param {Event} domEvent The DOM event.
+     * @param {Object} [additionalData] Additional properties that the instance should contain.
+     */
+    constructor(view, domEvent, additionalData) {
+        /**
+         * Instance of the view controller.
+         *
+         * @readonly
+         * @member {module:engine/view/view~View} module:engine/view/observer/observer~Observer.DomEvent#view
+         */
+        this.view = view;
+        /**
+         * The instance of the document.
+         *
+         * @readonly
+         * @member {module:engine/view/document~Document} module:engine/view/observer/observer~Observer.DomEvent#document
+         */
+        this.document = view.document;
+        /**
+         * The DOM event.
+         *
+         * @readonly
+         * @member {Event} module:engine/view/observer/observer~Observer.DomEvent#domEvent
+         */
+        this.domEvent = domEvent;
+        /**
+         * The DOM target.
+         *
+         * @readonly
+         * @member {HTMLElement} module:engine/view/observer/observer~Observer.DomEvent#target
+         */
+        this.domTarget = domEvent.target;
+        extend(this, additionalData);
+    }
+    /**
+     * The tree view element representing the target.
+     *
+     * @readonly
+     * @type module:engine/view/element~Element
+     */
+    get target() {
+        return this.view.domConverter.mapDomToView(this.domTarget);
+    }
+    /**
+     * Prevents the native's event default action.
+     */
+    preventDefault() {
+        this.domEvent.preventDefault();
+    }
+    /**
+     * Stops native event propagation.
+     */
+    stopPropagation() {
+        this.domEvent.stopPropagation();
+    }
 }

package/src/view/observer/domeventobserver.js

@@ -2,14 +2,11 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module engine/view/observer/domeventobserver
  */
-
 import Observer from './observer';
 import DomEventData from './domeventdata';
-
 /**
  * Base class for DOM event observers. This class handles
  * {@link module:engine/view/observer/observer~Observer#observe adding} listeners to DOM elements,
@@ -35,65 +32,44 @@ import DomEventData from './domeventdata';
  * @extends module:engine/view/observer/observer~Observer
  */
 export default class DomEventObserver extends Observer {
-	/**
-	 * Type of the DOM event the observer should listen to. Array of types can be defined
-	 * if the observer should listen to multiple DOM events.
-	 *
-	 * @readonly
-	 * @member {String|Array.<String>} #domEventType
-	 */
-
-	/**
-	 * Callback which should be called when the DOM event occurred. Note that the callback will not be called if
-	 * observer {@link #isEnabled is not enabled}.
-	 *
-	 * @see #domEventType
-	 * @abstract
-	 * @method #onDomEvent
-	 */
-
-	/**
-	 * @inheritDoc
-	 */
-	constructor( view ) {
-		super( view );
-
-		/**
-		 * If set to `true` DOM events will be listened on the capturing phase.
-		 * Default value is `false`.
-		 *
-		 * @member {Boolean}
-		 */
-		this.useCapture = false;
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	observe( domElement ) {
-		const types = typeof this.domEventType == 'string' ? [ this.domEventType ] : this.domEventType;
-
-		types.forEach( type => {
-			this.listenTo( domElement, type, ( eventInfo, domEvent ) => {
-				if ( this.isEnabled && !this.checkShouldIgnoreEventFromTarget( domEvent.target ) ) {
-					this.onDomEvent( domEvent );
-				}
-			}, { useCapture: this.useCapture } );
-		} );
-	}
-
-	/**
-	 * Calls `Document#fire()` if observer {@link #isEnabled is enabled}.
-	 *
-	 * @see module:utils/emittermixin~EmitterMixin#fire
-	 * @param {String} eventType The event type (name).
-	 * @param {Event} domEvent The DOM event.
-	 * @param {Object} [additionalData] The additional data which should extend the
-	 * {@link module:engine/view/observer/domeventdata~DomEventData event data} object.
-	 */
-	fire( eventType, domEvent, additionalData ) {
-		if ( this.isEnabled ) {
-			this.document.fire( eventType, new DomEventData( this.view, domEvent, additionalData ) );
-		}
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(view) {
+        super(view);
+        /**
+         * If set to `true` DOM events will be listened on the capturing phase.
+         * Default value is `false`.
+         *
+         * @member {Boolean}
+         */
+        this.useCapture = false;
+    }
+    /**
+     * @inheritDoc
+     */
+    observe(domElement) {
+        const types = typeof this.domEventType == 'string' ? [this.domEventType] : this.domEventType;
+        types.forEach(type => {
+            this.listenTo(domElement, type, (eventInfo, domEvent) => {
+                if (this.isEnabled && !this.checkShouldIgnoreEventFromTarget(domEvent.target)) {
+                    this.onDomEvent(domEvent);
+                }
+            }, { useCapture: this.useCapture });
+        });
+    }
+    /**
+     * Calls `Document#fire()` if observer {@link #isEnabled is enabled}.
+     *
+     * @see module:utils/emittermixin~EmitterMixin#fire
+     * @param {String} eventType The event type (name).
+     * @param {Event} domEvent The DOM event.
+     * @param {Object} [additionalData] The additional data which should extend the
+     * {@link module:engine/view/observer/domeventdata~DomEventData event data} object.
+     */
+    fire(eventType, domEvent, additionalData) {
+        if (this.isEnabled) {
+            this.document.fire(eventType, new DomEventData(this.view, domEvent, additionalData));
+        }
+    }
 }

package/src/view/observer/fakeselectionobserver.js

@@ -2,16 +2,13 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module engine/view/observer/fakeselectionobserver
  */
-
 import Observer from './observer';
 import ViewSelection from '../selection';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import { debounce } from 'lodash-es';
-
 /**
  * Fake selection observer class. If view selection is fake it is placed in dummy DOM container. This observer listens
  * on {@link module:engine/view/document~Document#event:keydown keydown} events and handles moving fake view selection to the correct place
@@ -22,97 +19,85 @@ import { debounce } from 'lodash-es';
  * @extends module:engine/view/observer/observer~Observer
  */
 export default class FakeSelectionObserver extends Observer {
-	/**
-	 * Creates new FakeSelectionObserver instance.
-	 *
-	 * @param {module:engine/view/view~View} view
-	 */
-	constructor( view ) {
-		super( view );
-
-		/**
-		 * Fires debounced event `selectionChangeDone`. It uses `lodash#debounce` method to delay function call.
-		 *
-		 * @private
-		 * @param {Object} data Selection change data.
-		 * @method #_fireSelectionChangeDoneDebounced
-		 */
-		this._fireSelectionChangeDoneDebounced = debounce( data => this.document.fire( 'selectionChangeDone', data ), 200 );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	observe() {
-		const document = this.document;
-
-		document.on( 'arrowKey', ( eventInfo, data ) => {
-			const selection = document.selection;
-
-			if ( selection.isFake && this.isEnabled ) {
-				// Prevents default key down handling - no selection change will occur.
-				data.preventDefault();
-			}
-		}, { context: '$capture' } );
-
-		document.on( 'arrowKey', ( eventInfo, data ) => {
-			const selection = document.selection;
-
-			if ( selection.isFake && this.isEnabled ) {
-				this._handleSelectionMove( data.keyCode );
-			}
-		}, { priority: 'lowest' } );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	destroy() {
-		super.destroy();
-
-		this._fireSelectionChangeDoneDebounced.cancel();
-	}
-
-	/**
-	 * Handles collapsing view selection according to given key code. If left or up key is provided - new selection will be
-	 * collapsed to left. If right or down key is pressed - new selection will be collapsed to right.
-	 *
-	 * This method fires {@link module:engine/view/document~Document#event:selectionChange} and
-	 * {@link module:engine/view/document~Document#event:selectionChangeDone} events imitating behaviour of
-	 * {@link module:engine/view/observer/selectionobserver~SelectionObserver}.
-	 *
-	 * @private
-	 * @param {Number} keyCode
-	 * @fires module:engine/view/document~Document#event:selectionChange
-	 * @fires module:engine/view/document~Document#event:selectionChangeDone
-	 */
-	_handleSelectionMove( keyCode ) {
-		const selection = this.document.selection;
-		const newSelection = new ViewSelection( selection.getRanges(), { backward: selection.isBackward, fake: false } );
-
-		// Left or up arrow pressed - move selection to start.
-		if ( keyCode == keyCodes.arrowleft || keyCode == keyCodes.arrowup ) {
-			newSelection.setTo( newSelection.getFirstPosition() );
-		}
-
-		// Right or down arrow pressed - move selection to end.
-		if ( keyCode == keyCodes.arrowright || keyCode == keyCodes.arrowdown ) {
-			newSelection.setTo( newSelection.getLastPosition() );
-		}
-
-		const data = {
-			oldSelection: selection,
-			newSelection,
-			domSelection: null
-		};
-
-		// Fire dummy selection change event.
-		this.document.fire( 'selectionChange', data );
-
-		// Call` #_fireSelectionChangeDoneDebounced` every time when `selectionChange` event is fired.
-		// This function is debounced what means that `selectionChangeDone` event will be fired only when
-		// defined int the function time will elapse since the last time the function was called.
-		// So `selectionChangeDone` will be fired when selection will stop changing.
-		this._fireSelectionChangeDoneDebounced( data );
-	}
+    /**
+     * Creates new FakeSelectionObserver instance.
+     *
+     * @param {module:engine/view/view~View} view
+     */
+    constructor(view) {
+        super(view);
+        /**
+         * Fires debounced event `selectionChangeDone`. It uses `lodash#debounce` method to delay function call.
+         *
+         * @private
+         * @param {Object} data Selection change data.
+         * @method #_fireSelectionChangeDoneDebounced
+         */
+        this._fireSelectionChangeDoneDebounced = debounce(data => {
+            this.document.fire('selectionChangeDone', data);
+        }, 200);
+    }
+    /**
+     * @inheritDoc
+     */
+    observe() {
+        const document = this.document;
+        document.on('arrowKey', (eventInfo, data) => {
+            const selection = document.selection;
+            if (selection.isFake && this.isEnabled) {
+                // Prevents default key down handling - no selection change will occur.
+                data.preventDefault();
+            }
+        }, { context: '$capture' });
+        document.on('arrowKey', (eventInfo, data) => {
+            const selection = document.selection;
+            if (selection.isFake && this.isEnabled) {
+                this._handleSelectionMove(data.keyCode);
+            }
+        }, { priority: 'lowest' });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this._fireSelectionChangeDoneDebounced.cancel();
+    }
+    /**
+     * Handles collapsing view selection according to given key code. If left or up key is provided - new selection will be
+     * collapsed to left. If right or down key is pressed - new selection will be collapsed to right.
+     *
+     * This method fires {@link module:engine/view/document~Document#event:selectionChange} and
+     * {@link module:engine/view/document~Document#event:selectionChangeDone} events imitating behaviour of
+     * {@link module:engine/view/observer/selectionobserver~SelectionObserver}.
+     *
+     * @private
+     * @param {Number} keyCode
+     * @fires module:engine/view/document~Document#event:selectionChange
+     * @fires module:engine/view/document~Document#event:selectionChangeDone
+     */
+    _handleSelectionMove(keyCode) {
+        const selection = this.document.selection;
+        const newSelection = new ViewSelection(selection.getRanges(), { backward: selection.isBackward, fake: false });
+        // Left or up arrow pressed - move selection to start.
+        if (keyCode == keyCodes.arrowleft || keyCode == keyCodes.arrowup) {
+            newSelection.setTo(newSelection.getFirstPosition());
+        }
+        // Right or down arrow pressed - move selection to end.
+        if (keyCode == keyCodes.arrowright || keyCode == keyCodes.arrowdown) {
+            newSelection.setTo(newSelection.getLastPosition());
+        }
+        const data = {
+            oldSelection: selection,
+            newSelection,
+            domSelection: null
+        };
+        // Fire dummy selection change event.
+        this.document.fire('selectionChange', data);
+        // Call` #_fireSelectionChangeDoneDebounced` every time when `selectionChange` event is fired.
+        // This function is debounced what means that `selectionChangeDone` event will be fired only when
+        // defined int the function time will elapse since the last time the function was called.
+        // So `selectionChangeDone` will be fired when selection will stop changing.
+        this._fireSelectionChangeDoneDebounced(data);
+    }
 }