Merge pull request #63 from ckeditor/t/ckeditor5-upload/92

Fix: The DOM `drop` event will not bubble up if the `clipboardInput` event was handled. Closes ckeditor/ckeditor5-upload#92.

src/clipboardobserver.js

@@ -8,6 +8,7 @@
  */
 
 import DomEventObserver from '@ckeditor/ckeditor5-engine/src/view/observer/domeventobserver';
+import EventInfo from '@ckeditor/ckeditor5-utils/src/eventinfo';
 import DataTransfer from './datatransfer';
 
 /**
@@ -45,10 +46,19 @@ export default class ClipboardObserver extends DomEventObserver {
 
 			const targetRanges = data.dropRange ? [ data.dropRange ] : Array.from( viewDocument.selection.getRanges() );
 
-			viewDocument.fire( 'clipboardInput', {
+			const eventInfo = new EventInfo( viewDocument, 'clipboardInput' );
+
+			viewDocument.fire( eventInfo, {
 				dataTransfer: data.dataTransfer,
 				targetRanges
 			} );
+
+			// If CKEditor handled the input, do not bubble the original event any further.
+			// This helps external integrations recognize that fact and act accordingly.
+			// https://github.com/ckeditor/ckeditor5-upload/issues/92
+			if ( eventInfo.stop.called ) {
+				data.stopPropagation();
+			}
 		}
 	}
 

tests/clipboard.js

@@ -191,6 +191,7 @@ describe( 'Clipboard feature', () => {
 
 			viewDocument.fire( 'paste', {
 				dataTransfer: dataTransferMock,
+				stopPropagation() {},
 				preventDefault() {}
 			} );
 
@@ -286,6 +287,7 @@ describe( 'Clipboard feature', () => {
 
 			viewDocument.fire( 'paste', {
 				dataTransfer: dataTransferMock,
+				stopPropagation() {},
 				preventDefault() {}
 			} );
 

tests/clipboardobserver.js

@@ -12,7 +12,7 @@ import DataTransfer from '../src/datatransfer';
 import createViewRoot from '@ckeditor/ckeditor5-engine/tests/view/_utils/createroot';
 
 describe( 'ClipboardObserver', () => {
-	let view, doc, writer, observer, root, el, range, eventSpy, preventDefaultSpy;
+	let view, doc, writer, observer, root, el, range, eventSpy, preventDefaultSpy, stopPropagationSpy;
 
 	beforeEach( () => {
 		view = new View();
@@ -34,6 +34,7 @@ describe( 'ClipboardObserver', () => {
 
 		eventSpy = sinon.spy();
 		preventDefaultSpy = sinon.spy();
+		stopPropagationSpy = sinon.spy();
 	} );
 
 	it( 'should define domEventType', () => {
@@ -224,6 +225,34 @@ describe( 'ClipboardObserver', () => {
 
 			expect( sinon.assert.callOrder( normalPrioritySpy, eventSpy ) );
 		} );
+
+		// https://github.com/ckeditor/ckeditor5-upload/issues/92
+		it( 'should stop propagation of the original event if handled by the editor', () => {
+			const dataTransfer = new DataTransfer( mockDomDataTransfer() );
+
+			doc.fire( 'drop', {
+				dataTransfer,
+				preventDefault: preventDefaultSpy,
+				stopPropagation: stopPropagationSpy,
+				dropRange: range
+			} );
+
+			sinon.assert.notCalled( stopPropagationSpy );
+
+			doc.on( 'clipboardInput', evt => {
+				// E.g. some feature handled the input.
+				evt.stop();
+			} );
+
+			doc.fire( 'drop', {
+				dataTransfer,
+				preventDefault: preventDefaultSpy,
+				stopPropagation: stopPropagationSpy,
+				dropRange: range
+			} );
+
+			sinon.assert.calledOnce( stopPropagationSpy );
+		} );
 	} );
 
 	describe( 'dragover event', () => {