@ckeditor/ckeditor5-ckbox 41.4.2 → 42.0.0-alpha.1

package/dist/index.js

@@ -5,76 +5,123 @@
 import { Plugin, icons, Command, PendingActions } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { ButtonView, MenuBarMenuListItemButtonView, Notification } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { Range } from '@ckeditor/ckeditor5-engine/dist/index.js';
-import { createElement, toMap, CKEditorError, logError, global, retry, abortableDebounce } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { createElement, toMap, CKEditorError, logError, global, delay, 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';
 
-class CKBoxUI extends Plugin {
+/**
+ * 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 {
     /**
-     * @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;
         }
-        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));
+        editor.ui.componentFactory.add('ckbox', ()=>this._createFileToolbarButton());
+        editor.ui.componentFactory.add('menuBar:ckbox', ()=>this._createFileMenuBarButton());
         if (editor.plugins.has('ImageInsertUI')) {
-            const imageInsertUI = editor.plugins.get('ImageInsertUI');
-            imageInsertUI.registerIntegration({
+            editor.plugins.get('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;
-                }
+                buttonViewCreator: ()=>this._createImageToolbarButton(),
+                formViewCreator: ()=>this._createImageDropdownButton(),
+                menuBarButtonViewCreator: (isOnly)=>this._createImageMenuBarButton(isOnly ? 'insertOnly' : 'insertNested')
             });
         }
     }
     /**
-     * Creates a button for CKBox command to use either in toolbar or in menu bar.
-     */ _createButton(ButtonClass) {
+	 * Creates the base for various kinds of the button component provided by this feature.
+	 */ _createButton(ButtonClass) {
         const editor = this.editor;
         const locale = editor.locale;
         const view = new ButtonClass(locale);
         const command = editor.commands.get('ckbox');
-        const t = locale.t;
-        view.set({
-            label: t('Open file manager'),
-            icon: icons.browseFiles
-        });
+        locale.t;
         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;
+    }
 }
 
 /**
@@ -235,7 +282,7 @@ const MIME_TO_EXTENSION = {
  * Returns an extension from the given value.
  */ function getFileExtension(file) {
     const fileName = file.name;
-    const extensionRegExp = RegExp("\\.(?<ext>[^.]+)$");
+    const extensionRegExp = /\.(?<ext>[^.]+)$/;
     const match = fileName.match(extensionRegExp);
     return match.groups.ext.toLowerCase();
 }
@@ -244,29 +291,68 @@ 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;
-class CKBoxCommand extends Command {
+/**
+ * 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;
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this._initListeners();
+    }
+    /**
+	 * @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) {
@@ -275,17 +361,17 @@ class CKBoxCommand extends Command {
         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 {
@@ -303,8 +389,8 @@ class CKBoxCommand extends Command {
         };
     }
     /**
-     * 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');
@@ -373,13 +459,13 @@ class CKBoxCommand extends Command {
         });
     }
     /**
-     * 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;
@@ -397,10 +483,10 @@ class CKBoxCommand extends Command {
         }
     }
     /**
-     * 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', {
@@ -417,12 +503,12 @@ class CKBoxCommand extends Command {
         });
     }
     /**
-     * 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;
@@ -450,32 +536,6 @@ class CKBoxCommand extends Command {
         }
         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.
@@ -539,22 +599,27 @@ class CKBoxCommand extends Command {
 }
 
 const DEFAULT_CKBOX_THEME_NAME = 'lark';
-class CKBoxUtils extends Plugin {
+/**
+ * The CKBox utilities plugin.
+ */ class CKBoxUtils extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * CKEditor Cloud Services access token.
+	 */ _token;
+    /**
+	 * @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;
@@ -576,22 +641,22 @@ class CKBoxUtils extends Plugin {
         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;
@@ -600,30 +665,30 @@ class CKBoxUtils extends Plugin {
         }
     }
     /**
-     * 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');
@@ -656,10 +721,10 @@ class CKBoxUtils extends Plugin {
         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;
@@ -680,10 +745,10 @@ class CKBoxUtils extends Plugin {
         } 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) {
@@ -700,10 +765,18 @@ class CKBoxUtils extends Plugin {
     }
 }
 
-class CKBoxUploadAdapter extends Plugin {
+/**
+ * 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() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             'ImageUploadEditing',
             'ImageUploadProgress',
@@ -712,13 +785,13 @@ class CKBoxUploadAdapter extends Plugin {
         ];
     }
     /**
-     * @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;
@@ -747,10 +820,38 @@ class CKBoxUploadAdapter extends Plugin {
  * Upload adapter for CKBox.
  */ class Adapter {
     /**
-     * Starts the upload process.
-     *
-     * @see module:upload/filerepository~UploadAdapter#upload
-     */ async upload() {
+	 * 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() {
         const ckboxUtils = this.ckboxUtils;
         const t = this.editor.t;
         const file = await this.loader.file;
@@ -788,33 +889,29 @@ class CKBoxUploadAdapter extends Plugin {
         });
     }
     /**
-     * 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');
-    }
 }
 
-class CKBoxEditing extends Plugin {
+/**
+ * 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;
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'CKBoxEditing';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             'LinkEditing',
             'PictureEditing',
@@ -823,8 +920,8 @@ class CKBoxEditing extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         if (!this._shouldBeInitialised()) {
             return;
@@ -836,8 +933,8 @@ class CKBoxEditing extends Plugin {
         }
     }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         const editor = this.editor;
         if (!this._shouldBeInitialised()) {
             return;
@@ -851,35 +948,35 @@ class CKBoxEditing extends Plugin {
         }
     }
     /**
-     * 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', {
@@ -909,8 +1006,8 @@ class CKBoxEditing extends Plugin {
         });
     }
     /**
-     * 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)=>{
@@ -1031,8 +1128,8 @@ class CKBoxEditing extends Plugin {
         }
     }
     /**
-     * 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;
@@ -1145,15 +1242,27 @@ class CKBoxEditing extends Plugin {
     return !!window.CKBox;
 }
 
-class CKBox extends Plugin {
+/**
+ * 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() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'CKBox';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             CKBoxEditing,
             CKBoxUI
@@ -1197,18 +1306,50 @@ function createUrlChecker(allowExternalImagesEditing) {
     return ()=>false;
 }
 
-class CKBoxImageEditCommand extends Command {
+/**
+ * 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();
+    }
     /**
-     * @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;
         }
@@ -1235,23 +1376,24 @@ class CKBoxImageEditCommand extends Command {
         });
     }
     /**
-     * @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);
@@ -1286,8 +1428,8 @@ class CKBoxImageEditCommand extends Command {
         };
     }
     /**
-     * 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();
@@ -1297,8 +1439,8 @@ class CKBoxImageEditCommand extends Command {
         });
     }
     /**
-     * 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') {
@@ -1316,20 +1458,21 @@ class CKBoxImageEditCommand extends Command {
         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);
@@ -1359,9 +1502,9 @@ class CKBoxImageEditCommand extends Command {
         });
     }
     /**
-     * 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({
@@ -1372,10 +1515,10 @@ class CKBoxImageEditCommand extends Command {
         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: {
@@ -1384,27 +1527,27 @@ class CKBoxImageEditCommand extends Command {
         };
     }
     /**
-     * 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);
@@ -1419,8 +1562,8 @@ class CKBoxImageEditCommand extends Command {
         });
     }
     /**
-     * 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());
@@ -1449,32 +1592,19 @@ class CKBoxImageEditCommand extends Command {
             writer.setSelection(previousSelectionRanges);
         });
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        /**
-         * The DOM element that acts as a mounting point for the CKBox Edit Image dialog.
-         */ this._wrapper = null;
-        /**
-         * The states of image processing in progress.
-         */ this._processInProgress = new Set();
-        this.value = false;
-        this._canEdit = createEditabilityChecker(editor.config.get('ckbox.allowExternalImagesEditing'));
-        this._prepareOptions = abortableDebounce((signal, state)=>this._prepareOptionsAbortable(signal, state));
-        this._prepareListeners();
-    }
 }
 
-class CKBoxImageEditEditing extends Plugin {
+/**
+ * The CKBox image edit editing 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,
@@ -1485,8 +1615,8 @@ class CKBoxImageEditEditing extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const { editor } = this;
         editor.commands.add('ckboxImageEdit', new CKBoxImageEditCommand(editor));
     }
@@ -1494,15 +1624,20 @@ class CKBoxImageEditEditing extends Plugin {
 
 var ckboxImageEditIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.201 1C.538 1 0 1.47 0 2.1v14.363c0 .64.534 1.037 1.186 1.037H5.06l5.058-5.078L6.617 9.15a.696.696 0 0 0-.957-.033L1.5 13.6V2.5h15v4.354a3.478 3.478 0 0 1 1.5.049V2.1c0-.63-.547-1.1-1.2-1.1H1.202Zm11.713 2.803a2.147 2.147 0 0 0-2.049 1.992 2.14 2.14 0 0 0 1.28 2.096 2.13 2.13 0 0 0 2.642-3.11 2.129 2.129 0 0 0-1.873-.978ZM8.089 17.635v2.388h2.389l7.046-7.046-2.39-2.39-7.045 7.048Zm11.282-6.507a.637.637 0 0 0 .139-.692.603.603 0 0 0-.139-.205l-1.49-1.488a.63.63 0 0 0-.899 0l-1.166 1.163 2.39 2.39 1.165-1.168Z\"/></svg>";
 
-class CKBoxImageEditUI extends Plugin {
+/**
+ * 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() {
+	 * @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');
@@ -1525,15 +1660,17 @@ class CKBoxImageEditUI extends Plugin {
     }
 }
 
-class CKBoxImageEdit extends Plugin {
+/**
+ * The CKBox image edit feature.
+ */ 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