@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

package/src/imageconfig.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};

package/src/imageinline.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageinline
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Widget } from 'ckeditor5/src/widget.js';
+import ImageTextAlternative from './imagetextalternative.js';
+import ImageInlineEditing from './image/imageinlineediting.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
+import '../theme/image.css';
+/**
+ * The image inline plugin.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * {@link module:image/image/imageinlineediting~ImageInlineEditing},
+ * * {@link module:image/imagetextalternative~ImageTextAlternative}.
+ *
+ * Usually, it is used in conjunction with other plugins from this package. See the {@glink api/image package page}
+ * for more information.
+ */
+export default class ImageInline extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageInlineEditing, typeof Widget, typeof ImageTextAlternative, typeof ImageInsertUI];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageInline";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+}

package/src/imageinline.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageinline
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Widget } from 'ckeditor5/src/widget.js';
+import ImageTextAlternative from './imagetextalternative.js';
+import ImageInlineEditing from './image/imageinlineediting.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
+import '../theme/image.css';
+/**
+ * The image inline plugin.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * {@link module:image/image/imageinlineediting~ImageInlineEditing},
+ * * {@link module:image/imagetextalternative~ImageTextAlternative}.
+ *
+ * Usually, it is used in conjunction with other plugins from this package. See the {@glink api/image package page}
+ * for more information.
+ */
+export default class ImageInline extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageInlineEditing, Widget, ImageTextAlternative, ImageInsertUI];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageInline';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+}

package/src/imageinsert/imageinsertui.d.ts

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright (c) 2003-2024, 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/imageinsertui
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import { type Observable } from 'ckeditor5/src/utils.js';
+import { type ButtonView, type DropdownView, type FocusableView, type MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import ImageUtils from '../imageutils.js';
+/**
+ * The image insert dropdown plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature}
+ * and {@glink features/images/images-inserting Insert images via source URL} documentation.
+ *
+ * Adds the `'insertImage'` dropdown to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
+ * and also the `imageInsert` dropdown as an alias for backward compatibility.
+ *
+ * Adds the `'menuBar:insertImage'` sub-menu to the {@link module:ui/componentfactory~ComponentFactory UI component factory}, which is
+ * by default added to the `'Insert'` menu.
+ */
+export default class ImageInsertUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageInsertUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @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;
+    /**
+     * Registers the insert image dropdown integration.
+     */
+    registerIntegration({ name, observable, buttonViewCreator, formViewCreator, menuBarButtonViewCreator, requiresForm }: {
+        name: string;
+        observable: (Observable & {
+            isEnabled: boolean;
+        }) | (() => Observable & {
+            isEnabled: boolean;
+        });
+        buttonViewCreator: (isOnlyOne: boolean) => ButtonView;
+        formViewCreator: (isOnlyOne: boolean) => FocusableView;
+        menuBarButtonViewCreator: (isOnlyOne: boolean) => MenuBarMenuListItemButtonView;
+        requiresForm?: boolean;
+    }): void;
+    /**
+     * Creates the toolbar component.
+     */
+    private _createToolbarComponent;
+    /**
+     * Creates the menu bar component.
+     */
+    private _createMenuBarComponent;
+    /**
+     * Validates the integrations list.
+     */
+    private _prepareIntegrations;
+}

package/src/imageinsert/imageinsertui.js

@@ -0,0 +1,217 @@
+/**
+ * @license Copyright (c) 2003-2024, 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/imageinsertui
+ */
+import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { logWarning } from 'ckeditor5/src/utils.js';
+import { createDropdown, MenuBarMenuListItemView, MenuBarMenuListView, MenuBarMenuView, SplitButtonView } from 'ckeditor5/src/ui.js';
+import ImageInsertFormView from './ui/imageinsertformview.js';
+import ImageUtils from '../imageutils.js';
+/**
+ * The image insert dropdown plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature}
+ * and {@glink features/images/images-inserting Insert images via source URL} documentation.
+ *
+ * Adds the `'insertImage'` dropdown to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
+ * and also the `imageInsert` dropdown as an alias for backward compatibility.
+ *
+ * Adds the `'menuBar:insertImage'` sub-menu to the {@link module:ui/componentfactory~ComponentFactory UI component factory}, which is
+ * by default added to the `'Insert'` menu.
+ */
+export default class ImageInsertUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageInsertUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @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 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);
+        const menuBarComponentCreator = (locale) => this._createMenuBarComponent(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);
+        editor.ui.componentFactory.add('menuBar:insertImage', menuBarComponentCreator);
+    }
+    /**
+     * Registers the insert image dropdown integration.
+     */
+    registerIntegration({ name, observable, buttonViewCreator, formViewCreator, menuBarButtonViewCreator, requiresForm = false }) {
+        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,
+            menuBarButtonViewCreator,
+            formViewCreator,
+            requiresForm
+        });
+    }
+    /**
+     * Creates the toolbar component.
+     */
+    _createToolbarComponent(locale) {
+        const editor = this.editor;
+        const t = locale.t;
+        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);
+            }
+            dropdownButton = firstIntegration.buttonViewCreator(true);
+        }
+        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 }) => typeof observable == 'function' ? 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;
+    }
+    /**
+     * Creates the menu bar component.
+     */
+    _createMenuBarComponent(locale) {
+        const t = locale.t;
+        const integrations = this._prepareIntegrations();
+        if (!integrations.length) {
+            return null;
+        }
+        let resultView;
+        const firstIntegration = integrations[0];
+        if (integrations.length == 1) {
+            resultView = firstIntegration.menuBarButtonViewCreator(true);
+        }
+        else {
+            resultView = new MenuBarMenuView(locale);
+            const listView = new MenuBarMenuListView(locale);
+            resultView.panelView.children.add(listView);
+            resultView.buttonView.set({
+                icon: icons.image,
+                label: t('Image')
+            });
+            for (const integration of integrations) {
+                const listItemView = new MenuBarMenuListItemView(locale, resultView);
+                const buttonView = integration.menuBarButtonViewCreator(false);
+                listItemView.children.add(buttonView);
+                listView.items.add(listItemView);
+            }
+        }
+        return resultView;
+    }
+    /**
+     * Validates the integrations list.
+     */
+    _prepareIntegrations() {
+        const editor = this.editor;
+        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;
+            }
+            result.push(this._integrations.get(item));
+        }
+        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 result;
+    }
+}

package/src/imageinsert/imageinsertviaurlui.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright (c) 2003-2024, 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.js';
+import { Dialog } from 'ckeditor5/src/ui.js';
+import ImageInsertUI from './imageinsertui.js';
+/**
+ * The image insert via URL plugin (UI part).
+ *
+ * The plugin introduces two UI components to the {@link module:ui/componentfactory~ComponentFactory UI component factory}:
+ *
+ * * the `'insertImageViaUrl'` toolbar button,
+ * * the `'menuBar:insertImageViaUrl'` menu bar component.
+ *
+ * It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component, which are default components
+ * through which inserting image via URL is available.
+ */
+export default class ImageInsertViaUrlUI extends Plugin {
+    private _imageInsertUI;
+    private _formView?;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageInsertViaUrlUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageInsertUI, typeof Dialog];
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    /**
+     * Creates the base for various kinds of the button component provided by this feature.
+     */
+    private _createInsertUrlButton;
+    /**
+     * Creates a simple toolbar button, with an icon and a tooltip.
+     */
+    private _createToolbarButton;
+    /**
+     * Creates a button for the dropdown view, with an icon, text and no tooltip.
+     */
+    private _createDropdownButton;
+    /**
+     * Creates a button for the menu bar.
+     */
+    private _createMenuBarButton;
+    /**
+     * Creates the form view used to submit the image URL.
+     */
+    private _createInsertUrlView;
+    /**
+     * Shows the insert image via URL form view in a modal.
+     */
+    private _showModal;
+    /**
+     * Executes appropriate command depending on selection and form value.
+     */
+    private _handleSave;
+}

package/src/imageinsert/imageinsertviaurlui.js

@@ -0,0 +1,174 @@
+/**
+ * @license Copyright (c) 2003-2024, 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.js';
+import { ButtonView, Dialog, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import ImageInsertUI from './imageinsertui.js';
+import ImageInsertUrlView from './ui/imageinserturlview.js';
+/**
+ * The image insert via URL plugin (UI part).
+ *
+ * The plugin introduces two UI components to the {@link module:ui/componentfactory~ComponentFactory UI component factory}:
+ *
+ * * the `'insertImageViaUrl'` toolbar button,
+ * * the `'menuBar:insertImageViaUrl'` menu bar component.
+ *
+ * It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component, which are default components
+ * through which inserting image via URL is available.
+ */
+export default class ImageInsertViaUrlUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageInsertViaUrlUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageInsertUI, Dialog];
+    }
+    init() {
+        this.editor.ui.componentFactory.add('insertImageViaUrl', () => this._createToolbarButton());
+        this.editor.ui.componentFactory.add('menuBar:insertImageViaUrl', () => this._createMenuBarButton('standalone'));
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        this._imageInsertUI = this.editor.plugins.get('ImageInsertUI');
+        this._imageInsertUI.registerIntegration({
+            name: 'url',
+            observable: () => this.editor.commands.get('insertImage'),
+            buttonViewCreator: () => this._createToolbarButton(),
+            formViewCreator: () => this._createDropdownButton(),
+            menuBarButtonViewCreator: isOnly => this._createMenuBarButton(isOnly ? 'insertOnly' : 'insertNested')
+        });
+    }
+    /**
+     * Creates the base for various kinds of the button component provided by this feature.
+     */
+    _createInsertUrlButton(ButtonClass) {
+        const button = new ButtonClass(this.editor.locale);
+        button.icon = icons.imageUrl;
+        button.on('execute', () => {
+            this._showModal();
+        });
+        return button;
+    }
+    /**
+     * Creates a simple toolbar button, with an icon and a tooltip.
+     */
+    _createToolbarButton() {
+        const t = this.editor.locale.t;
+        const button = this._createInsertUrlButton(ButtonView);
+        button.tooltip = true;
+        button.bind('label').to(this._imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ? t('Update image URL') : t('Insert image via URL'));
+        return button;
+    }
+    /**
+     * Creates a button for the dropdown view, with an icon, text and no tooltip.
+     */
+    _createDropdownButton() {
+        const t = this.editor.locale.t;
+        const button = this._createInsertUrlButton(ButtonView);
+        button.withText = true;
+        button.bind('label').to(this._imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ? t('Update image URL') : t('Insert via URL'));
+        return button;
+    }
+    /**
+     * Creates a button for the menu bar.
+     */
+    _createMenuBarButton(type) {
+        const t = this.editor.locale.t;
+        const button = this._createInsertUrlButton(MenuBarMenuListItemButtonView);
+        button.withText = true;
+        switch (type) {
+            case 'standalone':
+                button.label = t('Image via URL');
+                break;
+            case 'insertOnly':
+                button.label = t('Image');
+                break;
+            case 'insertNested':
+                button.label = t('Via URL');
+                break;
+        }
+        return button;
+    }
+    /**
+     * Creates the form view used to submit the image URL.
+     */
+    _createInsertUrlView() {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const replaceImageSourceCommand = editor.commands.get('replaceImageSource');
+        const insertImageCommand = editor.commands.get('insertImage');
+        const imageInsertUrlView = new ImageInsertUrlView(locale);
+        imageInsertUrlView.bind('isImageSelected').to(this._imageInsertUI);
+        imageInsertUrlView.bind('isEnabled').toMany([insertImageCommand, replaceImageSourceCommand], 'isEnabled', (...isEnabled) => (isEnabled.some(isCommandEnabled => isCommandEnabled)));
+        return imageInsertUrlView;
+    }
+    /**
+     * Shows the insert image via URL form view in a modal.
+     */
+    _showModal() {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const t = locale.t;
+        const dialog = editor.plugins.get('Dialog');
+        if (!this._formView) {
+            this._formView = this._createInsertUrlView();
+            this._formView.on('submit', () => this._handleSave());
+        }
+        const replaceImageSourceCommand = editor.commands.get('replaceImageSource');
+        this._formView.imageURLInputValue = replaceImageSourceCommand.value || '';
+        dialog.show({
+            id: 'insertImageViaUrl',
+            title: this._imageInsertUI.isImageSelected ?
+                t('Update image URL') :
+                t('Insert image via URL'),
+            isModal: true,
+            content: this._formView,
+            actionButtons: [
+                {
+                    label: t('Cancel'),
+                    withText: true,
+                    onExecute: () => dialog.hide()
+                },
+                {
+                    label: t('Accept'),
+                    class: 'ck-button-action',
+                    withText: true,
+                    onExecute: () => this._handleSave()
+                }
+            ]
+        });
+    }
+    /**
+     * Executes appropriate command depending on selection and form value.
+     */
+    _handleSave() {
+        const replaceImageSourceCommand = this.editor.commands.get('replaceImageSource');
+        // If an image element is currently selected, we want to replace its source attribute (instead of inserting a new image).
+        // We detect if an image is selected by checking `replaceImageSource` command state.
+        if (replaceImageSourceCommand.isEnabled) {
+            this.editor.execute('replaceImageSource', { source: this._formView.imageURLInputValue });
+        }
+        else {
+            this.editor.execute('insertImage', { source: this._formView.imageURLInputValue });
+        }
+        this.editor.plugins.get('Dialog').hide();
+    }
+}