@ckeditor/ckeditor5-ckbox 38.2.0-alpha.1 → 39.0.0

package/src/ckboxuploadadapter.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module ckbox/ckboxuploadadapter
  */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { FileRepository } from 'ckeditor5/src/upload.js';
-import CKBoxEditing from './ckboxediting.js';
+import { Plugin } from 'ckeditor5/src/core';
+import { FileRepository } from 'ckeditor5/src/upload';
+import CKBoxEditing from './ckboxediting';
 /**
  * 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

package/src/ckboxuploadadapter.js

@@ -2,15 +2,15 @@
  * @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
  */
-/* globals AbortController, FormData, URL, Image, XMLHttpRequest, window */
+/* globals AbortController, FormData, URL, XMLHttpRequest, window */
 /**
  * @module ckbox/ckboxuploadadapter
  */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { FileRepository } from 'ckeditor5/src/upload.js';
-import { logError } from 'ckeditor5/src/utils.js';
-import CKBoxEditing from './ckboxediting.js';
-import { getImageUrls } from './utils.js';
+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 } from './utils';
 /**
  * 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
@@ -76,7 +76,25 @@ class Adapter {
         this.editor = editor;
         this.controller = new AbortController();
         this.serviceOrigin = editor.config.get('ckbox.serviceOrigin');
-        this.assetsOrigin = editor.config.get('ckbox.assetsOrigin');
+    }
+    /**
+     * 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 workspace defined in `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.
@@ -88,6 +106,7 @@ class Adapter {
         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 this._sendHttpRequest({ url: categoryUrl })
             .then(async (data) => {
             const remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
@@ -158,6 +177,7 @@ class Adapter {
         }
         const uploadUrl = new URL('assets', this.serviceOrigin);
         const formData = new FormData();
+        uploadUrl.searchParams.set('workspaceId', this.getWorkspaceId());
         formData.append('categoryId', category);
         formData.append('file', file);
         const requestConfig = {
@@ -174,15 +194,7 @@ class Adapter {
         };
         return this._sendHttpRequest(requestConfig)
             .then(async (data) => {
-            const width = await this._getImageWidth();
-            const extension = getFileExtension(file.name);
-            const imageUrls = getImageUrls({
-                token: this.token,
-                id: data.id,
-                origin: this.assetsOrigin,
-                width,
-                extension
-            });
+            const imageUrls = getImageUrls(data.imageUrls);
             return {
                 ckboxImageId: data.id,
                 default: imageUrls.imageFallbackUrl,
@@ -252,20 +264,6 @@ class Adapter {
             xhr.send(data);
         });
     }
-    /**
-     * Resolves a promise with a number representing the width of a given image file.
-     */
-    _getImageWidth() {
-        return new Promise(resolve => {
-            const image = new Image();
-            image.onload = () => {
-                // Let the browser know that it should not keep the reference any longer to avoid memory leeks.
-                URL.revokeObjectURL(image.src);
-                resolve(image.width);
-            };
-            image.src = this.loader.data;
-        });
-    }
 }
 /**
  * Returns an extension from the given value.

package/src/index.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module ckbox
  */
-export { default as CKBox } from './ckbox.js';
-export { default as CKBoxEditing } from './ckboxediting.js';
-export { default as CKBoxUI } from './ckboxui.js';
-export type { default as CKBoxCommand } from './ckboxcommand.js';
-export type { CKBoxConfig } from './ckboxconfig.js';
-import './augmentation.js';
+export { default as CKBox } from './ckbox';
+export { default as CKBoxEditing } from './ckboxediting';
+export { default as CKBoxUI } from './ckboxui';
+export type { default as CKBoxCommand } from './ckboxcommand';
+export type { CKBoxConfig } from './ckboxconfig';
+import './augmentation';

package/src/index.js

@@ -5,7 +5,7 @@
 /**
  * @module ckbox
  */
-export { default as CKBox } from './ckbox.js';
-export { default as CKBoxEditing } from './ckboxediting.js';
-export { default as CKBoxUI } from './ckboxui.js';
-import './augmentation.js';
+export { default as CKBox } from './ckbox';
+export { default as CKBoxEditing } from './ckboxediting';
+export { default as CKBoxUI } from './ckboxui';
+import './augmentation';

package/src/utils.d.ts

@@ -6,18 +6,13 @@
  * @module ckbox/utils
  */
 import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services';
+import type { CKBoxImageUrls } from './ckboxconfig';
 /**
- * Creates URLs for the image:
+ * Converts image source set provided by the CKBox into an object containing:
  * - responsive URLs for the "webp" image format,
  * - one fallback URL for browsers that do not support the "webp" format.
  */
-export declare function getImageUrls({ token, id, origin, width, extension }: {
-    token: InitializedToken;
-    id: string;
-    origin: string;
-    width: number;
-    extension: string;
-}): {
+export declare function getImageUrls(imageUrls: CKBoxImageUrls): {
     imageFallbackUrl: string;
     imageSources: Array<{
         srcset: string;
@@ -26,6 +21,8 @@ export declare function getImageUrls({ token, id, origin, width, extension }: {
     }>;
 };
 /**
- * Returns an environment id from a token used for communication with the CKBox service.
+ * Returns workspace id to use for communication with the CKBox service.
+ *
+ * @param defaultWorkspaceId The default workspace to use taken from editor config.
  */
-export declare function getEnvironmentId(token: InitializedToken): string;
+export declare function getWorkspaceId(token: InitializedToken, defaultWorkspaceId?: string): string | null;

package/src/utils.js

@@ -2,89 +2,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
  */
-const IMAGE_BREAKPOINT_MAX_WIDTH = 4000;
-const IMAGE_BREAKPOINT_PIXELS_THRESHOLD = 80;
-const IMAGE_BREAKPOINT_PERCENTAGE_THRESHOLD = 10;
 /**
- * Creates URLs for the image:
+ * Converts image source set provided by the CKBox into an object containing:
  * - responsive URLs for the "webp" image format,
  * - one fallback URL for browsers that do not support the "webp" format.
  */
-export function getImageUrls({ token, id, origin, width, extension }) {
-    const environmentId = getEnvironmentId(token);
-    const imageBreakpoints = getImageBreakpoints(width);
-    const imageFallbackExtension = getImageFallbackExtension(extension);
-    const imageFallbackUrl = getResponsiveImageUrl({ environmentId, id, origin, width, extension: imageFallbackExtension });
-    const imageResponsiveUrls = imageBreakpoints.map(imageBreakpoint => {
-        const responsiveImageUrl = getResponsiveImageUrl({ environmentId, id, origin, width: imageBreakpoint, extension: 'webp' });
-        return `${responsiveImageUrl} ${imageBreakpoint}w`;
-    });
-    // Create just one image source definition containing all calculated URLs for each image breakpoint. Additionally, limit this source
-    // image width by defining two allowed slot sizes:
-    // - If the viewport width is not greater than the image width, make the image occupy the whole slot.
-    // - Otherwise, limit the slot width to be equal to the image width, to avoid enlarging the image beyond its width.
-    //
-    // This is a kind of a workaround. In a perfect world we could use `sizes="100vw" width="real image width"` on our single `<source>`
-    // element, but at the time of writing this code the `width` attribute is not supported in the `<source>` element in Firefox yet.
+export function getImageUrls(imageUrls) {
+    const responsiveUrls = [];
+    let maxWidth = 0;
+    for (const key in imageUrls) {
+        const width = parseInt(key, 10);
+        if (!isNaN(width)) {
+            if (width > maxWidth) {
+                maxWidth = width;
+            }
+            responsiveUrls.push(`${imageUrls[key]} ${key}w`);
+        }
+    }
     const imageSources = [{
-            srcset: imageResponsiveUrls.join(','),
-            sizes: `(max-width: ${width}px) 100vw, ${width}px`,
+            srcset: responsiveUrls.join(','),
+            sizes: `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`,
             type: 'image/webp'
         }];
     return {
-        imageFallbackUrl,
+        imageFallbackUrl: imageUrls.default,
         imageSources
     };
 }
 /**
- * Returns an environment id from a token used for communication with the CKBox service.
+ * Returns workspace id to use for communication with the CKBox service.
+ *
+ * @param defaultWorkspaceId The default workspace to use taken from editor config.
  */
-export function getEnvironmentId(token) {
+export function getWorkspaceId(token, defaultWorkspaceId) {
     const [, binaryTokenPayload] = token.value.split('.');
     const payload = JSON.parse(atob(binaryTokenPayload));
-    return payload.aud;
-}
-/**
- * Calculates the image breakpoints for the provided image width in the following way:
- *
- * 1) The breakpoint threshold (the breakpoint step in the calculations) should be equal to 10% of the image width, but not less than 80
- * pixels.
- *
- * 2) Set the max. allowed image breakpoint (4000px) or the image width (if it is smaller than 4000px) as the first calculated breakpoint.
- *
- * 3) From the last computed image breakpoint subtract the computed breakpoint threshold, as long as the calculated new breakpoint value is
- * greater than the threshold.
- */
-function getImageBreakpoints(width) {
-    // Step 1) - calculating the breakpoint threshold.
-    const imageBreakpointThresholds = [
-        width * IMAGE_BREAKPOINT_PERCENTAGE_THRESHOLD / 100,
-        IMAGE_BREAKPOINT_PIXELS_THRESHOLD
-    ];
-    const imageBreakpointThreshold = Math.floor(Math.max(...imageBreakpointThresholds));
-    // Step 2) - set the first breakpoint.
-    const imageBreakpoints = [Math.min(width, IMAGE_BREAKPOINT_MAX_WIDTH)];
-    // Step 3) - calculate the next breakpoint as long as it is greater than the breakpoint threshold.
-    let lastBreakpoint = imageBreakpoints[0];
-    while (lastBreakpoint - imageBreakpointThreshold >= imageBreakpointThreshold) {
-        lastBreakpoint -= imageBreakpointThreshold;
-        imageBreakpoints.unshift(lastBreakpoint);
+    const workspaces = (payload.auth && payload.auth.ckbox && payload.auth.ckbox.workspaces) || [payload.aud];
+    if (!defaultWorkspaceId) {
+        return workspaces[0];
     }
-    return imageBreakpoints;
-}
-/**
- * Returns the image extension for the fallback URL.
- */
-function getImageFallbackExtension(extension) {
-    if (extension === 'bmp' || extension === 'tiff' || extension === 'jpg') {
-        return 'jpeg';
+    const role = payload.auth && payload.auth.ckbox && payload.auth.ckbox.role;
+    if (role == 'superadmin' || workspaces.includes(defaultWorkspaceId)) {
+        return defaultWorkspaceId;
     }
-    return extension;
-}
-/**
- * Creates the URL for the given image.
- */
-function getResponsiveImageUrl({ environmentId, id, origin, width, extension }) {
-    const endpoint = `${environmentId}/assets/${id}/images/${width}.${extension}`;
-    return new URL(endpoint, origin).toString();
+    return null;
 }