@ckeditor/ckeditor5-image 36.0.1 → 37.0.0-alpha.1

package/src/imageconfig.js

@@ -0,0 +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 {};

package/src/imageinline.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @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, type PluginDependencies } from 'ckeditor5/src/core';
+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(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'ImageInline';
+}

package/src/imageinline.js

@@ -2,19 +2,14 @@
  * @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.
  *
@@ -25,22 +20,18 @@ import '../theme/image.css';
  *
  * Usually, it is used in conjunction with other plugins from this package. See the {@glink api/image package page}
  * for more information.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class ImageInline extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ ImageInlineEditing, Widget, ImageTextAlternative ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'ImageInline';
-	}
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageInlineEditing, Widget, ImageTextAlternative];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageInline';
+    }
 }
-

package/src/imageinsert/imageinsertui.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/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/image-upload/images-inserting#inserting-images-via-source-url 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

@@ -2,16 +2,13 @@
  * @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 ImageInsertPanelView from './ui/imageinsertpanelview';
 import { SplitButtonView, createDropdown } from 'ckeditor5/src/ui';
+import ImageInsertPanelView from './ui/imageinsertpanelview';
 import { prepareIntegrations } from './utils';
-
 /**
  * The image insert dropdown plugin.
  *
@@ -20,160 +17,125 @@ import { prepareIntegrations } from './utils';
  *
  * 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.
- *
- * @extends module:core/plugin~Plugin
  */
 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 {module:utils/locale~Locale} locale The localization services instance.
-	 *
-	 * @private
-	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
-	 */
-	_createDropdownView( locale ) {
-		const editor = this.editor;
-		const t = locale.t;
-
-		const uploadImageCommand = editor.commands.get( 'uploadImage' );
-		const insertImageCommand = editor.commands.get( 'insertImage' );
-
-		/**
-		 * The dropdown view responsible for displaying the image insert UI.
-		 *
-		 * @member {module:ui/dropdown/dropdownview~DropdownView}
-		 */
-		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;
-
-			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 {module:core/command~Command} command An uploadImage or insertImage command.
-	 *
-	 * @private
-	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
-	 */
-	_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;
-	}
+    /**
+     * @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

@@ -0,0 +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;
+    });
+}

package/src/imageinsert/ui/imageinsertformrowview.js

@@ -2,15 +2,8 @@
  * @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 { View } 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}.
@@ -19,85 +12,43 @@ import '../../../theme/imageinsertformrowview.css';
  * it will become a component in `ckeditor5-ui`.
  *
  * @private
- * @extends module:ui/view~View
  */
 export default class ImageUploadFormRowView extends View {
-	/**
-	 * Creates an instance of the form row class.
-	 *
-	 * @param {module:utils/locale~Locale} locale The locale instance.
-	 * @param {Object} options
-	 * @param {Array.<module:ui/view~View>} [options.children]
-	 * @param {String} [options.class]
-	 * @param {module:ui/view~View} [options.labelView] When passed, the row gets the `group` and `aria-labelledby`
-	 * DOM attributes and gets described by the label.
-	 */
-	constructor( locale, options = {} ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * An additional CSS class added to the {@link #element}.
-		 *
-		 * @observable
-		 * @member {String} #class
-		 */
-		this.set( 'class', options.class || null );
-
-		/**
-		 * A collection of row items (buttons, dropdowns, etc.).
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.children = this.createCollection();
-
-		if ( options.children ) {
-			options.children.forEach( child => this.children.add( child ) );
-		}
-
-		/**
-		 * The role property reflected by the `role` DOM attribute of the {@link #element}.
-		 *
-		 * **Note**: Used only when a `labelView` is passed to constructor `options`.
-		 *
-		 * @private
-		 * @observable
-		 * @member {String} #role
-		 */
-		this.set( '_role', 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`.
-		 *
-		 * @private
-		 * @observable
-		 * @member {String} #ariaLabelledBy
-		 */
-		this.set( '_ariaLabelledBy', null );
-
-		if ( options.labelView ) {
-			this.set( {
-				_role: 'group',
-				_ariaLabelledBy: options.labelView.id
-			} );
-		}
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-form__row',
-					bind.to( 'class' )
-				],
-				role: bind.to( '_role' ),
-				'aria-labelledby': bind.to( '_ariaLabelledBy' )
-			},
-			children: this.children
-		} );
-	}
+    /**
+     * 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, options = {}) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('class', options.class || null);
+        this.children = this.createCollection();
+        if (options.children) {
+            options.children.forEach(child => this.children.add(child));
+        }
+        this.set('_role', null);
+        this.set('_ariaLabelledBy', null);
+        if (options.labelView) {
+            this.set({
+                _role: 'group',
+                _ariaLabelledBy: options.labelView.id
+            });
+        }
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-form__row',
+                    bind.to('class')
+                ],
+                role: bind.to('_role'),
+                'aria-labelledby': bind.to('_ariaLabelledBy')
+            },
+            children: this.children
+        });
+    }
 }