@ckeditor/ckeditor5-image 39.0.2 → 40.0.0

package/src/imageconfig.js

@@ -1,5 +1,5 @@
-/**
- * @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
- */
-export {};
+/**
+ * @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
+ */
+export {};

package/src/imageinline.d.ts

@@ -1,33 +1,33 @@
-/**
- * @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/imageinline
- */
-import { Plugin } from 'ckeditor5/src/core';
-import { Widget } from 'ckeditor5/src/widget';
-import ImageTextAlternative from './imagetextalternative';
-import ImageInlineEditing from './image/imageinlineediting';
-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];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "ImageInline";
-}
+/**
+ * @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/imageinline
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import { Widget } from 'ckeditor5/src/widget';
+import ImageTextAlternative from './imagetextalternative';
+import ImageInlineEditing from './image/imageinlineediting';
+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];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageInline";
+}

package/src/imageinline.js

@@ -1,37 +1,37 @@
-/**
- * @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/imageinline
- */
-import { Plugin } from 'ckeditor5/src/core';
-import { Widget } from 'ckeditor5/src/widget';
-import ImageTextAlternative from './imagetextalternative';
-import ImageInlineEditing from './image/imageinlineediting';
-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];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageInline';
-    }
-}
+/**
+ * @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/imageinline
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import { Widget } from 'ckeditor5/src/widget';
+import ImageTextAlternative from './imagetextalternative';
+import ImageInlineEditing from './image/imageinlineediting';
+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];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageInline';
+    }
+}

package/src/imageinsert/imageinsertui.d.ts

@@ -1,44 +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/imageinsertui
- */
-import { Plugin } from 'ckeditor5/src/core';
-import { type DropdownView } from 'ckeditor5/src/ui';
-/**
- * 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.
- */
-export default class ImageInsertUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "ImageInsertUI";
-    /**
-     * The dropdown view responsible for displaying the image insert UI.
-     */
-    dropdownView?: DropdownView;
-    /**
-     * @inheritDoc
-     */
-    init(): void;
-    /**
-     * Creates the dropdown view.
-     *
-     * @param locale The localization services instance.
-     */
-    private _createDropdownView;
-    /**
-     * Sets up the dropdown view.
-     *
-     * @param command An uploadImage or insertImage command.
-     */
-    private _setUpDropdown;
-}
+/**
+ * @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/imageinsertui
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import { type DropdownView } from 'ckeditor5/src/ui';
+/**
+ * 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.
+ */
+export default class ImageInsertUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageInsertUI";
+    /**
+     * The dropdown view responsible for displaying the image insert UI.
+     */
+    dropdownView?: DropdownView;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Creates the dropdown view.
+     *
+     * @param locale The localization services instance.
+     */
+    private _createDropdownView;
+    /**
+     * Sets up the dropdown view.
+     *
+     * @param command An uploadImage or insertImage command.
+     */
+    private _setUpDropdown;
+}

package/src/imageinsert/imageinsertui.js

@@ -1,141 +1,141 @@
-/**
- * @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/imageinsertui
- */
-import { Plugin, icons } from 'ckeditor5/src/core';
-import { SplitButtonView, createDropdown } from 'ckeditor5/src/ui';
-import ImageInsertPanelView from './ui/imageinsertpanelview';
-import { prepareIntegrations } from './utils';
-/**
- * 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.
- */
-export default class ImageInsertUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageInsertUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const componentCreator = (locale) => {
-            return this._createDropdownView(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.
-     */
-    _createDropdownView(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'
-            }
-        });
-        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'
-                }
-            });
-        }
-        return this._setUpDropdown(uploadImageCommand || insertImageCommand);
-    }
-    /**
-     * Sets up the dropdown view.
-     *
-     * @param command An uploadImage or insertImage command.
-     */
-    _setUpDropdown(command) {
-        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');
-                }
-            }
-            // 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 });
-            }
-        }
-        function closePanel() {
-            editor.editing.view.focus();
-            dropdownView.isOpen = false;
-        }
-        return dropdownView;
-    }
-}
+/**
+ * @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/imageinsertui
+ */
+import { Plugin, icons } from 'ckeditor5/src/core';
+import { SplitButtonView, createDropdown } from 'ckeditor5/src/ui';
+import ImageInsertPanelView from './ui/imageinsertpanelview';
+import { prepareIntegrations } from './utils';
+/**
+ * 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.
+ */
+export default class ImageInsertUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageInsertUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const componentCreator = (locale) => {
+            return this._createDropdownView(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.
+     */
+    _createDropdownView(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'
+            }
+        });
+        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'
+                }
+            });
+        }
+        return this._setUpDropdown(uploadImageCommand || insertImageCommand);
+    }
+    /**
+     * Sets up the dropdown view.
+     *
+     * @param command An uploadImage or insertImage command.
+     */
+    _setUpDropdown(command) {
+        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');
+                }
+            }
+            // 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 });
+            }
+        }
+        function closePanel() {
+            editor.editing.view.focus();
+            dropdownView.isOpen = false;
+        }
+        return dropdownView;
+    }
+}

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

@@ -1,61 +1,61 @@
-/**
- * @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/imageinsertformrowview
- */
-import type { Locale } from 'ckeditor5/src/utils';
-import { View, type ViewCollection, type LabelView } from 'ckeditor5/src/ui';
-import '../../../theme/imageinsertformrowview.css';
-/**
- * The class representing a single row in a complex form,
- * used by {@link module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView}.
- *
- * **Note**: For now this class is private. When more use cases appear (beyond `ckeditor5-table` and `ckeditor5-image`),
- * it will become a component in `ckeditor5-ui`.
- *
- * @private
- */
-export default class ImageUploadFormRowView extends View {
-    /**
-     * An additional CSS class added to the {@link #element}.
-     *
-     * @observable
-     */
-    class: string | null;
-    /**
-     * A collection of row items (buttons, dropdowns, etc.).
-     */
-    readonly children: ViewCollection;
-    /**
-     * The role property reflected by the `role` DOM attribute of the {@link #element}.
-     *
-     * **Note**: Used only when a `labelView` is passed to constructor `options`.
-     *
-     * @observable
-     * @private
-     */
-    _role: string | null;
-    /**
-     * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
-     *
-     * **Note**: Used only when a `labelView` is passed to constructor `options`.
-     *
-     * @observable
-     * @private
-     */
-    _ariaLabelledBy: string | null;
-    /**
-     * Creates an instance of the form row class.
-     *
-     * @param locale The locale instance.
-     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
-     * DOM attributes and gets described by the label.
-     */
-    constructor(locale: Locale, options?: {
-        children?: Array<View>;
-        class?: string;
-        labelView?: LabelView;
-    });
-}
+/**
+ * @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/imageinsertformrowview
+ */
+import type { Locale } from 'ckeditor5/src/utils';
+import { View, type ViewCollection, type LabelView } from 'ckeditor5/src/ui';
+import '../../../theme/imageinsertformrowview.css';
+/**
+ * The class representing a single row in a complex form,
+ * used by {@link module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView}.
+ *
+ * **Note**: For now this class is private. When more use cases appear (beyond `ckeditor5-table` and `ckeditor5-image`),
+ * it will become a component in `ckeditor5-ui`.
+ *
+ * @private
+ */
+export default class ImageUploadFormRowView extends View {
+    /**
+     * An additional CSS class added to the {@link #element}.
+     *
+     * @observable
+     */
+    class: string | null;
+    /**
+     * A collection of row items (buttons, dropdowns, etc.).
+     */
+    readonly children: ViewCollection;
+    /**
+     * The role property reflected by the `role` DOM attribute of the {@link #element}.
+     *
+     * **Note**: Used only when a `labelView` is passed to constructor `options`.
+     *
+     * @observable
+     * @private
+     */
+    _role: string | null;
+    /**
+     * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
+     *
+     * **Note**: Used only when a `labelView` is passed to constructor `options`.
+     *
+     * @observable
+     * @private
+     */
+    _ariaLabelledBy: string | null;
+    /**
+     * Creates an instance of the form row class.
+     *
+     * @param locale The locale instance.
+     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
+     * DOM attributes and gets described by the label.
+     */
+    constructor(locale: Locale, options?: {
+        children?: Array<View>;
+        class?: string;
+        labelView?: LabelView;
+    });
+}