@ckeditor/ckeditor5-image 36.0.0 → 37.0.0-alpha.0

package/src/imagetextalternative/ui/textalternativeformview.js

@@ -2,209 +2,120 @@
  * @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/imagetextalternative/ui/textalternativeformview
  */
-
-import {
-	ButtonView,
-	FocusCycler,
-	LabeledFieldView,
-	View,
-	ViewCollection,
-	createLabeledInputText,
-	injectCssTransitionDisabler,
-	submitHandler
-} from 'ckeditor5/src/ui';
+import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
 import { icons } from 'ckeditor5/src/core';
-
 import '../../../theme/textalternativeform.css';
-
 // See: #8833.
 // eslint-disable-next-line ckeditor5-rules/ckeditor-imports
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-
 /**
  * The TextAlternativeFormView class.
- *
- * @extends module:ui/view~View
  */
 export default class TextAlternativeFormView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		const t = this.locale.t;
-
-		/**
-		 * Tracks information about the DOM focus in the form.
-		 *
-		 * @readonly
-		 * @member {module:utils/focustracker~FocusTracker}
-		 */
-		this.focusTracker = new FocusTracker();
-
-		/**
-		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-		 *
-		 * @readonly
-		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
-		 */
-		this.keystrokes = new KeystrokeHandler();
-
-		/**
-		 * An input with a label.
-		 *
-		 * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView} #labeledInput
-		 */
-		this.labeledInput = this._createLabeledInputView();
-
-		/**
-		 * A button used to submit the form.
-		 *
-		 * @member {module:ui/button/buttonview~ButtonView} #saveButtonView
-		 */
-		this.saveButtonView = this._createButton( t( 'Save' ), icons.check, 'ck-button-save' );
-		this.saveButtonView.type = 'submit';
-
-		/**
-		 * A button used to cancel the form.
-		 *
-		 * @member {module:ui/button/buttonview~ButtonView} #cancelButtonView
-		 */
-		this.cancelButtonView = this._createButton( t( 'Cancel' ), icons.cancel, 'ck-button-cancel', 'cancel' );
-
-		/**
-		 * A collection of views which can be focused in the form.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this._focusables = new ViewCollection();
-
-		/**
-		 * Helps cycling over {@link #_focusables} in the form.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/focuscycler~FocusCycler}
-		 */
-		this._focusCycler = new FocusCycler( {
-			focusables: this._focusables,
-			focusTracker: this.focusTracker,
-			keystrokeHandler: this.keystrokes,
-			actions: {
-				// Navigate form fields backwards using the Shift + Tab keystroke.
-				focusPrevious: 'shift + tab',
-
-				// Navigate form fields forwards using the Tab key.
-				focusNext: 'tab'
-			}
-		} );
-
-		this.setTemplate( {
-			tag: 'form',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-text-alternative-form',
-					'ck-responsive-form'
-				],
-
-				// https://github.com/ckeditor/ckeditor5-image/issues/40
-				tabindex: '-1'
-			},
-
-			children: [
-				this.labeledInput,
-				this.saveButtonView,
-				this.cancelButtonView
-			]
-		} );
-
-		injectCssTransitionDisabler( this );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		this.keystrokes.listenTo( this.element );
-
-		submitHandler( { view: this } );
-
-		[ this.labeledInput, this.saveButtonView, this.cancelButtonView ]
-			.forEach( v => {
-				// Register the view as focusable.
-				this._focusables.add( v );
-
-				// Register the view in the focus tracker.
-				this.focusTracker.add( v.element );
-			} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	destroy() {
-		super.destroy();
-
-		this.focusTracker.destroy();
-		this.keystrokes.destroy();
-	}
-
-	/**
-	 * Creates the button view.
-	 *
-	 * @private
-	 * @param {String} label The button label
-	 * @param {String} icon The button's icon.
-	 * @param {String} className The additional button CSS class name.
-	 * @param {String} [eventName] The event name that the ButtonView#execute event will be delegated to.
-	 * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
-	 */
-	_createButton( label, icon, className, eventName ) {
-		const button = new ButtonView( this.locale );
-
-		button.set( {
-			label,
-			icon,
-			tooltip: true
-		} );
-
-		button.extendTemplate( {
-			attributes: {
-				class: className
-			}
-		} );
-
-		if ( eventName ) {
-			button.delegate( 'execute' ).to( this, eventName );
-		}
-
-		return button;
-	}
-
-	/**
-	 * Creates an input with a label.
-	 *
-	 * @private
-	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} Labeled field view instance.
-	 */
-	_createLabeledInputView() {
-		const t = this.locale.t;
-		const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
-
-		labeledInput.label = t( 'Text alternative' );
-
-		return labeledInput;
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const t = this.locale.t;
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.labeledInput = this._createLabeledInputView();
+        this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
+        this.saveButtonView.type = 'submit';
+        this.cancelButtonView = this._createButton(t('Cancel'), icons.cancel, 'ck-button-cancel', 'cancel');
+        this._focusables = new ViewCollection();
+        this._focusCycler = new FocusCycler({
+            focusables: this._focusables,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                // Navigate form fields backwards using the Shift + Tab keystroke.
+                focusPrevious: 'shift + tab',
+                // Navigate form fields forwards using the Tab key.
+                focusNext: 'tab'
+            }
+        });
+        this.setTemplate({
+            tag: 'form',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-text-alternative-form',
+                    'ck-responsive-form'
+                ],
+                // https://github.com/ckeditor/ckeditor5-image/issues/40
+                tabindex: '-1'
+            },
+            children: [
+                this.labeledInput,
+                this.saveButtonView,
+                this.cancelButtonView
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.keystrokes.listenTo(this.element);
+        submitHandler({ view: this });
+        [this.labeledInput, this.saveButtonView, this.cancelButtonView]
+            .forEach(v => {
+            // Register the view as focusable.
+            this._focusables.add(v);
+            // Register the view in the focus tracker.
+            this.focusTracker.add(v.element);
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Creates the button view.
+     *
+     * @param label The button label
+     * @param icon The button's icon.
+     * @param className The additional button CSS class name.
+     * @param eventName The event name that the ButtonView#execute event will be delegated to.
+     * @returns The button view instance.
+     */
+    _createButton(label, icon, className, eventName) {
+        const button = new ButtonView(this.locale);
+        button.set({
+            label,
+            icon,
+            tooltip: true
+        });
+        button.extendTemplate({
+            attributes: {
+                class: className
+            }
+        });
+        if (eventName) {
+            button.delegate('execute').to(this, eventName);
+        }
+        return button;
+    }
+    /**
+     * Creates an input with a label.
+     *
+     * @returns Labeled field view instance.
+     */
+    _createLabeledInputView() {
+        const t = this.locale.t;
+        const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
+        labeledInput.label = t('Text alternative');
+        return labeledInput;
+    }
 }

package/src/imagetextalternative.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @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/imagetextalternative
+ */
+import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+/**
+ * The image text alternative plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/images-styles image styles} documentation.
+ *
+ * This is a "glue" plugin which loads the
+ *  {@link module:image/imagetextalternative/imagetextalternativeediting~ImageTextAlternativeEditing}
+ * and {@link module:image/imagetextalternative/imagetextalternativeui~ImageTextAlternativeUI} plugins.
+ */
+export default class ImageTextAlternative extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'ImageTextAlternative';
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [ImageTextAlternative.pluginName]: ImageTextAlternative;
+    }
+}

package/src/imagetextalternative.js

@@ -2,15 +2,12 @@
  * @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/imagetextalternative
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import ImageTextAlternativeEditing from './imagetextalternative/imagetextalternativeediting';
 import ImageTextAlternativeUI from './imagetextalternative/imagetextalternativeui';
-
 /**
  * The image text alternative plugin.
  *
@@ -19,21 +16,18 @@ import ImageTextAlternativeUI from './imagetextalternative/imagetextalternativeu
  * This is a "glue" plugin which loads the
  *  {@link module:image/imagetextalternative/imagetextalternativeediting~ImageTextAlternativeEditing}
  * and {@link module:image/imagetextalternative/imagetextalternativeui~ImageTextAlternativeUI} plugins.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class ImageTextAlternative extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ ImageTextAlternativeEditing, ImageTextAlternativeUI ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'ImageTextAlternative';
-	}
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageTextAlternativeEditing, ImageTextAlternativeUI];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageTextAlternative';
+    }
 }

package/src/imagetoolbar.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @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/imagetoolbar
+ */
+import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+/**
+ * The image toolbar plugin. It creates and manages the image toolbar (the toolbar displayed when an image is selected).
+ *
+ * For an overview, check the {@glink features/images/images-overview#image-contextual-toolbar image contextual toolbar} documentation.
+ *
+ * Instances of toolbar components (e.g. buttons) are created using the editor's
+ * {@link module:ui/componentfactory~ComponentFactory component factory}
+ * based on the {@link module:image/imageconfig~ImageConfig#toolbar `image.toolbar` configuration option}.
+ *
+ * The toolbar uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
+ */
+export default class ImageToolbar extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'ImageToolbar';
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [ImageToolbar.pluginName]: ImageToolbar;
+    }
+}

package/src/imagetoolbar.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/imagetoolbar
  */
-
 import { Plugin } from 'ckeditor5/src/core';
 import { WidgetToolbarRepository } from 'ckeditor5/src/widget';
 import ImageUtils from './imageutils';
 import { isObject } from 'lodash-es';
-
 /**
  * The image toolbar plugin. It creates and manages the image toolbar (the toolbar displayed when an image is selected).
  *
@@ -19,85 +16,42 @@ import { isObject } from 'lodash-es';
  *
  * Instances of toolbar components (e.g. buttons) are created using the editor's
  * {@link module:ui/componentfactory~ComponentFactory component factory}
- * based on the {@link module:image/image~ImageConfig#toolbar `image.toolbar` configuration option}.
+ * based on the {@link module:image/imageconfig~ImageConfig#toolbar `image.toolbar` configuration option}.
  *
  * The toolbar uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class ImageToolbar extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ WidgetToolbarRepository, ImageUtils ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'ImageToolbar';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	afterInit() {
-		const editor = this.editor;
-		const t = editor.t;
-		const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
-		const imageUtils = editor.plugins.get( 'ImageUtils' );
-
-		widgetToolbarRepository.register( 'image', {
-			ariaLabel: t( 'Image toolbar' ),
-			items: normalizeDeclarativeConfig( editor.config.get( 'image.toolbar' ) || [] ),
-			getRelatedElement: selection => imageUtils.getClosestSelectedImageWidget( selection )
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [WidgetToolbarRepository, ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageToolbar';
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        const editor = this.editor;
+        const t = editor.t;
+        const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);
+        const imageUtils = editor.plugins.get('ImageUtils');
+        widgetToolbarRepository.register('image', {
+            ariaLabel: t('Image toolbar'),
+            items: normalizeDeclarativeConfig(editor.config.get('image.toolbar') || []),
+            getRelatedElement: selection => imageUtils.getClosestSelectedImageWidget(selection)
+        });
+    }
 }
-
 /**
- * Items to be placed in the image toolbar.
- * This option is used by the {@link module:image/imagetoolbar~ImageToolbar} feature.
- *
- * Assuming that you use the following features:
- *
- * * {@link module:image/imagestyle~ImageStyle} (with a default configuration),
- * * {@link module:image/imagetextalternative~ImageTextAlternative},
- * * {@link module:image/imagecaption~ImageCaption},
- *
- * the following toolbar items will be available in {@link module:ui/componentfactory~ComponentFactory}:
- * * `'imageTextAlternative'`,
- * * `'toggleImageCaption'`,
- * * {@link module:image/image~ImageConfig#styles buttons provided by the `ImageStyle` plugin},
- * * {@link module:image/imagestyle/utils~DEFAULT_DROPDOWN_DEFINITIONS drop-downs provided by the `ImageStyle` plugin},
- *
- * so you can configure the toolbar like this:
- *
- *		const imageConfig = {
- *			toolbar: [
- *	 			'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|',
- *				'toggleImageCaption', 'imageTextAlternative'
- *			]
- *		};
- *
- * Besides that, the `ImageStyle` plugin allows to define a
- * {@link module:image/imagestyle/imagestyleui~ImageStyleDropdownDefinition custom drop-down} while configuring the toolbar.
- *
- * The same items can also be used in the {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
- *
- * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
- *
- * @member {Array.<String>} module:image/image~ImageConfig#toolbar
+ * Convert the dropdown definitions to their keys registered in the ComponentFactory.
+ * The registration precess should be handled by the plugin which handles the UI of a particular feature.
  */
-
-// Convert the dropdown definitions to their keys registered in the ComponentFactory.
-// The registration precess should be handled by the plugin which handles the UI of a particular feature.
-//
-// @param {Array.<String|module:image/imagestyle/imagestyleui~ImageStyleDropdownDefinition>} config
-//
-// @returns {Array.<String>}
-function normalizeDeclarativeConfig( config ) {
-	return config.map( item => isObject( item ) ? item.name : item );
+function normalizeDeclarativeConfig(config) {
+    return config.map(item => isObject(item) ? item.name : item);
 }