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

package/dist/types/ckboximageedit/ckboximageeditcommand.d.ts

@@ -36,6 +36,14 @@ export default class CKBoxImageEditCommand extends Command {
      * A wrapper function to prepare mount options. Ensures that at most one preparation is in-flight.
      */
     private _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.
+    */
+    private _updateUiDelayed;
     /**
      * @inheritDoc
      */

package/dist/types/ckboxui.d.ts

@@ -11,7 +11,14 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 /**
- * The CKBoxUI plugin. It introduces the `'ckbox'` toolbar button.
+ * 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.
  */
 export default class CKBoxUI extends Plugin {
     /**
@@ -23,7 +30,27 @@ export default class CKBoxUI extends Plugin {
      */
     afterInit(): void;
     /**
-     * Creates a button for CKBox command to use either in toolbar or in menu bar.
+     * Creates the base for various kinds of the button component provided by this feature.
      */
     private _createButton;
+    /**
+     * Creates a simple toolbar button for files management, with an icon and a tooltip.
+     */
+    private _createFileToolbarButton;
+    /**
+     * Creates a simple toolbar button for images management, with an icon and a tooltip.
+     */
+    private _createImageToolbarButton;
+    /**
+     * Creates a button for images management for the dropdown view, with an icon, text and no tooltip.
+     */
+    private _createImageDropdownButton;
+    /**
+     * Creates a button for files management for the menu bar.
+     */
+    private _createFileMenuBarButton;
+    /**
+     * Creates a button for images management for the menu bar.
+     */
+    private _createImageMenuBarButton;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ckbox",
-  "version": "41.4.2",
+  "version": "42.0.0-alpha.1",
   "description": "CKBox integration for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,7 +13,7 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "41.4.2",
+    "ckeditor5": "42.0.0-alpha.1",
     "blurhash": "2.0.5",
     "lodash-es": "4.17.21"
   },

package/src/ckboximageedit/ckboximageeditcommand.d.ts

@@ -32,6 +32,14 @@ export default class CKBoxImageEditCommand extends Command {
      * A wrapper function to prepare mount options. Ensures that at most one preparation is in-flight.
      */
     private _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.
+    */
+    private _updateUiDelayed;
     /**
      * @inheritDoc
      */

package/src/ckboximageedit/ckboximageeditcommand.js

@@ -7,7 +7,7 @@
  * @module ckbox/ckboximageedit/ckboximageeditcommand
  */
 import { Command, PendingActions } from 'ckeditor5/src/core.js';
-import { CKEditorError, abortableDebounce, createElement, retry } from 'ckeditor5/src/utils.js';
+import { CKEditorError, abortableDebounce, createElement, retry, delay } from 'ckeditor5/src/utils.js';
 import { Notification } from 'ckeditor5/src/ui.js';
 import { isEqual } from 'lodash-es';
 import { sendHttpRequest } from '../utils.js';
@@ -33,6 +33,14 @@ export default class CKBoxImageEditCommand extends Command {
          * The states of image processing in progress.
          */
         this._processInProgress = new Set();
+        /**
+        * 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.
+        */
+        this._updateUiDelayed = delay(() => this.editor.ui.update(), 0);
         this.value = false;
         this._canEdit = createEditabilityChecker(editor.config.get('ckbox.allowExternalImagesEditing'));
         this._prepareOptions = abortableDebounce((signal, state) => this._prepareOptionsAbortable(signal, state));
@@ -83,6 +91,7 @@ export default class CKBoxImageEditCommand extends Command {
     destroy() {
         this._handleImageEditorClose();
         this._prepareOptions.abort();
+        this._updateUiDelayed.cancel();
         for (const state of this._processInProgress.values()) {
             state.controller.abort();
         }
@@ -170,6 +179,7 @@ export default class CKBoxImageEditCommand extends Command {
         this._wrapper.remove();
         this._wrapper = null;
         this.editor.editing.view.focus();
+        this._updateUiDelayed();
         this.refresh();
     }
     /**

package/src/ckboxui.d.ts

@@ -7,7 +7,14 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 /**
- * The CKBoxUI plugin. It introduces the `'ckbox'` toolbar button.
+ * 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.
  */
 export default class CKBoxUI extends Plugin {
     /**
@@ -19,7 +26,27 @@ export default class CKBoxUI extends Plugin {
      */
     afterInit(): void;
     /**
-     * Creates a button for CKBox command to use either in toolbar or in menu bar.
+     * Creates the base for various kinds of the button component provided by this feature.
      */
     private _createButton;
+    /**
+     * Creates a simple toolbar button for files management, with an icon and a tooltip.
+     */
+    private _createFileToolbarButton;
+    /**
+     * Creates a simple toolbar button for images management, with an icon and a tooltip.
+     */
+    private _createImageToolbarButton;
+    /**
+     * Creates a button for images management for the dropdown view, with an icon, text and no tooltip.
+     */
+    private _createImageDropdownButton;
+    /**
+     * Creates a button for files management for the menu bar.
+     */
+    private _createFileMenuBarButton;
+    /**
+     * Creates a button for images management for the menu bar.
+     */
+    private _createImageMenuBarButton;
 }

package/src/ckboxui.js

@@ -8,7 +8,14 @@
 import { icons, Plugin } from 'ckeditor5/src/core.js';
 import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 /**
- * The CKBoxUI plugin. It introduces the `'ckbox'` toolbar button.
+ * 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.
  */
 export default class CKBoxUI extends Plugin {
     /**
@@ -27,44 +34,20 @@ export default class CKBoxUI extends Plugin {
         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.
+     * Creates the base for various kinds of the button component provided by this feature.
      */
     _createButton(ButtonClass) {
         const editor = this.editor;
@@ -72,14 +55,77 @@ export default class CKBoxUI extends Plugin {
         const view = new ButtonClass(locale);
         const command = editor.commands.get('ckbox');
         const t = locale.t;
-        view.set({
-            label: t('Open file manager'),
-            icon: icons.browseFiles
-        });
         view.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
         view.on('execute', () => {
             editor.execute('ckbox');
         });
         return view;
     }
+    /**
+     * 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;
+    }
 }