@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

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

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2024, 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, FocusCycler, type FocusableView } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+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 {
+    /**
+     * 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<FocusableView>;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    protected readonly _focusCycler: FocusCycler;
+    /**
+     * A collection of the defined integrations for inserting the images.
+     */
+    private readonly children;
+    /**
+     * 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?: Array<FocusableView>);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Focuses the first {@link #_focusables focusable} in the form.
+     */
+    focus(): void;
+}

package/src/imageinsert/ui/imageinsertformview.js

@@ -0,0 +1,95 @@
+/**
+ * @license Copyright (c) 2003-2024, 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.js';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
+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);
+            }
+        }
+        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();
+    }
+}

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

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2003-2024, 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 { View, LabeledFieldView, type InputTextView } from 'ckeditor5/src/ui.js';
+import { KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+/**
+ * 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 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;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * 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;
+    /**
+     * Focuses the view.
+     */
+    focus(): void;
+}

package/src/imageinsert/ui/imageinserturlview.js

@@ -0,0 +1,88 @@
+/**
+ * @license Copyright (c) 2003-2024, 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 { View, LabeledFieldView, createLabeledInputText } from 'ckeditor5/src/ui.js';
+import { KeystrokeHandler } from 'ckeditor5/src/utils.js';
+/**
+ * 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.keystrokes = new KeystrokeHandler();
+        this.urlInputView = this._createUrlInputView();
+        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'
+                        ]
+                    }
+                }
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.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.inputMode = 'url';
+        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;
+    }
+    /**
+     * Focuses the view.
+     */
+    focus() {
+        this.urlInputView.focus();
+    }
+}

package/src/imageinsert.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright (c) 2003-2024, 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
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUpload from './imageupload.js';
+import ImageInsertViaUrl from './imageinsertviaurl.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
+/**
+ * The image insert plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature}
+ * and {@glink features/images/images-inserting Insert images via source URL} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins
+ * to enable image uploading or inserting via implemented integrations:
+ *
+ * * {@link module:image/imageupload~ImageUpload}
+ * * {@link module:image/imageinsert/imageinsertui~ImageInsertUI}
+ */
+export default class ImageInsert extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageInsert";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUpload, typeof ImageInsertViaUrl, typeof ImageInsertUI];
+}

package/src/imageinsert.js

@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2024, 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
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUpload from './imageupload.js';
+import ImageInsertViaUrl from './imageinsertviaurl.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
+/**
+ * The image insert plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature}
+ * and {@glink features/images/images-inserting Insert images via source URL} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins
+ * to enable image uploading or inserting via implemented integrations:
+ *
+ * * {@link module:image/imageupload~ImageUpload}
+ * * {@link module:image/imageinsert/imageinsertui~ImageInsertUI}
+ */
+export default class ImageInsert extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageInsert';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUpload, ImageInsertViaUrl, ImageInsertUI];
+    }
+}

package/src/imageinsertviaurl.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageinsertviaurl
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
+import ImageInsertViaUrlUI from './imageinsert/imageinsertviaurlui.js';
+/**
+ * The image insert via URL plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/images-inserting
+ * Insert images via source URL} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins
+ * to enable image inserting via implemented integrations:
+ *
+ * * {@link module:image/imageinsert/imageinsertui~ImageInsertUI},
+ */
+export default class ImageInsertViaUrl extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageInsertViaUrl";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageInsertViaUrlUI, typeof ImageInsertUI];
+}

package/src/imageinsertviaurl.js

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageinsertviaurl
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageInsertUI from './imageinsert/imageinsertui.js';
+import ImageInsertViaUrlUI from './imageinsert/imageinsertviaurlui.js';
+/**
+ * The image insert via URL plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/images-inserting
+ * Insert images via source URL} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins
+ * to enable image inserting via implemented integrations:
+ *
+ * * {@link module:image/imageinsert/imageinsertui~ImageInsertUI},
+ */
+export default class ImageInsertViaUrl extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageInsertViaUrl';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageInsertViaUrlUI, ImageInsertUI];
+    }
+}

package/src/imageresize/imagecustomresizeui.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageresize/imagecustomresizeui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ContextualBalloon } from 'ckeditor5/src/ui.js';
+/**
+ * The custom resize image UI plugin.
+ *
+ * The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
+ */
+export default class ImageCustomResizeUI extends Plugin {
+    /**
+     * The contextual balloon plugin instance.
+     */
+    private _balloon?;
+    /**
+     * A form containing a textarea and buttons, used to change the `alt` text value.
+     */
+    private _form?;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ContextualBalloon];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageCustomResizeUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Creates the {@link module:image/imageresize/ui/imagecustomresizeformview~ImageCustomResizeFormView}
+     * form.
+     */
+    private _createForm;
+    /**
+     * Shows the {@link #_form} in the {@link #_balloon}.
+     *
+     * @internal
+     */
+    _showForm(unit: string): void;
+    /**
+     * Removes the {@link #_form} from the {@link #_balloon}.
+     *
+     * @param focusEditable Controls whether the editing view is focused afterwards.
+     */
+    private _hideForm;
+    /**
+     * Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
+     */
+    private get _isVisible();
+    /**
+     * Returns `true` when the {@link #_form} is in the {@link #_balloon}.
+     */
+    private get _isInBalloon();
+}