Sfoglia il codice sorgente

Other: Renamed `uploadImage` command and button to `imageUpload`. Closes #184.

BREAKING CHANGE: `uploadImage` command and button are now called `imageUpload`.
Piotrek Koszuliński 7 anni fa
parent
commit
de098bc97d

+ 3 - 3
packages/ckeditor5-image/src/imageupload/imageuploadediting.js

@@ -41,8 +41,8 @@ export default class ImageUploadEditing extends Plugin {
 			allowAttributes: [ 'uploadId', 'uploadStatus' ]
 		} );
 
-		// Register uploadImage command.
-		editor.commands.add( 'uploadImage', new ImageUploadCommand( editor ) );
+		// Register imageUpload command.
+		editor.commands.add( 'imageUpload', new ImageUploadCommand( editor ) );
 
 		// Execute imageUpload command when image is dropped or pasted.
 		editor.editing.view.document.on( 'clipboardInput', ( evt, data ) => {
@@ -60,7 +60,7 @@ export default class ImageUploadEditing extends Plugin {
 				const insertAt = findOptimalInsertionPosition( targetModelSelection );
 
 				if ( isImageType( file ) ) {
-					editor.execute( 'uploadImage', { file, insertAt } );
+					editor.execute( 'imageUpload', { file, insertAt } );
 					evt.stop();
 				}
 

+ 5 - 5
packages/ckeditor5-image/src/imageupload/imageuploadui.js

@@ -14,7 +14,7 @@ import { isImageType, findOptimalInsertionPosition } from './utils';
 
 /**
  * Image upload button plugin.
- * Adds `uploadImage` button to UI component factory.
+ * Adds `imageUpload` button to UI component factory.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -26,10 +26,10 @@ export default class ImageUploadUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 
-		// Setup `uploadImage` button.
-		editor.ui.componentFactory.add( 'uploadImage', locale => {
+		// Setup `imageUpload` button.
+		editor.ui.componentFactory.add( 'imageUpload', locale => {
 			const view = new FileDialogButtonView( locale );
-			const command = editor.commands.get( 'uploadImage' );
+			const command = editor.commands.get( 'imageUpload' );
 
 			view.set( {
 				acceptedType: 'image/*',
@@ -49,7 +49,7 @@ export default class ImageUploadUI extends Plugin {
 					const insertAt = findOptimalInsertionPosition( editor.model.document.selection );
 
 					if ( isImageType( file ) ) {
-						editor.execute( 'uploadImage', { file, insertAt } );
+						editor.execute( 'imageUpload', { file, insertAt } );
 					}
 				}
 			} );

+ 19 - 19
packages/ckeditor5-image/tests/imageupload/imageuploadediting.js

@@ -69,11 +69,11 @@ describe( 'ImageUploadEditing', () => {
 		expect( model.schema.checkAttribute( [ '$root', 'image' ], 'uploadId' ) ).to.be.true;
 	} );
 
-	it( 'should register uploadImage command', () => {
-		expect( editor.commands.get( 'uploadImage' ) ).to.be.instanceOf( ImageUploadCommand );
+	it( 'should register imageUpload command', () => {
+		expect( editor.commands.get( 'imageUpload' ) ).to.be.instanceOf( ImageUploadCommand );
 	} );
 
-	it( 'should execute uploadImage command when image is pasted', () => {
+	it( 'should execute imageUpload command when image is pasted', () => {
 		const spy = sinon.spy( editor, 'execute' );
 		const fileMock = createNativeFileMock();
 		const dataTransfer = new DataTransfer( { files: [ fileMock ], types: [ 'Files' ] } );
@@ -85,7 +85,7 @@ describe( 'ImageUploadEditing', () => {
 		viewDocument.fire( 'clipboardInput', { dataTransfer, targetRanges: [ targetViewRange ] } );
 
 		sinon.assert.calledOnce( spy );
-		sinon.assert.calledWith( spy, 'uploadImage' );
+		sinon.assert.calledWith( spy, 'imageUpload' );
 
 		const id = fileRepository.getLoader( fileMock ).id;
 		expect( getModelData( model ) ).to.equal(
@@ -93,7 +93,7 @@ describe( 'ImageUploadEditing', () => {
 		);
 	} );
 
-	it( 'should execute uploadImage command with an optimized position when image is pasted', () => {
+	it( 'should execute imageUpload command with an optimized position when image is pasted', () => {
 		const spy = sinon.spy( editor, 'execute' );
 		const fileMock = createNativeFileMock();
 		const dataTransfer = new DataTransfer( { files: [ fileMock ], types: [ 'Files' ] } );
@@ -106,7 +106,7 @@ describe( 'ImageUploadEditing', () => {
 		viewDocument.fire( 'clipboardInput', { dataTransfer, targetRanges: [ targetViewRange ] } );
 
 		sinon.assert.calledOnce( spy );
-		sinon.assert.calledWith( spy, 'uploadImage' );
+		sinon.assert.calledWith( spy, 'imageUpload' );
 
 		const id = fileRepository.getLoader( fileMock ).id;
 		expect( getModelData( model ) ).to.equal(
@@ -114,7 +114,7 @@ describe( 'ImageUploadEditing', () => {
 		);
 	} );
 
-	it( 'should execute uploadImage command when multiple files image are pasted', () => {
+	it( 'should execute imageUpload command when multiple files image are pasted', () => {
 		const spy = sinon.spy( editor, 'execute' );
 		const files = [ createNativeFileMock(), createNativeFileMock() ];
 		const dataTransfer = new DataTransfer( { files, types: [ 'Files' ] } );
@@ -126,7 +126,7 @@ describe( 'ImageUploadEditing', () => {
 		viewDocument.fire( 'clipboardInput', { dataTransfer, targetRanges: [ targetViewRange ] } );
 
 		sinon.assert.calledTwice( spy );
-		sinon.assert.calledWith( spy, 'uploadImage' );
+		sinon.assert.calledWith( spy, 'imageUpload' );
 
 		const id1 = fileRepository.getLoader( files[ 0 ] ).id;
 		const id2 = fileRepository.getLoader( files[ 1 ] ).id;
@@ -138,7 +138,7 @@ describe( 'ImageUploadEditing', () => {
 		);
 	} );
 
-	it( 'should not execute uploadImage command when file is not an image', () => {
+	it( 'should not execute imageUpload command when file is not an image', () => {
 		const spy = sinon.spy( editor, 'execute' );
 		const viewDocument = editor.editing.view.document;
 		const fileMock = {
@@ -157,7 +157,7 @@ describe( 'ImageUploadEditing', () => {
 		sinon.assert.notCalled( spy );
 	} );
 
-	it( 'should not execute uploadImage command when there is non-empty HTML content pasted', () => {
+	it( 'should not execute imageUpload command when there is non-empty HTML content pasted', () => {
 		const spy = sinon.spy( editor, 'execute' );
 		const fileMock = createNativeFileMock();
 		const dataTransfer = new DataTransfer( {
@@ -213,7 +213,7 @@ describe( 'ImageUploadEditing', () => {
 	it( 'should use read data once it is present', done => {
 		const file = createNativeFileMock();
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
-		editor.execute( 'uploadImage', { file } );
+		editor.execute( 'imageUpload', { file } );
 
 		model.once( '_change', () => {
 			expect( getViewData( view ) ).to.equal(
@@ -233,7 +233,7 @@ describe( 'ImageUploadEditing', () => {
 	it( 'should replace read data with server response once it is present', done => {
 		const file = createNativeFileMock();
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
-		editor.execute( 'uploadImage', { file } );
+		editor.execute( 'imageUpload', { file } );
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
@@ -264,7 +264,7 @@ describe( 'ImageUploadEditing', () => {
 		}, { priority: 'high' } );
 
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
-		editor.execute( 'uploadImage', { file } );
+		editor.execute( 'imageUpload', { file } );
 
 		nativeReaderMock.mockError( 'Reading error.' );
 	} );
@@ -280,7 +280,7 @@ describe( 'ImageUploadEditing', () => {
 		}, { priority: 'high' } );
 
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
-		editor.execute( 'uploadImage', { file } );
+		editor.execute( 'imageUpload', { file } );
 		nativeReaderMock.abort();
 
 		setTimeout( () => {
@@ -308,7 +308,7 @@ describe( 'ImageUploadEditing', () => {
 			evt.stop();
 		}, { priority: 'high' } );
 
-		editor.execute( 'uploadImage', { file } );
+		editor.execute( 'imageUpload', { file } );
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
@@ -325,7 +325,7 @@ describe( 'ImageUploadEditing', () => {
 	it( 'should abort upload if image is removed', () => {
 		const file = createNativeFileMock();
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
-		editor.execute( 'uploadImage', { file } );
+		editor.execute( 'imageUpload', { file } );
 
 		const abortSpy = testUtils.sinon.spy( loader, 'abort' );
 
@@ -344,7 +344,7 @@ describe( 'ImageUploadEditing', () => {
 	it( 'should not abort and not restart upload when image is moved', () => {
 		const file = createNativeFileMock();
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
-		editor.execute( 'uploadImage', { file } );
+		editor.execute( 'imageUpload', { file } );
 
 		const abortSpy = testUtils.sinon.spy( loader, 'abort' );
 		const loadSpy = testUtils.sinon.spy( loader, 'read' );
@@ -369,7 +369,7 @@ describe( 'ImageUploadEditing', () => {
 			evt.stop();
 		}, { priority: 'high' } );
 
-		editor.execute( 'uploadImage', { file } );
+		editor.execute( 'imageUpload', { file } );
 
 		model.document.once( 'change', () => {
 			// This is called after "manual" remove.
@@ -405,7 +405,7 @@ describe( 'ImageUploadEditing', () => {
 	it( 'should create responsive image if server return multiple images', done => {
 		const file = createNativeFileMock();
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
-		editor.execute( 'uploadImage', { file } );
+		editor.execute( 'imageUpload', { file } );
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {

+ 6 - 6
packages/ckeditor5-image/tests/imageupload/imageuploadprogress.js

@@ -70,7 +70,7 @@ describe( 'ImageUploadProgress', () => {
 
 	it( 'should convert image\'s "reading" uploadStatus attribute', () => {
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
-		editor.execute( 'uploadImage', { file: createNativeFileMock() } );
+		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
@@ -81,7 +81,7 @@ describe( 'ImageUploadProgress', () => {
 
 	it( 'should convert image\'s "uploading" uploadStatus attribute', done => {
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
-		editor.execute( 'uploadImage', { file: createNativeFileMock() } );
+		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		model.document.once( 'change', () => {
 			expect( getViewData( view ) ).to.equal(
@@ -99,7 +99,7 @@ describe( 'ImageUploadProgress', () => {
 
 	it( 'should update progressbar width on progress', done => {
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
-		editor.execute( 'uploadImage', { file: createNativeFileMock() } );
+		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		model.document.once( 'change', () => {
 			adapterMock.mockProgress( 40, 100 );
@@ -119,7 +119,7 @@ describe( 'ImageUploadProgress', () => {
 
 	it( 'should convert image\'s "complete" uploadStatus attribute', done => {
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
-		editor.execute( 'uploadImage', { file: createNativeFileMock() } );
+		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
@@ -143,7 +143,7 @@ describe( 'ImageUploadProgress', () => {
 		uploadProgress.placeholder = base64Sample;
 
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
-		editor.execute( 'uploadImage', { file: createNativeFileMock() } );
+		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
@@ -158,7 +158,7 @@ describe( 'ImageUploadProgress', () => {
 		}, { priority: 'highest' } );
 
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
-		editor.execute( 'uploadImage', { file: createNativeFileMock() } );
+		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-widget image" contenteditable="false"><img></img></figure>]<p>foo</p>'

+ 15 - 15
packages/ckeditor5-image/tests/imageupload/imageuploadui.js

@@ -55,15 +55,15 @@ describe( 'ImageUploadUI', () => {
 		return editor.destroy();
 	} );
 
-	it( 'should register uploadImage button', () => {
-		const button = editor.ui.componentFactory.create( 'uploadImage' );
+	it( 'should register imageUpload button', () => {
+		const button = editor.ui.componentFactory.create( 'imageUpload' );
 
 		expect( button ).to.be.instanceOf( FileDialogButtonView );
 	} );
 
 	it( 'should be disabled while ImageUploadCommand is disabled', () => {
-		const button = editor.ui.componentFactory.create( 'uploadImage' );
-		const command = editor.commands.get( 'uploadImage' );
+		const button = editor.ui.componentFactory.create( 'imageUpload' );
+		const command = editor.commands.get( 'imageUpload' );
 
 		command.isEnabled = true;
 
@@ -76,8 +76,8 @@ describe( 'ImageUploadUI', () => {
 
 	// ckeditor5-upload/#77
 	it( 'should be properly bound with ImageUploadCommand', () => {
-		const button = editor.ui.componentFactory.create( 'uploadImage' );
-		const command = editor.commands.get( 'uploadImage' );
+		const button = editor.ui.componentFactory.create( 'imageUpload' );
+		const command = editor.commands.get( 'imageUpload' );
 		const spy = sinon.spy();
 
 		button.render();
@@ -91,19 +91,19 @@ describe( 'ImageUploadUI', () => {
 		sinon.assert.notCalled( spy );
 	} );
 
-	it( 'should execute uploadImage command', () => {
+	it( 'should execute imageUpload command', () => {
 		const executeStub = sinon.stub( editor, 'execute' );
-		const button = editor.ui.componentFactory.create( 'uploadImage' );
+		const button = editor.ui.componentFactory.create( 'imageUpload' );
 		const files = [ createNativeFileMock() ];
 
 		button.fire( 'done', files );
 		sinon.assert.calledOnce( executeStub );
-		expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'uploadImage' );
+		expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
 		expect( executeStub.firstCall.args[ 1 ].file ).to.equal( files[ 0 ] );
 	} );
 
 	it( 'should optimize the insertion position', () => {
-		const button = editor.ui.componentFactory.create( 'uploadImage' );
+		const button = editor.ui.componentFactory.create( 'imageUpload' );
 		const files = [ createNativeFileMock() ];
 
 		setModelData( model, '<paragraph>f[]oo</paragraph>' );
@@ -119,7 +119,7 @@ describe( 'ImageUploadUI', () => {
 	} );
 
 	it( 'should correctly insert multiple files', () => {
-		const button = editor.ui.componentFactory.create( 'uploadImage' );
+		const button = editor.ui.componentFactory.create( 'imageUpload' );
 		const files = [ createNativeFileMock(), createNativeFileMock() ];
 
 		setModelData( model, '<paragraph>foo[]</paragraph><paragraph>bar</paragraph>' );
@@ -137,9 +137,9 @@ describe( 'ImageUploadUI', () => {
 		);
 	} );
 
-	it( 'should not execute uploadImage if the file is not an image', () => {
+	it( 'should not execute imageUpload if the file is not an image', () => {
 		const executeStub = sinon.stub( editor, 'execute' );
-		const button = editor.ui.componentFactory.create( 'uploadImage' );
+		const button = editor.ui.componentFactory.create( 'imageUpload' );
 		const file = {
 			type: 'media/mp3',
 			size: 1024
@@ -151,7 +151,7 @@ describe( 'ImageUploadUI', () => {
 
 	it( 'should work even if the FileList does not support iterators', () => {
 		const executeStub = sinon.stub( editor, 'execute' );
-		const button = editor.ui.componentFactory.create( 'uploadImage' );
+		const button = editor.ui.componentFactory.create( 'imageUpload' );
 		const files = {
 			0: createNativeFileMock(),
 			length: 1
@@ -159,7 +159,7 @@ describe( 'ImageUploadUI', () => {
 
 		button.fire( 'done', files );
 		sinon.assert.calledOnce( executeStub );
-		expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'uploadImage' );
+		expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
 		expect( executeStub.firstCall.args[ 1 ].file ).to.equal( files[ 0 ] );
 	} );
 } );

+ 1 - 1
packages/ckeditor5-image/tests/manual/imageupload.js

@@ -30,7 +30,7 @@ ClassicEditor
 			Enter, Typing, Paragraph, Heading, Undo, Bold, Italic, Heading, List, Image, ImageToolbar, Clipboard,
 			ImageCaption, ImageStyle, ImageUpload
 		],
-		toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'uploadImage' ],
+		toolbar: [ 'heading', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'imageUpload' ],
 		image: {
 			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		}