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

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": "0.0.0-nightly-20240531.0",
+  "version": "0.0.0-nightly-20240602.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-20240531.0",
+    "ckeditor5": "0.0.0-nightly-20240602.0",
     "blurhash": "2.0.5",
     "lodash-es": "4.17.21"
   },

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;
+    }
 }