@ckeditor/ckeditor5-ckbox 0.0.0-nightly-20240422.0 → 0.0.0-nightly-20240424.0

package/dist/index.js

@@ -0,0 +1,1545 @@
+/**
+ * @license Copyright (c) 2003-2024, 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, Command, PendingActions } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { ButtonView, MenuBarMenuListItemButtonView, Notification } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { Range } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { createElement, toMap, CKEditorError, logError, global, retry, abortableDebounce } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { decode } from 'blurhash';
+import { FileRepository } from '@ckeditor/ckeditor5-upload/dist/index.js';
+import { isEqual } from 'lodash-es';
+
+class CKBoxUI extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
+        return 'CKBoxUI';
+    }
+    /**
+     * @inheritDoc
+     */ afterInit() {
+        const editor = this.editor;
+        // Do not register the `ckbox` button if the command does not exist.
+        // This might happen when CKBox library is not loaded on the page.
+        if (!editor.commands.get('ckbox')) {
+            return;
+        }
+        const t = editor.t;
+        const componentFactory = editor.ui.componentFactory;
+        componentFactory.add('ckbox', ()=>{
+            const button = this._createButton(ButtonView);
+            button.tooltip = true;
+            return button;
+        });
+        componentFactory.add('menuBar:ckbox', ()=>this._createButton(MenuBarMenuListItemButtonView));
+        if (editor.plugins.has('ImageInsertUI')) {
+            const imageInsertUI = editor.plugins.get('ImageInsertUI');
+            imageInsertUI.registerIntegration({
+                name: 'assetManager',
+                observable: ()=>editor.commands.get('ckbox'),
+                buttonViewCreator: ()=>{
+                    const button = this.editor.ui.componentFactory.create('ckbox');
+                    button.icon = icons.imageAssetManager;
+                    button.bind('label').to(imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Replace image with file manager') : t('Insert image with file manager'));
+                    return button;
+                },
+                formViewCreator: ()=>{
+                    const button = this.editor.ui.componentFactory.create('ckbox');
+                    button.icon = icons.imageAssetManager;
+                    button.withText = true;
+                    button.bind('label').to(imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Replace with file manager') : t('Insert with file manager'));
+                    button.on('execute', ()=>{
+                        imageInsertUI.dropdownView.isOpen = false;
+                    });
+                    return button;
+                }
+            });
+        }
+    }
+    /**
+     * Creates a button for CKBox command to use either in toolbar or in menu bar.
+     */ _createButton(ButtonClass) {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const view = new ButtonClass(locale);
+        const command = editor.commands.get('ckbox');
+        const t = locale.t;
+        view.set({
+            label: t('Open file manager'),
+            icon: icons.browseFiles
+        });
+        view.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
+        view.on('execute', ()=>{
+            editor.execute('ckbox');
+        });
+        return view;
+    }
+}
+
+/**
+ * Converts image source set provided by the CKBox into an object containing:
+ * - responsive URLs for the "webp" image format,
+ * - one fallback URL for browsers that do not support the "webp" format.
+ */ function getImageUrls(imageUrls) {
+    const responsiveUrls = [];
+    let maxWidth = 0;
+    for(const key in imageUrls){
+        const width = parseInt(key, 10);
+        if (!isNaN(width)) {
+            if (width > maxWidth) {
+                maxWidth = width;
+            }
+            responsiveUrls.push(`${imageUrls[key]} ${key}w`);
+        }
+    }
+    const imageSources = [
+        {
+            srcset: responsiveUrls.join(','),
+            sizes: `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`,
+            type: 'image/webp'
+        }
+    ];
+    return {
+        imageFallbackUrl: imageUrls.default,
+        imageSources
+    };
+}
+/**
+ * Returns a workspace id to use for communication with the CKBox service.
+ *
+ * @param defaultWorkspaceId The default workspace to use taken from editor config.
+ */ function getWorkspaceId(token, defaultWorkspaceId) {
+    const [, binaryTokenPayload] = token.value.split('.');
+    const payload = JSON.parse(atob(binaryTokenPayload));
+    const workspaces = payload.auth && payload.auth.ckbox && payload.auth.ckbox.workspaces || [
+        payload.aud
+    ];
+    if (!defaultWorkspaceId) {
+        return workspaces[0];
+    }
+    const role = payload.auth && payload.auth.ckbox && payload.auth.ckbox.role;
+    if (role == 'superadmin' || workspaces.includes(defaultWorkspaceId)) {
+        return defaultWorkspaceId;
+    }
+    return null;
+}
+/**
+ * Default resolution for decoding blurhash values.
+ * Relatively small values must be used in order to ensure acceptable performance.
+ */ const BLUR_RESOLUTION = 32;
+/**
+ * Generates an image data URL from its `blurhash` representation.
+ */ function blurHashToDataUrl(hash) {
+    if (!hash) {
+        return;
+    }
+    try {
+        const resolutionInPx = `${BLUR_RESOLUTION}px`;
+        const canvas = document.createElement('canvas');
+        canvas.setAttribute('width', resolutionInPx);
+        canvas.setAttribute('height', resolutionInPx);
+        const ctx = canvas.getContext('2d');
+        /* istanbul ignore next -- @preserve */ if (!ctx) {
+            return;
+        }
+        const imageData = ctx.createImageData(BLUR_RESOLUTION, BLUR_RESOLUTION);
+        const decoded = decode(hash, BLUR_RESOLUTION, BLUR_RESOLUTION);
+        imageData.data.set(decoded);
+        ctx.putImageData(imageData, 0, 0);
+        return canvas.toDataURL();
+    } catch (e) {
+        return undefined;
+    }
+}
+/**
+ * Sends the HTTP request.
+ *
+ * @internal
+ * @param config.url the URL where the request will be sent.
+ * @param config.method The HTTP method.
+ * @param config.data Additional data to send.
+ * @param config.onUploadProgress A callback informing about the upload progress.
+ */ function sendHttpRequest({ url, method = 'GET', data, onUploadProgress, signal, authorization }) {
+    const xhr = new XMLHttpRequest();
+    xhr.open(method, url.toString());
+    xhr.setRequestHeader('Authorization', authorization);
+    xhr.setRequestHeader('CKBox-Version', 'CKEditor 5');
+    xhr.responseType = 'json';
+    // The callback is attached to the `signal#abort` event.
+    const abortCallback = ()=>{
+        xhr.abort();
+    };
+    return new Promise((resolve, reject)=>{
+        signal.throwIfAborted();
+        signal.addEventListener('abort', abortCallback);
+        xhr.addEventListener('loadstart', ()=>{
+            signal.addEventListener('abort', abortCallback);
+        });
+        xhr.addEventListener('loadend', ()=>{
+            signal.removeEventListener('abort', abortCallback);
+        });
+        xhr.addEventListener('error', ()=>{
+            reject();
+        });
+        xhr.addEventListener('abort', ()=>{
+            reject();
+        });
+        xhr.addEventListener('load', ()=>{
+            const response = xhr.response;
+            if (!response || response.statusCode >= 400) {
+                return reject(response && response.message);
+            }
+            resolve(response);
+        });
+        /* istanbul ignore else -- @preserve */ if (onUploadProgress) {
+            xhr.upload.addEventListener('progress', (evt)=>{
+                onUploadProgress(evt);
+            });
+        }
+        // Send the request.
+        xhr.send(data);
+    });
+}
+const MIME_TO_EXTENSION = {
+    'image/gif': 'gif',
+    'image/jpeg': 'jpg',
+    'image/png': 'png',
+    'image/webp': 'webp',
+    'image/bmp': 'bmp',
+    'image/tiff': 'tiff'
+};
+/**
+ * Returns an extension a typical file in the specified `mimeType` format would have.
+ */ function convertMimeTypeToExtension(mimeType) {
+    return MIME_TO_EXTENSION[mimeType];
+}
+/**
+ * Tries to fetch the given `url` and returns 'content-type' of the response.
+ */ async function getContentTypeOfUrl(url, options) {
+    try {
+        const response = await fetch(url, {
+            method: 'HEAD',
+            cache: 'force-cache',
+            ...options
+        });
+        if (!response.ok) {
+            return '';
+        }
+        return response.headers.get('content-type') || '';
+    } catch  {
+        return '';
+    }
+}
+/**
+ * Returns an extension from the given value.
+ */ function getFileExtension(file) {
+    const fileName = file.name;
+    const extensionRegExp = RegExp("\\.(?<ext>[^.]+)$");
+    const match = fileName.match(extensionRegExp);
+    return match.groups.ext.toLowerCase();
+}
+
+// Defines the waiting time (in milliseconds) for inserting the chosen asset into the model. The chosen asset is temporarily stored in the
+// `CKBoxCommand#_chosenAssets` and it is removed from there automatically after this time. See `CKBoxCommand#_chosenAssets` for more
+// details.
+const ASSET_INSERTION_WAIT_TIMEOUT = 1000;
+class CKBoxCommand extends Command {
+    /**
+     * @inheritDoc
+     */ refresh() {
+        this.value = this._getValue();
+        this.isEnabled = this._checkEnabled();
+    }
+    /**
+     * @inheritDoc
+     */ execute() {
+        this.fire('ckbox:open');
+    }
+    /**
+     * Indicates if the CKBox dialog is already opened.
+     *
+     * @protected
+     * @returns {Boolean}
+     */ _getValue() {
+        return this._wrapper !== null;
+    }
+    /**
+     * Checks whether the command can be enabled in the current context.
+     */ _checkEnabled() {
+        const imageCommand = this.editor.commands.get('insertImage');
+        const linkCommand = this.editor.commands.get('link');
+        if (!imageCommand.isEnabled && !linkCommand.isEnabled) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Creates the options object for the CKBox dialog.
+     *
+     * @returns The object with properties:
+     * - theme The theme for CKBox dialog.
+     * - language The language for CKBox dialog.
+     * - tokenUrl The token endpoint URL.
+     * - serviceOrigin The base URL of the API service.
+     * - forceDemoLabel Whether to force "Powered by CKBox" link.
+     * - dialog.onClose The callback function invoked after closing the CKBox dialog.
+     * - assets.onChoose The callback function invoked after choosing the assets.
+     */ _prepareOptions() {
+        const editor = this.editor;
+        const ckboxConfig = editor.config.get('ckbox');
+        return {
+            theme: ckboxConfig.theme,
+            language: ckboxConfig.language,
+            tokenUrl: ckboxConfig.tokenUrl,
+            serviceOrigin: ckboxConfig.serviceOrigin,
+            forceDemoLabel: ckboxConfig.forceDemoLabel,
+            dialog: {
+                onClose: ()=>this.fire('ckbox:close')
+            },
+            assets: {
+                onChoose: (assets)=>this.fire('ckbox:choose', assets)
+            }
+        };
+    }
+    /**
+     * Initializes various event listeners for the `ckbox:*` events, because all functionality of the `ckbox` command is event-based.
+     */ _initListeners() {
+        const editor = this.editor;
+        const model = editor.model;
+        const shouldInsertDataId = !editor.config.get('ckbox.ignoreDataId');
+        // Refresh the command after firing the `ckbox:*` event.
+        this.on('ckbox', ()=>{
+            this.refresh();
+        }, {
+            priority: 'low'
+        });
+        // Handle opening of the CKBox dialog.
+        this.on('ckbox:open', ()=>{
+            if (!this.isEnabled || this.value) {
+                return;
+            }
+            this._wrapper = createElement(document, 'div', {
+                class: 'ck ckbox-wrapper'
+            });
+            document.body.appendChild(this._wrapper);
+            window.CKBox.mount(this._wrapper, this._prepareOptions());
+        });
+        // Handle closing of the CKBox dialog.
+        this.on('ckbox:close', ()=>{
+            if (!this.value) {
+                return;
+            }
+            this._wrapper.remove();
+            this._wrapper = null;
+            editor.editing.view.focus();
+        });
+        // Handle choosing the assets.
+        this.on('ckbox:choose', (evt, assets)=>{
+            if (!this.isEnabled) {
+                return;
+            }
+            const imageCommand = editor.commands.get('insertImage');
+            const linkCommand = editor.commands.get('link');
+            const assetsToProcess = prepareAssets({
+                assets,
+                isImageAllowed: imageCommand.isEnabled,
+                isLinkAllowed: linkCommand.isEnabled
+            });
+            const assetsCount = assetsToProcess.length;
+            if (assetsCount === 0) {
+                return;
+            }
+            // All assets are inserted in one undo step.
+            model.change((writer)=>{
+                for (const asset of assetsToProcess){
+                    const isLastAsset = asset === assetsToProcess[assetsCount - 1];
+                    const isSingleAsset = assetsCount === 1;
+                    this._insertAsset(asset, isLastAsset, writer, isSingleAsset);
+                    // If asset ID must be set for the inserted model element, store the asset temporarily and remove it automatically
+                    // after the timeout.
+                    if (shouldInsertDataId) {
+                        setTimeout(()=>this._chosenAssets.delete(asset), ASSET_INSERTION_WAIT_TIMEOUT);
+                        this._chosenAssets.add(asset);
+                    }
+                }
+            });
+            editor.editing.view.focus();
+        });
+        // Clean up after the editor is destroyed.
+        this.listenTo(editor, 'destroy', ()=>{
+            this.fire('ckbox:close');
+            this._chosenAssets.clear();
+        });
+    }
+    /**
+     * Inserts the asset into the model.
+     *
+     * @param asset The asset to be inserted.
+     * @param isLastAsset Indicates if the current asset is the last one from the chosen set.
+     * @param writer An instance of the model writer.
+     * @param isSingleAsset It's true when only one asset is processed.
+     */ _insertAsset(asset, isLastAsset, writer, isSingleAsset) {
+        const editor = this.editor;
+        const model = editor.model;
+        const selection = model.document.selection;
+        // Remove the `linkHref` attribute to not affect the asset to be inserted.
+        writer.removeSelectionAttribute('linkHref');
+        if (asset.type === 'image') {
+            this._insertImage(asset);
+        } else {
+            this._insertLink(asset, writer, isSingleAsset);
+        }
+        // Except for the last chosen asset, move the selection to the end of the current range to avoid overwriting other, already
+        // inserted assets.
+        if (!isLastAsset) {
+            writer.setSelection(selection.getLastPosition());
+        }
+    }
+    /**
+     * Inserts the image by calling the `insertImage` command.
+     *
+     * @param asset The asset to be inserted.
+     */ _insertImage(asset) {
+        const editor = this.editor;
+        const { imageFallbackUrl, imageSources, imageTextAlternative, imageWidth, imageHeight, imagePlaceholder } = asset.attributes;
+        editor.execute('insertImage', {
+            source: {
+                src: imageFallbackUrl,
+                sources: imageSources,
+                alt: imageTextAlternative,
+                width: imageWidth,
+                height: imageHeight,
+                ...imagePlaceholder ? {
+                    placeholder: imagePlaceholder
+                } : null
+            }
+        });
+    }
+    /**
+     * Inserts the link to the asset by calling the `link` command.
+     *
+     * @param asset The asset to be inserted.
+     * @param writer An instance of the model writer.
+     * @param isSingleAsset It's true when only one asset is processed.
+     */ _insertLink(asset, writer, isSingleAsset) {
+        const editor = this.editor;
+        const model = editor.model;
+        const selection = model.document.selection;
+        const { linkName, linkHref } = asset.attributes;
+        // If the selection is collapsed, insert the asset name as the link label and select it.
+        if (selection.isCollapsed) {
+            const selectionAttributes = toMap(selection.getAttributes());
+            const textNode = writer.createText(linkName, selectionAttributes);
+            if (!isSingleAsset) {
+                const selectionLastPosition = selection.getLastPosition();
+                const parentElement = selectionLastPosition.parent;
+                // Insert new `paragraph` when selection is not in an empty `paragraph`.
+                if (!(parentElement.name === 'paragraph' && parentElement.isEmpty)) {
+                    editor.execute('insertParagraph', {
+                        position: selectionLastPosition
+                    });
+                }
+                const range = model.insertContent(textNode);
+                writer.setSelection(range);
+                editor.execute('link', linkHref);
+                return;
+            }
+            const range = model.insertContent(textNode);
+            writer.setSelection(range);
+        }
+        editor.execute('link', linkHref);
+    }
+    /**
+     * @inheritDoc
+     */ constructor(editor){
+        super(editor);
+        /**
+         * A set of all chosen assets. They are stored temporarily and they are automatically removed 1 second after being chosen.
+         * Chosen assets have to be "remembered" for a while to be able to map the given asset with the element inserted into the model.
+         * This association map is then used to set the ID on the model element.
+         *
+         * All chosen assets are automatically removed after the timeout, because (theoretically) it may happen that they will never be
+         * inserted into the model, even if the {@link module:link/linkcommand~LinkCommand `'link'`} command or the
+         * {@link module:image/image/insertimagecommand~InsertImageCommand `'insertImage'`} command is enabled. Such a case may arise when
+         * another plugin blocks the command execution. Then, in order not to keep the chosen (but not inserted) assets forever, we delete
+         * them automatically to prevent memory leakage. The 1 second timeout is enough to insert the asset into the model and extract the
+         * ID from the chosen asset.
+         *
+         * The assets are stored only if
+         * the {@link module:ckbox/ckboxconfig~CKBoxConfig#ignoreDataId `config.ckbox.ignoreDataId`} option is set to `false` (by default).
+         *
+         * @internal
+         */ this._chosenAssets = new Set();
+        /**
+         * The DOM element that acts as a mounting point for the CKBox dialog.
+         */ this._wrapper = null;
+        this._initListeners();
+    }
+}
+/**
+ * Parses the chosen assets into the internal data format. Filters out chosen assets that are not allowed.
+ */ function prepareAssets({ assets, isImageAllowed, isLinkAllowed }) {
+    return assets.map((asset)=>isImage(asset) ? {
+            id: asset.data.id,
+            type: 'image',
+            attributes: prepareImageAssetAttributes(asset)
+        } : {
+            id: asset.data.id,
+            type: 'link',
+            attributes: prepareLinkAssetAttributes(asset)
+        }).filter((asset)=>asset.type === 'image' ? isImageAllowed : isLinkAllowed);
+}
+/**
+ * Parses the assets attributes into the internal data format.
+ *
+ * @internal
+ */ function prepareImageAssetAttributes(asset) {
+    const { imageFallbackUrl, imageSources } = getImageUrls(asset.data.imageUrls);
+    const { description, width, height, blurHash } = asset.data.metadata;
+    const imagePlaceholder = blurHashToDataUrl(blurHash);
+    return {
+        imageFallbackUrl,
+        imageSources,
+        imageTextAlternative: description || '',
+        imageWidth: width,
+        imageHeight: height,
+        ...imagePlaceholder ? {
+            imagePlaceholder
+        } : null
+    };
+}
+/**
+ * Parses the assets attributes into the internal data format.
+ *
+ * @param origin The base URL for assets inserted into the editor.
+ */ function prepareLinkAssetAttributes(asset) {
+    return {
+        linkName: asset.data.name,
+        linkHref: getAssetUrl(asset)
+    };
+}
+/**
+ * Checks whether the asset is an image.
+ */ function isImage(asset) {
+    const metadata = asset.data.metadata;
+    if (!metadata) {
+        return false;
+    }
+    return metadata.width && metadata.height;
+}
+/**
+ * Creates the URL for the asset.
+ *
+ * @param origin The base URL for assets inserted into the editor.
+ */ function getAssetUrl(asset) {
+    const url = new URL(asset.data.url);
+    url.searchParams.set('download', 'true');
+    return url.toString();
+}
+
+const DEFAULT_CKBOX_THEME_NAME = 'lark';
+class CKBoxUtils extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
+        return 'CKBoxUtils';
+    }
+    /**
+     * @inheritDoc
+     */ static get requires() {
+        return [
+            'CloudServices'
+        ];
+    }
+    /**
+     * @inheritDoc
+     */ async init() {
+        const editor = this.editor;
+        const hasConfiguration = !!editor.config.get('ckbox');
+        const isLibraryLoaded = !!window.CKBox;
+        // Proceed with plugin initialization only when the integrator intentionally wants to use it, i.e. when the `config.ckbox` exists or
+        // the CKBox JavaScript library is loaded.
+        if (!hasConfiguration && !isLibraryLoaded) {
+            return;
+        }
+        editor.config.define('ckbox', {
+            serviceOrigin: 'https://api.ckbox.io',
+            defaultUploadCategories: null,
+            ignoreDataId: false,
+            language: editor.locale.uiLanguage,
+            theme: DEFAULT_CKBOX_THEME_NAME,
+            tokenUrl: editor.config.get('cloudServices.tokenUrl')
+        });
+        const cloudServices = editor.plugins.get('CloudServices');
+        const cloudServicesTokenUrl = editor.config.get('cloudServices.tokenUrl');
+        const ckboxTokenUrl = editor.config.get('ckbox.tokenUrl');
+        if (!ckboxTokenUrl) {
+            /**
+             * The {@link module:ckbox/ckboxconfig~CKBoxConfig#tokenUrl `config.ckbox.tokenUrl`} or the
+             * {@link module:cloud-services/cloudservicesconfig~CloudServicesConfig#tokenUrl `config.cloudServices.tokenUrl`}
+             * configuration is required for the CKBox plugin.
+             *
+             * ```ts
+             * ClassicEditor.create( document.createElement( 'div' ), {
+             * 	ckbox: {
+             * 		tokenUrl: "YOUR_TOKEN_URL"
+             * 		// ...
+             * 	}
+             * 	// ...
+             * } );
+             * ```
+             *
+             * @error ckbox-plugin-missing-token-url
+             */ throw new CKEditorError('ckbox-plugin-missing-token-url', this);
+        }
+        if (ckboxTokenUrl == cloudServicesTokenUrl) {
+            this._token = cloudServices.token;
+        } else {
+            this._token = await cloudServices.registerTokenUrl(ckboxTokenUrl);
+        }
+    }
+    /**
+     * Returns a token used by the CKBox plugin for communication with the CKBox service.
+     */ getToken() {
+        return this._token;
+    }
+    /**
+     * The ID of workspace to use when uploading an image.
+     */ getWorkspaceId() {
+        const t = this.editor.t;
+        const cannotAccessDefaultWorkspaceError = t('Cannot access default workspace.');
+        const defaultWorkspaceId = this.editor.config.get('ckbox.defaultUploadWorkspaceId');
+        const workspaceId = getWorkspaceId(this._token, defaultWorkspaceId);
+        if (workspaceId == null) {
+            /**
+             * The user is not authorized to access the workspace defined in  the`ckbox.defaultUploadWorkspaceId` configuration.
+             *
+             * @error ckbox-access-default-workspace-error
+             */ logError('ckbox-access-default-workspace-error');
+            throw cannotAccessDefaultWorkspaceError;
+        }
+        return workspaceId;
+    }
+    /**
+     * Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
+     */ async getCategoryIdForFile(fileOrUrl, options) {
+        const t = this.editor.t;
+        const cannotFindCategoryError = t('Cannot determine a category for the uploaded file.');
+        const defaultCategories = this.editor.config.get('ckbox.defaultUploadCategories');
+        const allCategoriesPromise = this._getAvailableCategories(options);
+        const extension = typeof fileOrUrl == 'string' ? convertMimeTypeToExtension(await getContentTypeOfUrl(fileOrUrl, options)) : getFileExtension(fileOrUrl);
+        const allCategories = await allCategoriesPromise;
+        // Couldn't fetch all categories. Perhaps the authorization token is invalid.
+        if (!allCategories) {
+            throw cannotFindCategoryError;
+        }
+        // If a user specifies the plugin configuration, find the first category that accepts the uploaded file.
+        if (defaultCategories) {
+            const userCategory = Object.keys(defaultCategories).find((category)=>{
+                return defaultCategories[category].find((e)=>e.toLowerCase() == extension);
+            });
+            // If found, return its ID if the category exists on the server side.
+            if (userCategory) {
+                const serverCategory = allCategories.find((category)=>category.id === userCategory || category.name === userCategory);
+                if (!serverCategory) {
+                    throw cannotFindCategoryError;
+                }
+                return serverCategory.id;
+            }
+        }
+        // Otherwise, find the first category that accepts the uploaded file and returns its ID.
+        const category = allCategories.find((category)=>category.extensions.find((e)=>e.toLowerCase() == extension));
+        if (!category) {
+            throw cannotFindCategoryError;
+        }
+        return category.id;
+    }
+    /**
+     * Resolves a promise with an array containing available categories with which the uploaded file can be associated.
+     *
+     * If the API returns limited results, the method will collect all items.
+     */ async _getAvailableCategories(options) {
+        const ITEMS_PER_REQUEST = 50;
+        const editor = this.editor;
+        const token = this._token;
+        const { signal } = options;
+        const serviceOrigin = editor.config.get('ckbox.serviceOrigin');
+        const workspaceId = this.getWorkspaceId();
+        try {
+            const result = [];
+            let offset = 0;
+            let remainingItems;
+            do {
+                const data = await fetchCategories(offset);
+                result.push(...data.items);
+                remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
+                offset += ITEMS_PER_REQUEST;
+            }while (remainingItems > 0)
+            return result;
+        } catch  {
+            signal.throwIfAborted();
+            /**
+             * Fetching a list of available categories with which an uploaded file can be associated failed.
+             *
+             * @error ckbox-fetch-category-http-error
+             */ logError('ckbox-fetch-category-http-error');
+            return undefined;
+        }
+        function fetchCategories(offset) {
+            const categoryUrl = new URL('categories', serviceOrigin);
+            categoryUrl.searchParams.set('limit', ITEMS_PER_REQUEST.toString());
+            categoryUrl.searchParams.set('offset', offset.toString());
+            categoryUrl.searchParams.set('workspaceId', workspaceId);
+            return sendHttpRequest({
+                url: categoryUrl,
+                signal,
+                authorization: token.value
+            });
+        }
+    }
+}
+
+class CKBoxUploadAdapter extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get requires() {
+        return [
+            'ImageUploadEditing',
+            'ImageUploadProgress',
+            FileRepository,
+            CKBoxEditing
+        ];
+    }
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
+        return 'CKBoxUploadAdapter';
+    }
+    /**
+     * @inheritDoc
+     */ async afterInit() {
+        const editor = this.editor;
+        const hasConfiguration = !!editor.config.get('ckbox');
+        const isLibraryLoaded = !!window.CKBox;
+        // Editor supports only one upload adapter. Register the CKBox upload adapter (and potentially overwrite other one) only when the
+        // integrator intentionally wants to use the CKBox plugin, i.e. when the `config.ckbox` exists or the CKBox JavaScript library is
+        // loaded.
+        if (!hasConfiguration && !isLibraryLoaded) {
+            return;
+        }
+        const fileRepository = editor.plugins.get(FileRepository);
+        const ckboxUtils = editor.plugins.get(CKBoxUtils);
+        fileRepository.createUploadAdapter = (loader)=>new Adapter(loader, editor, ckboxUtils);
+        const shouldInsertDataId = !editor.config.get('ckbox.ignoreDataId');
+        const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
+        // Mark uploaded assets with the `ckboxImageId` attribute. Its value represents an ID in CKBox.
+        if (shouldInsertDataId) {
+            imageUploadEditing.on('uploadComplete', (evt, { imageElement, data })=>{
+                editor.model.change((writer)=>{
+                    writer.setAttribute('ckboxImageId', data.ckboxImageId, imageElement);
+                });
+            });
+        }
+    }
+}
+/**
+ * Upload adapter for CKBox.
+ */ class Adapter {
+    /**
+     * Starts the upload process.
+     *
+     * @see module:upload/filerepository~UploadAdapter#upload
+     */ async upload() {
+        const ckboxUtils = this.ckboxUtils;
+        const t = this.editor.t;
+        const file = await this.loader.file;
+        const category = await ckboxUtils.getCategoryIdForFile(file, {
+            signal: this.controller.signal
+        });
+        const uploadUrl = new URL('assets', this.serviceOrigin);
+        const formData = new FormData();
+        uploadUrl.searchParams.set('workspaceId', ckboxUtils.getWorkspaceId());
+        formData.append('categoryId', category);
+        formData.append('file', file);
+        const requestConfig = {
+            method: 'POST',
+            url: uploadUrl,
+            data: formData,
+            onUploadProgress: (evt)=>{
+                /* istanbul ignore else -- @preserve */ if (evt.lengthComputable) {
+                    this.loader.uploadTotal = evt.total;
+                    this.loader.uploaded = evt.loaded;
+                }
+            },
+            signal: this.controller.signal,
+            authorization: this.token.value
+        };
+        return sendHttpRequest(requestConfig).then(async (data)=>{
+            const imageUrls = getImageUrls(data.imageUrls);
+            return {
+                ckboxImageId: data.id,
+                default: imageUrls.imageFallbackUrl,
+                sources: imageUrls.imageSources
+            };
+        }).catch(()=>{
+            const genericError = t('Cannot upload file:') + ` ${file.name}.`;
+            return Promise.reject(genericError);
+        });
+    }
+    /**
+     * Aborts the upload process.
+     *
+     * @see module:upload/filerepository~UploadAdapter#abort
+     */ abort() {
+        this.controller.abort();
+    }
+    /**
+     * Creates a new adapter instance.
+     */ constructor(loader, editor, ckboxUtils){
+        this.loader = loader;
+        this.token = ckboxUtils.getToken();
+        this.ckboxUtils = ckboxUtils;
+        this.editor = editor;
+        this.controller = new AbortController();
+        this.serviceOrigin = editor.config.get('ckbox.serviceOrigin');
+    }
+}
+
+class CKBoxEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
+        return 'CKBoxEditing';
+    }
+    /**
+     * @inheritDoc
+     */ static get requires() {
+        return [
+            'LinkEditing',
+            'PictureEditing',
+            CKBoxUploadAdapter,
+            CKBoxUtils
+        ];
+    }
+    /**
+     * @inheritDoc
+     */ init() {
+        const editor = this.editor;
+        if (!this._shouldBeInitialised()) {
+            return;
+        }
+        this._checkImagePlugins();
+        // Registering the `ckbox` command makes sense only if the CKBox library is loaded, as the `ckbox` command opens the CKBox dialog.
+        if (isLibraryLoaded()) {
+            editor.commands.add('ckbox', new CKBoxCommand(editor));
+        }
+    }
+    /**
+     * @inheritDoc
+     */ afterInit() {
+        const editor = this.editor;
+        if (!this._shouldBeInitialised()) {
+            return;
+        }
+        // Extending the schema, registering converters and applying fixers only make sense if the configuration option to assign
+        // the assets ID with the model elements is enabled.
+        if (!editor.config.get('ckbox.ignoreDataId')) {
+            this._initSchema();
+            this._initConversion();
+            this._initFixers();
+        }
+    }
+    /**
+     * Returns true only when the integrator intentionally wants to use the plugin, i.e. when the `config.ckbox` exists or
+     * the CKBox JavaScript library is loaded.
+     */ _shouldBeInitialised() {
+        const editor = this.editor;
+        const hasConfiguration = !!editor.config.get('ckbox');
+        return hasConfiguration || isLibraryLoaded();
+    }
+    /**
+     * Checks if at least one image plugin is loaded.
+     */ _checkImagePlugins() {
+        const editor = this.editor;
+        if (!editor.plugins.has('ImageBlockEditing') && !editor.plugins.has('ImageInlineEditing')) {
+            /**
+             * The CKBox feature requires one of the following plugins to be loaded to work correctly:
+             *
+             * * {@link module:image/imageblock~ImageBlock},
+             * * {@link module:image/imageinline~ImageInline},
+             * * {@link module:image/image~Image} (loads both `ImageBlock` and `ImageInline`)
+             *
+             * Please make sure your editor configuration is correct.
+             *
+             * @error ckbox-plugin-image-feature-missing
+             * @param {module:core/editor/editor~Editor} editor
+             */ logError('ckbox-plugin-image-feature-missing', editor);
+        }
+    }
+    /**
+     * Extends the schema to allow the `ckboxImageId` and `ckboxLinkId` attributes for links and images.
+     */ _initSchema() {
+        const editor = this.editor;
+        const schema = editor.model.schema;
+        schema.extend('$text', {
+            allowAttributes: 'ckboxLinkId'
+        });
+        if (schema.isRegistered('imageBlock')) {
+            schema.extend('imageBlock', {
+                allowAttributes: [
+                    'ckboxImageId',
+                    'ckboxLinkId'
+                ]
+            });
+        }
+        if (schema.isRegistered('imageInline')) {
+            schema.extend('imageInline', {
+                allowAttributes: [
+                    'ckboxImageId',
+                    'ckboxLinkId'
+                ]
+            });
+        }
+        schema.addAttributeCheck((context, attributeName)=>{
+            const isLink = !!context.last.getAttribute('linkHref');
+            if (!isLink && attributeName === 'ckboxLinkId') {
+                return false;
+            }
+        });
+    }
+    /**
+     * Configures the upcast and downcast conversions for the `ckboxImageId` and `ckboxLinkId` attributes.
+     */ _initConversion() {
+        const editor = this.editor;
+        // Convert `ckboxLinkId` => `data-ckbox-resource-id`.
+        editor.conversion.for('downcast').add((dispatcher)=>{
+            // Due to custom converters for linked block images, handle the `ckboxLinkId` attribute manually.
+            dispatcher.on('attribute:ckboxLinkId:imageBlock', (evt, data, conversionApi)=>{
+                const { writer, mapper, consumable } = conversionApi;
+                if (!consumable.consume(data.item, evt.name)) {
+                    return;
+                }
+                const viewFigure = mapper.toViewElement(data.item);
+                const linkInImage = [
+                    ...viewFigure.getChildren()
+                ].find((child)=>child.name === 'a');
+                // No link inside an image - no conversion needed.
+                if (!linkInImage) {
+                    return;
+                }
+                if (data.item.hasAttribute('ckboxLinkId')) {
+                    writer.setAttribute('data-ckbox-resource-id', data.item.getAttribute('ckboxLinkId'), linkInImage);
+                } else {
+                    writer.removeAttribute('data-ckbox-resource-id', linkInImage);
+                }
+            }, {
+                priority: 'low'
+            });
+            dispatcher.on('attribute:ckboxLinkId', (evt, data, conversionApi)=>{
+                const { writer, mapper, consumable } = conversionApi;
+                if (!consumable.consume(data.item, evt.name)) {
+                    return;
+                }
+                // Remove the previous attribute value if it was applied.
+                if (data.attributeOldValue) {
+                    const viewElement = createLinkElement(writer, data.attributeOldValue);
+                    writer.unwrap(mapper.toViewRange(data.range), viewElement);
+                }
+                // Add the new attribute value if specified in a model element.
+                if (data.attributeNewValue) {
+                    const viewElement = createLinkElement(writer, data.attributeNewValue);
+                    if (data.item.is('selection')) {
+                        const viewSelection = writer.document.selection;
+                        writer.wrap(viewSelection.getFirstRange(), viewElement);
+                    } else {
+                        writer.wrap(mapper.toViewRange(data.range), viewElement);
+                    }
+                }
+            }, {
+                priority: 'low'
+            });
+        });
+        // Convert `data-ckbox-resource-id` => `ckboxLinkId`.
+        //
+        // The helper conversion does not handle all cases, so take care of the `data-ckbox-resource-id` attribute manually for images
+        // and links.
+        editor.conversion.for('upcast').add((dispatcher)=>{
+            dispatcher.on('element:a', (evt, data, conversionApi)=>{
+                const { writer, consumable } = conversionApi;
+                // Upcast the `data-ckbox-resource-id` attribute only for valid link elements.
+                if (!data.viewItem.getAttribute('href')) {
+                    return;
+                }
+                const consumableAttributes = {
+                    attributes: [
+                        'data-ckbox-resource-id'
+                    ]
+                };
+                if (!consumable.consume(data.viewItem, consumableAttributes)) {
+                    return;
+                }
+                const attributeValue = data.viewItem.getAttribute('data-ckbox-resource-id');
+                // Missing the `data-ckbox-resource-id` attribute.
+                if (!attributeValue) {
+                    return;
+                }
+                if (data.modelRange) {
+                    // If the `<a>` element contains more than single children (e.g. a linked image), set the `ckboxLinkId` for each
+                    // allowed child.
+                    for (let item of data.modelRange.getItems()){
+                        if (item.is('$textProxy')) {
+                            item = item.textNode;
+                        }
+                        // Do not copy the `ckboxLinkId` attribute when wrapping an element in a block element, e.g. when
+                        // auto-paragraphing.
+                        if (shouldUpcastAttributeForNode(item)) {
+                            writer.setAttribute('ckboxLinkId', attributeValue, item);
+                        }
+                    }
+                } else {
+                    // Otherwise, just set the `ckboxLinkId` for the model element.
+                    const modelElement = data.modelCursor.nodeBefore || data.modelCursor.parent;
+                    writer.setAttribute('ckboxLinkId', attributeValue, modelElement);
+                }
+            }, {
+                priority: 'low'
+            });
+        });
+        // Convert `ckboxImageId` => `data-ckbox-resource-id`.
+        editor.conversion.for('downcast').attributeToAttribute({
+            model: 'ckboxImageId',
+            view: 'data-ckbox-resource-id'
+        });
+        // Convert `data-ckbox-resource-id` => `ckboxImageId`.
+        editor.conversion.for('upcast').elementToAttribute({
+            model: {
+                key: 'ckboxImageId',
+                value: (viewElement)=>viewElement.getAttribute('data-ckbox-resource-id')
+            },
+            view: {
+                attributes: {
+                    'data-ckbox-resource-id': /[\s\S]+/
+                }
+            }
+        });
+        const replaceImageSourceCommand = editor.commands.get('replaceImageSource');
+        if (replaceImageSourceCommand) {
+            this.listenTo(replaceImageSourceCommand, 'cleanupImage', (_, [writer, image])=>{
+                writer.removeAttribute('ckboxImageId', image);
+            });
+        }
+    }
+    /**
+     * Registers post-fixers that add or remove the `ckboxLinkId` and `ckboxImageId` attributes.
+     */ _initFixers() {
+        const editor = this.editor;
+        const model = editor.model;
+        const selection = model.document.selection;
+        // Registers the post-fixer to sync the asset ID with the model elements.
+        model.document.registerPostFixer(syncDataIdPostFixer(editor));
+        // Registers the post-fixer to remove the `ckboxLinkId` attribute from the model selection.
+        model.document.registerPostFixer(injectSelectionPostFixer(selection));
+    }
+}
+/**
+ * A post-fixer that synchronizes the asset ID with the model element.
+ */ function syncDataIdPostFixer(editor) {
+    return (writer)=>{
+        let changed = false;
+        const model = editor.model;
+        const ckboxCommand = editor.commands.get('ckbox');
+        // The ID from chosen assets are stored in the `CKBoxCommand#_chosenAssets`. If there is no command, it makes no sense to check
+        // for changes in the model.
+        if (!ckboxCommand) {
+            return changed;
+        }
+        for (const entry of model.document.differ.getChanges()){
+            if (entry.type !== 'insert' && entry.type !== 'attribute') {
+                continue;
+            }
+            const range = entry.type === 'insert' ? new Range(entry.position, entry.position.getShiftedBy(entry.length)) : entry.range;
+            const isLinkHrefAttributeRemoval = entry.type === 'attribute' && entry.attributeKey === 'linkHref' && entry.attributeNewValue === null;
+            for (const item of range.getItems()){
+                // If the `linkHref` attribute has been removed, sync the change with the `ckboxLinkId` attribute.
+                if (isLinkHrefAttributeRemoval && item.hasAttribute('ckboxLinkId')) {
+                    writer.removeAttribute('ckboxLinkId', item);
+                    changed = true;
+                    continue;
+                }
+                // Otherwise, the change concerns either a new model element or an attribute change. Try to find the assets for the modified
+                // model element.
+                const assets = findAssetsForItem(item, ckboxCommand._chosenAssets);
+                for (const asset of assets){
+                    const attributeName = asset.type === 'image' ? 'ckboxImageId' : 'ckboxLinkId';
+                    if (asset.id === item.getAttribute(attributeName)) {
+                        continue;
+                    }
+                    writer.setAttribute(attributeName, asset.id, item);
+                    changed = true;
+                }
+            }
+        }
+        return changed;
+    };
+}
+/**
+ * A post-fixer that removes the `ckboxLinkId` from the selection if it does not represent a link anymore.
+ */ function injectSelectionPostFixer(selection) {
+    return (writer)=>{
+        const shouldRemoveLinkIdAttribute = !selection.hasAttribute('linkHref') && selection.hasAttribute('ckboxLinkId');
+        if (shouldRemoveLinkIdAttribute) {
+            writer.removeSelectionAttribute('ckboxLinkId');
+            return true;
+        }
+        return false;
+    };
+}
+/**
+ * Tries to find the asset that is associated with the model element by comparing the attributes:
+ * - the image fallback URL with the `src` attribute for images,
+ * - the link URL with the `href` attribute for links.
+ *
+ * For any model element, zero, one or more than one asset can be found (e.g. a linked image may be associated with the link asset and the
+ * image asset).
+ */ function findAssetsForItem(item, assets) {
+    const isImageElement = item.is('element', 'imageInline') || item.is('element', 'imageBlock');
+    const isLinkElement = item.hasAttribute('linkHref');
+    return [
+        ...assets
+    ].filter((asset)=>{
+        if (asset.type === 'image' && isImageElement) {
+            return asset.attributes.imageFallbackUrl === item.getAttribute('src');
+        }
+        if (asset.type === 'link' && isLinkElement) {
+            return asset.attributes.linkHref === item.getAttribute('linkHref');
+        }
+    });
+}
+/**
+ * Creates view link element with the requested ID.
+ */ function createLinkElement(writer, id) {
+    // Priority equal 5 is needed to merge adjacent `<a>` elements together.
+    const viewElement = writer.createAttributeElement('a', {
+        'data-ckbox-resource-id': id
+    }, {
+        priority: 5
+    });
+    writer.setCustomProperty('link', true, viewElement);
+    return viewElement;
+}
+/**
+ * Checks if the model element may have the `ckboxLinkId` attribute.
+ */ function shouldUpcastAttributeForNode(node) {
+    if (node.is('$text')) {
+        return true;
+    }
+    if (node.is('element', 'imageInline') || node.is('element', 'imageBlock')) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Returns true if the CKBox library is loaded, false otherwise.
+ */ function isLibraryLoaded() {
+    return !!window.CKBox;
+}
+
+class CKBox extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
+        return 'CKBox';
+    }
+    /**
+     * @inheritDoc
+     */ static get requires() {
+        return [
+            CKBoxEditing,
+            CKBoxUI
+        ];
+    }
+}
+
+/**
+ * @internal
+ */ function createEditabilityChecker(allowExternalImagesEditing) {
+    const checkUrl = createUrlChecker(allowExternalImagesEditing);
+    return (element)=>{
+        const isImageElement = element.is('element', 'imageInline') || element.is('element', 'imageBlock');
+        if (!isImageElement) {
+            return false;
+        }
+        if (element.hasAttribute('ckboxImageId')) {
+            return true;
+        }
+        if (element.hasAttribute('src')) {
+            return checkUrl(element.getAttribute('src'));
+        }
+        return false;
+    };
+}
+function createUrlChecker(allowExternalImagesEditing) {
+    if (Array.isArray(allowExternalImagesEditing)) {
+        const urlMatchers = allowExternalImagesEditing.map(createUrlChecker);
+        return (src)=>urlMatchers.some((matcher)=>matcher(src));
+    }
+    if (allowExternalImagesEditing == 'origin') {
+        const origin = global.window.location.origin;
+        return (src)=>new URL(src, global.document.baseURI).origin == origin;
+    }
+    if (typeof allowExternalImagesEditing == 'function') {
+        return allowExternalImagesEditing;
+    }
+    if (allowExternalImagesEditing instanceof RegExp) {
+        return (src)=>!!(src.match(allowExternalImagesEditing) || src.replace(/^https?:\/\//, '').match(allowExternalImagesEditing));
+    }
+    return ()=>false;
+}
+
+class CKBoxImageEditCommand extends Command {
+    /**
+     * @inheritDoc
+     */ refresh() {
+        const editor = this.editor;
+        this.value = this._getValue();
+        const selectedElement = editor.model.document.selection.getSelectedElement();
+        this.isEnabled = !!selectedElement && this._canEdit(selectedElement) && !this._checkIfElementIsBeingProcessed(selectedElement);
+    }
+    /**
+     * Opens the CKBox Image Editor dialog for editing the image.
+     */ execute() {
+        if (this._getValue()) {
+            return;
+        }
+        const wrapper = createElement(document, 'div', {
+            class: 'ck ckbox-wrapper'
+        });
+        this._wrapper = wrapper;
+        this.value = true;
+        document.body.appendChild(this._wrapper);
+        const imageElement = this.editor.model.document.selection.getSelectedElement();
+        const processingState = {
+            element: imageElement,
+            controller: new AbortController()
+        };
+        this._prepareOptions(processingState).then((options)=>window.CKBox.mountImageEditor(wrapper, options), (error)=>{
+            const editor = this.editor;
+            const t = editor.t;
+            const notification = editor.plugins.get(Notification);
+            notification.showWarning(t('Failed to determine category of edited image.'), {
+                namespace: 'ckbox'
+            });
+            console.error(error);
+            this._handleImageEditorClose();
+        });
+    }
+    /**
+     * @inheritDoc
+     */ destroy() {
+        this._handleImageEditorClose();
+        this._prepareOptions.abort();
+        for (const state of this._processInProgress.values()){
+            state.controller.abort();
+        }
+        super.destroy();
+    }
+    /**
+     * Indicates if the CKBox Image Editor dialog is already opened.
+     */ _getValue() {
+        return this._wrapper !== null;
+    }
+    /**
+     * Creates the options object for the CKBox Image Editor dialog.
+     */ async _prepareOptionsAbortable(signal, state) {
+        const editor = this.editor;
+        const ckboxConfig = editor.config.get('ckbox');
+        const ckboxUtils = editor.plugins.get(CKBoxUtils);
+        const { element } = state;
+        let imageMountOptions;
+        const ckboxImageId = element.getAttribute('ckboxImageId');
+        if (ckboxImageId) {
+            imageMountOptions = {
+                assetId: ckboxImageId
+            };
+        } else {
+            const imageUrl = new URL(element.getAttribute('src'), document.baseURI).href;
+            const uploadCategoryId = await ckboxUtils.getCategoryIdForFile(imageUrl, {
+                signal
+            });
+            imageMountOptions = {
+                imageUrl,
+                uploadCategoryId
+            };
+        }
+        return {
+            ...imageMountOptions,
+            imageEditing: {
+                allowOverwrite: false
+            },
+            tokenUrl: ckboxConfig.tokenUrl,
+            ...ckboxConfig.serviceOrigin && {
+                serviceOrigin: ckboxConfig.serviceOrigin
+            },
+            onClose: ()=>this._handleImageEditorClose(),
+            onSave: (asset)=>this._handleImageEditorSave(state, asset)
+        };
+    }
+    /**
+     * Initializes event lister for an event of removing an image.
+     */ _prepareListeners() {
+        // Abort editing processing when the image has been removed.
+        this.listenTo(this.editor.model.document, 'change:data', ()=>{
+            const processingStates = this._getProcessingStatesOfDeletedImages();
+            processingStates.forEach((processingState)=>{
+                processingState.controller.abort();
+            });
+        });
+    }
+    /**
+     * Gets processing states of images that have been deleted in the mean time.
+     */ _getProcessingStatesOfDeletedImages() {
+        const states = [];
+        for (const state of this._processInProgress.values()){
+            if (state.element.root.rootName == '$graveyard') {
+                states.push(state);
+            }
+        }
+        return states;
+    }
+    _checkIfElementIsBeingProcessed(selectedElement) {
+        for (const { element } of this._processInProgress){
+            if (isEqual(element, selectedElement)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Closes the CKBox Image Editor dialog.
+     */ _handleImageEditorClose() {
+        if (!this._wrapper) {
+            return;
+        }
+        this._wrapper.remove();
+        this._wrapper = null;
+        this.editor.editing.view.focus();
+        this.refresh();
+    }
+    /**
+     * Save edited image. In case server respond with "success" replace with edited image,
+     * otherwise show notification error.
+     */ _handleImageEditorSave(state, asset) {
+        const t = this.editor.locale.t;
+        const notification = this.editor.plugins.get(Notification);
+        const pendingActions = this.editor.plugins.get(PendingActions);
+        const action = pendingActions.add(t('Processing the edited image.'));
+        this._processInProgress.add(state);
+        this._showImageProcessingIndicator(state.element, asset);
+        this.refresh();
+        this._waitForAssetProcessed(asset.data.id, state.controller.signal).then((asset)=>{
+            this._replaceImage(state.element, asset);
+        }, (error)=>{
+            // Remove processing indicator. It was added only to ViewElement.
+            this.editor.editing.reconvertItem(state.element);
+            if (state.controller.signal.aborted) {
+                return;
+            }
+            if (!error || error instanceof CKEditorError) {
+                notification.showWarning(t('Server failed to process the image.'), {
+                    namespace: 'ckbox'
+                });
+            } else {
+                console.error(error);
+            }
+        }).finally(()=>{
+            this._processInProgress.delete(state);
+            pendingActions.remove(action);
+            this.refresh();
+        });
+    }
+    /**
+     * Get asset's status on server. If server responds with "success" status then
+     * image is already proceeded and ready for saving.
+     */ async _getAssetStatusFromServer(id, signal) {
+        const ckboxUtils = this.editor.plugins.get(CKBoxUtils);
+        const url = new URL('assets/' + id, this.editor.config.get('ckbox.serviceOrigin'));
+        const response = await sendHttpRequest({
+            url,
+            signal,
+            authorization: ckboxUtils.getToken().value
+        });
+        const status = response.metadata.metadataProcessingStatus;
+        if (!status || status == 'queued') {
+            /**
+             * Image has not been processed yet.
+             *
+             * @error ckbox-image-not-processed
+             */ throw new CKEditorError('ckbox-image-not-processed');
+        }
+        return {
+            data: {
+                ...response
+            }
+        };
+    }
+    /**
+     * Waits for an asset to be processed.
+     * It retries retrieving asset status from the server in case of failure.
+     */ async _waitForAssetProcessed(id, signal) {
+        const result = await retry(()=>this._getAssetStatusFromServer(id, signal), {
+            signal,
+            maxAttempts: 5
+        });
+        if (result.data.metadata.metadataProcessingStatus != 'success') {
+            /**
+             * The image processing failed.
+             *
+             * @error ckbox-image-processing-failed
+             */ throw new CKEditorError('ckbox-image-processing-failed');
+        }
+        return result;
+    }
+    /**
+     * Shows processing indicator while image is processing.
+     *
+     * @param asset Data about certain asset.
+     */ _showImageProcessingIndicator(element, asset) {
+        const editor = this.editor;
+        editor.editing.view.change((writer)=>{
+            const imageElementView = editor.editing.mapper.toViewElement(element);
+            const imageUtils = this.editor.plugins.get('ImageUtils');
+            const img = imageUtils.findViewImgElement(imageElementView);
+            writer.removeStyle('aspect-ratio', img);
+            writer.setAttribute('width', asset.data.metadata.width, img);
+            writer.setAttribute('height', asset.data.metadata.height, img);
+            writer.setStyle('width', `${asset.data.metadata.width}px`, img);
+            writer.setStyle('height', `${asset.data.metadata.height}px`, img);
+            writer.addClass('image-processing', imageElementView);
+        });
+    }
+    /**
+     * Replace the edited image with the new one.
+     */ _replaceImage(element, asset) {
+        const editor = this.editor;
+        const { imageFallbackUrl, imageSources, imageWidth, imageHeight, imagePlaceholder } = prepareImageAssetAttributes(asset);
+        const previousSelectionRanges = Array.from(editor.model.document.selection.getRanges());
+        editor.model.change((writer)=>{
+            writer.setSelection(element, 'on');
+            editor.execute('insertImage', {
+                source: {
+                    src: imageFallbackUrl,
+                    sources: imageSources,
+                    width: imageWidth,
+                    height: imageHeight,
+                    ...imagePlaceholder ? {
+                        placeholder: imagePlaceholder
+                    } : null,
+                    ...element.hasAttribute('alt') ? {
+                        alt: element.getAttribute('alt')
+                    } : null
+                }
+            });
+            const previousChildren = element.getChildren();
+            element = editor.model.document.selection.getSelectedElement();
+            for (const child of previousChildren){
+                writer.append(writer.cloneElement(child), element);
+            }
+            writer.setAttribute('ckboxImageId', asset.data.id, element);
+            writer.setSelection(previousSelectionRanges);
+        });
+    }
+    /**
+     * @inheritDoc
+     */ constructor(editor){
+        super(editor);
+        /**
+         * The DOM element that acts as a mounting point for the CKBox Edit Image dialog.
+         */ this._wrapper = null;
+        /**
+         * The states of image processing in progress.
+         */ this._processInProgress = new Set();
+        this.value = false;
+        this._canEdit = createEditabilityChecker(editor.config.get('ckbox.allowExternalImagesEditing'));
+        this._prepareOptions = abortableDebounce((signal, state)=>this._prepareOptionsAbortable(signal, state));
+        this._prepareListeners();
+    }
+}
+
+class CKBoxImageEditEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
+        return 'CKBoxImageEditEditing';
+    }
+    /**
+     * @inheritDoc
+     */ static get requires() {
+        return [
+            CKBoxEditing,
+            CKBoxUtils,
+            PendingActions,
+            Notification,
+            'ImageUtils',
+            'ImageEditing'
+        ];
+    }
+    /**
+     * @inheritDoc
+     */ init() {
+        const { editor } = this;
+        editor.commands.add('ckboxImageEdit', new CKBoxImageEditCommand(editor));
+    }
+}
+
+var ckboxImageEditIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.201 1C.538 1 0 1.47 0 2.1v14.363c0 .64.534 1.037 1.186 1.037H5.06l5.058-5.078L6.617 9.15a.696.696 0 0 0-.957-.033L1.5 13.6V2.5h15v4.354a3.478 3.478 0 0 1 1.5.049V2.1c0-.63-.547-1.1-1.2-1.1H1.202Zm11.713 2.803a2.147 2.147 0 0 0-2.049 1.992 2.14 2.14 0 0 0 1.28 2.096 2.13 2.13 0 0 0 2.642-3.11 2.129 2.129 0 0 0-1.873-.978ZM8.089 17.635v2.388h2.389l7.046-7.046-2.39-2.39-7.045 7.048Zm11.282-6.507a.637.637 0 0 0 .139-.692.603.603 0 0 0-.139-.205l-1.49-1.488a.63.63 0 0 0-.899 0l-1.166 1.163 2.39 2.39 1.165-1.168Z\"/></svg>";
+
+class CKBoxImageEditUI extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
+        return 'CKBoxImageEditUI';
+    }
+    /**
+     * @inheritDoc
+     */ init() {
+        const editor = this.editor;
+        editor.ui.componentFactory.add('ckboxImageEdit', (locale)=>{
+            const command = editor.commands.get('ckboxImageEdit');
+            const view = new ButtonView(locale);
+            const t = locale.t;
+            view.set({
+                label: t('Edit image'),
+                icon: ckboxImageEditIcon,
+                tooltip: true
+            });
+            view.bind('isOn').to(command, 'value', command, 'isEnabled', (value, isEnabled)=>value && isEnabled);
+            view.bind('isEnabled').to(command);
+            // Execute the command.
+            this.listenTo(view, 'execute', ()=>{
+                editor.execute('ckboxImageEdit');
+                editor.editing.view.focus();
+            });
+            return view;
+        });
+    }
+}
+
+class CKBoxImageEdit extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
+        return 'CKBoxImageEdit';
+    }
+    /**
+     * @inheritDoc
+     */ static get requires() {
+        return [
+            CKBoxImageEditEditing,
+            CKBoxImageEditUI
+        ];
+    }
+}
+
+export { CKBox, CKBoxEditing, CKBoxImageEdit, CKBoxImageEditEditing, CKBoxImageEditUI, CKBoxUI };
+//# sourceMappingURL=index.js.map