@ckeditor/ckeditor5-ckbox 0.0.0-nightly-20231205.0 → 0.0.0-nightly-20231207.0

package/src/ckboximageedit/ckboximageeditcommand.js

@@ -7,12 +7,13 @@
  * @module ckbox/ckboximageedit/ckboximageeditcommand
  */
 import { Command, PendingActions } from 'ckeditor5/src/core';
-import { CKEditorError, createElement, retry } from 'ckeditor5/src/utils';
+import { CKEditorError, abortableDebounce, createElement, retry } from 'ckeditor5/src/utils';
 import { Notification } from 'ckeditor5/src/ui';
 import { isEqual } from 'lodash-es';
-import CKBoxEditing from '../ckboxediting';
 import { sendHttpRequest } from '../utils';
 import { prepareImageAssetAttributes } from '../ckboxcommand';
+import { createEditabilityChecker } from './utils';
+import CKBoxUtils from '../ckboxutils';
 /**
  * The CKBox edit image command.
  *
@@ -31,8 +32,10 @@ export default class CKBoxImageEditCommand extends Command {
         /**
          * The states of image processing in progress.
          */
-        this._processInProgress = new Map();
+        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();
     }
     /**
@@ -42,16 +45,10 @@ export default class CKBoxImageEditCommand extends Command {
         const editor = this.editor;
         this.value = this._getValue();
         const selectedElement = editor.model.document.selection.getSelectedElement();
-        const isImageElement = selectedElement && (selectedElement.is('element', 'imageInline') ||
-            selectedElement.is('element', 'imageBlock'));
-        const isBeingProcessed = Array.from(this._processInProgress.values())
-            .some(({ element }) => isEqual(element, selectedElement));
-        if (isImageElement && selectedElement.hasAttribute('ckboxImageId') && !isBeingProcessed) {
-            this.isEnabled = true;
-        }
-        else {
-            this.isEnabled = false;
-        }
+        this.isEnabled =
+            !!selectedElement &&
+                this._canEdit(selectedElement) &&
+                !this._checkIfElementIsBeingProcessed(selectedElement);
     }
     /**
      * Opens the CKBox Image Editor dialog for editing the image.
@@ -60,23 +57,32 @@ export default class CKBoxImageEditCommand extends Command {
         if (this._getValue()) {
             return;
         }
+        const wrapper = createElement(document, 'div', { class: 'ck ckbox-wrapper' });
+        this._wrapper = wrapper;
         this.value = true;
-        this._wrapper = createElement(document, 'div', { class: 'ck ckbox-wrapper' });
         document.body.appendChild(this._wrapper);
         const imageElement = this.editor.model.document.selection.getSelectedElement();
-        const ckboxImageId = imageElement.getAttribute('ckboxImageId');
         const processingState = {
-            ckboxImageId,
             element: imageElement,
             controller: new AbortController()
         };
-        window.CKBox.mountImageEditor(this._wrapper, this._prepareOptions(processingState));
+        this._prepareOptions(processingState).then(options => window.CKBox.mountImageEditor(wrapper, options), error => {
+            const editor = this.editor;
+            const t = editor.t;
+            const notification = editor.plugins.get(Notification);
+            notification.showWarning(t('Failed to determine category of edited image.'), {
+                namespace: 'ckbox'
+            });
+            console.error(error);
+            this._handleImageEditorClose();
+        });
     }
     /**
      * @inheritDoc
      */
     destroy() {
         this._handleImageEditorClose();
+        this._prepareOptions.abort();
         for (const state of this._processInProgress.values()) {
             state.controller.abort();
         }
@@ -91,11 +97,28 @@ export default class CKBoxImageEditCommand extends Command {
     /**
      * Creates the options object for the CKBox Image Editor dialog.
      */
-    _prepareOptions(state) {
+    async _prepareOptionsAbortable(signal, state) {
         const editor = this.editor;
         const ckboxConfig = editor.config.get('ckbox');
+        const ckboxUtils = editor.plugins.get(CKBoxUtils);
+        const { element } = state;
+        let imageMountOptions;
+        const ckboxImageId = element.getAttribute('ckboxImageId');
+        if (ckboxImageId) {
+            imageMountOptions = {
+                assetId: ckboxImageId
+            };
+        }
+        else {
+            const imageUrl = element.getAttribute('src');
+            const uploadCategoryId = await ckboxUtils.getCategoryIdForFile(imageUrl, { signal });
+            imageMountOptions = {
+                imageUrl,
+                uploadCategoryId
+            };
+        }
         return {
-            assetId: state.ckboxImageId,
+            ...imageMountOptions,
             imageEditing: {
                 allowOverwrite: false
             },
@@ -128,6 +151,14 @@ export default class CKBoxImageEditCommand extends Command {
         }
         return states;
     }
+    _checkIfElementIsBeingProcessed(selectedElement) {
+        for (const { element } of this._processInProgress) {
+            if (isEqual(element, selectedElement)) {
+                return true;
+            }
+        }
+        return false;
+    }
     /**
      * Closes the CKBox Image Editor dialog.
      */
@@ -138,6 +169,7 @@ export default class CKBoxImageEditCommand extends Command {
         this._wrapper.remove();
         this._wrapper = null;
         this.editor.editing.view.focus();
+        this.refresh();
     }
     /**
      * Save edited image. In case server respond with "success" replace with edited image,
@@ -148,7 +180,7 @@ export default class CKBoxImageEditCommand extends Command {
         const notification = this.editor.plugins.get(Notification);
         const pendingActions = this.editor.plugins.get(PendingActions);
         const action = pendingActions.add(t('Processing the edited image.'));
-        this._processInProgress.set(state.ckboxImageId, state);
+        this._processInProgress.add(state);
         this._showImageProcessingIndicator(state.element, asset);
         this.refresh();
         this._waitForAssetProcessed(asset.data.id, state.controller.signal)
@@ -169,7 +201,7 @@ export default class CKBoxImageEditCommand extends Command {
                 console.error(error);
             }
         }).finally(() => {
-            this._processInProgress.delete(state.ckboxImageId);
+            this._processInProgress.delete(state);
             pendingActions.remove(action);
             this.refresh();
         });
@@ -179,12 +211,12 @@ export default class CKBoxImageEditCommand extends Command {
      * image is already proceeded and ready for saving.
      */
     async _getAssetStatusFromServer(id, signal) {
-        const ckboxEditing = this.editor.plugins.get(CKBoxEditing);
+        const ckboxUtils = this.editor.plugins.get(CKBoxUtils);
         const url = new URL('assets/' + id, this.editor.config.get('ckbox.serviceOrigin'));
         const response = await sendHttpRequest({
             url,
             signal,
-            authorization: ckboxEditing.getToken().value
+            authorization: ckboxUtils.getToken().value
         });
         const status = response.metadata.metadataProcessingStatus;
         if (!status || status == 'queued') {

package/src/ckboximageedit/ckboximageeditediting.d.ts

@@ -7,6 +7,8 @@
  */
 import { PendingActions, Plugin } from 'ckeditor5/src/core';
 import { Notification } from 'ckeditor5/src/ui';
+import CKBoxEditing from '../ckboxediting';
+import CKBoxUtils from '../ckboxutils';
 /**
  * The CKBox image edit editing plugin.
  */
@@ -18,7 +20,7 @@ export default class CKBoxImageEditEditing extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof PendingActions, typeof Notification, "ImageUtils", "ImageEditing"];
+    static get requires(): readonly [typeof CKBoxEditing, typeof CKBoxUtils, typeof PendingActions, typeof Notification, "ImageUtils", "ImageEditing"];
     /**
      * @inheritDoc
      */

package/src/ckboximageedit/ckboximageeditediting.js

@@ -8,6 +8,8 @@
 import { PendingActions, Plugin } from 'ckeditor5/src/core';
 import { Notification } from 'ckeditor5/src/ui';
 import CKBoxImageEditCommand from './ckboximageeditcommand';
+import CKBoxEditing from '../ckboxediting';
+import CKBoxUtils from '../ckboxutils';
 /**
  * The CKBox image edit editing plugin.
  */
@@ -22,7 +24,7 @@ export default class CKBoxImageEditEditing extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [PendingActions, Notification, 'ImageUtils', 'ImageEditing'];
+        return [CKBoxEditing, CKBoxUtils, PendingActions, Notification, 'ImageUtils', 'ImageEditing'];
     }
     /**
      * @inheritDoc

package/src/ckboximageedit/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { Element } from 'ckeditor5/src/engine';
+import type { CKBoxConfig } from '../ckboxconfig';
+/**
+ * @internal
+ */
+export declare function createEditabilityChecker(allowExternalImagesEditing: CKBoxConfig['allowExternalImagesEditing']): (element: Element) => boolean;

package/src/ckboximageedit/utils.js

@@ -0,0 +1,48 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ckbox/ckboximageedit/utils
+ */
+import { global } from 'ckeditor5/src/utils';
+/**
+ * @internal
+ */
+export function createEditabilityChecker(allowExternalImagesEditing) {
+    const checkUrl = createUrlChecker(allowExternalImagesEditing);
+    return element => {
+        const isImageElement = element.is('element', 'imageInline') ||
+            element.is('element', 'imageBlock');
+        if (!isImageElement) {
+            return false;
+        }
+        if (element.hasAttribute('ckboxImageId')) {
+            return true;
+        }
+        if (element.hasAttribute('src')) {
+            return checkUrl(element.getAttribute('src'));
+        }
+        return false;
+    };
+}
+function createUrlChecker(allowExternalImagesEditing) {
+    if (Array.isArray(allowExternalImagesEditing)) {
+        const urlMatchers = allowExternalImagesEditing.map(createUrlChecker);
+        return src => urlMatchers.some(matcher => matcher(src));
+    }
+    if (allowExternalImagesEditing == 'origin') {
+        const origin = global.window.location.origin;
+        return src => src.startsWith(origin + '/');
+    }
+    if (typeof allowExternalImagesEditing == 'function') {
+        return allowExternalImagesEditing;
+    }
+    if (allowExternalImagesEditing instanceof RegExp) {
+        return src => !!(src.match(allowExternalImagesEditing) ||
+            src.replace(/^https?:\/\//, '').match(allowExternalImagesEditing));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const shouldBeUndefned = allowExternalImagesEditing;
+    return () => false;
+}

package/src/ckboximageedit.d.ts

@@ -6,7 +6,6 @@
  * @module ckbox/ckboximageedit
  */
 import { Plugin } from 'ckeditor5/src/core';
-import CKBoxEditing from './ckboxediting';
 import CKBoxImageEditEditing from './ckboximageedit/ckboximageeditediting';
 import CKBoxImageEditUI from './ckboximageedit/ckboximageeditui';
 import '../theme/ckboximageedit.css';
@@ -21,5 +20,5 @@ export default class CKBoxImageEdit extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof CKBoxEditing, typeof CKBoxImageEditEditing, typeof CKBoxImageEditUI];
+    static get requires(): readonly [typeof CKBoxImageEditEditing, typeof CKBoxImageEditUI];
 }

package/src/ckboximageedit.js

@@ -6,7 +6,6 @@
  * @module ckbox/ckboximageedit
  */
 import { Plugin } from 'ckeditor5/src/core';
-import CKBoxEditing from './ckboxediting';
 import CKBoxImageEditEditing from './ckboximageedit/ckboximageeditediting';
 import CKBoxImageEditUI from './ckboximageedit/ckboximageeditui';
 import '../theme/ckboximageedit.css';
@@ -24,6 +23,6 @@ export default class CKBoxImageEdit extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [CKBoxEditing, CKBoxImageEditEditing, CKBoxImageEditUI];
+        return [CKBoxImageEditEditing, CKBoxImageEditUI];
     }
 }

package/src/ckboxui.js

@@ -5,7 +5,7 @@
 /**
  * @module ckbox/ckboxui
  */
-import { Plugin } from 'ckeditor5/src/core';
+import { icons, Plugin } from 'ckeditor5/src/core';
 import { ButtonView } from 'ckeditor5/src/ui';
 import browseFilesIcon from '../theme/icons/browse-files.svg';
 /**
@@ -43,5 +43,32 @@ export default class CKBoxUI extends Plugin {
             });
             return button;
         });
+        if (editor.plugins.has('ImageInsertUI')) {
+            const imageInsertUI = editor.plugins.get('ImageInsertUI');
+            imageInsertUI.registerIntegration({
+                name: 'assetManager',
+                observable: command,
+                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;
+                }
+            });
+        }
     }
 }

package/src/ckboxuploadadapter.d.ts

@@ -31,8 +31,3 @@ export default class CKBoxUploadAdapter extends Plugin {
      */
     afterInit(): Promise<void>;
 }
-export interface AvailableCategory {
-    id: string;
-    name: string;
-    extensions: Array<string>;
-}

package/src/ckboxuploadadapter.js

@@ -8,9 +8,9 @@
  */
 import { Plugin } from 'ckeditor5/src/core';
 import { FileRepository } from 'ckeditor5/src/upload';
-import { logError } from 'ckeditor5/src/utils';
 import CKBoxEditing from './ckboxediting';
-import { getImageUrls, getWorkspaceId, sendHttpRequest } from './utils';
+import { getImageUrls, sendHttpRequest } from './utils';
+import CKBoxUtils from './ckboxutils';
 /**
  * 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
@@ -47,10 +47,8 @@ export default class CKBoxUploadAdapter extends Plugin {
             return;
         }
         const fileRepository = editor.plugins.get(FileRepository);
-        const ckboxEditing = editor.plugins.get(CKBoxEditing);
-        fileRepository.createUploadAdapter = loader => {
-            return new Adapter(loader, ckboxEditing.getToken(), editor);
-        };
+        const ckboxUtils = editor.plugins.get(CKBoxUtils);
+        fileRepository.createUploadAdapter = loader => new Adapter(loader, editor, ckboxUtils);
         const shouldInsertDataId = !editor.config.get('ckbox.ignoreDataId');
         const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
         // Mark uploaded assets with the `ckboxImageId` attribute. Its value represents an ID in CKBox.
@@ -70,118 +68,27 @@ class Adapter {
     /**
      * Creates a new adapter instance.
      */
-    constructor(loader, token, editor) {
+    constructor(loader, editor, ckboxUtils) {
         this.loader = loader;
-        this.token = token;
+        this.token = ckboxUtils.getToken();
+        this.ckboxUtils = ckboxUtils;
         this.editor = editor;
         this.controller = new AbortController();
         this.serviceOrigin = editor.config.get('ckbox.serviceOrigin');
     }
-    /**
-     * The ID of workspace to use.
-     */
-    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');
-            throw cannotAccessDefaultWorkspaceError;
-        }
-        return workspaceId;
-    }
-    /**
-     * 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(offset = 0) {
-        const ITEMS_PER_REQUEST = 50;
-        const categoryUrl = new URL('categories', this.serviceOrigin);
-        categoryUrl.searchParams.set('limit', ITEMS_PER_REQUEST.toString());
-        categoryUrl.searchParams.set('offset', offset.toString());
-        categoryUrl.searchParams.set('workspaceId', this.getWorkspaceId());
-        return sendHttpRequest({
-            url: categoryUrl,
-            signal: this.controller.signal,
-            authorization: this.token.value
-        })
-            .then(async (data) => {
-            const remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
-            if (remainingItems > 0) {
-                const offsetItems = await this.getAvailableCategories(offset + ITEMS_PER_REQUEST);
-                return [
-                    ...data.items,
-                    ...offsetItems
-                ];
-            }
-            return data.items;
-        })
-            .catch(() => {
-            this.controller.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');
-        });
-    }
-    /**
-     * Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
-     */
-    async getCategoryIdForFile(file) {
-        const extension = getFileExtension(file.name);
-        const allCategories = await this.getAvailableCategories();
-        // Couldn't fetch all categories. Perhaps the authorization token is invalid.
-        if (!allCategories) {
-            return null;
-        }
-        // The plugin allows defining to which category the uploaded file should be assigned.
-        const defaultCategories = this.editor.config.get('ckbox.defaultUploadCategories');
-        // If a user specifies the plugin configuration, find the first category that accepts the uploaded file.
-        if (defaultCategories) {
-            const userCategory = Object.keys(defaultCategories).find(category => {
-                return defaultCategories[category].find(e => e.toLowerCase() == extension);
-            });
-            // If found, return its ID if the category exists on the server side.
-            if (userCategory) {
-                const serverCategory = allCategories.find(category => category.id === userCategory || category.name === userCategory);
-                if (!serverCategory) {
-                    return null;
-                }
-                return serverCategory.id;
-            }
-        }
-        // Otherwise, find the first category that accepts the uploaded file and returns its ID.
-        const category = allCategories.find(category => category.extensions.find(e => e.toLowerCase() == extension));
-        if (!category) {
-            return null;
-        }
-        return category.id;
-    }
     /**
      * Starts the upload process.
      *
      * @see module:upload/filerepository~UploadAdapter#upload
      */
     async upload() {
+        const ckboxUtils = this.ckboxUtils;
         const t = this.editor.t;
-        const cannotFindCategoryError = t('Cannot determine a category for the uploaded file.');
         const file = (await this.loader.file);
-        const category = await this.getCategoryIdForFile(file);
-        if (!category) {
-            return Promise.reject(cannotFindCategoryError);
-        }
+        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', this.getWorkspaceId());
+        uploadUrl.searchParams.set('workspaceId', ckboxUtils.getWorkspaceId());
         formData.append('categoryId', category);
         formData.append('file', file);
         const requestConfig = {
@@ -221,11 +128,3 @@ class Adapter {
         this.controller.abort();
     }
 }
-/**
- * Returns an extension from the given value.
- */
-function getFileExtension(value) {
-    const extensionRegExp = /\.(?<ext>[^.]+)$/;
-    const match = value.match(extensionRegExp);
-    return match.groups.ext.toLowerCase();
-}

package/src/ckboxutils.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ckbox/ckboxutils
+ */
+import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services';
+import { Plugin } from 'ckeditor5/src/core';
+/**
+ * The CKBox editing feature. It introduces the {@link module:ckbox/ckboxcommand~CKBoxCommand CKBox command} and
+ * {@link module:ckbox/ckboxuploadadapter~CKBoxUploadAdapter CKBox upload adapter}.
+ */
+export default class CKBoxUtils extends Plugin {
+    /**
+     * CKEditor Cloud Services access token.
+     */
+    private _token;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "CKBoxUtils";
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly ["CloudServices"];
+    /**
+     * @inheritDoc
+     */
+    init(): Promise<void>;
+    /**
+     * Returns a token used by the CKBox plugin for communication with the CKBox service.
+     */
+    getToken(): InitializedToken;
+    /**
+     * The ID of workspace to use when uploading an image.
+     */
+    getWorkspaceId(): string;
+    /**
+     * Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
+     */
+    getCategoryIdForFile(fileOrUrl: File | string, options: {
+        signal: AbortSignal;
+    }): Promise<string>;
+    /**
+     * 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.
+     */
+    private _getAvailableCategories;
+}