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

package/src/ckboxuploadadapter.js

@@ -2,7 +2,7 @@
  * @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
  */
@@ -10,7 +10,7 @@ import { Plugin } from 'ckeditor5/src/core';
 import { FileRepository } from 'ckeditor5/src/upload';
 import { logError } from 'ckeditor5/src/utils';
 import CKBoxEditing from './ckboxediting';
-import { getImageUrls } from './utils';
+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);
@@ -125,7 +144,7 @@ class Adapter {
         // 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].includes(extension);
+                return defaultCategories[category].find(e => e.toLowerCase() == extension);
             });
             // If found, return its ID if the category exists on the server side.
             if (userCategory) {
@@ -137,7 +156,7 @@ class Adapter {
             }
         }
         // Otherwise, find the first category that accepts the uploaded file and returns its ID.
-        const category = allCategories.find(category => category.extensions.includes(extension));
+        const category = allCategories.find(category => category.extensions.find(e => e.toLowerCase() == extension));
         if (!category) {
             return null;
         }
@@ -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.
@@ -273,5 +271,5 @@ class Adapter {
 function getFileExtension(value) {
     const extensionRegExp = /\.(?<ext>[^.]+)$/;
     const match = value.match(extensionRegExp);
-    return match.groups.ext;
+    return match.groups.ext.toLowerCase();
 }

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