@ckeditor/ckeditor5-ckbox 41.1.0 → 41.3.0-alpha.0

package/dist/index.js

@@ -0,0 +1,1713 @@
+/**
+ * @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, Notification } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { Range } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { createElement, toMap, CKEditorError, logError, global, abortableDebounce, retry } 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';
+
+/**
+ * @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
+ */
+/**
+ * @module ckbox/ckboxui
+ */
+/**
+ * The CKBoxUI plugin. It introduces the `'ckbox'` toolbar button.
+ */
+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', locale => {
+            const command = editor.commands.get('ckbox');
+            const button = new ButtonView(locale);
+            button.set({
+                label: t('Open file manager'),
+                icon: icons.browseFiles,
+                tooltip: true
+            });
+            button.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
+            button.on('execute', () => {
+                editor.execute('ckbox');
+            });
+            return button;
+        });
+        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;
+                }
+            });
+        }
+    }
+}
+
+/**
+ * @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
+ */
+/**
+ * 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 = /\.(?<ext>[^.]+)$/;
+    const match = fileName.match(extensionRegExp);
+    return match.groups.ext.toLowerCase();
+}
+
+/**
+ * @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
+ */
+// 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;
+/**
+ * The CKBox command. It is used by the {@link module:ckbox/ckboxediting~CKBoxEditing CKBox editing feature} to open the CKBox file manager.
+ * The file manager allows inserting an image or a link to a file into the editor content.
+ *
+ * ```ts
+ * editor.execute( 'ckbox' );
+ * ```
+ *
+ * **Note:** This command uses other features to perform the following tasks:
+ * - To insert images it uses the {@link module:image/image/insertimagecommand~InsertImageCommand 'insertImage'} command from the
+ * {@link module:image/image~Image Image feature}.
+ * - To insert links to other files it uses the {@link module:link/linkcommand~LinkCommand 'link'} command from the
+ * {@link module:link/link~Link Link feature}.
+ */
+class CKBoxCommand extends Command {
+    /**
+     * @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();
+    }
+    /**
+     * @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);
+    }
+}
+/**
+ * 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();
+}
+
+/**
+ * @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
+ */
+const DEFAULT_CKBOX_THEME_NAME = 'lark';
+/**
+ * The CKBox utilities plugin.
+ */
+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
+            });
+        }
+    }
+}
+
+/**
+ * @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
+ */
+/* globals AbortController, FormData, URL, window */
+/**
+ * @module ckbox/ckboxuploadadapter
+ */
+/**
+ * A plugin that enables file uploads in CKEditor 5 using the CKBox server–side connector.
+ * See the {@glink features/file-management/ckbox CKBox file manager integration} guide to learn how to configure
+ * and use this feature as well as find out more about the full integration with the file manager
+ * provided by the {@link module:ckbox/ckbox~CKBox} plugin.
+ *
+ * Check out the {@glink features/images/image-upload/image-upload Image upload overview} guide to learn about
+ * other ways to upload images into CKEditor 5.
+ */
+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 {
+    /**
+     * 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');
+    }
+    /**
+     * 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();
+    }
+}
+
+/**
+ * @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
+ */
+/**
+ * The CKBox editing feature. It introduces the {@link module:ckbox/ckboxcommand~CKBoxCommand CKBox command} and
+ * {@link module:ckbox/ckboxuploadadapter~CKBoxUploadAdapter CKBox upload adapter}.
+ */
+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;
+}
+
+/**
+ * @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
+ */
+/**
+ * @module ckbox/ckbox
+ */
+/**
+ * The CKBox feature, a bridge between the CKEditor 5 WYSIWYG editor and the CKBox file manager and uploader.
+ *
+ * This is a "glue" plugin which enables:
+ *
+ * * {@link module:ckbox/ckboxediting~CKBoxEditing},
+ * * {@link module:ckbox/ckboxui~CKBoxUI},
+ *
+ * See the {@glink features/file-management/ckbox CKBox integration} guide to learn how to configure and use this feature.
+ *
+ * Check out the {@glink features/images/image-upload/image-upload Image upload} guide to learn about other ways to upload
+ * images into CKEditor 5.
+ */
+class CKBox extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'CKBox';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [CKBoxEditing, CKBoxUI];
+    }
+}
+
+/**
+ * @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
+ */
+/**
+ * @module ckbox/ckboximageedit/utils
+ */
+/**
+ * @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;
+}
+
+/**
+ * @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
+ */
+/* globals document, console, AbortController, URL, window */
+/**
+ * @module ckbox/ckboximageedit/ckboximageeditcommand
+ */
+/**
+ * The CKBox edit image command.
+ *
+ * Opens the CKBox dialog for editing the image.
+ */
+class CKBoxImageEditCommand extends Command {
+    /**
+     * @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();
+    }
+    /**
+     * @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);
+        });
+    }
+}
+
+/**
+ * @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
+ */
+/**
+ * @module ckbox/ckboximageedit/ckboximageeditediting
+ */
+/**
+ * The CKBox image edit editing plugin.
+ */
+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>";
+
+/**
+ * @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
+ */
+/**
+ * @module ckbox/ckboximageedit/ckboximageeditui
+ */
+/**
+ * The UI plugin of the CKBox image edit feature.
+ *
+ * It registers the `'ckboxImageEdit'` UI button in the editor's {@link module:ui/componentfactory~ComponentFactory component factory}
+ * that allows you to open the CKBox dialog and edit the image.
+ */
+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;
+        });
+    }
+}
+
+/**
+ * @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
+ */
+/**
+ * @module ckbox/ckboximageedit
+ */
+/**
+ * The CKBox image edit feature.
+ */
+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