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

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

@@ -36,14 +36,6 @@ 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,14 +11,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 /**
- * 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.
+ * The CKBoxUI plugin. It introduces the `'ckbox'` toolbar button.
  */
 export default class CKBoxUI extends Plugin {
     /**
@@ -30,27 +23,7 @@ export default class CKBoxUI extends Plugin {
      */
     afterInit(): void;
     /**
-     * Creates the base for various kinds of the button component provided by this feature.
+     * Creates a button for CKBox command to use either in toolbar or in menu bar.
      */
     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": "0.0.0-nightly-20240602.0",
+  "version": "0.0.0-nightly-20240604.0",
   "description": "CKBox integration for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,7 +13,7 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "0.0.0-nightly-20240602.0",
+    "ckeditor5": "0.0.0-nightly-20240604.0",
     "blurhash": "2.0.5",
     "lodash-es": "4.17.21"
   },

package/src/ckboximageedit/ckboximageeditcommand.d.ts

@@ -32,14 +32,6 @@ 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, delay } from 'ckeditor5/src/utils.js';
+import { CKEditorError, abortableDebounce, createElement, retry } from 'ckeditor5/src/utils.js';
 import { Notification } from 'ckeditor5/src/ui.js';
 import { isEqual } from 'lodash-es';
 import { sendHttpRequest } from '../utils.js';
@@ -33,14 +33,6 @@ 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));
@@ -91,7 +83,6 @@ 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();
         }
@@ -179,7 +170,6 @@ 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,14 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 /**
- * 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.
+ * The CKBoxUI plugin. It introduces the `'ckbox'` toolbar button.
  */
 export default class CKBoxUI extends Plugin {
     /**
@@ -26,27 +19,7 @@ export default class CKBoxUI extends Plugin {
      */
     afterInit(): void;
     /**
-     * Creates the base for various kinds of the button component provided by this feature.
+     * Creates a button for CKBox command to use either in toolbar or in menu bar.
      */
     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,14 +8,7 @@
 import { icons, Plugin } from 'ckeditor5/src/core.js';
 import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 /**
- * 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.
+ * The CKBoxUI plugin. It introduces the `'ckbox'` toolbar button.
  */
 export default class CKBoxUI extends Plugin {
     /**
@@ -34,20 +27,44 @@ export default class CKBoxUI extends Plugin {
         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.
+     * Creates a button for CKBox command to use either in toolbar or in menu bar.
      */
     _createButton(ButtonClass) {
         const editor = this.editor;
@@ -55,77 +72,14 @@ 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;
-    }
 }