@ckeditor/ckeditor5-ckbox 34.2.0

package/src/ckboxuploadadapter.js

@@ -0,0 +1,395 @@
+/**
+ * @license Copyright (c) 2003-2022, 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 */
+
+/**
+ * @module ckbox/ckboxuploadadapter
+ */
+
+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';
+
+/**
+ * A plugin that enables file uploads in CKEditor 5 using the CKBox server–side connector.
+ * See the {@glink features/images/image-upload/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.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class CKBoxUploadAdapter extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ 'ImageUploadEditing', 'ImageUploadProgress', FileRepository, CKBoxEditing ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'CKBoxUploadAdapter';
+	}
+
+	/**
+	 * @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 ckboxEditing = editor.plugins.get( CKBoxEditing );
+
+		fileRepository.createUploadAdapter = loader => {
+			return new Adapter( loader, ckboxEditing.getToken(), editor );
+		};
+
+		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.
+ *
+ * @private
+ * @implements module:upload/filerepository~UploadAdapter
+ */
+class Adapter {
+	/**
+	 * Creates a new adapter instance.
+	 *
+	 * @param {module:upload/filerepository~FileLoader} loader
+	 * @param {module:cloud-services/token~Token} token
+	 * @param {module:core/editor/editor~Editor} editor
+	 */
+	constructor( loader, token, editor ) {
+		/**
+		 * FileLoader instance to use during the upload.
+		 *
+		 * @member {module:upload/filerepository~FileLoader} #loader
+		 */
+		this.loader = loader;
+
+		/**
+		 * CKEditor Cloud Services access token.
+		 *
+		 * @member {module:cloud-services/token~Token} #token
+		 */
+		this.token = token;
+
+		/**
+		 * The editor instance.
+		 *
+		 * @member {module:core/editor/editor~Editor} #editor
+		 */
+		this.editor = editor;
+
+		/**
+		 * The abort controller for aborting asynchronous processes.
+		 *
+		 * @member {AbortController} #controller
+		 */
+		this.controller = new AbortController();
+
+		/**
+		 * The base URL where all requests should be sent.
+		 *
+		 * @member {String} #serviceOrigin
+		 */
+		this.serviceOrigin = editor.config.get( 'ckbox.serviceOrigin' );
+
+		/**
+		 * The base URL from where all assets are served.
+		 *
+		 * @member {String} #assetsOrigin
+		 */
+		this.assetsOrigin = editor.config.get( 'ckbox.assetsOrigin' );
+	}
+
+	/**
+	 * 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.
+	 *
+	 * @param {Number} [offset=0]
+	 * @returns {Promise.<Array>}
+	 */
+	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() );
+
+		return this._sendHttpRequest( { url: categoryUrl } )
+			.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.
+	 *
+	 * @param {File} file
+	 * @return {Promise.<String|null>}
+	 */
+	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 ].includes( 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.includes( extension ) );
+
+		if ( !category ) {
+			return null;
+		}
+
+		return category.id;
+	}
+
+	/**
+	 * Starts the upload process.
+	 *
+	 * @see module:upload/filerepository~UploadAdapter#upload
+	 * @returns {Promise.<Object>}
+	 */
+	async upload() {
+		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 uploadUrl = new URL( 'assets', this.serviceOrigin );
+		const formData = new FormData();
+
+		formData.append( 'categoryId', category );
+		formData.append( 'file', file );
+
+		const requestConfig = {
+			method: 'POST',
+			url: uploadUrl,
+			data: formData,
+			onUploadProgress: evt => {
+				/* istanbul ignore else */
+				if ( evt.lengthComputable ) {
+					this.loader.uploadTotal = evt.total;
+					this.loader.uploaded = evt.loaded;
+				}
+			}
+		};
+
+		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
+				} );
+
+				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();
+	}
+
+	/**
+	 * Sends the HTTP request.
+	 *
+	 * @protected
+	 * @param {URL} config.url the URL where the request will be sent.
+	 * @param {'GET'|'POST'} [config.method='GET'] The HTTP method.
+	 * @param {FormData|null} [config.data] Additional data to send.
+	 * @param {Function} [config.onUploadProgress] A callback informing about the upload progress.
+	 * @returns {Promise}
+	 */
+	_sendHttpRequest( config ) {
+		const { url, data, onUploadProgress } = config;
+		const method = config.method || 'GET';
+		const signal = this.controller.signal;
+
+		const xhr = new XMLHttpRequest();
+		xhr.open( method, url.toString(), true );
+		xhr.setRequestHeader( 'Authorization', this.token.value );
+		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.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', async () => {
+				const response = xhr.response;
+
+				if ( !response || response.statusCode >= 400 ) {
+					return reject( response && response.message );
+				}
+
+				return resolve( response );
+			} );
+
+			/* istanbul ignore else */
+			if ( onUploadProgress ) {
+				xhr.upload.addEventListener( 'progress', evt => {
+					onUploadProgress( evt );
+				} );
+			}
+
+			// Send the request.
+			xhr.send( data );
+		} );
+	}
+
+	/**
+	 * Resolves a promise with a number representing the width of a given image file.
+	 *
+	 * @protected
+	 * @returns {Promise.<Number>}
+	 */
+	_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.
+//
+// @private
+// @param {String} value
+// @returns {String}
+function getFileExtension( value ) {
+	const extensionRegExp = /\.(?<ext>[^.]+)$/;
+	const match = value.match( extensionRegExp );
+
+	return match.groups.ext;
+}

package/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ckbox
+ */
+
+export { default as CKBox } from './ckbox';
+export { default as CKBoxEditing } from './ckboxediting';
+export { default as CKBoxUI } from './ckboxui';

package/src/utils.js

@@ -0,0 +1,134 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global atob, URL */
+
+/**
+ * @module ckbox/utils
+ */
+
+const IMAGE_BREAKPOINT_MAX_WIDTH = 4000;
+const IMAGE_BREAKPOINT_PIXELS_THRESHOLD = 80;
+const IMAGE_BREAKPOINT_PERCENTAGE_THRESHOLD = 10;
+
+/**
+ * Creates URLs for the image:
+ * - responsive URLs for the "webp" image format,
+ * - one fallback URL for browsers that do not support the "webp" format.
+ *
+ * @param {Object} data
+ * @param {module:cloud-services/token~Token} data.token
+ * @param {String} data.id
+ * @param {String} data.origin
+ * @param {Number} data.width
+ * @param {String} data.extension
+ * @returns {Object}
+ */
+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.
+	const imageSources = [ {
+		srcset: imageResponsiveUrls.join( ',' ),
+		sizes: `(max-width: ${ width }px) 100vw, ${ width }px`,
+		type: 'image/webp'
+	} ];
+
+	return {
+		imageFallbackUrl,
+		imageSources
+	};
+}
+
+/**
+ * Returns an environment id from a token used for communication with the CKBox service.
+ *
+ * @param {module:cloud-services/token~Token} token
+ * @returns {String}
+ */
+export function getEnvironmentId( token ) {
+	const [ , binaryTokenPayload ] = token.value.split( '.' );
+	const payload = JSON.parse( atob( binaryTokenPayload ) );
+
+	return payload.aud;
+}
+
+// Calculates the image breakpoints for 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.
+//
+// @private
+// @param {Number} width
+// @returns {Array.<Number>}
+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 );
+	}
+
+	return imageBreakpoints;
+}
+
+// Returns the image extension for the fallback URL.
+//
+// @private
+// @param {String} extension
+// @returns {String}
+function getImageFallbackExtension( extension ) {
+	if ( extension === 'bmp' || extension === 'tiff' || extension === 'jpg' ) {
+		return 'jpeg';
+	}
+
+	return extension;
+}
+
+// Creates the URL for the given image.
+//
+// @private
+// @param {Object} options
+// @param {String} options.environmentId
+// @param {String} options.id
+// @param {String} options.origin
+// @param {Number} options.width
+// @param {String} options.extension
+// @returns {String}
+function getResponsiveImageUrl( { environmentId, id, origin, width, extension } ) {
+	const endpoint = `${ environmentId }/assets/${ id }/images/${ width }.${ extension }`;
+
+	return new URL( endpoint, origin ).toString();
+}

package/theme/icons/browse-files.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.627 16.5zm5.873-.196zm0-7.001V8h-13v8.5h4.341c.191.54.457 1.044.785 1.5H2a1.5 1.5 0 0 1-1.5-1.5v-13A1.5 1.5 0 0 1 2 2h4.5a1.5 1.5 0 0 1 1.06.44L9.122 4H16a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 19 8v2.531a6.027 6.027 0 0 0-1.5-1.228zM16 6.5v-1H8.5l-2-2H2v13h1V8a1.5 1.5 0 0 1 1.5-1.5H16z"/><path d="M14.5 19.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10zM15 14v-2h-1v2h-2v1h2v2h1v-2h2v-1h-2z"/></svg>