chore(ckeditor5/plugins): integrate file-upload

packages/ckeditor5/src/plugins/file_upload/fileuploadcommand.ts

@@ -0,0 +1,52 @@
+import { Command, FileRepository, Model, type NodeAttributes, type Writer } from "ckeditor5";
+
+interface FileUploadOpts {
+    file: File[];
+}
+
+export default class FileUploadCommand extends Command {
+	refresh() {
+		this.isEnabled = true;
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param {Object} options Options for the executed command.
+	 * @param {File|Array.<File>} options.file The file or an array of files to upload.
+	 */
+	execute( options: FileUploadOpts ) {
+		const editor = this.editor;
+		const model = editor.model;
+
+		const fileRepository = editor.plugins.get( FileRepository );
+
+		model.change( writer => {
+			const filesToUpload = options.file;
+			for ( const file of filesToUpload ) {
+				uploadFile( writer, model, fileRepository, file );
+			}
+		} );
+	}
+}
+
+/**
+ * 	Handles uploading single file.
+ */
+function uploadFile( writer: Writer, model: Model, fileRepository: FileRepository, file: File ) {
+	const loader = fileRepository.createLoader( file );
+
+	// Do not throw when upload adapter is not set. FileRepository will log an error anyway.
+	if ( !loader ) {
+		return;
+	}
+
+	insertFileLink( writer, model, { href: '', uploadId: loader.id }, file );
+}
+
+function insertFileLink( writer: Writer, model: Model, attributes: NodeAttributes = {}, file: File ) {
+	const placeholder = writer.createElement( 'reference', attributes );
+	model.insertContent( placeholder, model.document.selection );
+	writer.insertText( ' ', placeholder, 'after' );
+}

packages/ckeditor5/src/plugins/file_upload/fileuploadediting.ts

@@ -0,0 +1,258 @@
+import { Clipboard, FileRepository, Notification, Plugin, UpcastWriter, ViewElement, type Editor, type FileLoader, type Item, type Node, type ViewItem, type ViewRange } from 'ckeditor5';
+import FileUploadCommand from './fileuploadcommand';
+
+export default class FileUploadEditing extends Plugin {
+
+	static get requires() {
+		return [ FileRepository, Notification, Clipboard ];
+	}
+
+	static get pluginName() {
+		return 'FileUploadEditing';
+	}
+
+	init() {
+		const editor = this.editor;
+		const doc = editor.model.document;
+		const conversion = editor.conversion;
+		const fileRepository = editor.plugins.get( FileRepository );
+
+		// Register fileUpload command.
+		editor.commands.add( 'fileUpload', new FileUploadCommand( editor ) );
+
+		// Register upcast converter for uploadId.
+		conversion.for( 'upcast' )
+			.attributeToAttribute( {
+				view: {
+					name: 'a',
+					key: 'uploadId'
+				},
+				model: 'uploadId'
+			} );
+
+		this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
+			// Skip if non-empty HTML data is included.
+			// https://github.com/ckeditor/ckeditor5-upload/issues/68
+			if ( isHtmlIncluded( data.dataTransfer ) ) {
+				return;
+			}
+
+			const files = Array.from( data.dataTransfer.files );
+
+			editor.model.change( writer => {
+				// Set selection to paste target.
+				if ( data.targetRanges ) {
+					writer.setSelection( data.targetRanges.map( (viewRange: ViewRange) => editor.editing.mapper.toModelRange( viewRange ) ) );
+				}
+
+				if ( files.length ) {
+					evt.stop();
+
+					// Upload files after the selection has changed in order to ensure the command's state is refreshed.
+					editor.model.enqueueChange(() => {
+						editor.execute( 'fileUpload', { file: files } );
+					} );
+				}
+			} );
+		} );
+
+		this.listenTo( editor.plugins.get( Clipboard ), 'inputTransformation', ( evt, data ) => {
+			const fetchableFiles = Array.from( editor.editing.view.createRangeIn( data.content ) )
+				.filter( value => isLocalFile( value.item ) && !(value.item as unknown as Node).getAttribute( 'uploadProcessed' ) )
+				.map( value => {
+					return { promise: fetchLocalFile( value.item ), fileElement: value as unknown as ViewElement };
+				} );
+
+			if ( !fetchableFiles.length ) {
+				return;
+			}
+
+            //@ts-expect-error Missing document.
+			const writer = new UpcastWriter();
+
+			for ( const fetchableFile of fetchableFiles ) {
+				// Set attribute marking that the file was processed already.
+				writer.setAttribute( 'uploadProcessed', true, fetchableFile.fileElement );
+
+				const loader = fileRepository.createLoader( fetchableFile.promise );
+
+				if ( loader ) {
+					writer.setAttribute( 'href', '', fetchableFile.fileElement );
+					writer.setAttribute( 'uploadId', loader.id, fetchableFile.fileElement );
+				}
+			}
+		} );
+
+		// Prevents from the browser redirecting to the dropped file.
+		editor.editing.view.document.on( 'dragover', ( evt, data ) => {
+			data.preventDefault();
+		} );
+
+		// Upload placeholder files that appeared in the model.
+		doc.on( 'change', () => {
+			const changes = doc.differ.getChanges( { includeChangesInGraveyard: true } );
+			for ( const entry of changes ) {
+				if ( entry.type == 'insert' ) {
+					const item = entry.position.nodeAfter;
+					if ( item ) {
+						const isInGraveyard = entry.position.root.rootName == '$graveyard';
+						for ( const file of getFileLinksFromChangeItem( editor, item ) ) {
+							// Check if the file element still has upload id.
+							const uploadId = file.getAttribute( 'uploadId' ) as string | number;
+							if ( !uploadId ) {
+								continue;
+							}
+
+							// Check if the file is loaded on this client.
+							const loader = fileRepository.loaders.get( uploadId );
+
+							if ( !loader ) {
+								continue;
+							}
+
+							if ( isInGraveyard ) {
+								// If the file was inserted to the graveyard - abort the loading process.
+								loader.abort();
+							} else if ( loader.status == 'idle' ) {
+								// If the file was inserted into content and has not been loaded yet, start loading it.
+								this._readAndUpload( loader, file );
+							}
+						}
+					}
+				}
+			}
+		} );
+	}
+
+	_readAndUpload( loader: FileLoader, fileElement: Item ) {
+		const editor = this.editor;
+		const model = editor.model;
+		const t = editor.locale.t;
+		const fileRepository = editor.plugins.get( FileRepository );
+		const notification = editor.plugins.get( Notification );
+
+		model.enqueueChange(writer => {
+			writer.setAttribute( 'uploadStatus', 'reading', fileElement );
+		} );
+
+		return loader.read()
+			.then( () => {
+				const promise = loader.upload();
+
+				model.enqueueChange(writer => {
+					writer.setAttribute( 'uploadStatus', 'uploading', fileElement );
+				} );
+
+				return promise;
+			} )
+			.then( data => {
+				model.enqueueChange(writer => {
+					writer.setAttributes( { uploadStatus: 'complete', href: data.default }, fileElement );
+				} );
+
+				clean();
+
+				// wait a bit so that froca has time to load the changes
+				return new Promise(res => setTimeout(res, 100));
+			} )
+			.then(() => {
+				// we're correctly updating the model, but the view remains broken,
+				// hack around it is to force CKEditor to reload the now updated HTML
+				editor.setData(editor.getData());
+			})
+			.catch( error => {
+				// If status is not 'error' nor 'aborted' - throw error, because it means that something else went wrong,
+				// it might be a generic error, and it would be real pain to find what is going on.
+				if ( loader.status !== 'error' && loader.status !== 'aborted' ) {
+					throw error;
+				}
+
+				// Might be 'aborted'.
+				if ( loader.status == 'error' && error ) {
+					notification.showWarning( error, {
+						title: t( 'Upload failed' ),
+						namespace: 'upload'
+					} );
+				}
+
+				clean();
+
+				// Permanently remove file from insertion batch.
+				model.enqueueChange(writer => {
+					writer.remove( fileElement );
+				} );
+			} );
+
+		function clean() {
+			model.enqueueChange(writer => {
+				writer.removeAttribute( 'uploadId', fileElement );
+				writer.removeAttribute( 'uploadStatus', fileElement );
+			} );
+
+			fileRepository.destroyLoader( loader );
+		}
+	}
+}
+
+function fetchLocalFile( link: ViewItem ) {
+	return new Promise<File>( ( resolve, reject ) => {
+		const href = (link as unknown as Node).getAttribute( 'href' ) as string;
+
+		// Fetch works asynchronously and so does not block the browser UI when processing data.
+		fetch( href )
+			.then( resource => resource.blob() )
+			.then( blob => {
+				const mimeType = getFileMimeType( blob, href ) ?? "";
+				const ext = mimeType?.replace( 'file/', '' );
+				const filename = `file.${ ext }`;
+				const file = createFileFromBlob( blob, filename, mimeType );
+
+				file ? resolve( file ) : reject();
+			} )
+			.catch( reject );
+	} );
+}
+
+function isLocalFile( node: ViewItem ) {
+	if ( !node.is( 'element', 'a' ) || !node.getAttribute( 'href' ) ) {
+		return false;
+	}
+
+	return node.getAttribute( 'href' );
+}
+
+function getFileMimeType( blob: Blob, src: string ) {
+	if ( blob.type ) {
+		return blob.type;
+	} else if ( src.match( /data:(image\/\w+);base64/ ) ) {
+		return src.match( /data:(image\/\w+);base64/ )?.[ 1 ].toLowerCase();
+	} else {
+		throw new Error( 'Could not retrieve mime type for file.' );
+	}
+}
+
+function createFileFromBlob( blob: BlobPart, filename: string, mimeType: string ) {
+	try {
+		return new File( [ blob ], filename, { type: mimeType } );
+	} catch ( err ) {
+		// Edge does not support `File` constructor ATM, see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9551546/.
+		// However, the `File` function is present (so cannot be checked with `!window.File` or `typeof File === 'function'`), but
+		// calling it with `new File( ... )` throws an error. This try-catch prevents that. Also when the function will
+		// be implemented correctly in Edge the code will start working without any changes (see #247).
+		return null;
+	}
+}
+
+// Returns `true` if non-empty `text/html` is included in the data transfer.
+//
+// @param {module:clipboard/datatransfer~DataTransfer} dataTransfer
+// @returns {Boolean}
+export function isHtmlIncluded( dataTransfer: DataTransfer ) {
+	return Array.from( dataTransfer.types ).includes( 'text/html' ) && dataTransfer.getData( 'text/html' ) !== '';
+}
+
+function getFileLinksFromChangeItem( editor: Editor, item: Item ) {
+	return Array.from( editor.model.createRangeOn( item ) )
+		.filter( value => value.item.hasAttribute( 'href' ) )
+		.map( value => value.item );
+}

packages/ckeditor5/src/plugins/file_upload/progressbarview.ts

@@ -0,0 +1,71 @@
+import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
+import { ButtonView, Locale, toUnit, View } from 'ckeditor5';
+
+const toPx = toUnit('%');
+
+export default class ProgressBarView extends View {
+    private cancelButton: ButtonView;
+    width!: number;
+    customWidth!: number;
+
+	constructor(locale: Locale) {
+		super(locale);
+
+		const bind = this.bindTemplate;
+		this.cancelButton = this._createCancelButton(locale);
+
+		// Views define their interface (state) using observable attributes.
+		this.set('width', 100);
+		this.set('customWidth', 0);
+
+
+		this.setTemplate({
+			tag: 'div',
+
+			// The element of the view can be defined with its children.
+			children: [
+				{
+					tag: 'div',
+					children: ['Uploading...'],
+					attributes: {
+						class: ['ck-uploading-progress'],
+						style: {
+							width: bind.to('customWidth', toPx),
+						}
+					}
+				},
+				this.cancelButton,
+			],
+			attributes: {
+				class: [
+					'ck-progress-bar',
+
+					// Observable attributes control the state of the view in DOM.
+                    //@ts-expect-error Type 'ListenerBinding' is not assignable to type 'TemplateSimpleValueSchema'
+					bind.to('elementClass')
+				],
+				style: {
+					width: bind.to('width', toPx),
+				}
+			}
+		});
+	}
+
+	_createCancelButton(locale: Locale) {
+		const view = new ButtonView(locale);
+		view.set({
+			icon: cancelIcon,
+			tooltip: true,
+			label: 'Cancel',
+            //@ts-expect-error Object literal may only specify known properties, and 'attributes' does not exist in type
+			attributes: {
+				class: ['ck', 'ck-button', 'ck-off', 'ck-button-cancel', 'ck-uploading-cancel']
+			}
+		});
+
+		view.on('execute', () => {
+			this.fire('cancel')
+		});
+		return view;
+	}
+}

packages/ckeditor5/src/plugins/file_upload/uploadfileplugin.ts

@@ -0,0 +1,12 @@
+import { Plugin } from "ckeditor5";
+import FileUploadEditing from "./fileuploadediting";
+
+export default class Uploadfileplugin extends Plugin {
+	static get requires() {
+		return [ FileUploadEditing ];
+	}
+
+	static get pluginName() {
+		return 'fileUploadPlugin';
+	}
+}