[WIP] Migrate to before̬̜input͎

packages/ckeditor5-block-quote/tests/integration.js

@@ -223,6 +223,7 @@ describe( 'BlockQuote integration', () => {
 			return {
 				preventDefault: sinon.spy(),
 				direction: 'backward',
+				inputType: 'deleteContentBackward',
 				unit: 'character'
 			};
 		}
@@ -364,7 +365,7 @@ describe( 'BlockQuote integration', () => {
 
 			viewDocument.fire( 'delete', data );
 
-			// Only enter command should be executed.
+			// Only delete command should be executed.
 			expect( data.preventDefault.called ).to.be.true;
 			expect( execSpy.calledOnce ).to.be.true;
 			expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'delete' );
@@ -378,7 +379,7 @@ describe( 'BlockQuote integration', () => {
 
 			viewDocument.fire( 'delete', data );
 
-			// Only enter command should be executed.
+			// Only delete command should be executed.
 			expect( data.preventDefault.called ).to.be.true;
 			expect( execSpy.calledOnce ).to.be.true;
 			expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'delete' );
@@ -392,7 +393,7 @@ describe( 'BlockQuote integration', () => {
 
 			viewDocument.fire( 'delete', data );
 
-			// Only enter command should be executed.
+			// Only delete command should be executed.
 			expect( data.preventDefault.called ).to.be.true;
 			expect( execSpy.calledOnce ).to.be.true;
 			expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'delete' );
@@ -406,7 +407,7 @@ describe( 'BlockQuote integration', () => {
 
 			viewDocument.fire( 'delete', data );
 
-			// Only enter command should be executed.
+			// Only delete command should be executed.
 			expect( data.preventDefault.called ).to.be.true;
 			expect( execSpy.calledOnce ).to.be.true;
 			expect( execSpy.args[ 0 ][ 0 ] ).to.equal( 'delete' );

packages/ckeditor5-clipboard/docs/framework/guides/deep-dive/clipboard.md

@@ -21,7 +21,7 @@ When the user pastes or drops content into the editor, the browser fires an even
 
 1. {@link module:clipboard/clipboardobserver~ClipboardObserver} turns this event into a synthetic {@link module:engine/view/document~Document#event:paste `view.Document#paste`} or {@link module:engine/view/document~Document#event:drop `view.Document#drop`}.
 1. Since the content to be inserted by both actions (paste and drop) should usually be processed in the same way and both actions have a very similar effect, both events are turned into a single {@link module:engine/view/document~Document#event:clipboardInput `view.Document#clipboardInput`} event for easier handling.
-1. Next, the clipboard feature listens to the `view.Document#clipboardInput` event, retrieves and pre-processes the `text/html` or `text/plain` content which it finds in the {@link module:clipboard/datatransfer~DataTransfer event's `dataTransfer`} and fires the {@link module:clipboard/clipboardpipeline~ClipboardPipeline#event:inputTransformation `ClipboardPipeline#inputTransformation`} event with the retrieved content in the event data `content` property as a {@link module:engine/view/documentfragment~DocumentFragment `view.DocumentFragment`}.
+1. Next, the clipboard feature listens to the `view.Document#clipboardInput` event, retrieves and pre-processes the `text/html` or `text/plain` content which it finds in the {@link module:engine/view/datatransfer~DataTransfer event's `dataTransfer`} and fires the {@link module:clipboard/clipboardpipeline~ClipboardPipeline#event:inputTransformation `ClipboardPipeline#inputTransformation`} event with the retrieved content in the event data `content` property as a {@link module:engine/view/documentfragment~DocumentFragment `view.DocumentFragment`}.
 1. Then, the clipboard feature listens to the `ClipboardPipeline#inputTransformation` event, takes the processed content, transforms it to the {@link module:engine/model/documentfragment~DocumentFragment `model.DocumentFragment`} and fires the {@link module:clipboard/clipboardpipeline~ClipboardPipeline#event:contentInsertion `ClipboardPipeline#contentInsertion`} event with the transformed content in the event data `content` property as a {@link module:engine/model/documentfragment~DocumentFragment `model.DocumentFragment`}.
 1. Finally, the clipboard feature listens to the `ClipboardPipeline#contentInsertion` event, takes the model fragment, {@link module:engine/model/model~Model#insertContent inserts} it into the editor and stores the range which contains all the performed changes in the `resultRange` property of the event data.
 
@@ -60,7 +60,7 @@ The {@link module:engine/view/document~Document#event:clipboardInput `view.Docum
 
 * Handle pasted or dropped files (that you can retrieve from the `dataTransfer`).
 
-	Handling file upload requires, however, a lot more than reading {@link module:clipboard/datatransfer~DataTransfer#files `dataTransfer.files`} so for a complete code example, check the source code of plugins like [`ImageUploadEditing`](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageupload/imageuploadediting.js).
+	Handling file upload requires, however, a lot more than reading {@link module:engine/view/datatransfer~DataTransfer#files `dataTransfer.files`} so for a complete code example, check the source code of plugins like [`ImageUploadEditing`](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageupload/imageuploadediting.js).
 * Change the type of data that the clipboard feature reads from the clipboard. For instance, you may want to use `application/rtf` if it is present in the `dataTransfer` (and ignore `text/html` in that case).
 
 	```js

packages/ckeditor5-clipboard/src/clipboardobserver.js

@@ -9,7 +9,7 @@
 
 import DomEventObserver from '@ckeditor/ckeditor5-engine/src/view/observer/domeventobserver';
 import EventInfo from '@ckeditor/ckeditor5-utils/src/eventinfo';
-import DataTransfer from './datatransfer';
+import DataTransfer from '@ckeditor/ckeditor5-engine/src/view/datatransfer';
 
 /**
  * Clipboard events observer.
@@ -125,7 +125,7 @@ function getDropViewRange( view, domEvent ) {
  * @see module:clipboard/clipboard~Clipboard
  * @event module:engine/view/document~Document#event:clipboardInput
  * @param {Object} data The event data.
- * @param {module:clipboard/datatransfer~DataTransfer} data.dataTransfer The data transfer instance.
+ * @param {module:engine/view/datatransfer~DataTransfer} data.dataTransfer Data transfer instance.
  * @param {'paste'|'drop'} method Whether the event was triggered by a paste or drop operation.
  * @param {module:engine/view/element~Element} target The tree view element representing the target.
  * @param {Array.<module:engine/view/range~Range>} data.targetRanges Ranges which are the target of the operation
@@ -224,7 +224,7 @@ function getDropViewRange( view, domEvent ) {
  * The data transfer instance.
  *
  * @readonly
- * @member {module:clipboard/datatransfer~DataTransfer} module:clipboard/clipboardobserver~ClipboardEventData#dataTransfer
+ * @member {module:engine/view/datatransfer~DataTransfer} module:clipboard/clipboardobserver~ClipboardEventData#dataTransfer
  */
 
 /**
@@ -244,7 +244,7 @@ function getDropViewRange( view, domEvent ) {
  * @see module:clipboard/clipboard~Clipboard
  * @event module:engine/view/document~Document#event:dragging
  * @param {Object} data The event data.
- * @param {module:clipboard/datatransfer~DataTransfer} data.dataTransfer The data transfer instance.
+ * @param {module:engine/view/datatransfer~DataTransfer} data.dataTransfer The data transfer instance.
  * @param {module:engine/view/element~Element} target The tree view element representing the target.
  * @param {Array.<module:engine/view/range~Range>} data.targetRanges Ranges which are the target of the operation
  * (usually – into which the content should be inserted).

packages/ckeditor5-clipboard/src/clipboardpipeline.js

@@ -292,7 +292,7 @@ export default class ClipboardPipeline extends Plugin {
  * @param {module:engine/view/documentfragment~DocumentFragment} data.content The event data. The content to be inserted into the editor.
  * It can be modified by event listeners. Read more about the clipboard pipelines in
  * the {@glink framework/guides/deep-dive/clipboard clipboard deep dive guide}.
- * @param {module:clipboard/datatransfer~DataTransfer} data.dataTransfer The data transfer instance.
+ * @param {module:engine/view/datatransfer~DataTransfer} data.dataTransfer The data transfer instance.
  * @param {'paste'|'drop'} data.method Whether the event was triggered by a paste or drop operation.
  * @param {Array.<module:engine/view/range~Range>} data.targetRanges The target drop ranges.
  */
@@ -318,7 +318,7 @@ export default class ClipboardPipeline extends Plugin {
  * @param {Object} data The event data.
  * @param {module:engine/model/documentfragment~DocumentFragment} data.content The event data. The content to be inserted into the editor.
  * Read more about the clipboard pipelines in the {@glink framework/guides/deep-dive/clipboard clipboard deep dive guide}.
- * @param {module:clipboard/datatransfer~DataTransfer} data.dataTransfer The data transfer instance.
+ * @param {module:engine/view/datatransfer~DataTransfer} data.dataTransfer The data transfer instance.
  * @param {'paste'|'drop'} data.method Whether the event was triggered by a paste or drop operation.
  * @param {Array.<module:engine/view/range~Range>} data.targetRanges The target drop ranges.
  * @param {module:engine/model/range~Range} data.resultRange The result of the `model.insertContent()` call
@@ -347,7 +347,7 @@ export default class ClipboardPipeline extends Plugin {
  * The data transfer instance.
  *
  * @readonly
- * @member {module:clipboard/datatransfer~DataTransfer} module:clipboard/clipboardpipeline~ClipboardOutputEventData#dataTransfer
+ * @member {module:engine/view/datatransfer~DataTransfer} module:clipboard/clipboardpipeline~ClipboardOutputEventData#dataTransfer
  */
 
 /**

packages/ckeditor5-clipboard/tests/clipboardobserver.js

@@ -6,9 +6,9 @@
 /* globals document */
 
 import ClipboardObserver from '../src/clipboardobserver';
-import DataTransfer from '../src/datatransfer';
 
 import View from '@ckeditor/ckeditor5-engine/src/view/view';
+import DataTransfer from '@ckeditor/ckeditor5-engine/src/view/datatransfer';
 import DowncastWriter from '@ckeditor/ckeditor5-engine/src/view/downcastwriter';
 import createViewRoot from '@ckeditor/ckeditor5-engine/tests/view/_utils/createroot';
 

packages/ckeditor5-clipboard/tests/clipboardpipeline.js

@@ -5,7 +5,7 @@
 
 import ClipboardPipeline from '../src/clipboardpipeline';
 import ClipboardObserver from '../src/clipboardobserver';
-import DataTransfer from '../src/datatransfer';
+import DataTransfer from '@ckeditor/ckeditor5-engine/src/view/datatransfer';
 
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

packages/ckeditor5-clipboard/src/datatransfer.js → packages/ckeditor5-engine/src/view/datatransfer.ts

@@ -4,14 +4,20 @@
  */
 
 /**
- * @module clipboard/datatransfer
+ * @module engine/view/datatransfer
  */
 
+type DomDataTransfer = globalThis.DataTransfer;
+
 /**
  * A facade over the native [`DataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object.
  */
 export default class DataTransfer {
-	constructor( nativeDataTransfer ) {
+	public readonly files: Array<File>;
+
+	private _native: DomDataTransfer;
+
+	constructor( nativeDataTransfer: DomDataTransfer ) {
 		/**
 		 * The array of files created from the native `DataTransfer#files` or `DataTransfer#items`.
 		 *
@@ -34,7 +40,7 @@ export default class DataTransfer {
 	 *
 	 * @returns {Array.<String>}
 	 */
-	get types() {
+	public get types(): ReadonlyArray<string> {
 		return this._native.types;
 	}
 
@@ -46,7 +52,7 @@ export default class DataTransfer {
 	 * @param {String} type The MIME type. E.g. `text/html` or `text/plain`.
 	 * @returns {String}
 	 */
-	getData( type ) {
+	public getData( type: string ): string {
 		return this._native.getData( type );
 	}
 
@@ -56,7 +62,7 @@ export default class DataTransfer {
 	 * @param {String} type The MIME type. E.g. `text/html` or `text/plain`.
 	 * @param {String} data
 	 */
-	setData( type, data ) {
+	public setData( type: string, data: string ): void {
 		this._native.setData( type, data );
 	}
 
@@ -65,11 +71,11 @@ export default class DataTransfer {
 	 *
 	 * @param {String} value
 	 */
-	set effectAllowed( value ) {
+	public set effectAllowed( value: DomDataTransfer[ 'effectAllowed' ] ) {
 		this._native.effectAllowed = value;
 	}
 
-	get effectAllowed() {
+	public get effectAllowed(): DomDataTransfer[ 'effectAllowed' ] {
 		return this._native.effectAllowed;
 	}
 
@@ -78,11 +84,11 @@ export default class DataTransfer {
 	 *
 	 * @param {String} value
 	 */
-	set dropEffect( value ) {
+	public set dropEffect( value: DomDataTransfer[ 'dropEffect' ] ) {
 		this._native.dropEffect = value;
 	}
 
-	get dropEffect() {
+	public get dropEffect(): DomDataTransfer[ 'dropEffect' ] {
 		return this._native.dropEffect;
 	}
 
@@ -91,12 +97,12 @@ export default class DataTransfer {
 	 *
 	 * @returns {Boolean}
 	 */
-	get isCanceled() {
-		return this._native.dropEffect == 'none' || !!this._native.mozUserCancelled;
+	public get isCanceled(): boolean {
+		return this._native.dropEffect == 'none' || !!( this._native as any ).mozUserCancelled;
 	}
 }
 
-function getFiles( nativeDataTransfer ) {
+function getFiles( nativeDataTransfer: DomDataTransfer ): Array<File> {
 	// DataTransfer.files and items are array-like and might not have an iterable interface.
 	const files = Array.from( nativeDataTransfer.files || [] );
 	const items = Array.from( nativeDataTransfer.items || [] );
@@ -108,5 +114,5 @@ function getFiles( nativeDataTransfer ) {
 	// Chrome has empty DataTransfer.files, but allows getting files through the items interface.
 	return items
 		.filter( item => item.kind === 'file' )
-		.map( item => item.getAsFile() );
+		.map( item => item.getAsFile()! );
 }

packages/ckeditor5-engine/src/view/domconverter.ts

@@ -908,6 +908,11 @@ export default class DomConverter {
 				}
 			} else {
 				const domBefore = domParent.childNodes[ domOffset - 1 ];
+
+				if ( isText( domBefore ) && isInlineFiller( domBefore ) ) {
+					return this.domPositionToView( domBefore.parentNode!, indexOf( domBefore ) );
+				}
+
 				const viewBefore = isText( domBefore ) ?
 					this.findCorrespondingViewText( domBefore ) :
 					this.mapDomToView( domBefore as DomElement );

packages/ckeditor5-engine/src/view/observer/compositionobserver.ts

@@ -25,19 +25,42 @@ export default class CompositionObserver extends DomEventObserver<'compositionst
 		super( view );
 
 		this.domEventType = [ 'compositionstart', 'compositionupdate', 'compositionend' ];
+
 		const document = this.document;
 
 		document.on<CompositionObserverEvent>( 'compositionstart', () => {
+			// @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+			// @if CK_DEBUG_TYPING // 	console.log( '%c[CompositionObserver] ' +
+			// @if CK_DEBUG_TYPING // 		'┌───────────────────────────── isComposing = true ─────────────────────────────┐',
+			// @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green'
+			// @if CK_DEBUG_TYPING // 	);
+			// @if CK_DEBUG_TYPING // }
 			document.isComposing = true;
-		} );
+		}, { priority: 'low' } );
 
 		document.on<CompositionObserverEvent>( 'compositionend', () => {
+			// @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+			// @if CK_DEBUG_TYPING // 	console.log( '%c[CompositionObserver] ' +
+			// @if CK_DEBUG_TYPING // 		'└───────────────────────────── isComposing = false ─────────────────────────────┘',
+			// @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green'
+			// @if CK_DEBUG_TYPING // 	);
+			// @if CK_DEBUG_TYPING // }
 			document.isComposing = false;
-		} );
+		}, { priority: 'low' } );
 	}
 
 	public onDomEvent( domEvent: CompositionEvent ): void {
-		this.fire( domEvent.type, domEvent );
+		// @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+		// @if CK_DEBUG_TYPING // 	console.group( `%c[CompositionObserver]%c ${ domEvent.type }`, 'color: green', '' );
+		// @if CK_DEBUG_TYPING // }
+
+		this.fire( domEvent.type, domEvent, {
+			data: domEvent.data
+		} );
+
+		// @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+		// @if CK_DEBUG_TYPING // 	console.groupEnd();
+		// @if CK_DEBUG_TYPING // }
 	}
 }