diff --git a/src/imageupload/imageuploadediting.js b/src/imageupload/imageuploadediting.js index 813db468..d68696df 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 55751c39..4ada98c0 100644 --- a/tests/imageupload/imageuploadediting.js +++ b/tests/imageupload/imageuploadediting.js @@ -95,10 +95,13 @@ 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 ] + } ) + .then( editor => { + expect( editor.plugins.get( Clipboard ) ).to.be.instanceOf( Clipboard ); } ); } );