@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

package/src/imagestyle.js

@@ -0,0 +1,42 @@
+/**
+ * @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/imagestyle
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageStyleEditing from './imagestyle/imagestyleediting.js';
+import ImageStyleUI from './imagestyle/imagestyleui.js';
+/**
+ * The image style plugin.
+ *
+ * For a detailed overview of the image styles feature, check the {@glink features/images/images-styles documentation}.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ * * {@link module:image/imagestyle/imagestyleediting~ImageStyleEditing},
+ * * {@link module:image/imagestyle/imagestyleui~ImageStyleUI}
+ *
+ * It provides a default configuration, which can be extended or overwritten.
+ * Read more about the {@link module:image/imageconfig~ImageConfig#styles image styles configuration}.
+ */
+export default class ImageStyle extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageStyleEditing, ImageStyleUI];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageStyle';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+}

package/src/imagetextalternative/imagetextalternativecommand.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @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/imagetextalternative/imagetextalternativecommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * The image text alternative command. It is used to change the `alt` attribute of `<imageBlock>` and `<imageInline>` model elements.
+ */
+export default class ImageTextAlternativeCommand extends Command {
+    /**
+     * The command value: `false` if there is no `alt` attribute, otherwise the value of the `alt` attribute.
+     *
+     * @readonly
+     * @observable
+     */
+    value: string | false;
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options
+     * @param options.newValue The new value of the `alt` attribute to set.
+     */
+    execute(options: {
+        newValue: string;
+    }): void;
+}

package/src/imagetextalternative/imagetextalternativecommand.js

@@ -0,0 +1,44 @@
+/**
+ * @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/imagetextalternative/imagetextalternativecommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * The image text alternative command. It is used to change the `alt` attribute of `<imageBlock>` and `<imageInline>` model elements.
+ */
+export default class ImageTextAlternativeCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
+        this.isEnabled = !!element;
+        if (this.isEnabled && element.hasAttribute('alt')) {
+            this.value = element.getAttribute('alt');
+        }
+        else {
+            this.value = false;
+        }
+    }
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options
+     * @param options.newValue The new value of the `alt` attribute to set.
+     */
+    execute(options) {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const model = editor.model;
+        const imageElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
+        model.change(writer => {
+            writer.setAttribute('alt', options.newValue, imageElement);
+        });
+    }
+}

package/src/imagetextalternative/imagetextalternativeediting.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @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/imagetextalternative/imagetextalternativeediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from '../imageutils.js';
+/**
+ * The image text alternative editing plugin.
+ *
+ * Registers the `'imageTextAlternative'` command.
+ */
+export default class ImageTextAlternativeEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageTextAlternativeEditing";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/src/imagetextalternative/imagetextalternativeediting.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/imagetextalternative/imagetextalternativeediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageTextAlternativeCommand from './imagetextalternativecommand.js';
+import ImageUtils from '../imageutils.js';
+/**
+ * The image text alternative editing plugin.
+ *
+ * Registers the `'imageTextAlternative'` command.
+ */
+export default class ImageTextAlternativeEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageTextAlternativeEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        this.editor.commands.add('imageTextAlternative', new ImageTextAlternativeCommand(this.editor));
+    }
+}

package/src/imagetextalternative/imagetextalternativeui.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @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/imagetextalternative/imagetextalternativeui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ContextualBalloon } from 'ckeditor5/src/ui.js';
+/**
+ * The image text alternative UI plugin.
+ *
+ * The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
+ */
+export default class ImageTextAlternativeUI 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(): "ImageTextAlternativeUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * 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}.
+     */
+    private _createButton;
+    /**
+     * Creates the {@link module:image/imagetextalternative/ui/textalternativeformview~TextAlternativeFormView}
+     * form.
+     */
+    private _createForm;
+    /**
+     * Shows the {@link #_form} in the {@link #_balloon}.
+     */
+    private _showForm;
+    /**
+     * 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();
+}

package/src/imagetextalternative/imagetextalternativeui.js

@@ -0,0 +1,179 @@
+/**
+ * @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/imagetextalternative/imagetextalternativeui
+ */
+import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { ButtonView, ContextualBalloon, clickOutsideHandler, CssTransitionDisablerMixin } from 'ckeditor5/src/ui.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 default class ImageTextAlternativeUI extends Plugin {
+    /**
+     * @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: icons.textAlternative,
+                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);
+        });
+        // Close the form on Esc key press.
+        this._form.keystrokes.set('Esc', (data, cancel) => {
+            this._hideForm(true);
+            cancel();
+        });
+        // 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.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @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/imagetextalternative/ui/textalternativeformview
+ */
+import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, type InputView, type FocusableView } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+import '../../../theme/textalternativeform.css';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+/**
+ * The TextAlternativeFormView class.
+ */
+export default class TextAlternativeFormView extends View {
+    /**
+     * Tracks information about the DOM focus in the form.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * An input with a label.
+     */
+    labeledInput: LabeledFieldView<InputView>;
+    /**
+     * A button used to submit the form.
+     */
+    saveButtonView: ButtonView;
+    /**
+     * A button used to cancel the form.
+     */
+    cancelButtonView: ButtonView;
+    /**
+     * A collection of views which can be focused in the form.
+     */
+    protected readonly _focusables: ViewCollection<FocusableView>;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    protected readonly _focusCycler: FocusCycler;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Creates the button view.
+     *
+     * @param label The button label
+     * @param icon The button's icon.
+     * @param className The additional button CSS class name.
+     * @param eventName The event name that the ButtonView#execute event will be delegated to.
+     * @returns The button view instance.
+     */
+    private _createButton;
+    /**
+     * Creates an input with a label.
+     *
+     * @returns Labeled field view instance.
+     */
+    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/imagetextalternative/ui/textalternativeformview.js

@@ -0,0 +1,121 @@
+/**
+ * @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/imagetextalternative/ui/textalternativeformview
+ */
+import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
+import { icons } from 'ckeditor5/src/core.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';
+/**
+ * The TextAlternativeFormView class.
+ */
+export default class TextAlternativeFormView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const t = this.locale.t;
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.labeledInput = this._createLabeledInputView();
+        this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
+        this.saveButtonView.type = 'submit';
+        this.cancelButtonView = this._createButton(t('Cancel'), icons.cancel, 'ck-button-cancel', 'cancel');
+        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.setTemplate({
+            tag: 'form',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-text-alternative-form',
+                    'ck-responsive-form'
+                ],
+                // https://github.com/ckeditor/ckeditor5-image/issues/40
+                tabindex: '-1'
+            },
+            children: [
+                this.labeledInput,
+                this.saveButtonView,
+                this.cancelButtonView
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.keystrokes.listenTo(this.element);
+        submitHandler({ view: this });
+        [this.labeledInput, this.saveButtonView, this.cancelButtonView]
+            .forEach(v => {
+            // Register the view as focusable.
+            this._focusables.add(v);
+            // Register the view in the focus tracker.
+            this.focusTracker.add(v.element);
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Creates the button view.
+     *
+     * @param label The button label
+     * @param icon The button's icon.
+     * @param className The additional button CSS class name.
+     * @param eventName The event name that the ButtonView#execute event will be delegated to.
+     * @returns The button view instance.
+     */
+    _createButton(label, icon, className, eventName) {
+        const button = new ButtonView(this.locale);
+        button.set({
+            label,
+            icon,
+            tooltip: true
+        });
+        button.extendTemplate({
+            attributes: {
+                class: className
+            }
+        });
+        if (eventName) {
+            button.delegate('execute').to(this, eventName);
+        }
+        return button;
+    }
+    /**
+     * 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');
+        return labeledInput;
+    }
+}

package/src/imagetextalternative.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @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/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 default class ImageTextAlternative extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageTextAlternativeEditing, typeof ImageTextAlternativeUI];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageTextAlternative";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+}