@ckeditor/ckeditor5-image 40.1.0 → 40.2.0

package/src/imageinsert/ui/imageinsertformview.js

@@ -0,0 +1,112 @@
+/**
+ * @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/imageinsertformview
+ */
+import { View, ViewCollection, submitHandler, FocusCycler, CollapsibleView } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
+import '../../../theme/imageinsert.css';
+/**
+ * The view displayed in the insert image dropdown.
+ *
+ * See {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+ */
+export default class ImageInsertFormView extends View {
+    /**
+     * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+     *
+     * @param locale The localization services instance.
+     * @param integrations An integrations object that contains components (or tokens for components) to be shown in the panel view.
+     */
+    constructor(locale, integrations = []) {
+        super(locale);
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this._focusables = new ViewCollection();
+        this.children = this.createCollection();
+        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'
+            }
+        });
+        for (const view of integrations) {
+            this.children.add(view);
+            this._focusables.add(view);
+            if (view instanceof CollapsibleView) {
+                this._focusables.addMany(view.children);
+            }
+        }
+        if (this._focusables.length > 1) {
+            for (const view of this._focusables) {
+                if (isViewWithFocusCycler(view)) {
+                    view.focusCycler.on('forwardCycle', evt => {
+                        this._focusCycler.focusNext();
+                        evt.stop();
+                    });
+                    view.focusCycler.on('backwardCycle', evt => {
+                        this._focusCycler.focusPrevious();
+                        evt.stop();
+                    });
+                }
+            }
+        }
+        this.setTemplate({
+            tag: 'form',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-image-insert-form'
+                ],
+                tabindex: -1
+            },
+            children: this.children
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        submitHandler({
+            view: this
+        });
+        for (const view of this._focusables) {
+            this.focusTracker.add(view.element);
+        }
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+        const stopPropagation = (data) => data.stopPropagation();
+        // Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
+        // keystroke handler would take over the key management in the URL input. We need to prevent
+        // this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.
+        this.keystrokes.set('arrowright', stopPropagation);
+        this.keystrokes.set('arrowleft', stopPropagation);
+        this.keystrokes.set('arrowup', stopPropagation);
+        this.keystrokes.set('arrowdown', stopPropagation);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Focuses the first {@link #_focusables focusable} in the form.
+     */
+    focus() {
+        this._focusCycler.focusFirst();
+    }
+}
+function isViewWithFocusCycler(view) {
+    return 'focusCycler' in view;
+}

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

@@ -0,0 +1,107 @@
+/**
+ * @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
+ */
+import { ButtonView, View, FocusCycler, LabeledFieldView, type InputTextView } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
+/**
+ * The insert an image via URL view.
+ *
+ * See {@link module:image/imageinsert/imageinsertviaurlui~ImageInsertViaUrlUI}.
+ */
+export default class ImageInsertUrlView extends View {
+    /**
+     * The URL input field view.
+     */
+    urlInputView: LabeledFieldView<InputTextView>;
+    /**
+     * The "insert/update" button view.
+     */
+    insertButtonView: ButtonView;
+    /**
+     * The "cancel" button view.
+     */
+    cancelButtonView: ButtonView;
+    /**
+     * The value of the URL input.
+     *
+     * @observable
+     */
+    imageURLInputValue: string;
+    /**
+     * Observable property used to alter labels while some image is selected and when it is not.
+     *
+     * @observable
+     */
+    isImageSelected: boolean;
+    /**
+     * Observable property indicating whether the form interactive elements should be enabled.
+     *
+     * @observable
+     */
+    isEnabled: boolean;
+    /**
+     * Tracks information about DOM focus in the form.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    readonly focusCycler: FocusCycler;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    private readonly _focusables;
+    /**
+     * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Creates the {@link #urlInputView}.
+     */
+    private _createUrlInputView;
+    /**
+     * Creates the {@link #insertButtonView}.
+     */
+    private _createInsertButton;
+    /**
+     * Creates the {@link #cancelButtonView}.
+     */
+    private _createCancelButton;
+    /**
+     * Focuses the view.
+     */
+    focus(direction: 1 | -1): void;
+}
+/**
+ * Fired when the form view is submitted.
+ *
+ * @eventName ~ImageInsertUrlView#submit
+ */
+export type ImageInsertUrlViewSubmitEvent = {
+    name: 'submit';
+    args: [];
+};
+/**
+ * Fired when the form view is canceled.
+ *
+ * @eventName ~ImageInsertUrlView#cancel
+ */
+export type ImageInsertUrlViewCancelEvent = {
+    name: 'cancel';
+    args: [];
+};

package/src/imageinsert/ui/imageinserturlview.js

@@ -0,0 +1,156 @@
+/**
+ * @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/imageinserturlview
+ */
+import { icons } from 'ckeditor5/src/core';
+import { ButtonView, View, ViewCollection, FocusCycler, LabeledFieldView, createLabeledInputText } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
+/**
+ * The insert an image via URL view.
+ *
+ * See {@link module:image/imageinsert/imageinsertviaurlui~ImageInsertViaUrlUI}.
+ */
+export default class ImageInsertUrlView extends View {
+    /**
+     * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        this.set('imageURLInputValue', '');
+        this.set('isImageSelected', false);
+        this.set('isEnabled', true);
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        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.urlInputView = this._createUrlInputView();
+        this.insertButtonView = this._createInsertButton();
+        this.cancelButtonView = this._createCancelButton();
+        this._focusables.addMany([
+            this.urlInputView,
+            this.insertButtonView,
+            this.cancelButtonView
+        ]);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-image-insert-url'
+                ]
+            },
+            children: [
+                this.urlInputView,
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-image-insert-url__action-row'
+                        ]
+                    },
+                    children: [
+                        this.insertButtonView,
+                        this.cancelButtonView
+                    ]
+                }
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        for (const view of this._focusables) {
+            this.focusTracker.add(view.element);
+        }
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Creates the {@link #urlInputView}.
+     */
+    _createUrlInputView() {
+        const locale = this.locale;
+        const t = locale.t;
+        const urlInputView = new LabeledFieldView(locale, createLabeledInputText);
+        urlInputView.bind('label').to(this, 'isImageSelected', value => value ? t('Update image URL') : t('Insert image via URL'));
+        urlInputView.bind('isEnabled').to(this);
+        urlInputView.fieldView.placeholder = 'https://example.com/image.png';
+        urlInputView.fieldView.bind('value').to(this, 'imageURLInputValue', (value) => value || '');
+        urlInputView.fieldView.on('input', () => {
+            this.imageURLInputValue = urlInputView.fieldView.element.value.trim();
+        });
+        return urlInputView;
+    }
+    /**
+     * Creates the {@link #insertButtonView}.
+     */
+    _createInsertButton() {
+        const locale = this.locale;
+        const t = locale.t;
+        const insertButtonView = new ButtonView(locale);
+        insertButtonView.set({
+            icon: icons.check,
+            class: 'ck-button-save',
+            type: 'submit',
+            withText: true
+        });
+        insertButtonView.bind('label').to(this, 'isImageSelected', value => value ? t('Update') : t('Insert'));
+        insertButtonView.bind('isEnabled').to(this, 'imageURLInputValue', this, 'isEnabled', (...values) => values.every(value => value));
+        insertButtonView.delegate('execute').to(this, 'submit');
+        return insertButtonView;
+    }
+    /**
+     * Creates the {@link #cancelButtonView}.
+     */
+    _createCancelButton() {
+        const locale = this.locale;
+        const t = locale.t;
+        const cancelButtonView = new ButtonView(locale);
+        cancelButtonView.set({
+            label: t('Cancel'),
+            icon: icons.cancel,
+            class: 'ck-button-cancel',
+            withText: true
+        });
+        cancelButtonView.bind('isEnabled').to(this);
+        cancelButtonView.delegate('execute').to(this, 'cancel');
+        return cancelButtonView;
+    }
+    /**
+     * Focuses the view.
+     */
+    focus(direction) {
+        if (direction === -1) {
+            this.focusCycler.focusLast();
+        }
+        else {
+            this.focusCycler.focusFirst();
+        }
+    }
+}

package/src/imageinsertviaurl.d.ts

@@ -7,6 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core';
 import ImageInsertUI from './imageinsert/imageinsertui';
+import ImageInsertViaUrlUI from './imageinsert/imageinsertviaurlui';
 /**
  * The image insert via URL plugin.
  *
@@ -26,5 +27,5 @@ export default class ImageInsertViaUrl extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof ImageInsertUI];
+    static get requires(): readonly [typeof ImageInsertViaUrlUI, typeof ImageInsertUI];
 }

package/src/imageinsertviaurl.js

@@ -7,6 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core';
 import ImageInsertUI from './imageinsert/imageinsertui';
+import ImageInsertViaUrlUI from './imageinsert/imageinsertviaurlui';
 /**
  * The image insert via URL plugin.
  *
@@ -29,6 +30,6 @@ export default class ImageInsertViaUrl extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [ImageInsertUI];
+        return [ImageInsertViaUrlUI, ImageInsertUI];
     }
 }

package/src/imagetextalternative/ui/textalternativeformview.d.ts

@@ -70,3 +70,21 @@ export default class TextAlternativeFormView extends View {
      */
     private _createLabeledInputView;
 }
+/**
+ * Fired when the form view is submitted.
+ *
+ * @eventName ~TextAlternativeFormView#submit
+ */
+export type TextAlternativeFormViewSubmitEvent = {
+    name: 'submit';
+    args: [];
+};
+/**
+ * Fired when the form view is canceled.
+ *
+ * @eventName ~TextAlternativeFormView#cancel
+ */
+export type TextAlternativeFormViewCancelEvent = {
+    name: 'cancel';
+    args: [];
+};

package/src/imageupload/imageuploadui.js

@@ -33,14 +33,12 @@ export default class ImageUploadUI extends Plugin {
             const imageTypesRegExp = createImageTypeRegExp(imageTypes);
             view.set({
                 acceptedType: imageTypes.map(type => `image/${type}`).join(','),
-                allowMultipleFiles: true
-            });
-            view.buttonView.set({
-                label: t('Insert image'),
-                icon: icons.image,
+                allowMultipleFiles: true,
+                label: t('Upload image from computer'),
+                icon: icons.imageUpload,
                 tooltip: true
             });
-            view.buttonView.bind('isEnabled').to(command);
+            view.bind('isEnabled').to(command);
             view.on('done', (evt, files) => {
                 const imagesToUpload = Array.from(files).filter(file => imageTypesRegExp.test(file.type));
                 if (imagesToUpload.length) {
@@ -53,5 +51,31 @@ export default class ImageUploadUI extends Plugin {
         // Setup `uploadImage` button and add `imageUpload` button as an alias for backward compatibility.
         editor.ui.componentFactory.add('uploadImage', componentCreator);
         editor.ui.componentFactory.add('imageUpload', componentCreator);
+        if (editor.plugins.has('ImageInsertUI')) {
+            const imageInsertUI = editor.plugins.get('ImageInsertUI');
+            const command = editor.commands.get('uploadImage');
+            imageInsertUI.registerIntegration({
+                name: 'upload',
+                observable: command,
+                buttonViewCreator: () => {
+                    const uploadImageButton = editor.ui.componentFactory.create('uploadImage');
+                    uploadImageButton.bind('label').to(imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ?
+                        t('Replace image from computer') :
+                        t('Upload image from computer'));
+                    return uploadImageButton;
+                },
+                formViewCreator: () => {
+                    const uploadImageButton = editor.ui.componentFactory.create('uploadImage');
+                    uploadImageButton.withText = true;
+                    uploadImageButton.bind('label').to(imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ?
+                        t('Replace from computer') :
+                        t('Upload from computer'));
+                    uploadImageButton.on('execute', () => {
+                        imageInsertUI.dropdownView.isOpen = false;
+                    });
+                    return uploadImageButton;
+                }
+            });
+        }
     }
 }

package/theme/imageinsert.css

@@ -3,21 +3,9 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck.ck-image-insert__panel {
-	padding: var(--ck-spacing-large);
-}
-
-.ck.ck-image-insert__ck-finder-button {
-	display: block;
-	width: 100%;
-	margin: var(--ck-spacing-standard) auto;
-	border: 1px solid hsl(0, 0%, 80%);
-	border-radius: var(--ck-border-radius);
-}
-
-/* https://github.com/ckeditor/ckeditor5/issues/7986 */
-.ck.ck-splitbutton > .ck-file-dialog-button.ck-button {
-	padding: 0;
-	margin: 0;
-	border: none;
+.ck.ck-image-insert-url {
+	& .ck-image-insert-url__action-row {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+	}
 }

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

@@ -1,61 +0,0 @@
-/**
- * @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

@@ -1,54 +0,0 @@
-/**
- * @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
- */
-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}.
- *
- * **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 {
-    /**
-     * 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
-        });
-    }
-}