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

package/src/autocomplete/autocompleteview.js

@@ -1,157 +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/autocomplete/autocompleteview
-*/
-import { getOptimalPosition, global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
-import { SearchTextView } from '../search/text/searchtextview.js';
-import '../../theme/components/autocomplete/autocomplete.css';
-/**
- * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class
- * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
- * the component.
- */
-export class AutocompleteView extends SearchTextView {
-    /**
-     * The configuration of the autocomplete view.
-     */
-    _config;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale, config) {
-        super(locale, config);
-        this._config = config;
-        const toPx = toUnit('px');
-        this.extendTemplate({
-            attributes: {
-                class: ['ck-autocomplete']
-            }
-        });
-        const bindResultsView = this.resultsView.bindTemplate;
-        this.resultsView.set('isVisible', false);
-        this.resultsView.set('_position', 's');
-        this.resultsView.set('_width', 0);
-        this.resultsView.extendTemplate({
-            attributes: {
-                class: [
-                    bindResultsView.if('isVisible', 'ck-hidden', value => !value),
-                    bindResultsView.to('_position', value => `ck-search__results_${value}`)
-                ],
-                style: {
-                    width: bindResultsView.to('_width', toPx)
-                }
-            }
-        });
-        // Update the visibility of the results view when the user focuses or blurs the component.
-        // This is also integration for the `resetOnBlur` configuration.
-        this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
-            this._updateResultsVisibility();
-            if (isFocused) {
-                // Reset the scroll position of the results view whenever the autocomplete reopens.
-                this.resultsView.element.scrollTop = 0;
-            }
-            else if (config.resetOnBlur) {
-                this.queryView.reset();
-            }
-        });
-        // Update the visibility of the results view when the user types in the query field.
-        // This is an integration for `queryMinChars` configuration.
-        // This is an integration for search results changing length and the #resultsView requiring to be repositioned.
-        this.on('search', () => {
-            this._updateResultsVisibility();
-            this._updateResultsViewWidthAndPosition();
-        });
-        // Hide the results view when the user presses the ESC key.
-        this.keystrokes.set('esc', (evt, cancel) => {
-            // Let the DOM event pass through if the focus is in the query view.
-            if (!this.resultsView.isVisible) {
-                return;
-            }
-            // Focus the query view first and only then close the results view. Otherwise, if the focus
-            // was in the results view, it will get lost.
-            this.queryView.focus();
-            this.resultsView.isVisible = false;
-            cancel();
-        });
-        // Update the position of the results view when the user scrolls the page.
-        // TODO: This needs to be debounced down the road.
-        this.listenTo(global.document, 'scroll', () => {
-            this._updateResultsViewWidthAndPosition();
-        });
-        // Hide the results when the component becomes disabled.
-        this.on('change:isEnabled', () => {
-            this._updateResultsVisibility();
-        });
-        // Update the value of the query field when the user selects a result.
-        this.filteredView.on('execute', (evt, { value }) => {
-            // Focus the query view first to avoid losing the focus.
-            this.focus();
-            // Resetting the view will ensure that the #queryView will update its empty state correctly.
-            // This prevents bugs related to dynamic labels or auto-grow when re-setting the same value
-            // to #queryView.fieldView.value (which does not trigger empty state change) to an
-            // #queryView.fieldView.element that has been changed by the user.
-            this.reset();
-            // Update the value of the query field.
-            this.queryView.fieldView.value = this.queryView.fieldView.element.value = value;
-            // Finally, hide the results view. The focus has been moved earlier so this is safe.
-            this.resultsView.isVisible = false;
-        });
-        // Update the position and width of the results view when it becomes visible.
-        this.resultsView.on('change:isVisible', () => {
-            this._updateResultsViewWidthAndPosition();
-        });
-    }
-    /**
-     * Updates the position of the results view on demand.
-     */
-    _updateResultsViewWidthAndPosition() {
-        if (!this.resultsView.isVisible) {
-            return;
-        }
-        this.resultsView._width = new Rect(this.queryView.fieldView.element).width;
-        const optimalResultsPosition = AutocompleteView._getOptimalPosition({
-            element: this.resultsView.element,
-            target: this.queryView.element,
-            fitInViewport: true,
-            positions: AutocompleteView.defaultResultsPositions
-        });
-        // _getOptimalPosition will return null if there is no optimal position found (e.g. target is off the viewport).
-        this.resultsView._position = optimalResultsPosition ? optimalResultsPosition.name : 's';
-    }
-    /**
-     * Updates the visibility of the results view on demand.
-     */
-    _updateResultsVisibility() {
-        const queryMinChars = typeof this._config.queryMinChars === 'undefined' ? 0 : this._config.queryMinChars;
-        const queryLength = this.queryView.fieldView.element.value.length;
-        this.resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;
-    }
-    /**
-     * Positions for the autocomplete results view. Two positions are defined by default:
-     * * `s` - below the search field,
-     * * `n` - above the search field.
-     */
-    static defaultResultsPositions = [
-        (fieldRect => {
-            return {
-                top: fieldRect.bottom,
-                left: fieldRect.left,
-                name: 's'
-            };
-        }),
-        ((fieldRect, resultsRect) => {
-            return {
-                top: fieldRect.top - resultsRect.height,
-                left: fieldRect.left,
-                name: 'n'
-            };
-        })
-    ];
-    /**
-     * A function used to calculate the optimal position for the dropdown panel.
-     */
-    static _getOptimalPosition = getOptimalPosition;
-}

package/src/badge/badge.js

@@ -1,226 +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 { Rect, DomEmitterMixin } from '@ckeditor/ckeditor5-utils';
-import { BalloonPanelView } from '../panel/balloon/balloonpanelview.js';
-import { throttle } from 'es-toolkit/compat';
-// ⚠ Note, whenever changing the threshold, make sure to update the docs/support/managing-ckeditor-logo.md docs
-// as this information is also mentioned there ⚠.
-const NARROW_ROOT_HEIGHT_THRESHOLD = 50;
-const NARROW_ROOT_WIDTH_THRESHOLD = 350;
-/**
- * A helper that enables the badge feature in the editor and renders a custom view next to the bottom of the editable element
- * (editor root, source editing area, etc.) when the editor is focused.
- *
- * @private
- */
-export class Badge extends /* #__PURE__ */ DomEmitterMixin() {
-    /**
-     * Editor instance the helper was created for.
-     */
-    editor;
-    /**
-     * A reference to the balloon panel hosting and positioning the badge content.
-     */
-    _balloonView = null;
-    /**
-     * A throttled version of the {@link #_showBalloon} method meant for frequent use to avoid performance loss.
-     */
-    _showBalloonThrottled = throttle(() => this._showBalloon(), 50, { leading: true });
-    /**
-     * A reference to the last editable element (root, source editing area, etc.) focused by the user.
-     * Since the focus can move to other focusable elements in the UI, this reference allows positioning the balloon over the
-     * right element whether the user is typing or using the UI.
-     */
-    _lastFocusedEditableElement = null;
-    /**
-     * An additional CSS class added to the `BalloonView`.
-     */
-    _balloonClass;
-    /**
-     * Creates a badge for a given editor. The feature is initialized on Editor#ready
-     * event.
-     */
-    constructor(editor, options = {}) {
-        super();
-        this.editor = editor;
-        this._balloonClass = options.balloonClass;
-        editor.on('ready', () => this._handleEditorReady());
-    }
-    /**
-     * Destroys the badge along with its view.
-     */
-    destroy() {
-        const balloon = this._balloonView;
-        if (balloon) {
-            // Balloon gets destroyed by the body collection.
-            // The badge view gets destroyed by the balloon.
-            balloon.unpin();
-            this._balloonView = null;
-        }
-        this._showBalloonThrottled.cancel();
-        this.stopListening();
-    }
-    /**
-     * Enables badge label once the editor (ui) is ready.
-     */
-    _handleEditorReady() {
-        const editor = this.editor;
-        if (!this._isEnabled()) {
-            return;
-        }
-        // No view means no body collection to append the badge balloon to.
-        if (!editor.ui.view) {
-            return;
-        }
-        editor.ui.focusTracker.on('change:isFocused', (evt, data, isFocused) => {
-            this._updateLastFocusedEditableElement();
-            if (isFocused) {
-                this._showBalloon();
-            }
-            else {
-                this._hideBalloon();
-            }
-        });
-        editor.ui.focusTracker.on('change:focusedElement', (evt, data, focusedElement) => {
-            this._updateLastFocusedEditableElement();
-            if (focusedElement) {
-                this._showBalloon();
-            }
-        });
-        editor.ui.on('update', () => {
-            this._showBalloonThrottled();
-        });
-    }
-    /**
-     * Returns normalized configuration for the badge.
-     */
-    _getNormalizedConfig() {
-        return {
-            side: this.editor.locale.contentLanguageDirection === 'ltr' ? 'right' : 'left',
-            position: 'border',
-            verticalOffset: 0,
-            horizontalOffset: 5
-        };
-    }
-    /**
-     * Attempts to display the balloon with the badge view.
-     */
-    _showBalloon() {
-        const attachOptions = this._getBalloonAttachOptions();
-        if (!attachOptions) {
-            return;
-        }
-        if (!this._balloonView) {
-            this._balloonView = this._createBalloonView();
-        }
-        this._balloonView.pin(attachOptions);
-    }
-    /**
-     * Hides the badge balloon if already visible.
-     */
-    _hideBalloon() {
-        if (this._balloonView) {
-            this._balloonView.unpin();
-        }
-    }
-    /**
-     * Creates an instance of the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon panel}
-     * with the badge view inside ready for positioning.
-     */
-    _createBalloonView() {
-        const editor = this.editor;
-        const balloon = new BalloonPanelView();
-        const view = this._createBadgeContent();
-        balloon.content.add(view);
-        if (this._balloonClass) {
-            balloon.class = this._balloonClass;
-        }
-        editor.ui.view.body.add(balloon);
-        return balloon;
-    }
-    /**
-     * Returns the options for attaching the balloon to the focused editable element.
-     */
-    _getBalloonAttachOptions() {
-        if (!this._lastFocusedEditableElement) {
-            return null;
-        }
-        const badgeConfig = this._getNormalizedConfig();
-        const positioningFunction = badgeConfig.side === 'right' ?
-            getLowerRightCornerPosition(this._lastFocusedEditableElement, badgeConfig) :
-            getLowerLeftCornerPosition(this._lastFocusedEditableElement, badgeConfig);
-        return {
-            target: this._lastFocusedEditableElement,
-            positions: [positioningFunction]
-        };
-    }
-    /**
-     * Updates the {@link #_lastFocusedEditableElement} based on the state of the global focus tracker.
-     */
-    _updateLastFocusedEditableElement() {
-        const editor = this.editor;
-        const isFocused = editor.ui.focusTracker.isFocused;
-        const focusedElement = editor.ui.focusTracker.focusedElement;
-        if (!isFocused || !focusedElement) {
-            this._lastFocusedEditableElement = null;
-            return;
-        }
-        const editableEditorElements = Array.from(editor.ui.getEditableElementsNames()).map(name => {
-            return editor.ui.getEditableElement(name);
-        });
-        if (editableEditorElements.includes(focusedElement)) {
-            this._lastFocusedEditableElement = focusedElement;
-        }
-        else {
-            // If it's none of the editable element, then the focus is somewhere in the UI. Let's display the badge
-            // over the first element then.
-            this._lastFocusedEditableElement = editableEditorElements[0];
-        }
-    }
-}
-function getLowerRightCornerPosition(focusedEditableElement, config) {
-    return getLowerCornerPosition(focusedEditableElement, config, (rootRect, balloonRect) => {
-        return rootRect.left + rootRect.width - balloonRect.width - config.horizontalOffset;
-    });
-}
-function getLowerLeftCornerPosition(focusedEditableElement, config) {
-    return getLowerCornerPosition(focusedEditableElement, config, rootRect => rootRect.left + config.horizontalOffset);
-}
-function getLowerCornerPosition(focusedEditableElement, config, getBalloonLeft) {
-    return (visibleEditableElementRect, balloonRect) => {
-        const editableElementRect = new Rect(focusedEditableElement);
-        if (editableElementRect.width < NARROW_ROOT_WIDTH_THRESHOLD || editableElementRect.height < NARROW_ROOT_HEIGHT_THRESHOLD) {
-            return null;
-        }
-        let balloonTop;
-        if (config.position === 'inside') {
-            balloonTop = editableElementRect.bottom - balloonRect.height;
-        }
-        else {
-            balloonTop = editableElementRect.bottom - balloonRect.height / 2;
-        }
-        balloonTop -= config.verticalOffset;
-        const balloonLeft = getBalloonLeft(editableElementRect, balloonRect);
-        // Clone the editable element rect and place it where the balloon would be placed.
-        // This will allow getVisible() to work from editable element's perspective (rect source).
-        // and yield a result as if the balloon was on the same (scrollable) layer as the editable element.
-        const newBalloonPositionRect = visibleEditableElementRect
-            .clone()
-            .moveTo(balloonLeft, balloonTop)
-            .getIntersection(balloonRect.clone().moveTo(balloonLeft, balloonTop));
-        const newBalloonPositionVisibleRect = newBalloonPositionRect.getVisible();
-        if (!newBalloonPositionVisibleRect || newBalloonPositionVisibleRect.getArea() < balloonRect.getArea()) {
-            return null;
-        }
-        return {
-            top: balloonTop,
-            left: balloonLeft,
-            name: `position_${config.position}-side_${config.side}`,
-            config: {
-                withArrow: false
-            }
-        };
-    };
-}

package/src/bindings/addkeyboardhandlingforgrid.js

@@ -1,107 +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 that adds a keyboard navigation support (arrow up/down/left/right) for grids.
- *
- * @param options Configuration options.
- * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
- * @param options.focusTracker A focus tracker for grid elements.
- * @param options.gridItems A collection of grid items.
- * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
- * the number (e.g. for responsive grids).
- * @param options.uiLanguageDirection String of ui language direction.
- */
-export function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
-    const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
-    keystrokeHandler.set('arrowright', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        return uiLanguageDirection === 'rtl' ?
-            getLeftElementIndex(focusedElementIndex, gridItems.length) :
-            getRightElementIndex(focusedElementIndex, gridItems.length);
-    }));
-    keystrokeHandler.set('arrowleft', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        return uiLanguageDirection === 'rtl' ?
-            getRightElementIndex(focusedElementIndex, gridItems.length) :
-            getLeftElementIndex(focusedElementIndex, gridItems.length);
-    }));
-    keystrokeHandler.set('arrowup', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        let nextIndex = focusedElementIndex - getNumberOfColumns();
-        if (nextIndex < 0) {
-            nextIndex = focusedElementIndex + getNumberOfColumns() * Math.floor(gridItems.length / getNumberOfColumns());
-            if (nextIndex > gridItems.length - 1) {
-                nextIndex -= getNumberOfColumns();
-            }
-        }
-        return nextIndex;
-    }));
-    keystrokeHandler.set('arrowdown', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        let nextIndex = focusedElementIndex + getNumberOfColumns();
-        if (nextIndex > gridItems.length - 1) {
-            nextIndex = focusedElementIndex % getNumberOfColumns();
-        }
-        return nextIndex;
-    }));
-    function getGridItemFocuser(getIndexToFocus) {
-        return (evt) => {
-            const focusedElement = gridItems.find(item => item.element === focusTracker.focusedElement);
-            const focusedElementIndex = gridItems.getIndex(focusedElement);
-            const nextIndexToFocus = getIndexToFocus(focusedElementIndex, gridItems);
-            gridItems.get(nextIndexToFocus).focus();
-            evt.stopPropagation();
-            evt.preventDefault();
-        };
-    }
-    /**
-     * Function returning the next index.
-     *
-     * ```
-     * before: [ ][x][ ]	after: [ ][ ][x]
-     * index = 1            index = 2
-     * ```
-     *
-     * If current index is last, function returns first index.
-     *
-     * ```
-     * before: [ ][ ][x]	after: [x][ ][ ]
-     * index = 2            index = 0
-     * ```
-     *
-     * @param elementIndex Number of current index.
-     * @param collectionLength A count of collection items.
-     */
-    function getRightElementIndex(elementIndex, collectionLength) {
-        if (elementIndex === collectionLength - 1) {
-            return 0;
-        }
-        else {
-            return elementIndex + 1;
-        }
-    }
-    /**
-     * Function returning the previous index.
-     *
-     * ```
-     * before: [ ][x][ ]	after: [x][ ][ ]
-     * index = 1            index = 0
-     * ```
-     *
-     * If current index is first, function returns last index.
-     *
-     * ```
-     * before: [x][ ][ ]	after: [ ][ ][x]
-     * index = 0            index = 2
-     * ```
-     *
-     * @param elementIndex Number of current index.
-     * @param collectionLength A count of collection items.
-     */
-    function getLeftElementIndex(elementIndex, collectionLength) {
-        if (elementIndex === 0) {
-            return collectionLength - 1;
-        }
-        else {
-            return elementIndex - 1;
-        }
-    }
-}

package/src/bindings/clickoutsidehandler.js

@@ -1,36 +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
- */
-/**
- * Handles clicking **outside** of a specified set of elements, then fires an action.
- *
- * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
- * certain issues when the user keeps holding the mouse button and the UI cannot react
- * properly.
- *
- * @param options Configuration options.
- * @param options.emitter The emitter to which this behavior should be added.
- * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
- * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
- * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
- * @param options.callback An action executed by the handler.
- * @param options.listenerOptions Additional options for the listener (like priority).
- */
-export function clickOutsideHandler({ emitter, activator, callback, contextElements, listenerOptions }) {
-    emitter.listenTo(document, 'mousedown', (evt, domEvt) => {
-        if (!activator()) {
-            return;
-        }
-        // Check if `composedPath` is `undefined` in case the browser does not support native shadow DOM.
-        // Can be removed when all supported browsers support native shadow DOM.
-        const path = typeof domEvt.composedPath == 'function' ? domEvt.composedPath() : [];
-        const contextElementsList = typeof contextElements == 'function' ? contextElements() : contextElements;
-        for (const contextElement of contextElementsList) {
-            if (contextElement.contains(domEvt.target) || path.includes(contextElement)) {
-                return;
-            }
-        }
-        callback();
-    }, listenerOptions);
-}

package/src/bindings/csstransitiondisablermixin.js

@@ -1,58 +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 mixin that brings the possibility to temporarily disable CSS transitions using
- * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
- * when the view is first displayed but they should work normal in other cases.
- *
- * The methods to control the CSS transitions are:
- * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
- * {@link module:ui/view~View#element view element}.
- * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
- * {@link module:ui/view~View#element view element}.
- *
- * The usage comes down to:
- *
- * ```ts
- * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
- * const view = new MyViewWithCssTransitionDisabler();
- *
- * // ...
- *
- * view.disableCssTransitions();
- * view.show();
- * view.enableCssTransitions();
- * ```
- *
- * @param view View instance that should get this functionality.
- */
-export function CssTransitionDisablerMixin(view) {
-    class Mixin extends view {
-        disableCssTransitions() {
-            this._isCssTransitionsDisabled = true;
-        }
-        enableCssTransitions() {
-            this._isCssTransitionsDisabled = false;
-        }
-        constructor(...args) {
-            super(...args);
-            this.set('_isCssTransitionsDisabled', false);
-            this.initializeCssTransitionDisablerMixin();
-        }
-        initializeCssTransitionDisablerMixin() {
-            if (this.template) {
-                this.extendTemplate({
-                    attributes: {
-                        class: [
-                            this.bindTemplate.if('_isCssTransitionsDisabled', 'ck-transitions-disabled')
-                        ]
-                    }
-                });
-            }
-        }
-    }
-    return Mixin;
-}
-;