/** * @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 uploadcare/uploadcareconfig * @publicApi */ import type { ArrayOrItem } from '@ckeditor/ckeditor5-utils'; import type { ConfigType } from '@uploadcare/file-uploader/web/file-uploader.min.js'; import type _default from '@uploadcare/file-uploader/locales/file-uploader/en.js'; /** * Locale definition type matching Uploadcare `LocaleDefinition` type. * A plain object with translation keys and values. */ export type UploadcareLocaleDefinition = typeof _default; /** * Locale definition resolver type matching Uploadcare `LocaleDefinitionResolver` type. * A function that returns a Promise with `LocaleDefinition`. */ export type UploadcareLocaleDefinitionResolver = () => Promise; /** * The configuration of the {@link module:uploadcare/uploadcare~Uploadcare Uploadcare feature}. * * The minimal configuration for the Uploadcare feature requires providing the * {@link module:uploadcare/uploadcareconfig~UploadcareConfig#pubkey `config.uploadcare.pubkey`}: * * ```ts * ClassicEditor * .create( { * uploadcare: { * pubkey: 'YOUR_PUBLIC_KEY' * } * } ) * .then( ... ) * .catch( ... ); * ``` * * However, you can also adjust the feature to fit your needs: * * ```ts * ClassicEditor * .create( { * uploadcare: { * uploader: { * sourceList: [ * 'local', * 'url', * 'gdrive' * ], * }, * pubkey: 'YOUR_PUBLIC_KEY' * } * } ) * .then( ... ) * .catch( ... ); * ``` * * See {@link module:core/editor/editorconfig~EditorConfig all editor options}. */ export interface UploadcareConfig { /** * The public key used for communication with the Uploadcare services. * * It will be used by both the File Uploader and Image Editor components. */ pubkey: string; /** * Configuration that will be passed to the File Uploader component. * * You can find detailed information in the [Uploadcare documentation](https://uploadcare.com/docs/file-uploader/options/). * * Please note that the source list is limited to the following values: * * 'local' * * 'url' * * 'dropbox' * * 'gdrive' * * 'facebook' * * 'gphotos' * * 'onedrive' * * Additionally, below options are not supported: * * `imgOnly` - It's `true` by default. * * `removeCopyright` - It's `true` by default. * * `localeName` - Custom translations can be provided via the `locale` config option. * * `confirmUpload` - It's `false` by default. * * `cameraMirror` - The `camera` source is not supported. * * `cameraCapture` - The `camera` source is not supported. * * `showEmptyList` - It's `false` by default. * * All other options documented in the Uploadcare documentation are supported. */ uploader?: UploadcareUploaderConfig; /** * Configuration for the Image Editor component. The component allows editing existing images in the CKEditor. * * You can find detailed information in the * [Uploadcare documentation](https://uploadcare.com/docs/file-uploader/image-editor/#configuration). * * Please note that the `cdn-url` and `uuid` attributes are automatically handled by the Uploadcare plugin and * are not supported in the config options. */ editor?: UploadcareEditorConfig; /** * Allows editing images that are not hosted in Uploadcare service. * * This configuration option should whitelist URL(s) of images that should be editable. * * The image is editable if this option is: * * a regular expression and it matches the image URL, or * * a custom function that returns `true` for the image URL, or * * `'origin'` literal and the image URL is from the same origin, or * * an array of the above and the image URL matches one of the array elements. * * Images hosted in Uploadcare are always editable. * * @default [] */ allowExternalImagesEditing?: ArrayOrItem boolean)>; /** * Locale configuration for Uploadcare components. * * The plugin automatically uses the editor's language (`editor.locale.contentLanguage`) as the locale name. * If the editor language is different from 'en', you need to provide translations for that language. * This property is used only to supply translations that will be used by Uploadcare components. * * For information on how to configure the editor's language, see the * [CKEditor 5 localization documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/ui/localization.html). * * Example with `UploadcareLocaleDefinition`: * ```ts * uploadcare: { * pubkey: 'YOUR_PUBLIC_KEY', * locale: { * 'locale-id': 'de', * 'social-source-lang': 'de', * 'upload-file': 'Datei hochladen', * 'file__one': 'Datei', * 'file__other': 'Dateien', * 'header-uploading': 'Lade {{count}} {{plural:file(count)}} hoch' * } * } * ``` * * Example with `UploadcareLocaleDefinitionResolver` (for CDN loading): * ```ts * uploadcare: { * pubkey: 'YOUR_PUBLIC_KEY', * locale: () => import('https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/locales/file-uploader/de.js') * .then( module => module.default ) * } * ``` * * For detailed information about locale definition format, available languages, and CDN translations, * see the [Uploadcare localization documentation](https://uploadcare.com/docs/file-uploader/localization/). * * When translations are provided, they will be automatically applied to the Uploadcare * components using `UC.defineLocale()` with the editor's language as the locale name. * * @default undefined */ locale?: UploadcareLocaleDefinition | UploadcareLocaleDefinitionResolver; } /** * Configuration interface for the Uploadcare File Uploader component. * * This interface extends the Uploadcare config, excluding certain keys that are either not supported or have been modified. * * You can find detailed information in the [Uploadcare documentation](https://uploadcare.com/docs/file-uploader/options/). */ export interface UploadcareUploaderConfig extends Partial> { /** * Comma-separated list of file sources. * * @default [ 'local', 'url' ] */ sourceList?: Array; } /** * Configuration for the Uploadcare Image Editor component. * * You can find detailed information in the * [Uploadcare documentation](https://uploadcare.com/docs/file-uploader/image-editor/#configuration). */ export interface UploadcareEditorConfig { 'crop-preset'?: string; tabs?: string; } /** * All not supported config options. */ export type UploadcareExcludedKeys = 'imgOnly' | 'removeCopyright' | 'localeName' | 'confirmUpload' | 'cameraMirror' | 'cameraCapture' | 'showEmptyList'; /** * Definition of all available upload sources. */ export type UploadcareSource = 'local' | 'url' | 'dropbox' | 'gdrive' | 'facebook' | 'gphotos' | 'onedrive'; /** * Image asset definition. * * The definition contains the unique `id`, asset `type`, `url` and `attributes`. */ export interface UploadcareAssetImageDefinition { /** * An unique asset id. */ id: string; /** * Asset type. */ type: 'image'; /** * Asset attributes. */ attributes: UploadcareAssetImageAttributesDefinition; } /** * Asset attributes definition for an image. * * The definition contains the `imageFallbackUrl`, an `imageSources` array with one image source definition object and the * `imageTextAlternative`. * * ```ts * { * imageFallbackUrl: 'https://example.com/assets/asset-id/images/1000.png', * imageSources: [ * { * sizes: '1000px', * srcset: * 'https://example.com/assets/asset-id/images/100.webp 100w,' + * 'https://example.com/assets/asset-id/images/200.webp 200w,' + * 'https://example.com/assets/asset-id/images/300.webp 300w,' + * 'https://example.com/assets/asset-id/images/400.webp 400w,' + * 'https://example.com/assets/asset-id/images/500.webp 500w,' + * 'https://example.com/assets/asset-id/images/600.webp 600w,' + * 'https://example.com/assets/asset-id/images/700.webp 700w,' + * 'https://example.com/assets/asset-id/images/800.webp 800w,' + * 'https://example.com/assets/asset-id/images/900.webp 900w,' + * 'https://example.com/assets/asset-id/images/1000.webp 1000w', * type: 'image/webp' * } * ] * } * ``` */ export interface UploadcareAssetImageAttributesDefinition { /** * A fallback URL for browsers that do not support the "webp" format. */ imageFallbackUrl: string; /** * An array containing one image source definition object. */ imageSources: Array<{ srcset: string; sizes: string; type: string; }>; /** * An alternative text for an image. */ imageTextAlternative?: string; /** * An image dimension (width and height). */ imageDimension: { width: number; height: number; }; }