@ckeditor/ckeditor5-ckbox 42.0.2 → 43.0.0-alpha.1

package/lang/translations/ur.po

@@ -29,6 +29,10 @@ msgctxt "A message is displayed when the user is not authorised to access the CK
 msgid "Cannot access default workspace."
 msgstr ""
 
+msgctxt "The title of the notification displayed when there is no permission to edit assets."
+msgid "No permission for image editing. Try using the file manager or contact your administrator."
+msgstr ""
+
 msgctxt "Image toolbar button tooltip for opening a dialog to manipulate the image."
 msgid "Edit image"
 msgstr ""

package/lang/translations/uz.po

@@ -29,6 +29,10 @@ msgctxt "A message is displayed when the user is not authorised to access the CK
 msgid "Cannot access default workspace."
 msgstr ""
 
+msgctxt "The title of the notification displayed when there is no permission to edit assets."
+msgid "No permission for image editing. Try using the file manager or contact your administrator."
+msgstr ""
+
 msgctxt "Image toolbar button tooltip for opening a dialog to manipulate the image."
 msgid "Edit image"
 msgstr ""

package/lang/translations/vi.po

@@ -29,6 +29,10 @@ msgctxt "A message is displayed when the user is not authorised to access the CK
 msgid "Cannot access default workspace."
 msgstr "Không thể truy cập vào không gian làm việc mặc định."
 
+msgctxt "The title of the notification displayed when there is no permission to edit assets."
+msgid "No permission for image editing. Try using the file manager or contact your administrator."
+msgstr ""
+
 msgctxt "Image toolbar button tooltip for opening a dialog to manipulate the image."
 msgid "Edit image"
 msgstr "Chỉnh sửa hình ảnh"

package/lang/translations/zh-cn.po

@@ -29,6 +29,10 @@ msgctxt "A message is displayed when the user is not authorised to access the CK
 msgid "Cannot access default workspace."
 msgstr "无法访问默认工作区"
 
+msgctxt "The title of the notification displayed when there is no permission to edit assets."
+msgid "No permission for image editing. Try using the file manager or contact your administrator."
+msgstr ""
+
 msgctxt "Image toolbar button tooltip for opening a dialog to manipulate the image."
 msgid "Edit image"
 msgstr "编辑图片"

package/lang/translations/zh.po

@@ -29,6 +29,10 @@ msgctxt "A message is displayed when the user is not authorised to access the CK
 msgid "Cannot access default workspace."
 msgstr "無法存取預設工作區。"
 
+msgctxt "The title of the notification displayed when there is no permission to edit assets."
+msgid "No permission for image editing. Try using the file manager or contact your administrator."
+msgstr ""
+
 msgctxt "Image toolbar button tooltip for opening a dialog to manipulate the image."
 msgid "Edit image"
 msgstr "編輯圖片"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ckbox",
-  "version": "42.0.2",
+  "version": "43.0.0-alpha.1",
   "description": "CKBox integration for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,12 +13,12 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "42.0.2",
-    "@ckeditor/ckeditor5-engine": "42.0.2",
-    "@ckeditor/ckeditor5-ui": "42.0.2",
-    "@ckeditor/ckeditor5-upload": "42.0.2",
-    "@ckeditor/ckeditor5-utils": "42.0.2",
-    "ckeditor5": "42.0.2",
+    "@ckeditor/ckeditor5-core": "43.0.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "43.0.0-alpha.1",
+    "@ckeditor/ckeditor5-ui": "43.0.0-alpha.1",
+    "@ckeditor/ckeditor5-upload": "43.0.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "43.0.0-alpha.1",
+    "ckeditor5": "43.0.0-alpha.1",
     "blurhash": "2.0.5",
     "lodash-es": "4.17.21"
   },

package/src/ckboxcommand.d.ts

@@ -74,8 +74,20 @@ export default class CKBoxCommand extends Command {
      * - 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.
+     * - dialog.onClose The callback function invoked after closing the CKBox dialog.
+     * - dialog.width The dialog width in pixels.
+     * - dialog.height The dialog height in pixels.
+     * - categories.icons Allows setting custom icons for categories.
+     * - view.openLastView Sets if the last view visited by the user will be reopened
+     * on the next startup.
+     * - view.startupFolderId Sets the ID of the folder that will be opened on startup.
+     * - view.startupCategoryId Sets the ID of the category that will be opened on startup.
+     * - view.hideMaximizeButton Sets whether to hide the ‘Maximize’ button.
+     * - view.componentsHideTimeout Sets timeout after which upload components are hidden
+     * after completed upload.
+     * - view.dialogMinimizeTimeout Sets timeout after which upload dialog is minimized
+     * after completed upload.
      */
     private _prepareOptions;
     /**

package/src/ckboxcommand.js

@@ -95,23 +95,55 @@ export default class CKBoxCommand extends Command {
      * - 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.
+     * - dialog.onClose The callback function invoked after closing the CKBox dialog.
+     * - dialog.width The dialog width in pixels.
+     * - dialog.height The dialog height in pixels.
+     * - categories.icons Allows setting custom icons for categories.
+     * - view.openLastView Sets if the last view visited by the user will be reopened
+     * on the next startup.
+     * - view.startupFolderId Sets the ID of the folder that will be opened on startup.
+     * - view.startupCategoryId Sets the ID of the category that will be opened on startup.
+     * - view.hideMaximizeButton Sets whether to hide the ‘Maximize’ button.
+     * - view.componentsHideTimeout Sets timeout after which upload components are hidden
+     * after completed upload.
+     * - view.dialogMinimizeTimeout Sets timeout after which upload dialog is minimized
+     * after completed upload.
      */
     _prepareOptions() {
         const editor = this.editor;
         const ckboxConfig = editor.config.get('ckbox');
+        const dialog = ckboxConfig.dialog;
+        const categories = ckboxConfig.categories;
+        const view = ckboxConfig.view;
+        const upload = ckboxConfig.upload;
         return {
             theme: ckboxConfig.theme,
             language: ckboxConfig.language,
             tokenUrl: ckboxConfig.tokenUrl,
             serviceOrigin: ckboxConfig.serviceOrigin,
             forceDemoLabel: ckboxConfig.forceDemoLabel,
-            dialog: {
-                onClose: () => this.fire('ckbox:close')
-            },
+            choosableFileExtensions: ckboxConfig.choosableFileExtensions,
             assets: {
                 onChoose: (assets) => this.fire('ckbox:choose', assets)
+            },
+            dialog: {
+                onClose: () => this.fire('ckbox:close'),
+                width: dialog && dialog.width,
+                height: dialog && dialog.height
+            },
+            categories: categories && {
+                icons: categories.icons
+            },
+            view: view && {
+                openLastView: view.openLastView,
+                startupFolderId: view.startupFolderId,
+                startupCategoryId: view.startupCategoryId,
+                hideMaximizeButton: view.hideMaximizeButton
+            },
+            upload: upload && {
+                componentsHideTimeout: upload.componentsHideTimeout,
+                dialogMinimizeTimeout: upload.dialogMinimizeTimeout
             }
         };
     }

package/src/ckboxconfig.d.ts

@@ -125,6 +125,111 @@ export interface CKBoxConfig {
      * Defaults to {@link module:utils/locale~Locale#uiLanguage `Locale#uiLanguage`}
      */
     language?: string;
+    /**
+     * This option allows opening CKBox in dialog mode. It takes a configuration object with
+     * the width and height attributes.
+     */
+    dialog?: CKBoxDialogConfig;
+    /**
+     * Allows setting custom icons for categories.
+     */
+    categories?: CKBoxCategoriesConfig;
+    /**
+     * Configures the view of CKBox.
+     */
+    view?: CKBoxViewConfig;
+    /**
+     * Configures when dialog should be minimized and hidden.
+     */
+    upload?: CKBoxUploadConfig;
+    /**
+     * Specifies the file extensions considered valid for user interaction. Whith this
+     * option developers can restrict user interaction to only those assets whose file
+     * extensions match those listed in the array. Assets whose file
+     * extensions are not listed in the `choosableFileExtensions` array are
+     * automatically disabled within the CKBox interface.
+     *
+     * ```ts
+     * const ckboxConfig = {
+     *		choosableFileExtensions: ['jpg', 'png']
+     * };
+     * ```
+     */
+    choosableFileExtensions?: Array<string>;
+}
+export interface CKBoxDialogConfig {
+    /**
+     * The dialog width in pixels.
+     */
+    width: number;
+    /**
+     * The dialog height in pixels.
+     */
+    height: number;
+}
+export interface CKBoxCategoriesConfig {
+    /**
+     * This option takes an object with categories and icons that should be used instead
+     * of the default ones. Categories can be defined using either their name or id.
+     * Icons should be defined as strings containing the SVG images, or as React components.
+     *
+     * ```ts
+     * const ckboxConfig = {
+     * 		categories: {
+     * 				icons: {
+     * 					Images: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path ... /></svg>',
+     * 					// Category can be referenced by ID
+     * 					// 'fdf2a647-b67f-4a6c-b692-5ba1dc1ed87b': '<svg...'
+     * 				}
+     * 		}
+     * }
+     * ```
+     */
+    icons?: {
+        [key: string]: string;
+    };
+}
+export interface CKBoxViewConfig {
+    /**
+     * If it is set to `false` the last view visited by the user will not be reopened on
+     * the next startup.
+     */
+    openLastView?: boolean;
+    /**
+     * Sets the ID of the folder that will be opened on startup. This option can be paired
+     * with setting `view.openLastView` to `false` to enforce CKBox to always open in a given
+     * folder at startup.
+     */
+    startupFolderId?: string;
+    /**
+     * Sets the ID of the category that will be opened on startup. This option can be paired
+     * with setting `view.openLastView` to `false` to enforce CKBox to always open in a given
+     * category at startup. If `view.startupCategoryId` is passed along with the
+     * `view.startupFolderId` option, CKBox will prioritize opening category view on the startup.
+     */
+    startupCategoryId?: string;
+    /**
+     * Sets whether to hide the ‘Maximize’ button. By default, the button is shown and enabling
+     * this option will hide it.
+     */
+    hideMaximizeButton?: boolean;
+}
+export interface CKBoxUploadConfig {
+    /**
+     * Sets timeout (in milliseconds) after which upload components (dialog and indicator) are
+     * hidden. By default, these components hide automatically after 10 seconds.
+     *
+     * Read more: https://ckeditor.com/docs/ckbox/latest/guides/configuration/configuration-options.html#uploadcomponentshidetimeout
+     */
+    componentsHideTimeout?: number;
+    /**
+     * Sets timeout (in milliseconds) after which upload dialog is minimized once upload is
+     * finished and all uploads were successful. By default, upload dialog is never minimized
+     * automatically.
+     *
+     * Read more: https://ckeditor.com/docs/ckbox/latest/guides/configuration/configuration-options.html#uploaddialogminimizetimeout
+     */
+    dialogMinimizeTimeout?: number;
 }
 /**
  * Asset definition.

package/src/ckboxediting.d.ts

@@ -2,6 +2,9 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
+/**
+ * @module ckbox/ckboxediting
+ */
 import { Plugin } from 'ckeditor5/src/core.js';
 import CKBoxUploadAdapter from './ckboxuploadadapter.js';
 import CKBoxUtils from './ckboxutils.js';
@@ -10,10 +13,6 @@ import CKBoxUtils from './ckboxutils.js';
  * {@link module:ckbox/ckboxuploadadapter~CKBoxUploadAdapter CKBox upload adapter}.
  */
 export default class CKBoxEditing extends Plugin {
-    /**
-     * CKEditor Cloud Services access token.
-     */
-    private _token;
     /**
      * @inheritDoc
      */
@@ -35,6 +34,10 @@ export default class CKBoxEditing extends Plugin {
      * the CKBox JavaScript library is loaded.
      */
     private _shouldBeInitialised;
+    /**
+     * Blocks `uploadImage` and `ckboxImageEdit` commands.
+     */
+    private _blockImageCommands;
     /**
      * Checks if at least one image plugin is loaded.
      */

package/src/ckboxediting.js

@@ -2,12 +2,18 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
+/* globals window */
+/**
+ * @module ckbox/ckboxediting
+ */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { Range } from 'ckeditor5/src/engine.js';
 import { logError } from 'ckeditor5/src/utils.js';
 import CKBoxCommand from './ckboxcommand.js';
 import CKBoxUploadAdapter from './ckboxuploadadapter.js';
 import CKBoxUtils from './ckboxutils.js';
+import { sendHttpRequest } from './utils.js';
+const COMMAND_FORCE_DISABLE_ID = 'NoPermission';
 /**
  * The CKBox editing feature. It introduces the {@link module:ckbox/ckboxcommand~CKBoxCommand CKBox command} and
  * {@link module:ckbox/ckboxuploadadapter~CKBoxUploadAdapter CKBox upload adapter}.
@@ -38,6 +44,12 @@ export default class CKBoxEditing extends Plugin {
         if (isLibraryLoaded()) {
             editor.commands.add('ckbox', new CKBoxCommand(editor));
         }
+        // Promise is not handled intentionally. Errors should be displayed in console if there are so.
+        isUploadPermissionGranted(editor).then(isCreateAssetAllowed => {
+            if (!isCreateAssetAllowed) {
+                this._blockImageCommands();
+            }
+        });
     }
     /**
      * @inheritDoc
@@ -64,6 +76,21 @@ export default class CKBoxEditing extends Plugin {
         const hasConfiguration = !!editor.config.get('ckbox');
         return hasConfiguration || isLibraryLoaded();
     }
+    /**
+     * Blocks `uploadImage` and `ckboxImageEdit` commands.
+     */
+    _blockImageCommands() {
+        const editor = this.editor;
+        const uploadImageCommand = editor.commands.get('uploadImage');
+        const imageEditingCommand = editor.commands.get('ckboxImageEdit');
+        if (uploadImageCommand) {
+            uploadImageCommand.isAccessAllowed = false;
+            uploadImageCommand.forceDisabled(COMMAND_FORCE_DISABLE_ID);
+        }
+        if (imageEditingCommand) {
+            imageEditingCommand.forceDisabled(COMMAND_FORCE_DISABLE_ID);
+        }
+    }
     /**
      * Checks if at least one image plugin is loaded.
      */
@@ -98,12 +125,12 @@ export default class CKBoxEditing extends Plugin {
         if (schema.isRegistered('imageInline')) {
             schema.extend('imageInline', { allowAttributes: ['ckboxImageId', 'ckboxLinkId'] });
         }
-        schema.addAttributeCheck((context, attributeName) => {
-            const isLink = !!context.last.getAttribute('linkHref');
-            if (!isLink && attributeName === 'ckboxLinkId') {
+        schema.addAttributeCheck(context => {
+            // Don't allow `ckboxLinkId` on elements which do not have `linkHref` attribute.
+            if (!context.last.getAttribute('linkHref')) {
                 return false;
             }
-        });
+        }, 'ckboxLinkId');
     }
     /**
      * Configures the upcast and downcast conversions for the `ckboxImageId` and `ckboxLinkId` attributes.
@@ -339,3 +366,18 @@ function shouldUpcastAttributeForNode(node) {
 function isLibraryLoaded() {
     return !!window.CKBox;
 }
+/**
+ * Checks is access allowed to upload assets.
+ */
+async function isUploadPermissionGranted(editor) {
+    const ckboxUtils = editor.plugins.get(CKBoxUtils);
+    const origin = editor.config.get('ckbox.serviceOrigin');
+    const url = new URL('permissions', origin);
+    const { value } = await ckboxUtils.getToken();
+    const response = (await sendHttpRequest({
+        url,
+        authorization: value,
+        signal: (new AbortController()).signal // Aborting is unnecessary.
+    }));
+    return Object.values(response).some(category => category['asset:create']);
+}

package/src/ckboximageedit/ckboximageeditcommand.js

@@ -227,7 +227,7 @@ export default class CKBoxImageEditCommand extends Command {
         const response = await sendHttpRequest({
             url,
             signal,
-            authorization: ckboxUtils.getToken().value
+            authorization: (await ckboxUtils.getToken()).value
         });
         const status = response.metadata.metadataProcessingStatus;
         if (!status || status == 'queued') {

package/src/ckboximageedit/ckboximageeditui.js

@@ -28,13 +28,16 @@ export default class CKBoxImageEditUI extends Plugin {
         const editor = this.editor;
         editor.ui.componentFactory.add('ckboxImageEdit', locale => {
             const command = editor.commands.get('ckboxImageEdit');
+            const uploadImageCommand = editor.commands.get('uploadImage');
             const view = new ButtonView(locale);
             const t = locale.t;
             view.set({
-                label: t('Edit image'),
                 icon: ckboxImageEditIcon,
                 tooltip: true
             });
+            view.bind('label').to(uploadImageCommand, 'isAccessAllowed', isAccessAllowed => isAccessAllowed ?
+                t('Edit image') :
+                t('No permission for image editing. Try using the file manager or contact your administrator.'));
             view.bind('isOn').to(command, 'value', command, 'isEnabled', (value, isEnabled) => value && isEnabled);
             view.bind('isEnabled').to(command);
             // Execute the command.

package/src/ckboxuploadadapter.js

@@ -88,7 +88,7 @@ class Adapter {
         const category = await ckboxUtils.getCategoryIdForFile(file, { signal: this.controller.signal });
         const uploadUrl = new URL('assets', this.serviceOrigin);
         const formData = new FormData();
-        uploadUrl.searchParams.set('workspaceId', ckboxUtils.getWorkspaceId());
+        uploadUrl.searchParams.set('workspaceId', await ckboxUtils.getWorkspaceId());
         formData.append('categoryId', category);
         formData.append('file', file);
         const requestConfig = {
@@ -103,7 +103,7 @@ class Adapter {
                 }
             },
             signal: this.controller.signal,
-            authorization: this.token.value
+            authorization: (await this.token).value
         };
         return sendHttpRequest(requestConfig)
             .then(async (data) => {

package/src/ckboxutils.d.ts

@@ -26,15 +26,15 @@ export default class CKBoxUtils extends Plugin {
     /**
      * @inheritDoc
      */
-    init(): Promise<void>;
+    init(): void;
     /**
      * Returns a token used by the CKBox plugin for communication with the CKBox service.
      */
-    getToken(): InitializedToken;
+    getToken(): Promise<InitializedToken>;
     /**
      * The ID of workspace to use when uploading an image.
      */
-    getWorkspaceId(): string;
+    getWorkspaceId(): Promise<string>;
     /**
      * Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
      */

package/src/ckboxutils.js

@@ -25,7 +25,7 @@ export default class CKBoxUtils extends Plugin {
     /**
      * @inheritDoc
      */
-    async init() {
+    init() {
         const editor = this.editor;
         const hasConfiguration = !!editor.config.get('ckbox');
         const isLibraryLoaded = !!window.CKBox;
@@ -66,10 +66,10 @@ export default class CKBoxUtils extends Plugin {
             throw new CKEditorError('ckbox-plugin-missing-token-url', this);
         }
         if (ckboxTokenUrl == cloudServicesTokenUrl) {
-            this._token = cloudServices.token;
+            this._token = Promise.resolve(cloudServices.token);
         }
         else {
-            this._token = await cloudServices.registerTokenUrl(ckboxTokenUrl);
+            this._token = cloudServices.registerTokenUrl(ckboxTokenUrl);
         }
     }
     /**
@@ -81,11 +81,11 @@ export default class CKBoxUtils extends Plugin {
     /**
      * The ID of workspace to use when uploading an image.
      */
-    getWorkspaceId() {
+    async 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);
+        const workspaceId = getWorkspaceId(await this._token, defaultWorkspaceId);
         if (workspaceId == null) {
             /**
              * The user is not authorized to access the workspace defined in  the`ckbox.defaultUploadWorkspaceId` configuration.
@@ -145,7 +145,7 @@ export default class CKBoxUtils extends Plugin {
         const token = this._token;
         const { signal } = options;
         const serviceOrigin = editor.config.get('ckbox.serviceOrigin');
-        const workspaceId = this.getWorkspaceId();
+        const workspaceId = await this.getWorkspaceId();
         try {
             const result = [];
             let offset = 0;
@@ -168,15 +168,15 @@ export default class CKBoxUtils extends Plugin {
             logError('ckbox-fetch-category-http-error');
             return undefined;
         }
-        function fetchCategories(offset) {
+        async function fetchCategories(offset) {
             const categoryUrl = new URL('categories', serviceOrigin);
-            categoryUrl.searchParams.set('limit', ITEMS_PER_REQUEST.toString());
-            categoryUrl.searchParams.set('offset', offset.toString());
+            categoryUrl.searchParams.set('limit', String(ITEMS_PER_REQUEST));
+            categoryUrl.searchParams.set('offset', String(offset));
             categoryUrl.searchParams.set('workspaceId', workspaceId);
             return sendHttpRequest({
                 url: categoryUrl,
                 signal,
-                authorization: token.value
+                authorization: (await token).value
             });
         }
     }