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

Udpated image upload feature to changes made in engine view.

Szymon Kupś 8 лет назад
Родитель
Сommit
49cfff6aed

+ 5 - 4
packages/ckeditor5-image/src/imageupload/imageuploadediting.js

@@ -45,7 +45,7 @@ export default class ImageUploadEditing extends Plugin {
 		editor.commands.add( 'imageUpload', new ImageUploadCommand( editor ) );
 		editor.commands.add( 'imageUpload', new ImageUploadCommand( editor ) );
 
 
 		// Execute imageUpload command when image is dropped or pasted.
 		// Execute imageUpload command when image is dropped or pasted.
-		editor.editing.view.on( 'clipboardInput', ( evt, data ) => {
+		editor.editing.view.document.on( 'clipboardInput', ( evt, data ) => {
 			// Skip if non empty HTML data is included.
 			// Skip if non empty HTML data is included.
 			// https://github.com/ckeditor/ckeditor5-upload/issues/68
 			// https://github.com/ckeditor/ckeditor5-upload/issues/68
 			if ( isHtmlIncluded( data.dataTransfer ) ) {
 			if ( isHtmlIncluded( data.dataTransfer ) ) {
@@ -71,7 +71,7 @@ export default class ImageUploadEditing extends Plugin {
 		} );
 		} );
 
 
 		// Prevents from browser redirecting to the dropped image.
 		// Prevents from browser redirecting to the dropped image.
-		editor.editing.view.on( 'dragover', ( evt, data ) => {
+		editor.editing.view.document.on( 'dragover', ( evt, data ) => {
 			data.preventDefault();
 			data.preventDefault();
 		} );
 		} );
 
 
@@ -134,8 +134,9 @@ export default class ImageUploadEditing extends Plugin {
 				const viewImg = viewFigure.getChild( 0 );
 				const viewImg = viewFigure.getChild( 0 );
 				const promise = loader.upload();
 				const promise = loader.upload();
 
 
-				viewImg.setAttribute( 'src', data );
-				editor.editing.view.render();
+				editor.editing.view.change( () => {
+					viewImg.setAttribute( 'src', data );
+				} );
 
 
 				model.enqueueChange( 'transparent', writer => {
 				model.enqueueChange( 'transparent', writer => {
 					writer.setAttribute( 'uploadStatus', 'uploading', imageElement );
 					writer.setAttribute( 'uploadStatus', 'uploading', imageElement );

+ 9 - 8
packages/ckeditor5-image/tests/imageupload/imageuploadediting.js

@@ -29,7 +29,7 @@ import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
 describe( 'ImageUploadEditing', () => {
 describe( 'ImageUploadEditing', () => {
 	// eslint-disable-next-line max-len
 	// eslint-disable-next-line max-len
 	const base64Sample = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
 	const base64Sample = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
-	let editor, model, doc, fileRepository, viewDocument, nativeReaderMock, loader, adapterMock;
+	let editor, model, view, doc, fileRepository, viewDocument, nativeReaderMock, loader, adapterMock;
 
 
 	testUtils.createSinonSandbox();
 	testUtils.createSinonSandbox();
 
 
@@ -60,7 +60,8 @@ describe( 'ImageUploadEditing', () => {
 				editor = newEditor;
 				editor = newEditor;
 				model = editor.model;
 				model = editor.model;
 				doc = model.document;
 				doc = model.document;
-				viewDocument = editor.editing.view;
+				view = editor.editing.view;
+				viewDocument = view.document;
 			} );
 			} );
 	} );
 	} );
 
 
@@ -203,7 +204,7 @@ describe( 'ImageUploadEditing', () => {
 
 
 		setModelData( model, '<image uploadId="1234"></image>' );
 		setModelData( model, '<image uploadId="1234"></image>' );
 
 
-		expect( getViewData( viewDocument ) ).to.equal(
+		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-widget image" contenteditable="false">' +
 			'[<figure class="ck-widget image" contenteditable="false">' +
 				'<img></img>' +
 				'<img></img>' +
 			'</figure>]' );
 			'</figure>]' );
@@ -215,7 +216,7 @@ describe( 'ImageUploadEditing', () => {
 		editor.execute( 'imageUpload', { file } );
 		editor.execute( 'imageUpload', { file } );
 
 
 		model.once( '_change', () => {
 		model.once( '_change', () => {
-			expect( getViewData( viewDocument ) ).to.equal(
+			expect( getViewData( view ) ).to.equal(
 				'[<figure class="ck-widget image" contenteditable="false">' +
 				'[<figure class="ck-widget image" contenteditable="false">' +
 				`<img src="${ base64Sample }"></img>` +
 				`<img src="${ base64Sample }"></img>` +
 				'</figure>]' +
 				'</figure>]' +
@@ -236,7 +237,7 @@ describe( 'ImageUploadEditing', () => {
 
 
 		model.document.once( 'change', () => {
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
-				expect( getViewData( viewDocument ) ).to.equal(
+				expect( getViewData( view ) ).to.equal(
 					'[<figure class="ck-widget image" contenteditable="false"><img src="image.png"></img></figure>]<p>foo bar</p>'
 					'[<figure class="ck-widget image" contenteditable="false"><img src="image.png"></img></figure>]<p>foo bar</p>'
 				);
 				);
 				expect( loader.status ).to.equal( 'idle' );
 				expect( loader.status ).to.equal( 'idle' );
@@ -291,7 +292,7 @@ describe( 'ImageUploadEditing', () => {
 	it( 'should do nothing if image does not have uploadId', () => {
 	it( 'should do nothing if image does not have uploadId', () => {
 		setModelData( model, '<image src="image.png"></image>' );
 		setModelData( model, '<image src="image.png"></image>' );
 
 
-		expect( getViewData( viewDocument ) ).to.equal(
+		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-widget image" contenteditable="false"><img src="image.png"></img></figure>]'
 			'[<figure class="ck-widget image" contenteditable="false"><img src="image.png"></img></figure>]'
 		);
 		);
 	} );
 	} );
@@ -408,7 +409,7 @@ describe( 'ImageUploadEditing', () => {
 
 
 		model.document.once( 'change', () => {
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
-				expect( getViewData( viewDocument ) ).to.equal(
+				expect( getViewData( view ) ).to.equal(
 					'[<figure class="ck-widget image" contenteditable="false">' +
 					'[<figure class="ck-widget image" contenteditable="false">' +
 						'<img sizes="100vw" src="image.png" srcset="image-500.png 500w, image-800.png 800w" width="800"></img>' +
 						'<img sizes="100vw" src="image.png" srcset="image-500.png 500w, image-800.png 800w" width="800"></img>' +
 					'</figure>]<p>foo bar</p>'
 					'</figure>]<p>foo bar</p>'
@@ -427,7 +428,7 @@ describe( 'ImageUploadEditing', () => {
 	it( 'should prevent from browser redirecting when an image is dropped on another image', () => {
 	it( 'should prevent from browser redirecting when an image is dropped on another image', () => {
 		const spy = testUtils.sinon.spy();
 		const spy = testUtils.sinon.spy();
 
 
-		editor.editing.view.fire( 'dragover', {
+		editor.editing.view.document.fire( 'dragover', {
 			preventDefault: spy
 			preventDefault: spy
 		} );
 		} );