@ckeditor/ckeditor5-image 40.1.0 → 41.0.0

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