@ckeditor/ckeditor5-image 39.0.1 → 40.0.0

package/src/imagetextalternative/ui/textalternativeformview.js

@@ -1,121 +1,121 @@
-/**
- * @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, 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.
- */
-export default class TextAlternativeFormView extends View {
-    /**
-     * @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;
-    }
-}
+/**
+ * @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, 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.
+ */
+export default class TextAlternativeFormView extends View {
+    /**
+     * @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

@@ -1,29 +1,29 @@
-/**
- * @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.
- *
- * 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(): readonly [typeof ImageTextAlternativeEditing, typeof ImageTextAlternativeUI];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "ImageTextAlternative";
-}
+/**
+ * @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.
+ *
+ * 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(): readonly [typeof ImageTextAlternativeEditing, typeof ImageTextAlternativeUI];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageTextAlternative";
+}

package/src/imagetextalternative.js

@@ -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/imagetextalternative
- */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageTextAlternativeEditing from './imagetextalternative/imagetextalternativeediting';
-import ImageTextAlternativeUI from './imagetextalternative/imagetextalternativeui';
-/**
- * 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() {
-        return [ImageTextAlternativeEditing, ImageTextAlternativeUI];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageTextAlternative';
-    }
-}
+/**
+ * @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.
+ *
+ * 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() {
+        return [ImageTextAlternativeEditing, ImageTextAlternativeUI];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageTextAlternative';
+    }
+}

package/src/imagetoolbar.d.ts

@@ -1,35 +1,35 @@
-/**
- * @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';
-/**
- * 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(): readonly [typeof WidgetToolbarRepository, typeof ImageUtils];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "ImageToolbar";
-    /**
-     * @inheritDoc
-     */
-    afterInit(): void;
-}
+/**
+ * @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';
+/**
+ * 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(): readonly [typeof WidgetToolbarRepository, typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageToolbar";
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+}

package/src/imagetoolbar.js

@@ -1,57 +1,57 @@
-/**
- * @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).
- *
- * 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() {
-        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)
-        });
-    }
-}
-/**
- * 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.
- */
-function normalizeDeclarativeConfig(config) {
-    return config.map(item => isObject(item) ? item.name : item);
-}
+/**
+ * @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).
+ *
+ * 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() {
+        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)
+        });
+    }
+}
+/**
+ * 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.
+ */
+function normalizeDeclarativeConfig(config) {
+    return config.map(item => isObject(item) ? item.name : item);
+}