From ca9cb39e639107f3112cd3aeffe447884e0d88ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Mon, 2 Sep 2019 16:13:36 +0200 Subject: [PATCH 1/3] Make Clipboard plugin required by ImageUploadEditing. --- src/imageupload/imageuploadediting.js | 41 ++++++++++++------------- tests/imageupload/imageuploadediting.js | 2 +- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/imageupload/imageuploadediting.js b/src/imageupload/imageuploadediting.js index 813db468..ab97aeb9 100644 --- a/src/imageupload/imageuploadediting.js +++ b/src/imageupload/imageuploadediting.js @@ -10,6 +10,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository'; import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification'; +import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard'; import UpcastWriter from '@ckeditor/ckeditor5-engine/src/view/upcastwriter'; import env from '@ckeditor/ckeditor5-utils/src/env'; @@ -27,7 +28,7 @@ export default class ImageUploadEditing extends Plugin { * @inheritDoc */ static get requires() { - return [ FileRepository, Notification ]; + return [ FileRepository, Notification, Clipboard ]; } static get pluginName() { @@ -118,31 +119,29 @@ export default class ImageUploadEditing extends Plugin { // For every image file, a new file loader is created and a placeholder image is // inserted into the content. Then, those images are uploaded once they appear in the model // (see Document#change listener below). - if ( editor.plugins.has( 'Clipboard' ) ) { - this.listenTo( editor.plugins.get( 'Clipboard' ), 'inputTransformation', ( evt, data ) => { - const fetchableImages = Array.from( editor.editing.view.createRangeIn( data.content ) ) - .filter( value => isLocalImage( value.item ) && !value.item.getAttribute( 'uploadProcessed' ) ) - .map( value => { return { promise: fetchLocalImage( value.item ), imageElement: value.item }; } ); - - if ( !fetchableImages.length ) { - return; - } + this.listenTo( editor.plugins.get( 'Clipboard' ), 'inputTransformation', ( evt, data ) => { + const fetchableImages = Array.from( editor.editing.view.createRangeIn( data.content ) ) + .filter( value => isLocalImage( value.item ) && !value.item.getAttribute( 'uploadProcessed' ) ) + .map( value => { return { promise: fetchLocalImage( value.item ), imageElement: value.item }; } ); - const writer = new UpcastWriter(); + if ( !fetchableImages.length ) { + return; + } - for ( const fetchableImage of fetchableImages ) { - // Set attribute marking that the image was processed already. - writer.setAttribute( 'uploadProcessed', true, fetchableImage.imageElement ); + const writer = new UpcastWriter(); - const loader = fileRepository.createLoader( fetchableImage.promise ); + for ( const fetchableImage of fetchableImages ) { + // Set attribute marking that the image was processed already. + writer.setAttribute( 'uploadProcessed', true, fetchableImage.imageElement ); - if ( loader ) { - writer.setAttribute( 'src', '', fetchableImage.imageElement ); - writer.setAttribute( 'uploadId', loader.id, fetchableImage.imageElement ); - } + const loader = fileRepository.createLoader( fetchableImage.promise ); + + if ( loader ) { + writer.setAttribute( 'src', '', fetchableImage.imageElement ); + writer.setAttribute( 'uploadId', loader.id, fetchableImage.imageElement ); } - } ); - } + } + } ); // Prevents from the browser redirecting to the dropped image. editor.editing.view.document.on( 'dragover', ( evt, data ) => { diff --git a/tests/imageupload/imageuploadediting.js b/tests/imageupload/imageuploadediting.js index 95d03218..6f718317 100644 --- a/tests/imageupload/imageuploadediting.js +++ b/tests/imageupload/imageuploadediting.js @@ -95,7 +95,7 @@ describe( 'ImageUploadEditing', () => { expect( editor.commands.get( 'imageUpload' ) ).to.be.instanceOf( ImageUploadCommand ); } ); - it( 'should not crash when Clipboard plugin is not available', () => { + it( 'should load Clipboard plugin', () => { return VirtualTestEditor .create( { plugins: [ ImageEditing, ImageUploadEditing, Paragraph, UndoEditing, UploadAdapterPluginMock ] From daf0741896ff53ecdff8f13c1dfbfc4be0c58457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Mon, 2 Sep 2019 16:37:51 +0200 Subject: [PATCH 2/3] Fix test of requiring Clipboard plugin. --- tests/imageupload/imageuploadediting.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/imageupload/imageuploadediting.js b/tests/imageupload/imageuploadediting.js index 6f718317..bfc030ea 100644 --- a/tests/imageupload/imageuploadediting.js +++ b/tests/imageupload/imageuploadediting.js @@ -99,6 +99,9 @@ describe( 'ImageUploadEditing', () => { return VirtualTestEditor .create( { plugins: [ ImageEditing, ImageUploadEditing, Paragraph, UndoEditing, UploadAdapterPluginMock ] + } ) + .then( editor => { + expect( editor.plugins.get( Clipboard ) ).to.be.instanceOf( Clipboard ); } ); } ); From 78696e846c9437795df6e76c9c736e56c0468c83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Tue, 3 Sep 2019 11:33:15 +0200 Subject: [PATCH 3/3] Can use the class now. --- src/imageupload/imageuploadediting.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/imageupload/imageuploadediting.js b/src/imageupload/imageuploadediting.js index ab97aeb9..d68696df 100644 --- a/src/imageupload/imageuploadediting.js +++ b/src/imageupload/imageuploadediting.js @@ -119,7 +119,7 @@ export default class ImageUploadEditing extends Plugin { // For every image file, a new file loader is created and a placeholder image is // inserted into the content. Then, those images are uploaded once they appear in the model // (see Document#change listener below). - this.listenTo( editor.plugins.get( 'Clipboard' ), 'inputTransformation', ( evt, data ) => { + this.listenTo( editor.plugins.get( Clipboard ), 'inputTransformation', ( evt, data ) => { const fetchableImages = Array.from( editor.editing.view.createRangeIn( data.content ) ) .filter( value => isLocalImage( value.item ) && !value.item.getAttribute( 'uploadProcessed' ) ) .map( value => { return { promise: fetchLocalImage( value.item ), imageElement: value.item }; } );