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

package/src/bindings/draggableviewmixin.js

@@ -1,144 +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
- */
-import { global } from '@ckeditor/ckeditor5-utils';
-/**
- * A mixin that brings the possibility to observe dragging of the view element.
- * The view has to implement the {@link ~DraggableView} interface to use it:
- *
- * ```js
- * export class MyDraggableView extends DraggableViewMixin( View ) implements DraggableView {
- * 		// ...
- * }
- * ```
- *
- * Creating a class extending it attaches a set of mouse and touch listeners allowing to observe dragging of the view element:
- * * `mousedown` and `touchstart` on the view element - starting the dragging.
- * * `mousemove` and `touchmove` on the document - updating the view coordinates.
- * * `mouseup` and `touchend` on the document - stopping the dragging.
- *
- * The mixin itself does not provide a visual feedback (that is, the dragged element does not change its position) -
- * it is up to the developer to implement it.
- */
-export function DraggableViewMixin(view) {
-    class DraggableMixin extends view {
-        /**
-         * A bound version of {@link #_onDrag}.
-         */
-        _onDragBound = this._onDrag.bind(this);
-        /**
-         * A bound version of {@link #_onDragEnd}.
-         */
-        _onDragEndBound = this._onDragEnd.bind(this);
-        /**
-         * The last coordinates of the view. It is updated on every mouse move.
-         */
-        _lastDraggingCoordinates = { x: 0, y: 0 };
-        /**
-         * @inheritDoc
-         */
-        constructor(...args) {
-            super(...args);
-            this.on('render', () => {
-                this._attachListeners();
-            });
-            this.set('isDragging', false);
-        }
-        /**
-         * Attaches the listeners for the drag start.
-         */
-        _attachListeners() {
-            this.listenTo(this.element, 'mousedown', this._onDragStart.bind(this));
-            this.listenTo(this.element, 'touchstart', this._onDragStart.bind(this));
-        }
-        /**
-         * Attaches the listeners for the dragging and drag end.
-         */
-        _attachDragListeners() {
-            this.listenTo(global.document, 'mouseup', this._onDragEndBound);
-            this.listenTo(global.document, 'touchend', this._onDragEndBound);
-            this.listenTo(global.document, 'mousemove', this._onDragBound);
-            this.listenTo(global.document, 'touchmove', this._onDragBound);
-        }
-        /**
-         * Detaches the listeners after the drag end.
-         */
-        _detachDragListeners() {
-            this.stopListening(global.document, 'mouseup', this._onDragEndBound);
-            this.stopListening(global.document, 'touchend', this._onDragEndBound);
-            this.stopListening(global.document, 'mousemove', this._onDragBound);
-            this.stopListening(global.document, 'touchmove', this._onDragBound);
-        }
-        /**
-         * Starts the dragging listeners and sets the initial view coordinates.
-         */
-        _onDragStart(evt, domEvt) {
-            if (!this._isHandleElementPressed(domEvt)) {
-                return;
-            }
-            this._attachDragListeners();
-            let x = 0;
-            let y = 0;
-            // If dragging is performed with a mouse, there is only one set of coordinates available.
-            // But when using a touch device, there may be many of them, so use the coordinates from the first touch.
-            if (domEvt instanceof MouseEvent) {
-                x = domEvt.clientX;
-                y = domEvt.clientY;
-            }
-            else {
-                x = domEvt.touches[0].clientX;
-                y = domEvt.touches[0].clientY;
-            }
-            this._lastDraggingCoordinates = { x, y };
-            this.isDragging = true;
-        }
-        /**
-         * Updates the view coordinates and fires the `drag` event.
-         */
-        _onDrag(evt, domEvt) {
-            // If dragging was stopped by some external intervention, stop listening.
-            if (!this.isDragging) {
-                this._detachDragListeners();
-                return;
-            }
-            let newX = 0;
-            let newY = 0;
-            // If dragging is performed with a mouse, there is only one set of coordinates available.
-            // But when using a touch device, there may be many of them, so use the coordinates from the first touch.
-            if (domEvt instanceof MouseEvent) {
-                newX = domEvt.clientX;
-                newY = domEvt.clientY;
-            }
-            else {
-                newX = domEvt.touches[0].clientX;
-                newY = domEvt.touches[0].clientY;
-            }
-            // Prevents selection of text while dragging on Safari.
-            domEvt.preventDefault();
-            this.fire('drag', {
-                deltaX: Math.round(newX - this._lastDraggingCoordinates.x),
-                deltaY: Math.round(newY - this._lastDraggingCoordinates.y)
-            });
-            this._lastDraggingCoordinates = { x: newX, y: newY };
-        }
-        /**
-         * Stops the dragging and detaches the listeners.
-         */
-        _onDragEnd() {
-            this._detachDragListeners();
-            this.isDragging = false;
-        }
-        /**
-         * Checks if the drag handle element was pressed.
-         */
-        _isHandleElementPressed(domEvt) {
-            if (!this.dragHandleElement) {
-                return false;
-            }
-            return this.dragHandleElement === domEvt.target ||
-                (domEvt.target instanceof HTMLElement && this.dragHandleElement.contains(domEvt.target));
-        }
-    }
-    return DraggableMixin;
-}

package/src/bindings/preventdefault.js

@@ -1,35 +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
- */
-/**
- * A helper which executes a native `Event.preventDefault()` if the target of an event equals the
- * {@link module:ui/view~View#element element of the view}. It shortens the definition of a
- * {@link module:ui/view~View#template template}.
- *
- * ```ts
- * // In a class extending View.
- * import { preventDefault } from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
- *
- * // ...
- *
- * this.setTemplate( {
- * 	tag: 'div',
- *
- * 	on: {
- * 		// Prevent the default mousedown action on this view.
- * 		mousedown: preventDefault( this )
- * 	}
- * } );
- * ```
- *
- * @param view View instance that defines the template.
- * @internal
- */
-export function preventDefault(view) {
-    return view.bindTemplate.to(evt => {
-        if (evt.target === view.element) {
-            evt.preventDefault();
-        }
-    });
-}

package/src/bindings/submithandler.js

@@ -1,47 +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
- */
-/**
- * A handler useful for {@link module:ui/view~View views} working as HTML forms. It intercepts a native DOM
- * `submit` event, prevents the default web browser behavior (navigation and page reload) and
- * fires the `submit` event on a view instead. Such a custom event can be then used by any
- * {@link module:utils/dom/emittermixin~DomEmitter emitter}, e.g. to serialize the form data.
- *
- * ```ts
- * import { submitHandler } from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
- *
- * // ...
- *
- * class AnyFormView extends View {
- * 	constructor() {
- * 		super();
- *
- * 		// ...
- *
- * 		submitHandler( {
- * 			view: this
- * 		} );
- * 	}
- * }
- *
- * // ...
- *
- * const view = new AnyFormView();
- *
- * // A sample listener attached by an emitter working with the view.
- * this.listenTo( view, 'submit', () => {
- * 	saveTheFormData();
- * 	hideTheForm();
- * } );
- * ```
- *
- * @param options Configuration options.
- * @param options.view The view which DOM `submit` events should be handled.
- */
-export function submitHandler({ view }) {
-    view.listenTo(view.element, 'submit', (evt, domEvt) => {
-        domEvt.preventDefault();
-        view.fire('submit');
-    }, { useCapture: true });
-}

package/src/button/button.js

@@ -1,5 +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
- */
-export {};

package/src/button/buttonlabel.js

@@ -1,5 +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
- */
-export {};

package/src/button/buttonlabelview.js

@@ -1,42 +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 ui/button/buttonlabelview
- */
-import { View } from '../view.js';
-/**
- * A default implementation of the button view's label. It comes with a dynamic text support
- * via {@link module:ui/button/buttonlabelview~ButtonLabelView#text} property.
- */
-export class ButtonLabelView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor() {
-        super();
-        this.set({
-            style: undefined,
-            text: undefined,
-            id: undefined
-        });
-        const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'span',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-button__label'
-                ],
-                style: bind.to('style'),
-                id: bind.to('id')
-            },
-            children: [
-                {
-                    text: bind.to('text')
-                }
-            ]
-        });
-    }
-}

package/src/button/buttonview.js

@@ -1,278 +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 ui/button/buttonview
- */
-import { View } from '../view.js';
-import { IconView } from '../icon/iconview.js';
-import { ButtonLabelView } from './buttonlabelview.js';
-import { env, getEnvKeystrokeText, uid, delay } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/button/button.css';
-/**
- * The button view class.
- *
- * ```ts
- * const view = new ButtonView();
- *
- * view.set( {
- * 	label: 'A button',
- * 	keystroke: 'Ctrl+B',
- * 	tooltip: true,
- * 	withText: true
- * } );
- *
- * view.render();
- *
- * document.body.append( view.element );
- * ```
- */
-export class ButtonView extends View {
-    /**
-     * Collection of the child views inside of the button {@link #element}.
-     */
-    children;
-    /**
-     * Label of the button view. Its text is configurable using the {@link #label label attribute}.
-     *
-     * If not configured otherwise in the `constructor()`, by default the label is an instance
-     * of {@link module:ui/button/buttonlabelview~ButtonLabelView}.
-     */
-    labelView;
-    /**
-     * The icon view of the button. Will be added to {@link #children} when the
-     * {@link #icon icon attribute} is defined.
-     */
-    iconView;
-    /**
-     * A view displaying the keystroke of the button next to the {@link #labelView label}.
-     * Added to {@link #children} when the {@link #withKeystroke `withKeystroke` attribute}
-     * is defined.
-     */
-    keystrokeView;
-    /**
-     * Delayed focus function for focus handling in Safari.
-     */
-    _focusDelayed = null;
-    /**
-     * Creates an instance of the button view class.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param labelView The instance of the button's label. If not provided, an instance of
-     * {@link module:ui/button/buttonlabelview~ButtonLabelView} is used.
-     */
-    constructor(locale, labelView = new ButtonLabelView()) {
-        super(locale);
-        const bind = this.bindTemplate;
-        const ariaLabelUid = uid();
-        // Implement the Button interface.
-        this.set('_ariaPressed', false);
-        this.set('_ariaChecked', false);
-        this.set('ariaLabel', undefined);
-        this.set('ariaLabelledBy', `ck-editor__aria-label_${ariaLabelUid}`);
-        this.set('class', undefined);
-        this.set('labelStyle', undefined);
-        this.set('icon', undefined);
-        this.set('isEnabled', true);
-        this.set('isOn', false);
-        this.set('isVisible', true);
-        this.set('isToggleable', false);
-        this.set('keystroke', undefined);
-        this.set('label', undefined);
-        this.set('role', undefined);
-        this.set('tabindex', -1);
-        this.set('tooltip', false);
-        this.set('tooltipPosition', 's');
-        this.set('type', 'button');
-        this.set('withText', false);
-        this.set('withKeystroke', false);
-        this.children = this.createCollection();
-        this.labelView = this._setupLabelView(labelView);
-        this.iconView = new IconView();
-        this.iconView.extendTemplate({
-            attributes: {
-                class: 'ck-button__icon'
-            }
-        });
-        this.iconView.bind('content').to(this, 'icon');
-        this.keystrokeView = this._createKeystrokeView();
-        this.bind('_tooltipString').to(this, 'tooltip', this, 'label', this, 'keystroke', this._getTooltipString.bind(this));
-        const template = {
-            tag: 'button',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-button',
-                    bind.to('class'),
-                    bind.if('isEnabled', 'ck-disabled', value => !value),
-                    bind.if('isVisible', 'ck-hidden', value => !value),
-                    bind.to('isOn', value => value ? 'ck-on' : 'ck-off'),
-                    bind.if('withText', 'ck-button_with-text'),
-                    bind.if('withKeystroke', 'ck-button_with-keystroke')
-                ],
-                role: bind.to('role'),
-                type: bind.to('type', value => value ? value : 'button'),
-                tabindex: bind.to('tabindex'),
-                'aria-checked': bind.to('_ariaChecked'),
-                'aria-pressed': bind.to('_ariaPressed'),
-                'aria-label': bind.to('ariaLabel'),
-                'aria-labelledby': bind.to('ariaLabelledBy'),
-                'aria-disabled': bind.if('isEnabled', true, value => !value),
-                'data-cke-tooltip-text': bind.to('_tooltipString'),
-                'data-cke-tooltip-position': bind.to('tooltipPosition')
-            },
-            children: this.children,
-            on: {
-                click: bind.to(evt => {
-                    // We can't make the button disabled using the disabled attribute, because it won't be focusable.
-                    // Though, shouldn't this condition be moved to the button controller?
-                    if (this.isEnabled) {
-                        this.fire('execute');
-                    }
-                    else {
-                        // Prevent the default when button is disabled, to block e.g.
-                        // automatic form submitting. See ckeditor/ckeditor5-link#74.
-                        evt.preventDefault();
-                    }
-                })
-            }
-        };
-        this.bind('_ariaPressed').to(this, 'isOn', this, 'isToggleable', this, 'role', (isOn, isToggleable, role) => {
-            if (!isToggleable || isCheckableRole(role)) {
-                return false;
-            }
-            return String(!!isOn);
-        });
-        this.bind('_ariaChecked').to(this, 'isOn', this, 'isToggleable', this, 'role', (isOn, isToggleable, role) => {
-            if (!isToggleable || !isCheckableRole(role)) {
-                return false;
-            }
-            return String(!!isOn);
-        });
-        // On Safari we have to force the focus on a button on click as it's the only browser
-        // that doesn't do that automatically. See #12115.
-        if (env.isSafari) {
-            if (!this._focusDelayed) {
-                this._focusDelayed = delay(() => this.focus(), 0);
-            }
-            template.on.mousedown = bind.to(() => {
-                this._focusDelayed();
-            });
-            template.on.mouseup = bind.to(() => {
-                this._focusDelayed.cancel();
-            });
-        }
-        this.setTemplate(template);
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        if (this.icon) {
-            this.children.add(this.iconView);
-        }
-        this.on('change:icon', (evt, prop, newIcon, oldIcon) => {
-            if (newIcon && !oldIcon) {
-                this.children.add(this.iconView, 0);
-            }
-            else if (!newIcon && oldIcon) {
-                this.children.remove(this.iconView);
-            }
-        });
-        this.children.add(this.labelView);
-        if (this.withKeystroke && this.keystroke) {
-            this.children.add(this.keystrokeView);
-        }
-    }
-    /**
-     * Focuses the {@link #element} of the button.
-     */
-    focus() {
-        this.element.focus();
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        if (this._focusDelayed) {
-            this._focusDelayed.cancel();
-        }
-        super.destroy();
-    }
-    /**
-     * Binds the label view instance it with button attributes.
-     */
-    _setupLabelView(labelView) {
-        labelView.bind('text', 'style', 'id').to(this, 'label', 'labelStyle', 'ariaLabelledBy');
-        return labelView;
-    }
-    /**
-     * Creates a view that displays a keystroke next to a {@link #labelView label }
-     * and binds it with button attributes.
-     */
-    _createKeystrokeView() {
-        const keystrokeView = new View();
-        keystrokeView.setTemplate({
-            tag: 'span',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-button__keystroke'
-                ]
-            },
-            children: [
-                {
-                    text: this.bindTemplate.to('keystroke', text => getEnvKeystrokeText(text))
-                }
-            ]
-        });
-        return keystrokeView;
-    }
-    /**
-     * Gets the text for the tooltip from the combination of
-     * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
-     *
-     * @see #tooltip
-     * @see #_tooltipString
-     * @param tooltip Button tooltip.
-     * @param label Button label.
-     * @param keystroke Button keystroke.
-     */
-    _getTooltipString(tooltip, label, keystroke) {
-        if (tooltip) {
-            if (typeof tooltip == 'string') {
-                return tooltip;
-            }
-            else {
-                if (keystroke) {
-                    keystroke = getEnvKeystrokeText(keystroke);
-                }
-                if (tooltip instanceof Function) {
-                    return tooltip(label, keystroke);
-                }
-                else {
-                    return `${label}${keystroke ? ` (${keystroke})` : ''}`;
-                }
-            }
-        }
-        return '';
-    }
-}
-/**
- * Checks if `aria-checkbox` can be used with specified role.
- */
-function isCheckableRole(role) {
-    switch (role) {
-        case 'radio':
-        case 'checkbox':
-        case 'option':
-        case 'switch':
-        case 'menuitemcheckbox':
-        case 'menuitemradio':
-            return true;
-        default:
-            return false;
-    }
-}