8
0
Просмотр исходного кода

Removed the insertAt option from `ImageUploadCommand`. The `ImageUploadEditing` will use `ImageUploadCommand` for uploading pasted images.

Maciej Gołaszewski 7 лет назад
Родитель
Сommit
33bab6a0e0

+ 4 - 19
packages/ckeditor5-image/src/imageupload/imageuploadcommand.js

@@ -3,8 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
-import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
 import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
 import Command from '@ckeditor/ckeditor5-core/src/command';
 import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
@@ -36,10 +34,6 @@ export default class ImageUploadCommand extends Command {
 	 * @fires execute
 	 * @param {Object} options Options for the executed command.
 	 * @param {File|Array.<File>} options.files The image file or an array of image files to upload.
-	 * @param {module:engine/model/position~Position} [options.insertAt] The position at which the images should be inserted.
-	 * If the position is not specified, the image will be inserted into the current selection.
-	 * Note: You can use the {@link module:widget/utils~findOptimalInsertionPosition} function
-	 * to calculate (e.g. based on the current selection) a position which is more optimal from the UX perspective.
 	 */
 	execute( options ) {
 		const editor = this.editor;
@@ -48,7 +42,7 @@ export default class ImageUploadCommand extends Command {
 			const filesToUpload = Array.isArray( options.files ) ? options.files : [ options.files ];
 
 			for ( const file of filesToUpload ) {
-				uploadImage( writer, editor, file, options.insertAt );
+				uploadImage( writer, editor, file );
 			}
 		} );
 	}
@@ -59,8 +53,7 @@ export default class ImageUploadCommand extends Command {
 // @param {module:engine/model/writer~writer} writer
 // @param {module:core/editor/editor~Editor} editor
 // @param {File} file
-// @param {module:engine/model/position~Position} insertAt
-function uploadImage( writer, editor, file, insertAt ) {
+function uploadImage( writer, editor, file ) {
 	const doc = editor.model.document;
 	const fileRepository = editor.plugins.get( FileRepository );
 
@@ -71,17 +64,9 @@ function uploadImage( writer, editor, file, insertAt ) {
 		return;
 	}
 
-	const imageElement = writer.createElement( 'image', {
-		uploadId: loader.id
-	} );
+	const imageElement = writer.createElement( 'image', { uploadId: loader.id } );
 
-	let insertAtSelection;
-
-	if ( insertAt ) {
-		insertAtSelection = new ModelSelection( [ new ModelRange( insertAt ) ] );
-	} else {
-		insertAtSelection = findOptimalInsertionPosition( doc.selection );
-	}
+	const insertAtSelection = findOptimalInsertionPosition( doc.selection );
 
 	editor.model.insertContent( imageElement, insertAtSelection );
 

+ 12 - 27
packages/ckeditor5-image/src/imageupload/imageuploadediting.js

@@ -13,7 +13,6 @@ import ImageUploadCommand from '../../src/imageupload/imageuploadcommand';
 import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
 import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
 import { isImageType } from '../../src/imageupload/utils';
-import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
 
 /**
  * The editing part of the image upload feature.
@@ -56,39 +55,25 @@ export default class ImageUploadEditing extends Plugin {
 				return;
 			}
 
-			let targetModelSelection = new ModelSelection(
+			const images = Array.from( data.dataTransfer.files ).filter( isImageType );
+
+			const targetModelSelection = new ModelSelection(
 				data.targetRanges.map( viewRange => editor.editing.mapper.toModelRange( viewRange ) )
 			);
 
-			for ( const file of data.dataTransfer.files ) {
-				if ( isImageType( file ) ) {
-					const insertAt = findOptimalInsertionPosition( targetModelSelection );
-
-					editor.model.change( writer => {
-						const loader = fileRepository.createLoader( file );
-
-						// Do not throw when upload adapter is not set. FileRepository will log an error anyway.
-						if ( !loader ) {
-							return;
-						}
+			editor.model.change( writer => {
+				// Set selection to paste target.
+				writer.setSelection( targetModelSelection );
 
-						const imageElement = writer.createElement( 'image', { uploadId: loader.id } );
-
-						editor.model.insertContent( imageElement, insertAt );
+				if ( images.length ) {
+					evt.stop();
 
-						// Inserting an image might've failed due to schema regulations.
-						if ( imageElement.parent ) {
-							writer.setSelection( imageElement, 'on' );
-						}
+					// Upload images after the selection has changed in order to ensure the command's state is refreshed.
+					editor.model.enqueueChange( 'default', () => {
+						editor.execute( 'imageUpload', { files: images } );
 					} );
-
-					evt.stop();
 				}
-
-				// Use target ranges only for the first image. Then, use that image position
-				// so we keep adding the next ones after the previous one.
-				targetModelSelection = doc.selection;
-			}
+			} );
 		} );
 
 		// Prevents from the browser redirecting to the dropped image.

+ 1 - 16
packages/ckeditor5-image/tests/imageupload/imageuploadcommand.js

@@ -15,14 +15,13 @@ import { setData as setModelData, getData as getModelData } from '@ckeditor/cked
 import Image from '../../src/image/imageediting';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
-import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
 
 import log from '@ckeditor/ckeditor5-utils/src/log';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'ImageUploadCommand', () => {
-	let editor, command, model, doc, fileRepository;
+	let editor, command, model, fileRepository;
 
 	testUtils.createSinonSandbox();
 
@@ -43,7 +42,6 @@ describe( 'ImageUploadCommand', () => {
 			.then( newEditor => {
 				editor = newEditor;
 				model = editor.model;
-				doc = model.document;
 
 				command = new ImageUploadCommand( editor );
 
@@ -131,19 +129,6 @@ describe( 'ImageUploadCommand', () => {
 				.to.equal( `[<image uploadId="${ id }"></image>]<paragraph>foo</paragraph>` );
 		} );
 
-		it( 'should insert directly at specified position (options.insertAt)', () => {
-			const file = createNativeFileMock();
-			setModelData( model, '<paragraph>f[]oo</paragraph>' );
-
-			const insertAt = new ModelPosition( doc.getRoot(), [ 0, 2 ] ); // fo[]o
-
-			command.execute( { files: file, insertAt } );
-
-			const id = fileRepository.getLoader( file ).id;
-			expect( getModelData( model ) )
-				.to.equal( `<paragraph>fo</paragraph>[<image uploadId="${ id }"></image>]<paragraph>o</paragraph>` );
-		} );
-
 		it( 'should use parent batch', () => {
 			const file = createNativeFileMock();
 

+ 6 - 10
packages/ckeditor5-image/tests/imageupload/imageuploadediting.js

@@ -137,27 +137,23 @@ describe( 'ImageUploadEditing', () => {
 	} );
 
 	it( 'should insert image when is pasted on allowed position when ImageUploadCommand is disabled', () => {
+		setModelData( model, '<paragraph>foo</paragraph>[<image></image>]' );
+
 		const fileMock = createNativeFileMock();
 		const dataTransfer = new DataTransfer( { files: [ fileMock ], types: [ 'Files' ] } );
-		setModelData( model, '<paragraph>[]foo</paragraph>' );
 
 		const command = editor.commands.get( 'imageUpload' );
 
-		command.on( 'set:isEnabled', evt => {
-			evt.return = false;
-			evt.stop();
-		}, { priority: 'highest' } );
-
-		command.isEnabled = false;
+		expect( command.isEnabled ).to.be.false;
 
-		const targetRange = Range.createFromParentsAndOffsets( doc.getRoot(), 1, doc.getRoot(), 1 );
+		const targetRange = Range.createFromParentsAndOffsets( doc.getRoot(), 0, doc.getRoot(), 0 );
 		const targetViewRange = editor.editing.mapper.toViewRange( targetRange );
 
 		viewDocument.fire( 'clipboardInput', { dataTransfer, targetRanges: [ targetViewRange ] } );
 
 		const id = fileRepository.getLoader( fileMock ).id;
 		expect( getModelData( model ) ).to.equal(
-			`<paragraph>foo</paragraph>[<image uploadId="${ id }" uploadStatus="reading"></image>]`
+			`[<image uploadId="${ id }" uploadStatus="reading"></image>]<paragraph>foo</paragraph><image></image>`
 		);
 	} );
 
@@ -258,7 +254,7 @@ describe( 'ImageUploadEditing', () => {
 			viewDocument.fire( 'clipboardInput', { dataTransfer, targetRanges: [ targetViewRange ] } );
 		} ).to.not.throw();
 
-		expect( getModelData( model ) ).to.equal( '<paragraph>[]foo</paragraph>' );
+		expect( getModelData( model ) ).to.equal( '<paragraph>foo[]</paragraph>' );
 		sinon.assert.calledOnce( logStub );
 	} );