@ckeditor/ckeditor5-image 40.1.0 → 40.2.0

package/src/imageconfig.d.ts

@@ -448,30 +448,26 @@ export interface ImageInsertConfig {
      * The image insert panel view configuration contains a list of {@link module:image/imageinsert~ImageInsert} integrations.
      *
      * The option accepts string tokens.
-     * * for predefined integrations, we have two special strings: `insertImageViaUrl` and `openCKFinder`.
-     * The former adds the **Insert image via URL** feature, while the latter adds the built-in **CKFinder** integration.
-     * * for custom integrations, each string should be a name of the component registered in the
-     * {@link module:ui/componentfactory~ComponentFactory component factory}.
-     * If you have a plugin `PluginX` that registers `pluginXButton` component, then the integration token
-     * in that case should be `pluginXButton`.
+     * * for predefined integrations, we have 3 special strings: `upload`, `url`, and `assetManager`.
+     * * for custom integrations, each string should be a name of the integration registered by the
+     * {@link module:image/imageinsert/imageinsertui~ImageInsertUI#registerIntegration `ImageInsertUI#registerIntegration()`}.
      *
      * ```ts
-     * // Add `insertImageViaUrl`, `openCKFinder` and custom `pluginXButton` integrations.
+     * // Add `upload`, `assetManager` and `url` integrations.
      * const imageInsertConfig = {
      * 	insert: {
      * 		integrations: [
-     * 			'insertImageViaUrl',
-     * 			'openCKFinder',
-     * 			'pluginXButton'
+     * 			'upload',
+     * 			'assetManager',
+     * 			'url'
      * 		]
      * 	}
      * };
      * ```
      *
-     * @internal
-     * @default [ 'insertImageViaUrl' ]
+     * @default [ 'upload', 'assetManager', 'url' ]
      */
-    integrations: Array<string>;
+    integrations?: Array<string>;
     /**
      * This option allows to override the image type used by the {@link module:image/image/insertimagecommand~InsertImageCommand}
      * when the user inserts new images into the editor content. By default, all images inserted into the editor will be block

package/src/imageinline.d.ts

@@ -9,6 +9,7 @@ import { Plugin } from 'ckeditor5/src/core';
 import { Widget } from 'ckeditor5/src/widget';
 import ImageTextAlternative from './imagetextalternative';
 import ImageInlineEditing from './image/imageinlineediting';
+import ImageInsertUI from './imageinsert/imageinsertui';
 import '../theme/image.css';
 /**
  * The image inline plugin.
@@ -25,7 +26,7 @@ export default class ImageInline extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof ImageInlineEditing, typeof Widget, typeof ImageTextAlternative];
+    static get requires(): readonly [typeof ImageInlineEditing, typeof Widget, typeof ImageTextAlternative, typeof ImageInsertUI];
     /**
      * @inheritDoc
      */

package/src/imageinline.js

@@ -9,6 +9,7 @@ import { Plugin } from 'ckeditor5/src/core';
 import { Widget } from 'ckeditor5/src/widget';
 import ImageTextAlternative from './imagetextalternative';
 import ImageInlineEditing from './image/imageinlineediting';
+import ImageInsertUI from './imageinsert/imageinsertui';
 import '../theme/image.css';
 /**
  * The image inline plugin.
@@ -26,7 +27,7 @@ export default class ImageInline extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [ImageInlineEditing, Widget, ImageTextAlternative];
+        return [ImageInlineEditing, Widget, ImageTextAlternative, ImageInsertUI];
     }
     /**
      * @inheritDoc

package/src/imageinsert/imageinsertui.d.ts

@@ -5,8 +5,10 @@
 /**
  * @module image/imageinsert/imageinsertui
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { type DropdownView } from 'ckeditor5/src/ui';
+import { Plugin, type Editor } from 'ckeditor5/src/core';
+import { type Observable } from 'ckeditor5/src/utils';
+import { type ButtonView, type DropdownView, type FocusableView } from 'ckeditor5/src/ui';
+import ImageUtils from '../imageutils';
 /**
  * The image insert dropdown plugin.
  *
@@ -21,24 +23,50 @@ export default class ImageInsertUI extends Plugin {
      * @inheritDoc
      */
     static get pluginName(): "ImageInsertUI";
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils];
     /**
      * The dropdown view responsible for displaying the image insert UI.
      */
     dropdownView?: DropdownView;
+    /**
+     * Observable property used to alter labels while some image is selected and when it is not.
+     *
+     * @observable
+     */
+    isImageSelected: boolean;
+    /**
+     * Registered integrations map.
+     */
+    private _integrations;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
     /**
      * @inheritDoc
      */
     init(): void;
     /**
-     * Creates the dropdown view.
-     *
-     * @param locale The localization services instance.
+     * Registers the insert image dropdown integration.
      */
-    private _createDropdownView;
+    registerIntegration({ name, observable, buttonViewCreator, formViewCreator, requiresForm }: {
+        name: string;
+        observable: Observable & {
+            isEnabled: boolean;
+        };
+        buttonViewCreator: (isOnlyOne: boolean) => ButtonView;
+        formViewCreator: (isOnlyOne: boolean) => FocusableView;
+        requiresForm?: boolean;
+    }): void;
     /**
-     * Sets up the dropdown view.
-     *
-     * @param command An uploadImage or insertImage command.
+     * Creates the toolbar component.
+     */
+    private _createToolbarComponent;
+    /**
+     * Validates the integrations list.
      */
-    private _setUpDropdown;
+    private _prepareIntegrations;
 }

package/src/imageinsert/imageinsertui.js

@@ -5,10 +5,11 @@
 /**
  * @module image/imageinsert/imageinsertui
  */
-import { Plugin, icons } from 'ckeditor5/src/core';
-import { SplitButtonView, createDropdown } from 'ckeditor5/src/ui';
-import ImageInsertPanelView from './ui/imageinsertpanelview';
-import { prepareIntegrations } from './utils';
+import { Plugin } from 'ckeditor5/src/core';
+import { logWarning } from 'ckeditor5/src/utils';
+import { createDropdown, SplitButtonView } from 'ckeditor5/src/ui';
+import ImageInsertFormView from './ui/imageinsertformview';
+import ImageUtils from '../imageutils';
 /**
  * The image insert dropdown plugin.
  *
@@ -25,117 +26,149 @@ export default class ImageInsertUI extends Plugin {
     static get pluginName() {
         return 'ImageInsertUI';
     }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        /**
+         * Registered integrations map.
+         */
+        this._integrations = new Map();
+        editor.config.define('image.insert.integrations', [
+            'upload',
+            'assetManager',
+            'url'
+        ]);
+    }
     /**
      * @inheritDoc
      */
     init() {
         const editor = this.editor;
-        const componentCreator = (locale) => {
-            return this._createDropdownView(locale);
-        };
+        const selection = editor.model.document.selection;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        this.set('isImageSelected', false);
+        this.listenTo(editor.model.document, 'change', () => {
+            this.isImageSelected = imageUtils.isImage(selection.getSelectedElement());
+        });
+        const componentCreator = (locale) => this._createToolbarComponent(locale);
         // Register `insertImage` dropdown and add `imageInsert` dropdown as an alias for backward compatibility.
         editor.ui.componentFactory.add('insertImage', componentCreator);
         editor.ui.componentFactory.add('imageInsert', componentCreator);
     }
     /**
-     * Creates the dropdown view.
-     *
-     * @param locale The localization services instance.
+     * Registers the insert image dropdown integration.
+     */
+    registerIntegration({ name, observable, buttonViewCreator, formViewCreator, requiresForm }) {
+        if (this._integrations.has(name)) {
+            /**
+             * There are two insert-image integrations registered with the same name.
+             *
+             * Make sure that you do not load multiple asset manager plugins.
+             *
+             * @error image-insert-integration-exists
+             */
+            logWarning('image-insert-integration-exists', { name });
+        }
+        this._integrations.set(name, {
+            observable,
+            buttonViewCreator,
+            formViewCreator,
+            requiresForm: !!requiresForm
+        });
+    }
+    /**
+     * Creates the toolbar component.
      */
-    _createDropdownView(locale) {
+    _createToolbarComponent(locale) {
         const editor = this.editor;
         const t = locale.t;
-        const uploadImageCommand = editor.commands.get('uploadImage');
-        const insertImageCommand = editor.commands.get('insertImage');
-        this.dropdownView = createDropdown(locale, uploadImageCommand ? SplitButtonView : undefined);
-        const buttonView = this.dropdownView.buttonView;
-        const panelView = this.dropdownView.panelView;
-        buttonView.set({
-            label: t('Insert image'),
-            icon: icons.image,
-            tooltip: true
-        });
-        panelView.extendTemplate({
-            attributes: {
-                class: 'ck-image-insert__panel'
+        const integrations = this._prepareIntegrations();
+        if (!integrations.length) {
+            return null;
+        }
+        let dropdownButton;
+        const firstIntegration = integrations[0];
+        if (integrations.length == 1) {
+            // Do not use dropdown for a single integration button (integration that does not require form view).
+            if (!firstIntegration.requiresForm) {
+                return firstIntegration.buttonViewCreator(true);
             }
-        });
-        if (uploadImageCommand) {
-            const splitButtonView = this.dropdownView.buttonView;
-            // We are injecting custom button replacement to readonly field.
-            splitButtonView.actionView = editor.ui.componentFactory.create('uploadImage');
-            // After we replaced action button with `uploadImage` component,
-            // we have lost a proper styling and some minor visual quirks have appeared.
-            // Brining back original split button classes helps fix the button styling
-            // See https://github.com/ckeditor/ckeditor5/issues/7986.
-            splitButtonView.actionView.extendTemplate({
-                attributes: {
-                    class: 'ck ck-button ck-splitbutton__action'
-                }
-            });
+            dropdownButton = firstIntegration.buttonViewCreator(true);
         }
-        return this._setUpDropdown(uploadImageCommand || insertImageCommand);
+        else {
+            const actionButton = firstIntegration.buttonViewCreator(false);
+            dropdownButton = new SplitButtonView(locale, actionButton);
+            dropdownButton.tooltip = true;
+            dropdownButton.bind('label').to(this, 'isImageSelected', isImageSelected => isImageSelected ?
+                t('Replace image') :
+                t('Insert image'));
+        }
+        const dropdownView = this.dropdownView = createDropdown(locale, dropdownButton);
+        const observables = integrations.map(({ observable }) => observable);
+        dropdownView.bind('isEnabled').toMany(observables, 'isEnabled', (...isEnabled) => (isEnabled.some(isEnabled => isEnabled)));
+        dropdownView.once('change:isOpen', () => {
+            const integrationViews = integrations.map(({ formViewCreator }) => formViewCreator(integrations.length == 1));
+            const imageInsertFormView = new ImageInsertFormView(editor.locale, integrationViews);
+            dropdownView.panelView.children.add(imageInsertFormView);
+        });
+        return dropdownView;
     }
     /**
-     * Sets up the dropdown view.
-     *
-     * @param command An uploadImage or insertImage command.
+     * Validates the integrations list.
      */
-    _setUpDropdown(command) {
+    _prepareIntegrations() {
         const editor = this.editor;
-        const t = editor.t;
-        const dropdownView = this.dropdownView;
-        const panelView = dropdownView.panelView;
-        const imageUtils = this.editor.plugins.get('ImageUtils');
-        const replaceImageSourceCommand = editor.commands.get('replaceImageSource');
-        let imageInsertView;
-        dropdownView.bind('isEnabled').to(command);
-        dropdownView.once('change:isOpen', () => {
-            imageInsertView = new ImageInsertPanelView(editor.locale, prepareIntegrations(editor));
-            imageInsertView.delegate('submit', 'cancel').to(dropdownView);
-            panelView.children.add(imageInsertView);
-        });
-        dropdownView.on('change:isOpen', () => {
-            const selectedElement = editor.model.document.selection.getSelectedElement();
-            const insertButtonView = imageInsertView.insertButtonView;
-            const insertImageViaUrlForm = imageInsertView.getIntegration('insertImageViaUrl');
-            if (dropdownView.isOpen) {
-                if (imageUtils.isImage(selectedElement)) {
-                    imageInsertView.imageURLInputValue = replaceImageSourceCommand.value;
-                    insertButtonView.label = t('Update');
-                    insertImageViaUrlForm.label = t('Update image URL');
-                }
-                else {
-                    imageInsertView.imageURLInputValue = '';
-                    insertButtonView.label = t('Insert');
-                    insertImageViaUrlForm.label = t('Insert image via URL');
+        const items = editor.config.get('image.insert.integrations');
+        const result = [];
+        if (!items.length) {
+            /**
+             * The insert image feature requires a list of integrations to be provided in the editor configuration.
+             *
+             * The default list of integrations is `upload`, `assetManager`, `url`. Those integrations are included
+             * in the insert image dropdown if the given feature plugin is loaded. You should omit the `integrations`
+             * configuration key to use the default set or provide a selected list of integrations that should be used.
+             *
+             * @error image-insert-integrations-not-specified
+             */
+            logWarning('image-insert-integrations-not-specified');
+            return result;
+        }
+        for (const item of items) {
+            if (!this._integrations.has(item)) {
+                if (!['upload', 'assetManager', 'url'].includes(item)) {
+                    /**
+                     * The specified insert image integration name is unknown or the providing plugin is not loaded in the editor.
+                     *
+                     * @error image-insert-unknown-integration
+                     */
+                    logWarning('image-insert-unknown-integration', { item });
                 }
+                continue;
             }
-            // Note: Use the low priority to make sure the following listener starts working after the
-            // default action of the drop-down is executed (i.e. the panel showed up). Otherwise, the
-            // invisible form/input cannot be focused/selected.
-        }, { priority: 'low' });
-        this.delegate('cancel').to(dropdownView);
-        dropdownView.on('submit', () => {
-            closePanel();
-            onSubmit();
-        });
-        dropdownView.on('cancel', () => {
-            closePanel();
-        });
-        function onSubmit() {
-            const selectedElement = editor.model.document.selection.getSelectedElement();
-            if (imageUtils.isImage(selectedElement)) {
-                editor.execute('replaceImageSource', { source: imageInsertView.imageURLInputValue });
-            }
-            else {
-                editor.execute('insertImage', { source: imageInsertView.imageURLInputValue });
-            }
+            result.push(this._integrations.get(item));
         }
-        function closePanel() {
-            editor.editing.view.focus();
-            dropdownView.isOpen = false;
+        if (!result.length) {
+            /**
+             * The image insert feature requires integrations to be registered by separate features.
+             *
+             * The `insertImage` toolbar button requires integrations to be registered by other features.
+             * For example {@link module:image/imageupload~ImageUpload ImageUpload},
+             * {@link module:image/imageinsert~ImageInsert ImageInsert},
+             * {@link module:image/imageinsertviaurl~ImageInsertViaUrl ImageInsertViaUrl},
+             * {@link module:ckbox/ckbox~CKBox CKBox}
+             *
+             * @error image-insert-integrations-not-registered
+             */
+            logWarning('image-insert-integrations-not-registered');
         }
-        return dropdownView;
+        return result;
     }
 }

package/src/imageinsert/imageinsertviaurlui.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @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
+ */
+/**
+ * @module image/imageinsert/imageinsertviaurlui
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageInsertUI from './imageinsertui';
+/**
+ * The image insert via URL plugin (UI part).
+ *
+ * For a detailed overview, check the {@glink features/images/images-inserting
+ * Insert images via source URL} documentation.
+ *
+ * This plugin registers the {@link module:image/imageinsert/imageinsertui~ImageInsertUI} integration for `url`.
+ */
+export default class ImageInsertViaUrlUI extends Plugin {
+    private _imageInsertUI;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageInsertViaUrlUI";
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageInsertUI];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Creates the view displayed in the dropdown.
+     */
+    private _createInsertUrlView;
+    /**
+     * Creates the toolbar button.
+     */
+    private _createInsertUrlButton;
+    /**
+     * Closes the dropdown.
+     */
+    private _closePanel;
+}

package/src/imageinsert/imageinsertviaurlui.js

@@ -0,0 +1,122 @@
+/**
+ * @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
+ */
+/**
+ * @module image/imageinsert/imageinsertviaurlui
+ */
+import { icons, Plugin } from 'ckeditor5/src/core';
+import { ButtonView, CollapsibleView, DropdownButtonView } from 'ckeditor5/src/ui';
+import ImageInsertUI from './imageinsertui';
+import ImageInsertUrlView from './ui/imageinserturlview';
+/**
+ * The image insert via URL plugin (UI part).
+ *
+ * For a detailed overview, check the {@glink features/images/images-inserting
+ * Insert images via source URL} documentation.
+ *
+ * This plugin registers the {@link module:image/imageinsert/imageinsertui~ImageInsertUI} integration for `url`.
+ */
+export default class ImageInsertViaUrlUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageInsertViaUrlUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageInsertUI];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        this._imageInsertUI = this.editor.plugins.get('ImageInsertUI');
+        const insertImageCommand = this.editor.commands.get('insertImage');
+        this._imageInsertUI.registerIntegration({
+            name: 'url',
+            observable: insertImageCommand,
+            requiresForm: true,
+            buttonViewCreator: isOnlyOne => this._createInsertUrlButton(isOnlyOne),
+            formViewCreator: isOnlyOne => this._createInsertUrlView(isOnlyOne)
+        });
+    }
+    /**
+     * Creates the view displayed in the dropdown.
+     */
+    _createInsertUrlView(isOnlyOne) {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const t = locale.t;
+        const replaceImageSourceCommand = editor.commands.get('replaceImageSource');
+        const insertImageCommand = editor.commands.get('insertImage');
+        const imageInsertUrlView = new ImageInsertUrlView(locale);
+        const collapsibleView = isOnlyOne ? null : new CollapsibleView(locale, [imageInsertUrlView]);
+        imageInsertUrlView.bind('isImageSelected').to(this._imageInsertUI);
+        imageInsertUrlView.bind('isEnabled').toMany([insertImageCommand, replaceImageSourceCommand], 'isEnabled', (...isEnabled) => (isEnabled.some(isCommandEnabled => isCommandEnabled)));
+        // Set initial value because integrations are created on first dropdown open.
+        imageInsertUrlView.imageURLInputValue = replaceImageSourceCommand.value || '';
+        this._imageInsertUI.dropdownView.on('change:isOpen', () => {
+            if (this._imageInsertUI.dropdownView.isOpen) {
+                // Make sure that each time the panel shows up, the URL field remains in sync with the value of
+                // the command. If the user typed in the input, then canceled and re-opened it without changing
+                // the value of the media command (e.g. because they didn't change the selection), they would see
+                // the old value instead of the actual value of the command.
+                imageInsertUrlView.imageURLInputValue = replaceImageSourceCommand.value || '';
+                if (collapsibleView) {
+                    collapsibleView.isCollapsed = true;
+                }
+            }
+            // Note: Use the low priority to make sure the following listener starts working after the
+            // default action of the drop-down is executed (i.e. the panel showed up). Otherwise, the
+            // invisible form/input cannot be focused/selected.
+        }, { priority: 'low' });
+        imageInsertUrlView.on('submit', () => {
+            if (replaceImageSourceCommand.isEnabled) {
+                editor.execute('replaceImageSource', { source: imageInsertUrlView.imageURLInputValue });
+            }
+            else {
+                editor.execute('insertImage', { source: imageInsertUrlView.imageURLInputValue });
+            }
+            this._closePanel();
+        });
+        imageInsertUrlView.on('cancel', () => this._closePanel());
+        if (collapsibleView) {
+            collapsibleView.set({
+                isCollapsed: true
+            });
+            collapsibleView.bind('label').to(this._imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ?
+                t('Update image URL') :
+                t('Insert image via URL'));
+            return collapsibleView;
+        }
+        return imageInsertUrlView;
+    }
+    /**
+     * Creates the toolbar button.
+     */
+    _createInsertUrlButton(isOnlyOne) {
+        const ButtonClass = isOnlyOne ? DropdownButtonView : ButtonView;
+        const editor = this.editor;
+        const button = new ButtonClass(editor.locale);
+        const t = editor.locale.t;
+        button.set({
+            icon: icons.imageUrl,
+            tooltip: true
+        });
+        button.bind('label').to(this._imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ?
+            t('Update image URL') :
+            t('Insert image via URL'));
+        return button;
+    }
+    /**
+     * Closes the dropdown.
+     */
+    _closePanel() {
+        this.editor.editing.view.focus();
+        this._imageInsertUI.dropdownView.isOpen = false;
+    }
+}

package/src/imageinsert/ui/imageinsertformview.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @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
+ */
+/**
+ * @module image/imageinsert/ui/imageinsertformview
+ */
+import { View, ViewCollection, FocusCycler } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
+import '../../../theme/imageinsert.css';
+/**
+ * The view displayed in the insert image dropdown.
+ *
+ * See {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+ */
+export default class ImageInsertFormView extends View {
+    /**
+     * Tracks information about DOM focus in the form.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    protected readonly _focusables: ViewCollection;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    protected readonly _focusCycler: FocusCycler;
+    /**
+     * A collection of the defined integrations for inserting the images.
+     */
+    private readonly children;
+    /**
+     * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+     *
+     * @param locale The localization services instance.
+     * @param integrations An integrations object that contains components (or tokens for components) to be shown in the panel view.
+     */
+    constructor(locale: Locale, integrations?: Array<View>);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Focuses the first {@link #_focusables focusable} in the form.
+     */
+    focus(): void;
+}