Explorar o código

Fixed support for inserting multiple files using the button.

Piotrek Koszuliński %!s(int64=8) %!d(string=hai) anos
pai
achega
5fdf79717b

+ 2 - 2
packages/ckeditor5-upload/src/imageuploadbutton.js

@@ -50,9 +50,9 @@ export default class ImageUploadButton extends Plugin {
 			view.bind( 'isEnabled' ).to( command );
 
 			view.on( 'done', ( evt, files ) => {
-				const insertAt = findOptimalInsertionPosition( editor.document.selection );
-
 				for ( const file of files ) {
+					const insertAt = findOptimalInsertionPosition( editor.document.selection );
+
 					editor.execute( 'imageUpload', { file, insertAt } );
 				}
 			} );

+ 48 - 6
packages/ckeditor5-upload/tests/imageuploadbutton.js

@@ -6,27 +6,50 @@
 /* globals document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
 import Image from '@ckeditor/ckeditor5-image/src/image';
 import FileDialogButtonView from '../src/ui/filedialogbuttonview';
+import FileRepository from '../src/filerepository';
 import ImageUploadButton from '../src/imageuploadbutton';
 import ImageUploadEngine from '../src/imageuploadengine';
-import { createNativeFileMock } from './_utils/mocks';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
+
+import { createNativeFileMock, AdapterMock } from './_utils/mocks';
+import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'ImageUploadButton', () => {
-	let editor;
+	let editor, doc, editorElement, fileRepository;
 
 	beforeEach( () => {
-		const editorElement = document.createElement( 'div' );
+		editorElement = document.createElement( 'div' );
 		document.body.appendChild( editorElement );
 
-		return ClassicEditor.create( editorElement, {
-			plugins: [ Image, ImageUploadButton ]
-		} )
+		return ClassicEditor
+			.create( editorElement, {
+				plugins: [ Paragraph, Image, ImageUploadButton, FileRepository ]
+			} )
 			.then( newEditor => {
 				editor = newEditor;
+				doc = editor.document;
+
+				fileRepository = editor.plugins.get( FileRepository );
+				fileRepository.createAdapter = loader => {
+					return new AdapterMock( loader );
+				};
+
+				// Hide all notifications (prevent alert() calls).
+				const notification = editor.plugins.get( Notification );
+				notification.on( 'show', evt => evt.stop() );
 			} );
 	} );
 
+	afterEach( () => {
+		editorElement.remove();
+
+		return editor.destroy();
+	} );
+
 	it( 'should include ImageUploadEngine', () => {
 		expect( editor.plugins.get( ImageUploadEngine ) ).to.be.instanceOf( ImageUploadEngine );
 	} );
@@ -60,5 +83,24 @@ describe( 'ImageUploadButton', () => {
 		expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
 		expect( executeStub.firstCall.args[ 1 ].file ).to.equal( files[ 0 ] );
 	} );
+
+	it( 'should correctly insert multiple files', () => {
+		const button = editor.ui.componentFactory.create( 'insertImage' );
+		const files = [ createNativeFileMock(), createNativeFileMock() ];
+
+		setModelData( doc, '<paragraph>foo[]</paragraph><paragraph>bar</paragraph>' );
+
+		button.fire( 'done', files );
+
+		const id1 = fileRepository.getLoader( files[ 0 ] ).id;
+		const id2 = fileRepository.getLoader( files[ 1 ] ).id;
+
+		expect( getModelData( doc ) ).to.equal(
+			'<paragraph>foo</paragraph>' +
+			`<image uploadId="${ id1 }" uploadStatus="reading"></image>` +
+			`[<image uploadId="${ id2 }" uploadStatus="reading"></image>]` +
+			'<paragraph>bar</paragraph>'
+		);
+	} );
 } );
 

+ 6 - 4
packages/ckeditor5-upload/tests/imageuploadcommand.js

@@ -14,7 +14,7 @@ import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/build
 import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
 
 describe( 'ImageUploadCommand', () => {
-	let editor, command, adapterMock, doc, fileRepository;
+	let editor, command, doc, fileRepository;
 
 	beforeEach( () => {
 		return VirtualTestEditor.create( {
@@ -25,9 +25,7 @@ describe( 'ImageUploadCommand', () => {
 			command = new ImageUploadCommand( editor );
 			fileRepository = editor.plugins.get( FileRepository );
 			fileRepository.createAdapter = loader => {
-				adapterMock = new AdapterMock( loader );
-
-				return adapterMock;
+				return new AdapterMock( loader );
 			};
 
 			doc = editor.document;
@@ -38,6 +36,10 @@ describe( 'ImageUploadCommand', () => {
 		} );
 	} );
 
+	afterEach( () => {
+		return editor.destroy();
+	} );
+
 	describe( 'execute()', () => {
 		it( 'should insert image at selection position (includes deleting selected content)', () => {
 			const file = createNativeFileMock();