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

package/src/ckboxutils.js

@@ -0,0 +1,184 @@
+/**
+ * @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 { CKEditorError, logError } from 'ckeditor5/src/utils';
+import { Plugin } from 'ckeditor5/src/core';
+import { convertMimeTypeToExtension, getContentTypeOfUrl, getFileExtension, getWorkspaceId, sendHttpRequest } from './utils';
+const DEFAULT_CKBOX_THEME_NAME = 'lark';
+/**
+ * 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 {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'CKBoxUtils';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return ['CloudServices'];
+    }
+    /**
+     * @inheritDoc
+     */
+    async init() {
+        const editor = this.editor;
+        const hasConfiguration = !!editor.config.get('ckbox');
+        const isLibraryLoaded = !!window.CKBox;
+        // Proceed with plugin initialization only when the integrator intentionally wants to use it, i.e. when the `config.ckbox` exists or
+        // the CKBox JavaScript library is loaded.
+        if (!hasConfiguration && !isLibraryLoaded) {
+            return;
+        }
+        editor.config.define('ckbox', {
+            serviceOrigin: 'https://api.ckbox.io',
+            defaultUploadCategories: null,
+            ignoreDataId: false,
+            language: editor.locale.uiLanguage,
+            theme: DEFAULT_CKBOX_THEME_NAME,
+            tokenUrl: editor.config.get('cloudServices.tokenUrl')
+        });
+        const cloudServices = editor.plugins.get('CloudServices');
+        const cloudServicesTokenUrl = editor.config.get('cloudServices.tokenUrl');
+        const ckboxTokenUrl = editor.config.get('ckbox.tokenUrl');
+        if (!ckboxTokenUrl) {
+            /**
+             * The {@link module:ckbox/ckboxconfig~CKBoxConfig#tokenUrl `config.ckbox.tokenUrl`} or the
+             * {@link module:cloud-services/cloudservicesconfig~CloudServicesConfig#tokenUrl `config.cloudServices.tokenUrl`}
+             * configuration is required for the CKBox plugin.
+             *
+             * ```ts
+             * ClassicEditor.create( document.createElement( 'div' ), {
+             * 	ckbox: {
+             * 		tokenUrl: "YOUR_TOKEN_URL"
+             * 		// ...
+             * 	}
+             * 	// ...
+             * } );
+             * ```
+             *
+             * @error ckbox-plugin-missing-token-url
+             */
+            throw new CKEditorError('ckbox-plugin-missing-token-url', this);
+        }
+        if (ckboxTokenUrl == cloudServicesTokenUrl) {
+            this._token = cloudServices.token;
+        }
+        else {
+            this._token = await cloudServices.registerTokenUrl(ckboxTokenUrl);
+        }
+    }
+    /**
+     * Returns a token used by the CKBox plugin for communication with the CKBox service.
+     */
+    getToken() {
+        return this._token;
+    }
+    /**
+     * The ID of workspace to use when uploading an image.
+     */
+    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 object containing a category with which the uploaded file is associated or an error code.
+     */
+    async getCategoryIdForFile(fileOrUrl, options) {
+        const t = this.editor.t;
+        const cannotFindCategoryError = t('Cannot determine a category for the uploaded file.');
+        const defaultCategories = this.editor.config.get('ckbox.defaultUploadCategories');
+        const allCategoriesPromise = this._getAvailableCategories(options);
+        const extension = typeof fileOrUrl == 'string' ?
+            convertMimeTypeToExtension(await getContentTypeOfUrl(fileOrUrl, options)) :
+            getFileExtension(fileOrUrl);
+        const allCategories = await allCategoriesPromise;
+        // Couldn't fetch all categories. Perhaps the authorization token is invalid.
+        if (!allCategories) {
+            throw cannotFindCategoryError;
+        }
+        // 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) {
+                    throw cannotFindCategoryError;
+                }
+                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) {
+            throw cannotFindCategoryError;
+        }
+        return category.id;
+    }
+    /**
+     * 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(options) {
+        const ITEMS_PER_REQUEST = 50;
+        const editor = this.editor;
+        const token = this._token;
+        const { signal } = options;
+        const serviceOrigin = editor.config.get('ckbox.serviceOrigin');
+        const workspaceId = this.getWorkspaceId();
+        try {
+            const result = [];
+            let offset = 0;
+            let remainingItems;
+            do {
+                const data = await fetchCategories(offset);
+                result.push(...data.items);
+                remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
+                offset += ITEMS_PER_REQUEST;
+            } while (remainingItems > 0);
+            return result;
+        }
+        catch {
+            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');
+            return undefined;
+        }
+        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('workspaceId', workspaceId);
+            return sendHttpRequest({
+                url: categoryUrl,
+                signal,
+                authorization: token.value
+            });
+        }
+    }
+}

package/src/utils.d.ts

@@ -47,3 +47,11 @@ export declare function sendHttpRequest({ url, method, data, onUploadProgress, s
     data?: FormData | null;
     onUploadProgress?: (evt: ProgressEvent) => void;
 }): Promise<any>;
+export declare function convertMimeTypeToExtension(mimeType: string): string;
+export declare function getContentTypeOfUrl(url: string, options: {
+    signal: AbortSignal;
+}): Promise<string>;
+/**
+ * Returns an extension from the given value.
+ */
+export declare function getFileExtension(file: File): string;

package/src/utils.js

@@ -131,3 +131,39 @@ export function sendHttpRequest({ url, method = 'GET', data, onUploadProgress, s
         xhr.send(data);
     });
 }
+const MIME_TO_EXTENSION = {
+    'image/gif': 'gif',
+    'image/jpeg': 'jpg',
+    'image/png': 'png',
+    'image/webp': 'webp',
+    'image/bmp': 'bmp',
+    'image/tiff': 'tiff'
+};
+export function convertMimeTypeToExtension(mimeType) {
+    return MIME_TO_EXTENSION[mimeType];
+}
+export async function getContentTypeOfUrl(url, options) {
+    try {
+        const response = await fetch(url, {
+            method: 'HEAD',
+            cache: 'force-cache',
+            ...options
+        });
+        if (!response.ok) {
+            return '';
+        }
+        return response.headers.get('content-type') || '';
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * Returns an extension from the given value.
+ */
+export function getFileExtension(file) {
+    const fileName = file.name;
+    const extensionRegExp = /\.(?<ext>[^.]+)$/;
+    const match = fileName.match(extensionRegExp);
+    return match.groups.ext.toLowerCase();
+}

package/theme/icons/ckbox-image-edit.svg

@@ -1 +1 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M5.802 8.942a.607.607 0 0 0-.838-.029L1.429 12.8V3.158h12.93v5.25l1.429-1.319V2.758c0-.553-.467-1-1.039-1H1.05c-.582 0-1.049.447-1.049 1v11.281c0 .562.467 1.01 1.039 1.01h6.583v-.228c0-.124.052-.242.143-.326l4.504-4.157-.312-.367a.61.61 0 0 0-.829 0l-2.124 1.962-3.202-2.991Zm3.74-2.578a1.87 1.87 0 1 0 3.707-.486 1.87 1.87 0 0 0-3.707.486Z"/><path d="M8.874 15.926v2.316h2.317l6.836-6.834-2.32-2.32-6.833 6.84v-.002Zm10.944-6.312a.612.612 0 0 0 0-.87L18.372 7.3a.614.614 0 0 0-.87 0l-1.133 1.128 2.32 2.319 1.13-1.133Z"/></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M1.201 1C.538 1 0 1.47 0 2.1v12.86C0 15.603.534 16 1.186 16H6.45l3.647-3.596-3.48-3.254a.694.694 0 0 0-.958-.033L1.5 13.6V2.5h15v4.59a3.477 3.477 0 0 1 1.5.15V2.1c0-.63-.547-1.1-1.2-1.1H1.202Zm11.723 2.805a2.137 2.137 0 0 0-2.045 2.406 2.13 2.13 0 0 0 4.172.277 2.134 2.134 0 0 0-.76-2.244 2.13 2.13 0 0 0-1.367-.44Z"/><path d="M8.1 17.612V20h2.39l7.046-7.046-2.39-2.39L8.1 17.612Zm11.283-6.506a.638.638 0 0 0 .139-.692.603.603 0 0 0-.139-.206L17.892 8.72a.63.63 0 0 0-.898 0l-1.167 1.163 2.391 2.39 1.165-1.167Z"/></svg>