@ckeditor/ckeditor5-ckbox 0.0.0-nightly-20240602.0 → 0.0.0-nightly-20240604.0

package/dist/index.js

@@ -5,123 +5,76 @@
 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, delay, abortableDebounce, retry } from '@ckeditor/ckeditor5-utils/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';
 
-/**
- * Introduces UI components for the `CKBox` plugin.
- *
- * The plugin introduces two UI components to the {@link module:ui/componentfactory~ComponentFactory UI component factory}:
- *
- * * the `'ckbox'` toolbar button,
- * * the `'menuBar:ckbox'` menu bar component, which is by default added to the `'Insert'` menu.
- *
- * It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component.
- */ class CKBoxUI extends Plugin {
+class CKBoxUI extends Plugin {
     /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'CKBoxUI';
     }
     /**
-	 * @inheritDoc
-	 */ afterInit() {
+     * @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;
         }
-        editor.ui.componentFactory.add('ckbox', ()=>this._createFileToolbarButton());
-        editor.ui.componentFactory.add('menuBar:ckbox', ()=>this._createFileMenuBarButton());
+        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')) {
-            editor.plugins.get('ImageInsertUI').registerIntegration({
+            const imageInsertUI = editor.plugins.get('ImageInsertUI');
+            imageInsertUI.registerIntegration({
                 name: 'assetManager',
                 observable: ()=>editor.commands.get('ckbox'),
-                buttonViewCreator: ()=>this._createImageToolbarButton(),
-                formViewCreator: ()=>this._createImageDropdownButton(),
-                menuBarButtonViewCreator: (isOnly)=>this._createImageMenuBarButton(isOnly ? 'insertOnly' : 'insertNested')
+                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 the base for various kinds of the button component provided by this feature.
-	 */ _createButton(ButtonClass) {
+     * 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');
-        locale.t;
+        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;
     }
-    /**
-	 * Creates a simple toolbar button for files management, with an icon and a tooltip.
-	 */ _createFileToolbarButton() {
-        const t = this.editor.locale.t;
-        const button = this._createButton(ButtonView);
-        button.icon = icons.browseFiles;
-        button.label = t('Open file manager');
-        button.tooltip = true;
-        return button;
-    }
-    /**
-	 * Creates a simple toolbar button for images management, with an icon and a tooltip.
-	 */ _createImageToolbarButton() {
-        const t = this.editor.locale.t;
-        const imageInsertUI = this.editor.plugins.get('ImageInsertUI');
-        const button = this._createButton(ButtonView);
-        button.icon = icons.imageAssetManager;
-        button.bind('label').to(imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Replace image with file manager') : t('Insert image with file manager'));
-        button.tooltip = true;
-        return button;
-    }
-    /**
-	 * Creates a button for images management for the dropdown view, with an icon, text and no tooltip.
-	 */ _createImageDropdownButton() {
-        const t = this.editor.locale.t;
-        const imageInsertUI = this.editor.plugins.get('ImageInsertUI');
-        const button = this._createButton(ButtonView);
-        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 files management for the menu bar.
-	 */ _createFileMenuBarButton() {
-        const t = this.editor.locale.t;
-        const button = this._createButton(MenuBarMenuListItemButtonView);
-        button.icon = icons.browseFiles;
-        button.withText = true;
-        button.label = t('File');
-        return button;
-    }
-    /**
-	 * Creates a button for images management for the menu bar.
-	 */ _createImageMenuBarButton(type) {
-        const t = this.editor.locale.t;
-        const button = this._createButton(MenuBarMenuListItemButtonView);
-        button.icon = icons.imageAssetManager;
-        button.withText = true;
-        switch(type){
-            case 'insertOnly':
-                button.label = t('Image');
-                break;
-            case 'insertNested':
-                button.label = t('With file manager');
-                break;
-        }
-        return button;
-    }
 }
 
 /**
@@ -282,7 +235,7 @@ const MIME_TO_EXTENSION = {
  * Returns an extension from the given value.
  */ function getFileExtension(file) {
     const fileName = file.name;
-    const extensionRegExp = /\.(?<ext>[^.]+)$/;
+    const extensionRegExp = RegExp("\\.(?<ext>[^.]+)$");
     const match = fileName.match(extensionRegExp);
     return match.groups.ext.toLowerCase();
 }
@@ -291,68 +244,29 @@ const MIME_TO_EXTENSION = {
 // `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 {
-    /**
-	 * 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
-	 */ _chosenAssets = new Set();
-    /**
-	 * The DOM element that acts as a mounting point for the CKBox dialog.
-	 */ _wrapper = null;
+class CKBoxCommand extends Command {
     /**
-	 * @inheritDoc
-	 */ constructor(editor){
-        super(editor);
-        this._initListeners();
-    }
-    /**
-	 * @inheritDoc
-	 */ refresh() {
+     * @inheritDoc
+     */ refresh() {
         this.value = this._getValue();
         this.isEnabled = this._checkEnabled();
     }
     /**
-	 * @inheritDoc
-	 */ execute() {
+     * @inheritDoc
+     */ execute() {
         this.fire('ckbox:open');
     }
     /**
-	 * Indicates if the CKBox dialog is already opened.
-	 *
-	 * @protected
-	 * @returns {Boolean}
-	 */ _getValue() {
+     * 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() {
+     * 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) {
@@ -361,17 +275,17 @@ const ASSET_INSERTION_WAIT_TIMEOUT = 1000;
         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() {
+     * 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 {
@@ -389,8 +303,8 @@ const ASSET_INSERTION_WAIT_TIMEOUT = 1000;
         };
     }
     /**
-	 * Initializes various event listeners for the `ckbox:*` events, because all functionality of the `ckbox` command is event-based.
-	 */ _initListeners() {
+     * 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');
@@ -459,13 +373,13 @@ const ASSET_INSERTION_WAIT_TIMEOUT = 1000;
         });
     }
     /**
-	 * 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) {
+     * 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;
@@ -483,10 +397,10 @@ const ASSET_INSERTION_WAIT_TIMEOUT = 1000;
         }
     }
     /**
-	 * Inserts the image by calling the `insertImage` command.
-	 *
-	 * @param asset The asset to be inserted.
-	 */ _insertImage(asset) {
+     * 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', {
@@ -503,12 +417,12 @@ const ASSET_INSERTION_WAIT_TIMEOUT = 1000;
         });
     }
     /**
-	 * 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) {
+     * 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;
@@ -536,6 +450,32 @@ const ASSET_INSERTION_WAIT_TIMEOUT = 1000;
         }
         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.
@@ -599,27 +539,22 @@ const ASSET_INSERTION_WAIT_TIMEOUT = 1000;
 }
 
 const DEFAULT_CKBOX_THEME_NAME = 'lark';
-/**
- * The CKBox utilities plugin.
- */ class CKBoxUtils extends Plugin {
+class CKBoxUtils extends Plugin {
     /**
-	 * CKEditor Cloud Services access token.
-	 */ _token;
-    /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'CKBoxUtils';
     }
     /**
-	 * @inheritDoc
-	 */ static get requires() {
+     * @inheritDoc
+     */ static get requires() {
         return [
             'CloudServices'
         ];
     }
     /**
-	 * @inheritDoc
-	 */ async init() {
+     * @inheritDoc
+     */ async init() {
         const editor = this.editor;
         const hasConfiguration = !!editor.config.get('ckbox');
         const isLibraryLoaded = !!window.CKBox;
@@ -641,22 +576,22 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         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);
+             * 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;
@@ -665,30 +600,30 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         }
     }
     /**
-	 * Returns a token used by the CKBox plugin for communication with the CKBox service.
-	 */ getToken() {
+     * 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() {
+     * 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');
+             * 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) {
+     * 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');
@@ -721,10 +656,10 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         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) {
+     * 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;
@@ -745,10 +680,10 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         } 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');
+             * 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) {
@@ -765,18 +700,10 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
     }
 }
 
-/**
- * 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 {
+class CKBoxUploadAdapter extends Plugin {
     /**
-	 * @inheritDoc
-	 */ static get requires() {
+     * @inheritDoc
+     */ static get requires() {
         return [
             'ImageUploadEditing',
             'ImageUploadProgress',
@@ -785,13 +712,13 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         ];
     }
     /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'CKBoxUploadAdapter';
     }
     /**
-	 * @inheritDoc
-	 */ async afterInit() {
+     * @inheritDoc
+     */ async afterInit() {
         const editor = this.editor;
         const hasConfiguration = !!editor.config.get('ckbox');
         const isLibraryLoaded = !!window.CKBox;
@@ -820,38 +747,10 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
  * Upload adapter for CKBox.
  */ class Adapter {
     /**
-	 * FileLoader instance to use during the upload.
-	 */ loader;
-    /**
-	 * CKEditor Cloud Services access token.
-	 */ token;
-    /**
-	 * The editor instance.
-	 */ editor;
-    /**
-	 * The abort controller for aborting asynchronous processes.
-	 */ controller;
-    /**
-	 * The base URL where all requests should be sent.
-	 */ serviceOrigin;
-    /**
-	 * The reference to CKBoxUtils plugin.
-	 */ ckboxUtils;
-    /**
-	 * 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() {
+     * 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;
@@ -889,29 +788,33 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         });
     }
     /**
-	 * Aborts the upload process.
-	 *
-	 * @see module:upload/filerepository~UploadAdapter#abort
-	 */ abort() {
+     * 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');
+    }
 }
 
-/**
- * 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 {
-    /**
-	 * CKEditor Cloud Services access token.
-	 */ _token;
+class CKBoxEditing extends Plugin {
     /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'CKBoxEditing';
     }
     /**
-	 * @inheritDoc
-	 */ static get requires() {
+     * @inheritDoc
+     */ static get requires() {
         return [
             'LinkEditing',
             'PictureEditing',
@@ -920,8 +823,8 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         ];
     }
     /**
-	 * @inheritDoc
-	 */ init() {
+     * @inheritDoc
+     */ init() {
         const editor = this.editor;
         if (!this._shouldBeInitialised()) {
             return;
@@ -933,8 +836,8 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         }
     }
     /**
-	 * @inheritDoc
-	 */ afterInit() {
+     * @inheritDoc
+     */ afterInit() {
         const editor = this.editor;
         if (!this._shouldBeInitialised()) {
             return;
@@ -948,35 +851,35 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         }
     }
     /**
-	 * 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() {
+     * 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() {
+     * 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);
+             * 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() {
+     * 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', {
@@ -1006,8 +909,8 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         });
     }
     /**
-	 * Configures the upcast and downcast conversions for the `ckboxImageId` and `ckboxLinkId` attributes.
-	 */ _initConversion() {
+     * 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)=>{
@@ -1128,8 +1031,8 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
         }
     }
     /**
-	 * Registers post-fixers that add or remove the `ckboxLinkId` and `ckboxImageId` attributes.
-	 */ _initFixers() {
+     * 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;
@@ -1242,27 +1145,15 @@ const DEFAULT_CKBOX_THEME_NAME = 'lark';
     return !!window.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 {
+class CKBox extends Plugin {
     /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'CKBox';
     }
     /**
-	 * @inheritDoc
-	 */ static get requires() {
+     * @inheritDoc
+     */ static get requires() {
         return [
             CKBoxEditing,
             CKBoxUI
@@ -1306,50 +1197,18 @@ function createUrlChecker(allowExternalImagesEditing) {
     return ()=>false;
 }
 
-/**
- * The CKBox edit image command.
- *
- * Opens the CKBox dialog for editing the image.
- */ class CKBoxImageEditCommand extends Command {
-    /**
-	 * The DOM element that acts as a mounting point for the CKBox Edit Image dialog.
-	 */ _wrapper = null;
-    /**
-	 * The states of image processing in progress.
-	 */ _processInProgress = new Set();
-    /**
-	 * Determines if the element can be edited.
-	 */ _canEdit;
-    /**
-	 * A wrapper function to prepare mount options. Ensures that at most one preparation is in-flight.
-	 */ _prepareOptions;
-    /**
-	* CKBox's onClose function runs before the final cleanup, potentially causing
-	* page layout changes after it finishes. To address this, we use a setTimeout hack
-	* to ensure that floating elements on the page maintain their correct position.
-	*
-	* See: https://github.com/ckeditor/ckeditor5/issues/16153.
-	*/ _updateUiDelayed = delay(()=>this.editor.ui.update(), 0);
-    /**
-	 * @inheritDoc
-	 */ constructor(editor){
-        super(editor);
-        this.value = false;
-        this._canEdit = createEditabilityChecker(editor.config.get('ckbox.allowExternalImagesEditing'));
-        this._prepareOptions = abortableDebounce((signal, state)=>this._prepareOptionsAbortable(signal, state));
-        this._prepareListeners();
-    }
+class CKBoxImageEditCommand extends Command {
     /**
-	 * @inheritDoc
-	 */ refresh() {
+     * @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() {
+     * Opens the CKBox Image Editor dialog for editing the image.
+     */ execute() {
         if (this._getValue()) {
             return;
         }
@@ -1376,24 +1235,23 @@ function createUrlChecker(allowExternalImagesEditing) {
         });
     }
     /**
-	 * @inheritDoc
-	 */ destroy() {
+     * @inheritDoc
+     */ destroy() {
         this._handleImageEditorClose();
         this._prepareOptions.abort();
-        this._updateUiDelayed.cancel();
         for (const state of this._processInProgress.values()){
             state.controller.abort();
         }
         super.destroy();
     }
     /**
-	 * Indicates if the CKBox Image Editor dialog is already opened.
-	 */ _getValue() {
+     * 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) {
+     * 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);
@@ -1428,8 +1286,8 @@ function createUrlChecker(allowExternalImagesEditing) {
         };
     }
     /**
-	 * Initializes event lister for an event of removing an image.
-	 */ _prepareListeners() {
+     * 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();
@@ -1439,8 +1297,8 @@ function createUrlChecker(allowExternalImagesEditing) {
         });
     }
     /**
-	 * Gets processing states of images that have been deleted in the mean time.
-	 */ _getProcessingStatesOfDeletedImages() {
+     * 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') {
@@ -1458,21 +1316,20 @@ function createUrlChecker(allowExternalImagesEditing) {
         return false;
     }
     /**
-	 * Closes the CKBox Image Editor dialog.
-	 */ _handleImageEditorClose() {
+     * Closes the CKBox Image Editor dialog.
+     */ _handleImageEditorClose() {
         if (!this._wrapper) {
             return;
         }
         this._wrapper.remove();
         this._wrapper = null;
         this.editor.editing.view.focus();
-        this._updateUiDelayed();
         this.refresh();
     }
     /**
-	 * Save edited image. In case server respond with "success" replace with edited image,
-	 * otherwise show notification error.
-	 */ _handleImageEditorSave(state, asset) {
+     * 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);
@@ -1502,9 +1359,9 @@ function createUrlChecker(allowExternalImagesEditing) {
         });
     }
     /**
-	 * 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) {
+     * 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({
@@ -1515,10 +1372,10 @@ function createUrlChecker(allowExternalImagesEditing) {
         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');
+             * Image has not been processed yet.
+             *
+             * @error ckbox-image-not-processed
+             */ throw new CKEditorError('ckbox-image-not-processed');
         }
         return {
             data: {
@@ -1527,27 +1384,27 @@ function createUrlChecker(allowExternalImagesEditing) {
         };
     }
     /**
-	 * Waits for an asset to be processed.
-	 * It retries retrieving asset status from the server in case of failure.
-	 */ async _waitForAssetProcessed(id, signal) {
+     * 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');
+             * 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) {
+     * 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);
@@ -1562,8 +1419,8 @@ function createUrlChecker(allowExternalImagesEditing) {
         });
     }
     /**
-	 * Replace the edited image with the new one.
-	 */ _replaceImage(element, asset) {
+     * 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());
@@ -1592,19 +1449,32 @@ function createUrlChecker(allowExternalImagesEditing) {
             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();
+    }
 }
 
-/**
- * The CKBox image edit editing plugin.
- */ class CKBoxImageEditEditing extends Plugin {
+class CKBoxImageEditEditing extends Plugin {
     /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'CKBoxImageEditEditing';
     }
     /**
-	 * @inheritDoc
-	 */ static get requires() {
+     * @inheritDoc
+     */ static get requires() {
         return [
             CKBoxEditing,
             CKBoxUtils,
@@ -1615,8 +1485,8 @@ function createUrlChecker(allowExternalImagesEditing) {
         ];
     }
     /**
-	 * @inheritDoc
-	 */ init() {
+     * @inheritDoc
+     */ init() {
         const { editor } = this;
         editor.commands.add('ckboxImageEdit', new CKBoxImageEditCommand(editor));
     }
@@ -1624,20 +1494,15 @@ function createUrlChecker(allowExternalImagesEditing) {
 
 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>";
 
-/**
- * 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 {
+class CKBoxImageEditUI extends Plugin {
     /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'CKBoxImageEditUI';
     }
     /**
-	 * @inheritDoc
-	 */ init() {
+     * @inheritDoc
+     */ init() {
         const editor = this.editor;
         editor.ui.componentFactory.add('ckboxImageEdit', (locale)=>{
             const command = editor.commands.get('ckboxImageEdit');
@@ -1660,17 +1525,15 @@ var ckboxImageEditIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2
     }
 }
 
-/**
- * The CKBox image edit feature.
- */ class CKBoxImageEdit extends Plugin {
+class CKBoxImageEdit extends Plugin {
     /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'CKBoxImageEdit';
     }
     /**
-	 * @inheritDoc
-	 */ static get requires() {
+     * @inheritDoc
+     */ static get requires() {
         return [
             CKBoxImageEditEditing,
             CKBoxImageEditUI