@ckeditor/ckeditor5-image 40.0.0 → 40.2.0

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
-        });
-    }
-}

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

@@ -1,106 +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 { ButtonView, View, ViewCollection, FocusCycler } from 'ckeditor5/src/ui';
-import { Collection, FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
-import '../../../theme/imageinsert.css';
-export type ViewWithName = View & {
-    name: string;
-};
-/**
- * The insert an image via URL view controller class.
- *
- * See {@link module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView}.
- */
-export default class ImageInsertPanelView extends View {
-    /**
-     * The "insert/update" button view.
-     */
-    insertButtonView: ButtonView;
-    /**
-     * The "cancel" button view.
-     */
-    cancelButtonView: ButtonView;
-    /**
-     * The value of the URL input.
-     *
-     * @observable
-     */
-    imageURLInputValue: string;
-    /**
-     * Tracks information about DOM focus in the form.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * A collection of views that can be focused in the form.
-     */
-    protected readonly _focusables: ViewCollection;
-    /**
-     * Helps cycling over {@link #_focusables} in the form.
-     */
-    protected readonly _focusCycler: FocusCycler;
-    /**
-     * A collection of the defined integrations for inserting the images.
-     *
-     * @private
-     */
-    _integrations: Collection<ViewWithName>;
-    /**
-     * 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: Locale, integrations?: Record<string, View>);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Returns a view of the integration.
-     *
-     * @param name The name of the integration.
-     */
-    getIntegration(name: string): View;
-    /**
-     * Creates the following form controls:
-     *
-     * * {@link #insertButtonView},
-     * * {@link #cancelButtonView}.
-     *
-     * @param locale The localization services instance.
-     */
-    private _createActionButtons;
-    /**
-     * Focuses the first {@link #_focusables focusable} in the form.
-     */
-    focus(): void;
-}
-/**
- * Fired when the form view is submitted (when one of the children triggered the submit event),
- * e.g. by a click on {@link ~ImageInsertPanelView#insertButtonView}.
- *
- * @eventName ~ImageInsertPanelView#submit
- */
-export type SubmitEvent = {
-    name: 'submit';
-    args: [];
-};
-/**
- * Fired when the form view is canceled, e.g. by a click on {@link ~ImageInsertPanelView#cancelButtonView}.
- *
- * @eventName ~ImageInsertPanelView#cancel
- */
-export type CancelEvent = {
-    name: 'cancel';
-    args: [];
-};

package/src/imageinsert/ui/imageinsertpanelview.js

@@ -1,161 +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/imageinsertpanelview
- */
-import { icons } from 'ckeditor5/src/core';
-import { ButtonView, View, ViewCollection, submitHandler, FocusCycler } from 'ckeditor5/src/ui';
-import { Collection, FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
-import ImageInsertFormRowView from './imageinsertformrowview';
-import '../../../theme/imageinsert.css';
-/**
- * The insert an image via URL view controller class.
- *
- * See {@link module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView}.
- */
-export default class ImageInsertPanelView 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);
-        const { insertButtonView, cancelButtonView } = this._createActionButtons(locale);
-        this.insertButtonView = insertButtonView;
-        this.cancelButtonView = cancelButtonView;
-        this.set('imageURLInputValue', '');
-        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.set('_integrations', new Collection());
-        for (const [integration, integrationView] of Object.entries(integrations)) {
-            if (integration === 'insertImageViaUrl') {
-                integrationView.fieldView
-                    .bind('value').to(this, 'imageURLInputValue', (value) => value || '');
-                integrationView.fieldView.on('input', () => {
-                    this.imageURLInputValue = integrationView.fieldView.element.value.trim();
-                });
-            }
-            integrationView.name = integration;
-            this._integrations.add(integrationView);
-        }
-        this.setTemplate({
-            tag: 'form',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-image-insert-form'
-                ],
-                tabindex: '-1'
-            },
-            children: [
-                ...this._integrations,
-                new ImageInsertFormRowView(locale, {
-                    children: [
-                        this.insertButtonView,
-                        this.cancelButtonView
-                    ],
-                    class: 'ck-image-insert-form__action-row'
-                })
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        submitHandler({
-            view: this
-        });
-        const childViews = [
-            ...this._integrations,
-            this.insertButtonView,
-            this.cancelButtonView
-        ];
-        childViews.forEach(v => {
-            // Register the view as focusable.
-            this._focusables.add(v);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(v.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();
-    }
-    /**
-     * Returns a view of the integration.
-     *
-     * @param name The name of the integration.
-     */
-    getIntegration(name) {
-        return this._integrations.find(integration => integration.name === name);
-    }
-    /**
-     * Creates the following form controls:
-     *
-     * * {@link #insertButtonView},
-     * * {@link #cancelButtonView}.
-     *
-     * @param locale The localization services instance.
-     */
-    _createActionButtons(locale) {
-        const t = locale.t;
-        const insertButtonView = new ButtonView(locale);
-        const cancelButtonView = new ButtonView(locale);
-        insertButtonView.set({
-            label: t('Insert'),
-            icon: icons.check,
-            class: 'ck-button-save',
-            type: 'submit',
-            withText: true,
-            isEnabled: this.imageURLInputValue
-        });
-        cancelButtonView.set({
-            label: t('Cancel'),
-            icon: icons.cancel,
-            class: 'ck-button-cancel',
-            withText: true
-        });
-        insertButtonView.bind('isEnabled').to(this, 'imageURLInputValue', value => !!value);
-        insertButtonView.delegate('execute').to(this, 'submit');
-        cancelButtonView.delegate('execute').to(this, 'cancel');
-        return { insertButtonView, cancelButtonView };
-    }
-    /**
-     * Focuses the first {@link #_focusables focusable} in the form.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-}

package/src/imageinsert/utils.d.ts

@@ -1,25 +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/utils
- */
-import type { Locale } from 'ckeditor5/src/utils';
-import type { Editor } from 'ckeditor5/src/core';
-import { LabeledFieldView, type View } from 'ckeditor5/src/ui';
-/**
- * Creates integrations object that will be passed to the
- * {@link module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView}.
- *
- * @param editor Editor instance.
- *
- * @returns Integrations object.
- */
-export declare function prepareIntegrations(editor: Editor): Record<string, View>;
-/**
- * Creates labeled field view.
- *
- * @param locale The localization services instance.
- */
-export declare function createLabeledInputView(locale: Locale): LabeledFieldView;

package/src/imageinsert/utils.js

@@ -1,58 +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 { LabeledFieldView, createLabeledInputText } from 'ckeditor5/src/ui';
-/**
- * Creates integrations object that will be passed to the
- * {@link module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView}.
- *
- * @param editor Editor instance.
- *
- * @returns Integrations object.
- */
-export function prepareIntegrations(editor) {
-    const panelItems = editor.config.get('image.insert.integrations');
-    const imageInsertUIPlugin = editor.plugins.get('ImageInsertUI');
-    const PREDEFINED_INTEGRATIONS = {
-        'insertImageViaUrl': createLabeledInputView(editor.locale)
-    };
-    if (!panelItems) {
-        return PREDEFINED_INTEGRATIONS;
-    }
-    // Prepares ckfinder component for the `openCKFinder` integration token.
-    if (panelItems.find(item => item === 'openCKFinder') && editor.ui.componentFactory.has('ckfinder')) {
-        const ckFinderButton = editor.ui.componentFactory.create('ckfinder');
-        ckFinderButton.set({
-            withText: true,
-            class: 'ck-image-insert__ck-finder-button'
-        });
-        // We want to close the dropdown panel view when user clicks the ckFinderButton.
-        ckFinderButton.delegate('execute').to(imageInsertUIPlugin, 'cancel');
-        PREDEFINED_INTEGRATIONS.openCKFinder = ckFinderButton;
-    }
-    // Creates integrations object of valid views to pass it to the ImageInsertPanelView.
-    return panelItems.reduce((object, key) => {
-        if (PREDEFINED_INTEGRATIONS[key]) {
-            object[key] = PREDEFINED_INTEGRATIONS[key];
-        }
-        else if (editor.ui.componentFactory.has(key)) {
-            object[key] = editor.ui.componentFactory.create(key);
-        }
-        return object;
-    }, {});
-}
-/**
- * Creates labeled field view.
- *
- * @param locale The localization services instance.
- */
-export function createLabeledInputView(locale) {
-    const t = locale.t;
-    const labeledInputView = new LabeledFieldView(locale, createLabeledInputText);
-    labeledInputView.set({
-        label: t('Insert image via URL')
-    });
-    labeledInputView.fieldView.placeholder = 'https://example.com/image.png';
-    return labeledInputView;
-}

package/theme/imageinsertformrowview.css

@@ -1,36 +0,0 @@
-/*
- * 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
- */
-
-.ck.ck-image-insert-form {
-	&:focus {
-		/* See: https://github.com/ckeditor/ckeditor5/issues/4773 */
-		outline: none;
-	}
-}
-
-.ck.ck-form__row {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-between;
-
-	/* Ignore labels that work as fieldset legends */
-	& > *:not(.ck-label) {
-		flex-grow: 1;
-	}
-
-	&.ck-image-insert-form__action-row {
-		margin-top: var(--ck-spacing-standard);
-
-		& .ck-button-save,
-		& .ck-button-cancel {
-			justify-content: center;
-		}
-
-		& .ck-button .ck-button__label {
-			color: var(--ck-color-text);
-		}
-	}
-}