@ckeditor/ckeditor5-ckbox 47.6.1-alpha.1 → 48.0.0-alpha.0

package/src/ckboxuploadadapter.js

@@ -1,159 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ckbox/ckboxuploadadapter
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { FileRepository } from 'ckeditor5/src/upload.js';
-import { CKBoxEditing } from './ckboxediting.js';
-import { getImageUrls, sendHttpRequest } from './utils.js';
-import { CKBoxUtils } from './ckboxutils.js';
-/**
- * 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
- * and use this feature as well as find out more about the full integration with the file manager
- * provided by the {@link module:ckbox/ckbox~CKBox} plugin.
- *
- * Check out the {@glink features/images/image-upload/image-upload Image upload overview} guide to learn about
- * other ways to upload images into CKEditor 5.
- */
-export class CKBoxUploadAdapter extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return ['ImageUploadEditing', 'ImageUploadProgress', FileRepository, CKBoxEditing];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'CKBoxUploadAdapter';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    async afterInit() {
-        const editor = this.editor;
-        const hasConfiguration = !!editor.config.get('ckbox');
-        const isLibraryLoaded = !!window.CKBox;
-        // Editor supports only one upload adapter. Register the CKBox upload adapter (and potentially overwrite other one) only when the
-        // integrator intentionally wants to use the CKBox plugin, i.e. when the `config.ckbox` exists or the CKBox JavaScript library is
-        // loaded.
-        if (!hasConfiguration && !isLibraryLoaded) {
-            return;
-        }
-        const fileRepository = editor.plugins.get(FileRepository);
-        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.
-        if (shouldInsertDataId) {
-            imageUploadEditing.on('uploadComplete', (evt, { imageElement, data }) => {
-                editor.model.change(writer => {
-                    writer.setAttribute('ckboxImageId', data.ckboxImageId, imageElement);
-                });
-            });
-        }
-    }
-}
-/**
- * Upload adapter for CKBox.
- */
-class Adapter {
-    /**
-     * FileLoader instance to use during the upload.
-     */
-    loader;
-    /**
-     * CKEditor Cloud Services access token.
-     */
-    token;
-    /**
-     * The editor instance.
-     */
-    editor;
-    /**
-     * The abort controller for aborting asynchronous processes.
-     */
-    controller;
-    /**
-     * The base URL where all requests should be sent.
-     */
-    serviceOrigin;
-    /**
-     * The reference to CKBoxUtils plugin.
-     */
-    ckboxUtils;
-    /**
-     * Creates a new adapter instance.
-     */
-    constructor(loader, editor, ckboxUtils) {
-        this.loader = loader;
-        this.token = ckboxUtils.getToken();
-        this.ckboxUtils = ckboxUtils;
-        this.editor = editor;
-        this.controller = new AbortController();
-        this.serviceOrigin = editor.config.get('ckbox.serviceOrigin');
-    }
-    /**
-     * Starts the upload process.
-     *
-     * @see module:upload/filerepository~UploadAdapter#upload
-     */
-    async upload() {
-        const ckboxUtils = this.ckboxUtils;
-        const t = this.editor.t;
-        const file = (await this.loader.file);
-        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', await ckboxUtils.getWorkspaceId());
-        formData.append('categoryId', category);
-        formData.append('file', file);
-        const requestConfig = {
-            method: 'POST',
-            url: uploadUrl,
-            data: formData,
-            onUploadProgress: (evt) => {
-                /* istanbul ignore else -- @preserve */
-                if (evt.lengthComputable) {
-                    this.loader.uploadTotal = evt.total;
-                    this.loader.uploaded = evt.loaded;
-                }
-            },
-            signal: this.controller.signal,
-            authorization: (await this.token).value
-        };
-        return sendHttpRequest(requestConfig)
-            .then(async (data) => {
-            const imageUrls = getImageUrls(data.imageUrls);
-            return {
-                ckboxImageId: data.id,
-                default: imageUrls.imageFallbackUrl,
-                sources: imageUrls.imageSources
-            };
-        })
-            .catch(() => {
-            const genericError = t('Cannot upload file:') + ` ${file.name}.`;
-            return Promise.reject(genericError);
-        });
-    }
-    /**
-     * Aborts the upload process.
-     *
-     * @see module:upload/filerepository~UploadAdapter#abort
-     */
-    abort() {
-        this.controller.abort();
-    }
-}

package/src/ckboxutils.js

@@ -1,215 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { CKEditorError, logError } from 'ckeditor5/src/utils.js';
-import { Plugin } from 'ckeditor5/src/core.js';
-import { convertMimeTypeToExtension, getContentTypeOfUrl, getFileExtension, getWorkspaceId, sendHttpRequest } from './utils.js';
-const DEFAULT_CKBOX_THEME_NAME = 'lark';
-/**
- * The CKBox utilities plugin.
- */
-export class CKBoxUtils extends Plugin {
-    /**
-     * CKEditor Cloud Services access token.
-     */
-    _token;
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'CKBoxUtils';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return ['CloudServices'];
-    }
-    /**
-     * @inheritDoc
-     */
-    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 = Promise.resolve(cloudServices.token);
-        }
-        else {
-            this._token = cloudServices.registerTokenUrl(ckboxTokenUrl);
-        }
-        // Grant access to private categories after token is fetched. This is done within the same promise chain
-        // to ensure all services using the token have access to private categories.
-        // This step is critical as previewing images from private categories requires proper cookies.
-        this._token = this._token.then(async (token) => {
-            await this._authorizePrivateCategoriesAccess(token.value);
-            return token;
-        });
-    }
-    /**
-     * 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.
-     */
-    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(await 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 = await 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;
-        }
-        async function fetchCategories(offset) {
-            const categoryUrl = new URL('categories', serviceOrigin);
-            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: (await token).value
-            });
-        }
-    }
-    /**
-     * Authorize private categories access to the CKBox service. Request sets cookie for the current domain,
-     * that allows user to preview images from private categories.
-     */
-    async _authorizePrivateCategoriesAccess(token) {
-        const serviceUrl = this.editor.config.get('ckbox.serviceOrigin');
-        const formData = new FormData();
-        formData.set('token', token);
-        await fetch(`${serviceUrl}/categories/authorizePrivateAccess`, {
-            method: 'POST',
-            credentials: 'include',
-            mode: 'no-cors',
-            body: formData
-        });
-    }
-}

package/src/index.js

@@ -1,21 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ckbox
- */
-export { CKBox } from './ckbox.js';
-export { CKBoxEditing } from './ckboxediting.js';
-export { CKBoxUI } from './ckboxui.js';
-export { CKBoxImageEditEditing } from './ckboximageedit/ckboximageeditediting.js';
-export { CKBoxImageEditUI } from './ckboximageedit/ckboximageeditui.js';
-export { CKBoxImageEdit } from './ckboximageedit.js';
-export { CKBoxCommand } from './ckboxcommand.js';
-export { CKBoxImageEditCommand } from './ckboximageedit/ckboximageeditcommand.js';
-export { CKBoxUploadAdapter } from './ckboxuploadadapter.js';
-export { CKBoxUtils } from './ckboxutils.js';
-export { getImageUrls as _getCKBoxImageUrls, getWorkspaceId as _getCKBoxWorkspaceId, blurHashToDataUrl as _ckboxBlurHashToDataUrl, sendHttpRequest as _sendCKBoxHttpRequest, convertMimeTypeToExtension as _ckBoxConvertMimeTypeToExtension, getContentTypeOfUrl as _getCKBoxContentTypeOfUrl, getFileExtension as _getCKBoxFileExtension } from './utils.js';
-export { createEditabilityChecker as _createCKBoxEditabilityChecker } from './ckboximageedit/utils.js';
-export { prepareImageAssetAttributes as _prepareCKBoxImageAssetAttributes } from './ckboxcommand.js';
-import './augmentation.js';

package/src/utils.js

@@ -1,188 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { decode } from 'blurhash';
-/**
- * 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.
- *
- * @internal
- */
-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: responsiveUrls.join(','),
-            sizes: `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`,
-            type: 'image/webp'
-        }];
-    return {
-        imageFallbackUrl: imageUrls.default,
-        imageSources
-    };
-}
-/**
- * Returns a workspace id to use for communication with the CKBox service.
- *
- * @param defaultWorkspaceId The default workspace to use taken from editor config.
- * @internal
- */
-export function getWorkspaceId(token, defaultWorkspaceId) {
-    const [, binaryTokenPayload] = token.value.split('.');
-    const payload = JSON.parse(atob(binaryTokenPayload));
-    const workspaces = payload.auth?.ckbox?.workspaces || [payload.aud];
-    if (!defaultWorkspaceId) {
-        return workspaces[0];
-    }
-    if (payload.auth?.ckbox?.role == 'superadmin' || workspaces.includes(defaultWorkspaceId)) {
-        return defaultWorkspaceId;
-    }
-    return null;
-}
-/**
- * Default resolution for decoding blurhash values.
- * Relatively small values must be used in order to ensure acceptable performance.
- */
-const BLUR_RESOLUTION = 32;
-/**
- * Generates an image data URL from its `blurhash` representation.
- *
- * @internal
- */
-export function blurHashToDataUrl(hash) {
-    if (!hash) {
-        return;
-    }
-    try {
-        const resolutionInPx = `${BLUR_RESOLUTION}px`;
-        const canvas = document.createElement('canvas');
-        canvas.setAttribute('width', resolutionInPx);
-        canvas.setAttribute('height', resolutionInPx);
-        const ctx = canvas.getContext('2d');
-        /* istanbul ignore next -- @preserve */
-        if (!ctx) {
-            return;
-        }
-        const imageData = ctx.createImageData(BLUR_RESOLUTION, BLUR_RESOLUTION);
-        const decoded = decode(hash, BLUR_RESOLUTION, BLUR_RESOLUTION);
-        imageData.data.set(decoded);
-        ctx.putImageData(imageData, 0, 0);
-        return canvas.toDataURL();
-    }
-    catch {
-        return undefined;
-    }
-}
-/**
- * Sends the HTTP request.
- *
- * @internal
- * @param options Configuration options
- * @param options.url The URL where the request will be sent.
- * @param options.signal The AbortSignal to abort the request when needed.
- * @param options.authorization The authorization token for the request.
- * @param options.method The HTTP method (default: 'GET').
- * @param options.data Additional data to send.
- * @param options.onUploadProgress A callback informing about the upload progress.
- */
-export function sendHttpRequest({ url, method = 'GET', data, onUploadProgress, signal, authorization }) {
-    const xhr = new XMLHttpRequest();
-    xhr.open(method, url.toString());
-    xhr.setRequestHeader('Authorization', authorization);
-    xhr.setRequestHeader('CKBox-Version', 'CKEditor 5');
-    xhr.responseType = 'json';
-    // The callback is attached to the `signal#abort` event.
-    const abortCallback = () => {
-        xhr.abort();
-    };
-    return new Promise((resolve, reject) => {
-        signal.throwIfAborted();
-        signal.addEventListener('abort', abortCallback);
-        xhr.addEventListener('loadstart', () => {
-            signal.addEventListener('abort', abortCallback);
-        });
-        xhr.addEventListener('loadend', () => {
-            signal.removeEventListener('abort', abortCallback);
-        });
-        xhr.addEventListener('error', () => {
-            reject();
-        });
-        xhr.addEventListener('abort', () => {
-            reject();
-        });
-        xhr.addEventListener('load', () => {
-            const response = xhr.response;
-            if (!response || response.statusCode >= 400) {
-                return reject(response && response.message);
-            }
-            resolve(response);
-        });
-        /* istanbul ignore else -- @preserve */
-        if (onUploadProgress) {
-            xhr.upload.addEventListener('progress', evt => {
-                onUploadProgress(evt);
-            });
-        }
-        // Send the request.
-        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'
-};
-/**
- * Returns an extension a typical file in the specified `mimeType` format would have.
- *
- * @internal
- */
-export function convertMimeTypeToExtension(mimeType) {
-    return MIME_TO_EXTENSION[mimeType];
-}
-/**
- * Tries to fetch the given `url` and returns 'content-type' of the response.
- *
- * @internal
- */
-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.
- *
- * @internal
- */
-export function getFileExtension(file) {
-    const fileName = file.name;
-    const extensionRegExp = /\.(?<ext>[^.]+)$/;
-    const match = fileName.match(extensionRegExp);
-    return match.groups.ext.toLowerCase();
-}

package/theme/ckboximageedit.css

@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-:root {
-	/* Based on default CKBox theme colors */
-	--ck-image-processing-highlight-color: hsl(220, 10%, 98%);
-	--ck-image-processing-background-color: hsl(220, 10%, 90%);
-}
-
-.ck.ck-editor__editable {
-	& .image {
-		&.image-processing {
-			position: relative;
-
-			&:before {
-				content: '';
-
-				position: absolute;
-				top: 0;
-				left: 0;
-				z-index: 1;
-
-				height: 100%;
-				width: 100%;
-
-				background: linear-gradient(
-					90deg,
-					var(--ck-image-processing-background-color),
-					var(--ck-image-processing-highlight-color),
-					var(--ck-image-processing-background-color)
-				);
-				background-size: 200% 100%;
-
-				animation: ck-image-processing-animation 2s linear infinite;
-			}
-
-			& img {
-				height: 100%;
-			}
-		}
-	}
-}
-
-@keyframes ck-image-processing-animation {
-	0% {
-		background-position: 200% 0;
-	}
-	100% {
-		background-position: -200% 0;
-	}
-}