Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Make Clipboard plugin required by ImageUploadEditing. #326

Merged
merged 3 commits into from
Sep 3, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 20 additions & 21 deletions src/imageupload/imageuploadediting.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -27,7 +28,7 @@ export default class ImageUploadEditing extends Plugin {
* @inheritDoc
*/
static get requires() {
return [ FileRepository, Notification ];
return [ FileRepository, Notification, Clipboard ];
}

static get pluginName() {
Expand Down Expand Up @@ -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 ) => {
Expand Down
5 changes: 4 additions & 1 deletion tests/imageupload/imageuploadediting.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
} );
} );

Expand Down