@ckeditor/ckeditor5-image 47.6.1 → 48.0.0-alpha.0

package/src/imageupload/imageuploadprogress.js

@@ -1,222 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/imageupload/imageuploadprogress
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { FileRepository } from 'ckeditor5/src/upload.js';
-import '../../theme/imageuploadprogress.css';
-import '../../theme/imageuploadicon.css';
-import '../../theme/imageuploadloader.css';
-/**
- * The image upload progress plugin.
- * It shows a placeholder when the image is read from the disk and a progress bar while the image is uploading.
- */
-export class ImageUploadProgress extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageUploadProgress';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * The image placeholder that is displayed before real image data can be accessed.
-     *
-     * For the record, this image is a 1x1 px GIF with an aspect ratio set by CSS.
-     */
-    placeholder;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        this.placeholder = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        // Upload status change - update image's view according to that status.
-        if (editor.plugins.has('ImageBlockEditing')) {
-            editor.editing.downcastDispatcher.on('attribute:uploadStatus:imageBlock', this.uploadStatusChange);
-        }
-        if (editor.plugins.has('ImageInlineEditing')) {
-            editor.editing.downcastDispatcher.on('attribute:uploadStatus:imageInline', this.uploadStatusChange);
-        }
-    }
-    /**
-     * This method is called each time the image `uploadStatus` attribute is changed.
-     *
-     * @param evt An object containing information about the fired event.
-     * @param data Additional information about the change.
-     */
-    uploadStatusChange = (evt, data, conversionApi) => {
-        const editor = this.editor;
-        const modelImage = data.item;
-        const uploadId = modelImage.getAttribute('uploadId');
-        if (!conversionApi.consumable.consume(data.item, evt.name)) {
-            return;
-        }
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const fileRepository = editor.plugins.get(FileRepository);
-        const status = uploadId ? data.attributeNewValue : null;
-        const placeholder = this.placeholder;
-        const viewFigure = editor.editing.mapper.toViewElement(modelImage);
-        const viewWriter = conversionApi.writer;
-        if (status == 'reading') {
-            // Start "appearing" effect and show placeholder with infinite progress bar on the top
-            // while image is read from disk.
-            _startAppearEffect(viewFigure, viewWriter);
-            _showPlaceholder(imageUtils, placeholder, viewFigure, viewWriter);
-            return;
-        }
-        // Show progress bar on the top of the image when image is uploading.
-        if (status == 'uploading') {
-            const loader = fileRepository.loaders.get(uploadId);
-            // Start appear effect if needed - see https://github.com/ckeditor/ckeditor5-image/issues/191.
-            _startAppearEffect(viewFigure, viewWriter);
-            if (!loader) {
-                // There is no loader associated with uploadId - this means that image came from external changes.
-                // In such cases we still want to show the placeholder until image is fully uploaded.
-                // Show placeholder if needed - see https://github.com/ckeditor/ckeditor5-image/issues/191.
-                _showPlaceholder(imageUtils, placeholder, viewFigure, viewWriter);
-            }
-            else {
-                // Hide placeholder and initialize progress bar showing upload progress.
-                _hidePlaceholder(viewFigure, viewWriter);
-                _showProgressBar(viewFigure, viewWriter, loader, editor.editing.view);
-                _displayLocalImage(imageUtils, viewFigure, viewWriter, loader);
-            }
-            return;
-        }
-        if (status == 'complete' && fileRepository.loaders.get(uploadId)) {
-            _showCompleteIcon(viewFigure, viewWriter, editor.editing.view);
-        }
-        // Clean up.
-        _hideProgressBar(viewFigure, viewWriter);
-        _hidePlaceholder(viewFigure, viewWriter);
-        _stopAppearEffect(viewFigure, viewWriter);
-    };
-}
-/**
- * Adds ck-appear class to the image figure if one is not already applied.
- */
-function _startAppearEffect(viewFigure, writer) {
-    if (!viewFigure.hasClass('ck-appear')) {
-        writer.addClass('ck-appear', viewFigure);
-    }
-}
-/**
- * Removes ck-appear class to the image figure if one is not already removed.
- */
-function _stopAppearEffect(viewFigure, writer) {
-    writer.removeClass('ck-appear', viewFigure);
-}
-/**
- * Shows placeholder together with infinite progress bar on given image figure.
- */
-function _showPlaceholder(imageUtils, placeholder, viewFigure, writer) {
-    if (!viewFigure.hasClass('ck-image-upload-placeholder')) {
-        writer.addClass('ck-image-upload-placeholder', viewFigure);
-    }
-    const viewImg = imageUtils.findViewImgElement(viewFigure);
-    if (viewImg.getAttribute('src') !== placeholder) {
-        writer.setAttribute('src', placeholder, viewImg);
-    }
-    if (!_getUIElement(viewFigure, 'placeholder')) {
-        writer.insert(writer.createPositionAfter(viewImg), _createPlaceholder(writer));
-    }
-}
-/**
- * Removes placeholder together with infinite progress bar on given image figure.
- */
-function _hidePlaceholder(viewFigure, writer) {
-    if (viewFigure.hasClass('ck-image-upload-placeholder')) {
-        writer.removeClass('ck-image-upload-placeholder', viewFigure);
-    }
-    _removeUIElement(viewFigure, writer, 'placeholder');
-}
-/**
- * Shows progress bar displaying upload progress.
- * Attaches it to the file loader to update when upload percentace is changed.
- */
-function _showProgressBar(viewFigure, writer, loader, view) {
-    const progressBar = _createProgressBar(writer);
-    writer.insert(writer.createPositionAt(viewFigure, 'end'), progressBar);
-    // Update progress bar width when uploadedPercent is changed.
-    loader.on('change:uploadedPercent', (evt, name, value) => {
-        view.change(writer => {
-            writer.setStyle('width', value + '%', progressBar);
-        });
-    });
-}
-/**
- * Hides upload progress bar.
- */
-function _hideProgressBar(viewFigure, writer) {
-    _removeUIElement(viewFigure, writer, 'progressBar');
-}
-/**
- * Shows complete icon and hides after a certain amount of time.
- */
-function _showCompleteIcon(viewFigure, writer, view) {
-    const completeIcon = writer.createUIElement('div', { class: 'ck-image-upload-complete-icon' });
-    writer.insert(writer.createPositionAt(viewFigure, 'end'), completeIcon);
-    setTimeout(() => {
-        view.change(writer => writer.remove(writer.createRangeOn(completeIcon)));
-    }, 3000);
-}
-/**
- * Create progress bar element using {@link module:engine/view/uielement~ViewUIElement}.
- */
-function _createProgressBar(writer) {
-    const progressBar = writer.createUIElement('div', { class: 'ck-progress-bar' });
-    writer.setCustomProperty('progressBar', true, progressBar);
-    return progressBar;
-}
-/**
- * Create placeholder element using {@link module:engine/view/uielement~ViewUIElement}.
- */
-function _createPlaceholder(writer) {
-    const placeholder = writer.createUIElement('div', { class: 'ck-upload-placeholder-loader' });
-    writer.setCustomProperty('placeholder', true, placeholder);
-    return placeholder;
-}
-/**
- * Returns {@link module:engine/view/uielement~ViewUIElement} of given unique property from image figure element.
- * Returns `undefined` if element is not found.
- */
-function _getUIElement(imageFigure, uniqueProperty) {
-    for (const child of imageFigure.getChildren()) {
-        if (child.getCustomProperty(uniqueProperty)) {
-            return child;
-        }
-    }
-}
-/**
- * Removes {@link module:engine/view/uielement~ViewUIElement} of given unique property from image figure element.
- */
-function _removeUIElement(viewFigure, writer, uniqueProperty) {
-    const element = _getUIElement(viewFigure, uniqueProperty);
-    if (element) {
-        writer.remove(writer.createRangeOn(element));
-    }
-}
-/**
- * Displays local data from file loader.
- */
-function _displayLocalImage(imageUtils, viewFigure, writer, loader) {
-    if (loader.data) {
-        const viewImg = imageUtils.findViewImgElement(viewFigure);
-        writer.setAttribute('src', loader.data, viewImg);
-    }
-}

package/src/imageupload/imageuploadui.js

@@ -1,135 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/imageupload/imageuploadui
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { FileDialogButtonView, MenuBarMenuListItemFileDialogButtonView } from 'ckeditor5/src/ui.js';
-import { IconImageUpload } from 'ckeditor5/src/icons.js';
-import { createImageTypeRegExp } from './utils.js';
-/**
- * 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.
- *
- * Adds the `'menuBar:uploadImage'` menu button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
- *
- * It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component, which are the default components
- * through which image upload is available.
- */
-export class ImageUploadUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageUploadUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        // Setup `uploadImage` button and add `imageUpload` button as an alias for backward compatibility.
-        editor.ui.componentFactory.add('uploadImage', () => this._createToolbarButton());
-        editor.ui.componentFactory.add('imageUpload', () => this._createToolbarButton());
-        editor.ui.componentFactory.add('menuBar:uploadImage', () => this._createMenuBarButton('standalone'));
-        if (editor.plugins.has('ImageInsertUI')) {
-            editor.plugins.get('ImageInsertUI').registerIntegration({
-                name: 'upload',
-                observable: () => editor.commands.get('uploadImage'),
-                buttonViewCreator: () => this._createToolbarButton(),
-                formViewCreator: () => this._createDropdownButton(),
-                menuBarButtonViewCreator: isOnly => this._createMenuBarButton(isOnly ? 'insertOnly' : 'insertNested')
-            });
-        }
-    }
-    /**
-     * Creates the base for various kinds of the button component provided by this feature.
-     */
-    _createButton(ButtonClass) {
-        const editor = this.editor;
-        const locale = editor.locale;
-        const command = editor.commands.get('uploadImage');
-        const imageTypes = editor.config.get('image.upload.types');
-        const imageTypesRegExp = createImageTypeRegExp(imageTypes);
-        const view = new ButtonClass(editor.locale);
-        const t = locale.t;
-        view.set({
-            acceptedType: imageTypes.map(type => `image/${type}`).join(','),
-            allowMultipleFiles: true,
-            label: t('Upload from computer'),
-            icon: IconImageUpload
-        });
-        view.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;
-    }
-    /**
-     * Creates a simple toolbar button, with an icon and a tooltip.
-     */
-    _createToolbarButton() {
-        const t = this.editor.locale.t;
-        const imageInsertUI = this.editor.plugins.get('ImageInsertUI');
-        const uploadImageCommand = this.editor.commands.get('uploadImage');
-        const button = this._createButton(FileDialogButtonView);
-        button.tooltip = true;
-        button.bind('label').to(imageInsertUI, 'isImageSelected', uploadImageCommand, 'isAccessAllowed', (isImageSelected, isAccessAllowed) => {
-            if (!isAccessAllowed) {
-                return t('You have no image upload permissions.');
-            }
-            return isImageSelected ? t('Replace image from computer') : t('Upload image from computer');
-        });
-        return button;
-    }
-    /**
-     * Creates a button for the dropdown view, with an icon, text and no tooltip.
-     */
-    _createDropdownButton() {
-        const t = this.editor.locale.t;
-        const imageInsertUI = this.editor.plugins.get('ImageInsertUI');
-        const button = this._createButton(FileDialogButtonView);
-        button.withText = true;
-        button.bind('label').to(imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ? t('Replace from computer') : t('Upload from computer'));
-        button.on('execute', () => {
-            imageInsertUI.dropdownView.isOpen = false;
-        });
-        return button;
-    }
-    /**
-     * Creates a button for the menu bar.
-     */
-    _createMenuBarButton(type) {
-        const t = this.editor.locale.t;
-        const button = this._createButton(MenuBarMenuListItemFileDialogButtonView);
-        button.withText = true;
-        switch (type) {
-            case 'standalone':
-                button.label = t('Image from computer');
-                break;
-            case 'insertOnly':
-                button.label = t('Image');
-                break;
-            case 'insertNested':
-                button.label = t('From computer');
-                break;
-        }
-        return button;
-    }
-}

package/src/imageupload/uploadimagecommand.js

@@ -1,110 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { FileRepository } from 'ckeditor5/src/upload.js';
-import { Command } from 'ckeditor5/src/core.js';
-import { toArray } from 'ckeditor5/src/utils.js';
-/**
- * @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 class UploadImageCommand extends Command {
-    /**
-     * Creates an instance of the `imageUlpoad` command. When executed, the command upload one of
-     * the currently selected image from computer.
-     *
-     * @param editor The editor instance.
-     */
-    constructor(editor) {
-        super(editor);
-        this.set('isAccessAllowed', true);
-    }
-    /**
-     * @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.js

@@ -1,114 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { global } from 'ckeditor5/src/utils.js';
-/**
- * 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 function createImageTypeRegExp(types) {
-    // Sanitize the MIME type name which may include: "+", "-" or ".".
-    const regExpSafeNames = types.map(type => type.replace('+', '\\+'));
-    return new RegExp(`^image\\/(${regExpSafeNames.join('|')})$`);
-}
-/**
- * Creates a promise that fetches the image local source (Base64 or blob) and resolves with a `File` object.
- *
- * @internal
- * @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 function fetchLocalImage(image) {
-    return new Promise((resolve, reject) => {
-        const imageSrc = image.getAttribute('src');
-        // Fetch works asynchronously and so does not block browser UI when processing data.
-        fetch(imageSrc)
-            .then(resource => resource.blob())
-            .then(blob => {
-            const mimeType = getImageMimeType(blob, imageSrc);
-            const ext = mimeType.replace('image/', '');
-            const filename = `image.${ext}`;
-            const file = new File([blob], filename, { type: mimeType });
-            resolve(file);
-        })
-            .catch(err => {
-            // Fetch fails only, if it can't make a request due to a network failure or if anything prevented the request
-            // from completing, i.e. the Content Security Policy rules. It is not possible to detect the exact cause of failure,
-            // so we are just trying the fallback solution, if general TypeError is thrown.
-            return err && err.name === 'TypeError' ?
-                convertLocalImageOnCanvas(imageSrc).then(resolve).catch(reject) :
-                reject(err);
-        });
-    });
-}
-/**
- * Checks whether a given node is an image element with a local source (Base64 or blob).
- *
- * @param node The node to check.
- * @internal
- */
-export function isLocalImage(imageUtils, node) {
-    if (!imageUtils.isInlineImageView(node) || !node.getAttribute('src')) {
-        return false;
-    }
-    return !!node.getAttribute('src').match(/^data:image\/\w+;base64,/g) ||
-        !!node.getAttribute('src').match(/^blob:/g);
-}
-/**
- * Extracts an image type based on its blob representation or its source.
- * @param blob Image blob representation.
- * @param src Image `src` attribute value.
- */
-function getImageMimeType(blob, src) {
-    if (blob.type) {
-        return blob.type;
-    }
-    else if (src.match(/data:(image\/\w+);base64/)) {
-        return src.match(/data:(image\/\w+);base64/)[1].toLowerCase();
-    }
-    else {
-        // Fallback to 'jpeg' as common extension.
-        return 'image/jpeg';
-    }
-}
-/**
- * Creates a promise that converts the image local source (Base64 or blob) to a blob using canvas and resolves
- * with a `File` object.
- * @param imageSrc Image `src` attribute value.
- * @returns A promise which resolves when an image source is converted to a `File` instance.
- * It resolves with a `File` object. If there were any errors during file processing, the promise will be rejected.
- */
-function convertLocalImageOnCanvas(imageSrc) {
-    return getBlobFromCanvas(imageSrc).then(blob => {
-        const mimeType = getImageMimeType(blob, imageSrc);
-        const ext = mimeType.replace('image/', '');
-        const filename = `image.${ext}`;
-        return new File([blob], filename, { type: mimeType });
-    });
-}
-/**
- * Creates a promise that resolves with a `Blob` object converted from the image source (Base64 or blob).
- * @param imageSrc Image `src` attribute value.
- */
-function getBlobFromCanvas(imageSrc) {
-    return new Promise((resolve, reject) => {
-        const image = global.document.createElement('img');
-        image.addEventListener('load', () => {
-            const canvas = global.document.createElement('canvas');
-            canvas.width = image.width;
-            canvas.height = image.height;
-            const ctx = canvas.getContext('2d');
-            ctx.drawImage(image, 0, 0);
-            canvas.toBlob(blob => blob ? resolve(blob) : reject());
-        });
-        image.addEventListener('error', () => reject());
-        image.src = imageSrc;
-    });
-}

package/src/imageupload.js

@@ -1,42 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/imageupload
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ImageUploadUI } from './imageupload/imageuploadui.js';
-import { ImageUploadProgress } from './imageupload/imageuploadprogress.js';
-import { ImageUploadEditing } from './imageupload/imageuploadediting.js';
-/**
- * The image upload plugin.
- *
- * For a detailed overview, check the {@glink features/images/image-upload/image-upload image upload feature} documentation.
- *
- * This plugin does not do anything directly, but it loads a set of specific plugins to enable image uploading:
- *
- * * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing},
- * * {@link module:image/imageupload/imageuploadui~ImageUploadUI},
- * * {@link module:image/imageupload/imageuploadprogress~ImageUploadProgress}.
- */
-export class ImageUpload extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageUpload';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageUploadEditing, ImageUploadUI, ImageUploadProgress];
-    }
-}