|
@@ -10,6 +10,7 @@
|
|
|
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
|
import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
|
|
import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
|
|
|
import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
|
|
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 UpcastWriter from '@ckeditor/ckeditor5-engine/src/view/upcastwriter';
|
|
|
import env from '@ckeditor/ckeditor5-utils/src/env';
|
|
import env from '@ckeditor/ckeditor5-utils/src/env';
|
|
|
|
|
|
|
@@ -27,7 +28,7 @@ export default class ImageUploadEditing extends Plugin {
|
|
|
* @inheritDoc
|
|
* @inheritDoc
|
|
|
*/
|
|
*/
|
|
|
static get requires() {
|
|
static get requires() {
|
|
|
- return [ FileRepository, Notification ];
|
|
|
|
|
|
|
+ return [ FileRepository, Notification, Clipboard ];
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
static get pluginName() {
|
|
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
|
|
// 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
|
|
// inserted into the content. Then, those images are uploaded once they appear in the model
|
|
|
// (see Document#change listener below).
|
|
// (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.
|
|
// Prevents from the browser redirecting to the dropped image.
|
|
|
editor.editing.view.document.on( 'dragover', ( evt, data ) => {
|
|
editor.editing.view.document.on( 'dragover', ( evt, data ) => {
|