@ckeditor/ckeditor5-image 39.0.2 → 40.0.0

package/src/imageupload/imageuploadui.js

@@ -1,57 +1,57 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import { Plugin, icons } from 'ckeditor5/src/core';
-import { FileDialogButtonView } from 'ckeditor5/src/upload';
-import { createImageTypeRegExp } from './utils';
-/**
- * The image upload button plugin.
- *
- * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature} documentation.
- *
- * Adds the `'uploadImage'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
- * and also the `imageUpload` button as an alias for backward compatibility.
- */
-export default class ImageUploadUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageUploadUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const t = editor.t;
-        const componentCreator = (locale) => {
-            const view = new FileDialogButtonView(locale);
-            const command = editor.commands.get('uploadImage');
-            const imageTypes = editor.config.get('image.upload.types');
-            const imageTypesRegExp = createImageTypeRegExp(imageTypes);
-            view.set({
-                acceptedType: imageTypes.map(type => `image/${type}`).join(','),
-                allowMultipleFiles: true
-            });
-            view.buttonView.set({
-                label: t('Insert image'),
-                icon: icons.image,
-                tooltip: true
-            });
-            view.buttonView.bind('isEnabled').to(command);
-            view.on('done', (evt, files) => {
-                const imagesToUpload = Array.from(files).filter(file => imageTypesRegExp.test(file.type));
-                if (imagesToUpload.length) {
-                    editor.execute('uploadImage', { file: imagesToUpload });
-                    editor.editing.view.focus();
-                }
-            });
-            return view;
-        };
-        // Setup `uploadImage` button and add `imageUpload` button as an alias for backward compatibility.
-        editor.ui.componentFactory.add('uploadImage', componentCreator);
-        editor.ui.componentFactory.add('imageUpload', componentCreator);
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Plugin, icons } from 'ckeditor5/src/core';
+import { FileDialogButtonView } from 'ckeditor5/src/upload';
+import { createImageTypeRegExp } from './utils';
+/**
+ * The image upload button plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature} documentation.
+ *
+ * Adds the `'uploadImage'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
+ * and also the `imageUpload` button as an alias for backward compatibility.
+ */
+export default class ImageUploadUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageUploadUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const componentCreator = (locale) => {
+            const view = new FileDialogButtonView(locale);
+            const command = editor.commands.get('uploadImage');
+            const imageTypes = editor.config.get('image.upload.types');
+            const imageTypesRegExp = createImageTypeRegExp(imageTypes);
+            view.set({
+                acceptedType: imageTypes.map(type => `image/${type}`).join(','),
+                allowMultipleFiles: true
+            });
+            view.buttonView.set({
+                label: t('Insert image'),
+                icon: icons.image,
+                tooltip: true
+            });
+            view.buttonView.bind('isEnabled').to(command);
+            view.on('done', (evt, files) => {
+                const imagesToUpload = Array.from(files).filter(file => imageTypesRegExp.test(file.type));
+                if (imagesToUpload.length) {
+                    editor.execute('uploadImage', { file: imagesToUpload });
+                    editor.editing.view.focus();
+                }
+            });
+            return view;
+        };
+        // Setup `uploadImage` button and add `imageUpload` button as an alias for backward compatibility.
+        editor.ui.componentFactory.add('uploadImage', componentCreator);
+        editor.ui.componentFactory.add('imageUpload', componentCreator);
+    }
+}

package/src/imageupload/uploadimagecommand.d.ts

@@ -1,60 +1,60 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import { Command } from 'ckeditor5/src/core';
-import { type ArrayOrItem } from 'ckeditor5/src/utils';
-/**
- * @module image/imageupload/uploadimagecommand
- */
-/**
- * The upload image command.
- *
- * The command is registered by the {@link module:image/imageupload/imageuploadediting~ImageUploadEditing} plugin as `uploadImage`
- * and it is also available via aliased `imageUpload` name.
- *
- * In order to upload an image at the current selection position
- * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
- * execute the command and pass the native image file instance:
- *
- * ```ts
- * this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
- * 	// Assuming that only images were pasted:
- * 	const images = Array.from( data.dataTransfer.files );
- *
- * 	// Upload the first image:
- * 	editor.execute( 'uploadImage', { file: images[ 0 ] } );
- * } );
- * ```
- *
- * It is also possible to insert multiple images at once:
- *
- * ```ts
- * editor.execute( 'uploadImage', {
- * 	file: [
- * 		file1,
- * 		file2
- * 	]
- * } );
- * ```
- */
-export default class UploadImageCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    refresh(): void;
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Options for the executed command.
-     * @param options.file The image file or an array of image files to upload.
-     */
-    execute(options: {
-        file: ArrayOrItem<File>;
-    }): void;
-    /**
-     * Handles uploading single file.
-     */
-    private _uploadImage;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Command } from 'ckeditor5/src/core';
+import { type ArrayOrItem } from 'ckeditor5/src/utils';
+/**
+ * @module image/imageupload/uploadimagecommand
+ */
+/**
+ * The upload image command.
+ *
+ * The command is registered by the {@link module:image/imageupload/imageuploadediting~ImageUploadEditing} plugin as `uploadImage`
+ * and it is also available via aliased `imageUpload` name.
+ *
+ * In order to upload an image at the current selection position
+ * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
+ * execute the command and pass the native image file instance:
+ *
+ * ```ts
+ * this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
+ * 	// Assuming that only images were pasted:
+ * 	const images = Array.from( data.dataTransfer.files );
+ *
+ * 	// Upload the first image:
+ * 	editor.execute( 'uploadImage', { file: images[ 0 ] } );
+ * } );
+ * ```
+ *
+ * It is also possible to insert multiple images at once:
+ *
+ * ```ts
+ * editor.execute( 'uploadImage', {
+ * 	file: [
+ * 		file1,
+ * 		file2
+ * 	]
+ * } );
+ * ```
+ */
+export default class UploadImageCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Options for the executed command.
+     * @param options.file The image file or an array of image files to upload.
+     */
+    execute(options: {
+        file: ArrayOrItem<File>;
+    }): void;
+    /**
+     * Handles uploading single file.
+     */
+    private _uploadImage;
+}

package/src/imageupload/uploadimagecommand.js

@@ -1,100 +1,100 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import { FileRepository } from 'ckeditor5/src/upload';
-import { Command } from 'ckeditor5/src/core';
-import { toArray } from 'ckeditor5/src/utils';
-/**
- * @module image/imageupload/uploadimagecommand
- */
-/**
- * The upload image command.
- *
- * The command is registered by the {@link module:image/imageupload/imageuploadediting~ImageUploadEditing} plugin as `uploadImage`
- * and it is also available via aliased `imageUpload` name.
- *
- * In order to upload an image at the current selection position
- * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
- * execute the command and pass the native image file instance:
- *
- * ```ts
- * this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
- * 	// Assuming that only images were pasted:
- * 	const images = Array.from( data.dataTransfer.files );
- *
- * 	// Upload the first image:
- * 	editor.execute( 'uploadImage', { file: images[ 0 ] } );
- * } );
- * ```
- *
- * It is also possible to insert multiple images at once:
- *
- * ```ts
- * editor.execute( 'uploadImage', {
- * 	file: [
- * 		file1,
- * 		file2
- * 	]
- * } );
- * ```
- */
-export default class UploadImageCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const editor = this.editor;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const selectedElement = editor.model.document.selection.getSelectedElement();
-        // TODO: This needs refactoring.
-        this.isEnabled = imageUtils.isImageAllowed() || imageUtils.isImage(selectedElement);
-    }
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Options for the executed command.
-     * @param options.file The image file or an array of image files to upload.
-     */
-    execute(options) {
-        const files = toArray(options.file);
-        const selection = this.editor.model.document.selection;
-        const imageUtils = this.editor.plugins.get('ImageUtils');
-        // In case of multiple files, each file (starting from the 2nd) will be inserted at a position that
-        // follows the previous one. That will move the selection and, to stay on the safe side and make sure
-        // all images inherit the same selection attributes, they are collected beforehand.
-        //
-        // Applying these attributes ensures, for instance, that inserting an (inline) image into a link does
-        // not split that link but preserves its continuity.
-        //
-        // Note: Selection attributes that do not make sense for images will be filtered out by insertImage() anyway.
-        const selectionAttributes = Object.fromEntries(selection.getAttributes());
-        files.forEach((file, index) => {
-            const selectedElement = selection.getSelectedElement();
-            // Inserting of an inline image replace the selected element and make a selection on the inserted image.
-            // Therefore inserting multiple inline images requires creating position after each element.
-            if (index && selectedElement && imageUtils.isImage(selectedElement)) {
-                const position = this.editor.model.createPositionAfter(selectedElement);
-                this._uploadImage(file, selectionAttributes, position);
-            }
-            else {
-                this._uploadImage(file, selectionAttributes);
-            }
-        });
-    }
-    /**
-     * Handles uploading single file.
-     */
-    _uploadImage(file, attributes, position) {
-        const editor = this.editor;
-        const fileRepository = editor.plugins.get(FileRepository);
-        const loader = fileRepository.createLoader(file);
-        const imageUtils = editor.plugins.get('ImageUtils');
-        // Do not throw when upload adapter is not set. FileRepository will log an error anyway.
-        if (!loader) {
-            return;
-        }
-        imageUtils.insertImage({ ...attributes, uploadId: loader.id }, position);
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { FileRepository } from 'ckeditor5/src/upload';
+import { Command } from 'ckeditor5/src/core';
+import { toArray } from 'ckeditor5/src/utils';
+/**
+ * @module image/imageupload/uploadimagecommand
+ */
+/**
+ * The upload image command.
+ *
+ * The command is registered by the {@link module:image/imageupload/imageuploadediting~ImageUploadEditing} plugin as `uploadImage`
+ * and it is also available via aliased `imageUpload` name.
+ *
+ * In order to upload an image at the current selection position
+ * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
+ * execute the command and pass the native image file instance:
+ *
+ * ```ts
+ * this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
+ * 	// Assuming that only images were pasted:
+ * 	const images = Array.from( data.dataTransfer.files );
+ *
+ * 	// Upload the first image:
+ * 	editor.execute( 'uploadImage', { file: images[ 0 ] } );
+ * } );
+ * ```
+ *
+ * It is also possible to insert multiple images at once:
+ *
+ * ```ts
+ * editor.execute( 'uploadImage', {
+ * 	file: [
+ * 		file1,
+ * 		file2
+ * 	]
+ * } );
+ * ```
+ */
+export default class UploadImageCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const selectedElement = editor.model.document.selection.getSelectedElement();
+        // TODO: This needs refactoring.
+        this.isEnabled = imageUtils.isImageAllowed() || imageUtils.isImage(selectedElement);
+    }
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Options for the executed command.
+     * @param options.file The image file or an array of image files to upload.
+     */
+    execute(options) {
+        const files = toArray(options.file);
+        const selection = this.editor.model.document.selection;
+        const imageUtils = this.editor.plugins.get('ImageUtils');
+        // In case of multiple files, each file (starting from the 2nd) will be inserted at a position that
+        // follows the previous one. That will move the selection and, to stay on the safe side and make sure
+        // all images inherit the same selection attributes, they are collected beforehand.
+        //
+        // Applying these attributes ensures, for instance, that inserting an (inline) image into a link does
+        // not split that link but preserves its continuity.
+        //
+        // Note: Selection attributes that do not make sense for images will be filtered out by insertImage() anyway.
+        const selectionAttributes = Object.fromEntries(selection.getAttributes());
+        files.forEach((file, index) => {
+            const selectedElement = selection.getSelectedElement();
+            // Inserting of an inline image replace the selected element and make a selection on the inserted image.
+            // Therefore inserting multiple inline images requires creating position after each element.
+            if (index && selectedElement && imageUtils.isImage(selectedElement)) {
+                const position = this.editor.model.createPositionAfter(selectedElement);
+                this._uploadImage(file, selectionAttributes, position);
+            }
+            else {
+                this._uploadImage(file, selectionAttributes);
+            }
+        });
+    }
+    /**
+     * Handles uploading single file.
+     */
+    _uploadImage(file, attributes, position) {
+        const editor = this.editor;
+        const fileRepository = editor.plugins.get(FileRepository);
+        const loader = fileRepository.createLoader(file);
+        const imageUtils = editor.plugins.get('ImageUtils');
+        // Do not throw when upload adapter is not set. FileRepository will log an error anyway.
+        if (!loader) {
+            return;
+        }
+        imageUtils.insertImage({ ...attributes, uploadId: loader.id }, position);
+    }
+}

package/src/imageupload/utils.d.ts

@@ -1,33 +1,33 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module image/imageupload/utils
- */
-import type { ViewElement } from 'ckeditor5/src/engine';
-import type ImageUtils from '../imageutils';
-/**
- * Creates a regular expression used to test for image files.
- *
- * ```ts
- * const imageType = createImageTypeRegExp( [ 'png', 'jpeg', 'svg+xml', 'vnd.microsoft.icon' ] );
- *
- * console.log( 'is supported image', imageType.test( file.type ) );
- * ```
- */
-export declare function createImageTypeRegExp(types: Array<string>): RegExp;
-/**
- * Creates a promise that fetches the image local source (Base64 or blob) and resolves with a `File` object.
- *
- * @param image Image whose source to fetch.
- * @returns A promise which resolves when an image source is fetched and converted to a `File` instance.
- * It resolves with a `File` object. If there were any errors during file processing, the promise will be rejected.
- */
-export declare function fetchLocalImage(image: ViewElement): Promise<File>;
-/**
- * Checks whether a given node is an image element with a local source (Base64 or blob).
- *
- * @param node The node to check.
- */
-export declare function isLocalImage(imageUtils: ImageUtils, node: ViewElement): boolean;
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageupload/utils
+ */
+import type { ViewElement } from 'ckeditor5/src/engine';
+import type ImageUtils from '../imageutils';
+/**
+ * Creates a regular expression used to test for image files.
+ *
+ * ```ts
+ * const imageType = createImageTypeRegExp( [ 'png', 'jpeg', 'svg+xml', 'vnd.microsoft.icon' ] );
+ *
+ * console.log( 'is supported image', imageType.test( file.type ) );
+ * ```
+ */
+export declare function createImageTypeRegExp(types: Array<string>): RegExp;
+/**
+ * Creates a promise that fetches the image local source (Base64 or blob) and resolves with a `File` object.
+ *
+ * @param image Image whose source to fetch.
+ * @returns A promise which resolves when an image source is fetched and converted to a `File` instance.
+ * It resolves with a `File` object. If there were any errors during file processing, the promise will be rejected.
+ */
+export declare function fetchLocalImage(image: ViewElement): Promise<File>;
+/**
+ * Checks whether a given node is an image element with a local source (Base64 or blob).
+ *
+ * @param node The node to check.
+ */
+export declare function isLocalImage(imageUtils: ImageUtils, node: ViewElement): boolean;