@ckeditor/ckeditor5-image 47.6.1-alpha.1 → 48.0.0-alpha.0

package/src/imagetextalternative/imagetextalternativeui.js

@@ -1,183 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/imagetextalternative/imagetextalternativeui
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView, ContextualBalloon, clickOutsideHandler, CssTransitionDisablerMixin } from 'ckeditor5/src/ui.js';
-import { IconTextAlternative } from 'ckeditor5/src/icons.js';
-import { TextAlternativeFormView } from './ui/textalternativeformview.js';
-import { repositionContextualBalloon, getBalloonPositionData } from '../image/ui/utils.js';
-/**
- * The image text alternative UI plugin.
- *
- * The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
- */
-export class ImageTextAlternativeUI extends Plugin {
-    /**
-     * The contextual balloon plugin instance.
-     */
-    _balloon;
-    /**
-     * A form containing a textarea and buttons, used to change the `alt` text value.
-     */
-    _form;
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ContextualBalloon];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageTextAlternativeUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        this._createButton();
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        // Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).
-        if (this._form) {
-            this._form.destroy();
-        }
-    }
-    /**
-     * Creates a button showing the balloon panel for changing the image text alternative and
-     * registers it in the editor {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
-     */
-    _createButton() {
-        const editor = this.editor;
-        const t = editor.t;
-        editor.ui.componentFactory.add('imageTextAlternative', locale => {
-            const command = editor.commands.get('imageTextAlternative');
-            const view = new ButtonView(locale);
-            view.set({
-                label: t('Change image text alternative'),
-                icon: IconTextAlternative,
-                tooltip: true
-            });
-            view.bind('isEnabled').to(command, 'isEnabled');
-            view.bind('isOn').to(command, 'value', value => !!value);
-            this.listenTo(view, 'execute', () => {
-                this._showForm();
-            });
-            return view;
-        });
-    }
-    /**
-     * Creates the {@link module:image/imagetextalternative/ui/textalternativeformview~TextAlternativeFormView}
-     * form.
-     */
-    _createForm() {
-        const editor = this.editor;
-        const view = editor.editing.view;
-        const viewDocument = view.document;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        this._balloon = this.editor.plugins.get('ContextualBalloon');
-        this._form = new (CssTransitionDisablerMixin(TextAlternativeFormView))(editor.locale);
-        // Render the form so its #element is available for clickOutsideHandler.
-        this._form.render();
-        this.listenTo(this._form, 'submit', () => {
-            editor.execute('imageTextAlternative', {
-                newValue: this._form.labeledInput.fieldView.element.value
-            });
-            this._hideForm(true);
-        });
-        this.listenTo(this._form, 'cancel', () => {
-            this._hideForm(true);
-        });
-        // Reposition the balloon or hide the form if an image widget is no longer selected.
-        this.listenTo(editor.ui, 'update', () => {
-            if (!imageUtils.getClosestSelectedImageWidget(viewDocument.selection)) {
-                this._hideForm(true);
-            }
-            else if (this._isVisible) {
-                repositionContextualBalloon(editor);
-            }
-        });
-        // Close on click outside of balloon panel element.
-        clickOutsideHandler({
-            emitter: this._form,
-            activator: () => this._isVisible,
-            contextElements: () => [this._balloon.view.element],
-            callback: () => this._hideForm()
-        });
-    }
-    /**
-     * Shows the {@link #_form} in the {@link #_balloon}.
-     */
-    _showForm() {
-        if (this._isVisible) {
-            return;
-        }
-        if (!this._form) {
-            this._createForm();
-        }
-        const editor = this.editor;
-        const command = editor.commands.get('imageTextAlternative');
-        const labeledInput = this._form.labeledInput;
-        this._form.disableCssTransitions();
-        if (!this._isInBalloon) {
-            this._balloon.add({
-                view: this._form,
-                position: getBalloonPositionData(editor)
-            });
-        }
-        // Make sure that each time the panel shows up, the field remains in sync with the value of
-        // the command. If the user typed in the input, then canceled the balloon (`labeledInput#value`
-        // stays unaltered) and re-opened it without changing the value of the command, they would see the
-        // old value instead of the actual value of the command.
-        // https://github.com/ckeditor/ckeditor5-image/issues/114
-        labeledInput.fieldView.value = labeledInput.fieldView.element.value = command.value || '';
-        this._form.labeledInput.fieldView.select();
-        this._form.enableCssTransitions();
-    }
-    /**
-     * Removes the {@link #_form} from the {@link #_balloon}.
-     *
-     * @param focusEditable Controls whether the editing view is focused afterwards.
-     */
-    _hideForm(focusEditable = false) {
-        if (!this._isInBalloon) {
-            return;
-        }
-        // Blur the input element before removing it from DOM to prevent issues in some browsers.
-        // See https://github.com/ckeditor/ckeditor5/issues/1501.
-        if (this._form.focusTracker.isFocused) {
-            this._form.saveButtonView.focus();
-        }
-        this._balloon.remove(this._form);
-        if (focusEditable) {
-            this.editor.editing.view.focus();
-        }
-    }
-    /**
-     * Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
-     */
-    get _isVisible() {
-        return !!this._balloon && this._balloon.visibleView === this._form;
-    }
-    /**
-     * Returns `true` when the {@link #_form} is in the {@link #_balloon}.
-     */
-    get _isInBalloon() {
-        return !!this._balloon && this._balloon.hasView(this._form);
-    }
-}

package/src/imagetextalternative/ui/textalternativeformview.js

@@ -1,193 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/imagetextalternative/ui/textalternativeformview
- */
-import { ButtonView, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { IconPreviousArrow } from 'ckeditor5/src/icons.js';
-import '../../../theme/textalternativeform.css';
-// See: #8833.
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
-/**
- * The TextAlternativeFormView class.
- *
- * @internal
- */
-export class TextAlternativeFormView extends View {
-    /**
-     * Tracks information about the DOM focus in the form.
-     */
-    focusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    keystrokes;
-    /**
-     * An input with a label.
-     */
-    labeledInput;
-    /**
-     * The Back button view displayed in the header.
-     */
-    backButtonView;
-    /**
-     * A button used to submit the form.
-     */
-    saveButtonView;
-    /**
-     * A collection of child views.
-     */
-    children;
-    /**
-     * A collection of views which can be focused in the form.
-     */
-    _focusables;
-    /**
-     * Helps cycling over {@link #_focusables} in the form.
-     */
-    _focusCycler;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        // Create buttons.
-        this.backButtonView = this._createBackButton();
-        this.saveButtonView = this._createSaveButton();
-        // Create input fields.
-        this.labeledInput = this._createLabeledInputView();
-        this.children = this.createCollection([
-            this._createHeaderView()
-        ]);
-        this.children.add(new FormRowView(locale, {
-            children: [
-                this.labeledInput,
-                this.saveButtonView
-            ],
-            class: [
-                'ck-form__row_with-submit',
-                'ck-form__row_large-top-padding'
-            ]
-        }));
-        this._focusables = new ViewCollection();
-        // Close the panel on esc key press when the **form has focus**.
-        this.keystrokes.set('Esc', (data, cancel) => {
-            this.fire('cancel');
-            cancel();
-        });
-        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-form',
-                    'ck-text-alternative-form',
-                    'ck-responsive-form'
-                ],
-                // https://github.com/ckeditor/ckeditor5-image/issues/40
-                tabindex: '-1'
-            },
-            children: this.children
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        submitHandler({
-            view: this
-        });
-        const childViews = [
-            this.backButtonView,
-            this.labeledInput,
-            this.saveButtonView
-        ];
-        childViews.forEach(v => {
-            // Register the view as focusable.
-            this._focusables.add(v);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(v.element);
-        });
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Creates a back button view that cancels the form.
-     */
-    _createBackButton() {
-        const t = this.locale.t;
-        const backButton = new ButtonView(this.locale);
-        backButton.set({
-            class: 'ck-button-back',
-            label: t('Back'),
-            icon: IconPreviousArrow,
-            tooltip: true
-        });
-        backButton.delegate('execute').to(this, 'cancel');
-        return backButton;
-    }
-    /**
-     * Creates a save button view that text alternative the image.
-     */
-    _createSaveButton() {
-        const t = this.locale.t;
-        const saveButton = new ButtonView(this.locale);
-        saveButton.set({
-            label: t('Save'),
-            withText: true,
-            type: 'submit',
-            class: 'ck-button-action ck-button-bold'
-        });
-        return saveButton;
-    }
-    /**
-     * Creates a header view for the form.
-     */
-    _createHeaderView() {
-        const t = this.locale.t;
-        const header = new FormHeaderView(this.locale, {
-            label: t('Text Alternative')
-        });
-        header.children.add(this.backButtonView, 0);
-        return header;
-    }
-    /**
-     * 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');
-        labeledInput.class = 'ck-labeled-field-view_full-width';
-        return labeledInput;
-    }
-}

package/src/imagetextalternative.js

@@ -1,39 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/imagetextalternative
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting.js';
-import { ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui.js';
-/**
- * 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 class ImageTextAlternative extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageTextAlternativeEditing, ImageTextAlternativeUI];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageTextAlternative';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-}

package/src/imagetoolbar.js

@@ -1,63 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/imagetoolbar
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { WidgetToolbarRepository } from 'ckeditor5/src/widget.js';
-import { ImageUtils } from './imageutils.js';
-import { isObject } from 'es-toolkit/compat';
-/**
- * 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 class ImageToolbar extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [WidgetToolbarRepository, ImageUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageToolbar';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @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);
-}