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

package/src/textarea/textareaview.js

@@ -1,189 +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/textarea/textareaview
- */
-import { Rect, toUnit, getBorderWidths, global, CKEditorError, isVisible, ResizeObserver } from '@ckeditor/ckeditor5-utils';
-import { InputBase } from '../input/inputbase.js';
-import '../../theme/components/input/input.css';
-import '../../theme/components/textarea/textarea.css';
-/**
- * The textarea view class.
- *
- * ```ts
- * const textareaView = new TextareaView();
- *
- * textareaView.minRows = 2;
- * textareaView.maxRows = 10;
- *
- * textareaView.render();
- *
- * document.body.append( textareaView.element );
- * ```
- */
-export class TextareaView extends InputBase {
-    /**
-     * An instance of the resize observer used to detect when the view is visible or not and update
-     * its height if any changes that affect it were made while it was invisible.
-     *
-     * **Note:** Created in {@link #render}.
-     */
-    _resizeObserver;
-    /**
-     * A flag that indicates whether the {@link #_updateAutoGrowHeight} method should be called when the view becomes
-     * visible again. See {@link #_resizeObserver}.
-     */
-    _isUpdateAutoGrowHeightPending = false;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        const toPx = toUnit('px');
-        this.set('minRows', 2);
-        this.set('maxRows', 5);
-        this.set('_height', null);
-        this.set('resize', 'none');
-        this._resizeObserver = null;
-        this.on('change:minRows', this._validateMinMaxRows.bind(this));
-        this.on('change:maxRows', this._validateMinMaxRows.bind(this));
-        const bind = this.bindTemplate;
-        this.template.tag = 'textarea';
-        this.extendTemplate({
-            attributes: {
-                class: ['ck-textarea'],
-                style: {
-                    height: bind.to('_height', height => height ? toPx(height) : null),
-                    resize: bind.to('resize')
-                },
-                rows: bind.to('minRows')
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        let wasVisible = false;
-        this.on('input', () => {
-            this._updateAutoGrowHeight(true);
-            this.fire('update');
-        });
-        this.on('change:value', () => {
-            // The content needs to be updated by the browser after the value is changed. It takes a few ms.
-            global.window.requestAnimationFrame(() => {
-                if (!isVisible(this.element)) {
-                    this._isUpdateAutoGrowHeightPending = true;
-                    return;
-                }
-                this._updateAutoGrowHeight();
-                this.fire('update');
-            });
-        });
-        // It may occur that the Textarea size needs to be updated (e.g. because it's content was changed)
-        // when it is not visible or detached from DOM.
-        // In such case, we need to detect the moment when it becomes visible again and update its height then.
-        // We're using ResizeObserver for that as it is the most reliable way to detect when the element becomes visible.
-        // IntersectionObserver didn't work well with the absolute positioned containers.
-        this._resizeObserver = new ResizeObserver(this.element, evt => {
-            const isVisible = !!evt.contentRect.width && !!evt.contentRect.height;
-            if (!wasVisible && isVisible && this._isUpdateAutoGrowHeightPending) {
-                // We're wrapping the auto-grow logic in RAF because otherwise there is an error thrown
-                // by the browser about recursive calls to the ResizeObserver. It used to happen in unit
-                // tests only, though. Since there is no risk of infinite loop here, it can stay here.
-                global.window.requestAnimationFrame(() => {
-                    this._updateAutoGrowHeight();
-                    this.fire('update');
-                });
-            }
-            wasVisible = isVisible;
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        if (this._resizeObserver) {
-            this._resizeObserver.destroy();
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    reset() {
-        super.reset();
-        this._updateAutoGrowHeight();
-        this.fire('update');
-    }
-    /**
-     * Updates the {@link #_height} of the view depending on {@link #minRows}, {@link #maxRows}, and the current content size.
-     *
-     * **Note**: This method overrides manual resize done by the user using a handle. It's a known bug.
-     */
-    _updateAutoGrowHeight(shouldScroll) {
-        const viewElement = this.element;
-        if (!viewElement.offsetParent) {
-            this._isUpdateAutoGrowHeightPending = true;
-            return;
-        }
-        this._isUpdateAutoGrowHeightPending = false;
-        const singleLineContentClone = getTextareaElementClone(viewElement, '1');
-        const fullTextValueClone = getTextareaElementClone(viewElement, viewElement.value);
-        const singleLineContentStyles = singleLineContentClone.ownerDocument.defaultView.getComputedStyle(singleLineContentClone);
-        const verticalPaddings = parseFloat(singleLineContentStyles.paddingTop) + parseFloat(singleLineContentStyles.paddingBottom);
-        const borders = getBorderWidths(singleLineContentClone);
-        const lineHeight = parseFloat(singleLineContentStyles.lineHeight);
-        const verticalBorder = borders.top + borders.bottom;
-        const singleLineAreaDefaultHeight = new Rect(singleLineContentClone).height;
-        const numberOfLines = Math.round((fullTextValueClone.scrollHeight - verticalPaddings) / lineHeight);
-        const maxHeight = this.maxRows * lineHeight + verticalPaddings + verticalBorder;
-        // There's a --ck-ui-component-min-height CSS custom property that enforces min height of the component.
-        // This min-height is relevant only when there's one line of text. Other than that, we can rely on line-height.
-        const minHeight = numberOfLines === 1 ? singleLineAreaDefaultHeight : this.minRows * lineHeight + verticalPaddings + verticalBorder;
-        // The size of textarea is controlled by height style instead of rows attribute because event though it is
-        // a more complex solution, it is immune to the layout textarea has been rendered in (gird, flex).
-        this._height = Math.min(Math.max(Math.max(numberOfLines, this.minRows) * lineHeight + verticalPaddings + verticalBorder, minHeight), maxHeight);
-        if (shouldScroll) {
-            viewElement.scrollTop = viewElement.scrollHeight;
-        }
-        singleLineContentClone.remove();
-        fullTextValueClone.remove();
-    }
-    /**
-     * Validates the {@link #minRows} and {@link #maxRows} properties and warns in the console if the configuration is incorrect.
-     */
-    _validateMinMaxRows() {
-        if (this.minRows > this.maxRows) {
-            /**
-             * The minimum number of rows is greater than the maximum number of rows.
-             *
-             * @error ui-textarea-view-min-rows-greater-than-max-rows
-             * @param {module:ui/textarea/textareaview~TextareaView} textareaView The misconfigured textarea view instance.
-             * @param {number} minRows The value of `minRows` property.
-             * @param {number} maxRows The value of `maxRows` property.
-             */
-            throw new CKEditorError('ui-textarea-view-min-rows-greater-than-max-rows', {
-                textareaView: this,
-                minRows: this.minRows,
-                maxRows: this.maxRows
-            });
-        }
-    }
-}
-function getTextareaElementClone(element, value) {
-    const clone = element.cloneNode();
-    clone.style.position = 'absolute';
-    clone.style.top = '-99999px';
-    clone.style.left = '-99999px';
-    clone.style.height = 'auto';
-    clone.style.overflow = 'hidden';
-    clone.style.width = element.ownerDocument.defaultView.getComputedStyle(element).width;
-    clone.tabIndex = -1;
-    clone.rows = 1;
-    clone.value = value;
-    element.parentNode.insertBefore(clone, element);
-    return clone;
-}

package/src/toolbar/balloon/balloontoolbar.js

@@ -1,358 +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/toolbar/balloon/balloontoolbar
- */
-import { ContextualBalloon } from '../../panel/balloon/contextualballoon.js';
-import { ToolbarView } from '../toolbarview.js';
-import { BalloonPanelView } from '../../panel/balloon/balloonpanelview.js';
-import { normalizeToolbarConfig } from '../normalizetoolbarconfig.js';
-import { Plugin } from '@ckeditor/ckeditor5-core';
-import { FocusTracker, Rect, ResizeObserver, env, global, toUnit } from '@ckeditor/ckeditor5-utils';
-import { Observer } from '@ckeditor/ckeditor5-engine';
-import { debounce } from 'es-toolkit/compat';
-const toPx = /* #__PURE__ */ toUnit('px');
-/**
- * The contextual toolbar.
- *
- * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
- */
-export class BalloonToolbar extends Plugin {
-    /**
-     * The toolbar view displayed in the balloon.
-     */
-    toolbarView;
-    /**
-     * Tracks the focus of the {@link module:ui/editorui/editorui~EditorUI#getEditableElement editable element}
-     * and the {@link #toolbarView}. When both are blurred then the toolbar should hide.
-     */
-    focusTracker;
-    /**
-     * A cached and normalized `config.balloonToolbar` object.
-     */
-    _balloonConfig;
-    /**
-     * An instance of the resize observer that allows to respond to changes in editable's geometry
-     * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
-     *
-     * **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the
-     * {@link module:core/editor/editorconfig~EditorConfig#balloonToolbar configuration}.
-     *
-     * **Note:** Created in {@link #init}.
-     */
-    _resizeObserver = null;
-    /**
-     * The contextual balloon plugin instance.
-     */
-    _balloon;
-    /**
-     * Fires `_selectionChangeDebounced` event using `es-toolkit#debounce`.
-     *
-     * This event is an internal plugin event which is fired 200 ms after model selection last change.
-     * This is to makes easy test debounced action without need to use `setTimeout`.
-     *
-     * This function is stored as a plugin property to make possible to cancel
-     * trailing debounced invocation on destroy.
-     */
-    _fireSelectionChangeDebounced;
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'BalloonToolbar';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ContextualBalloon];
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        this._balloonConfig = normalizeToolbarConfig(editor.config.get('balloonToolbar'));
-        this.toolbarView = this._createToolbarView();
-        this.focusTracker = new FocusTracker();
-        // Track focusable elements in the toolbar and the editable elements.
-        this._trackFocusableEditableElements();
-        this.focusTracker.add(this.toolbarView);
-        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
-        editor.ui.addToolbar(this.toolbarView, {
-            beforeFocus: () => this.show(true),
-            afterBlur: () => this.hide(),
-            isContextual: true
-        });
-        this._balloon = editor.plugins.get(ContextualBalloon);
-        this._fireSelectionChangeDebounced = debounce(() => this.fire('_selectionChangeDebounced'), 200);
-        // The appearance of the BalloonToolbar method is event–driven.
-        // It is possible to stop the #show event and this prevent the toolbar from showing up.
-        this.decorate('show');
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const selection = editor.model.document.selection;
-        // Show/hide the toolbar on editable focus/blur.
-        this.listenTo(this.focusTracker, 'change:isFocused', (evt, name, isFocused) => {
-            if (!isFocused && this._isToolbarVisible) {
-                this.hide();
-            }
-            else if (isFocused) {
-                this.show();
-            }
-        });
-        // Hide the toolbar when the selection is changed by a direct change or has changed to collapsed.
-        this.listenTo(selection, 'change:range', (evt, data) => {
-            if (data.directChange || selection.isCollapsed) {
-                this.hide();
-            }
-            // Fire internal `_selectionChangeDebounced` event to use it for showing
-            // the toolbar after the selection stops changing.
-            this._fireSelectionChangeDebounced();
-        });
-        // Show the toolbar when the selection stops changing.
-        this.listenTo(this, '_selectionChangeDebounced', () => {
-            if (this.editor.editing.view.document.isFocused) {
-                this.show();
-            }
-        });
-        if (!this._balloonConfig.shouldNotGroupWhenFull) {
-            this.listenTo(editor, 'ready', () => {
-                const editableElement = editor.ui.view.editable.element;
-                // Set #toolbarView's max-width on the initialization and update it on the editable resize.
-                this._resizeObserver = new ResizeObserver(editableElement, entry => {
-                    // The max-width equals 90% of the editable's width for the best user experience.
-                    // The value keeps the balloon very close to the boundaries of the editable and limits the cases
-                    // when the balloon juts out from the editable element it belongs to.
-                    this.toolbarView.maxWidth = toPx(entry.contentRect.width * .9);
-                });
-            });
-        }
-        // Listen to the toolbar view and whenever it changes its geometry due to some items being
-        // grouped or ungrouped, update the position of the balloon because a shorter/longer toolbar
-        // means the balloon could be pointing at the wrong place. Once updated, the balloon will point
-        // at the right selection in the content again.
-        // https://github.com/ckeditor/ckeditor5/issues/6444
-        this.listenTo(this.toolbarView, 'groupedItemsUpdate', () => {
-            this._updatePosition();
-        });
-        // Creates toolbar components based on given configuration.
-        // This needs to be done when all plugins are ready.
-        editor.ui.once('ready', () => {
-            this.toolbarView.fillFromConfig(this._balloonConfig, this.editor.ui.componentFactory);
-        });
-    }
-    /**
-     * Returns whether the toolbar is visible in the ContextualBalloon.
-     */
-    get _isToolbarVisible() {
-        return this._balloon.visibleView === this.toolbarView;
-    }
-    /**
-     * Creates the toolbar view instance.
-     */
-    _createToolbarView() {
-        const t = this.editor.locale.t;
-        const shouldGroupWhenFull = !this._balloonConfig.shouldNotGroupWhenFull;
-        const toolbarView = new ToolbarView(this.editor.locale, {
-            shouldGroupWhenFull,
-            isFloating: true
-        });
-        toolbarView.ariaLabel = t('Editor contextual toolbar');
-        toolbarView.render();
-        return toolbarView;
-    }
-    /**
-     * Shows the toolbar and attaches it to the selection.
-     *
-     * Fires {@link #event:show} event which can be stopped to prevent the toolbar from showing up.
-     *
-     * @param showForCollapsedSelection When set `true`, the toolbar will show despite collapsed selection in the
-     * editing view.
-     */
-    show(showForCollapsedSelection = false) {
-        const editor = this.editor;
-        const selection = editor.model.document.selection;
-        const schema = editor.model.schema;
-        // Do not add the toolbar to the balloon stack twice.
-        if (this._balloon.hasView(this.toolbarView)) {
-            return;
-        }
-        // Do not show the toolbar when the selection is collapsed.
-        if (selection.isCollapsed && !showForCollapsedSelection) {
-            return;
-        }
-        // Do not show the toolbar when there is more than one range in the selection and they fully contain selectable elements.
-        // See https://github.com/ckeditor/ckeditor5/issues/6443.
-        if (selectionContainsOnlyMultipleSelectables(selection, schema)) {
-            return;
-        }
-        // Do not show the toolbar when all components inside are disabled
-        // see https://github.com/ckeditor/ckeditor5-ui/issues/269.
-        if (Array.from(this.toolbarView.items).every((item) => item.isEnabled !== undefined && !item.isEnabled)) {
-            return;
-        }
-        // Update the toolbar position when the editor ui should be refreshed.
-        this.listenTo(this.editor.ui, 'update', () => {
-            this._updatePosition();
-        });
-        // Add the toolbar to the common editor contextual balloon.
-        this._balloon.add({
-            view: this.toolbarView,
-            position: this._getBalloonPositionData(),
-            balloonClassName: 'ck-toolbar-container'
-        });
-    }
-    /**
-     * Hides the toolbar.
-     */
-    hide() {
-        if (this._balloon.hasView(this.toolbarView)) {
-            this.stopListening(this.editor.ui, 'update');
-            this._balloon.remove(this.toolbarView);
-        }
-    }
-    /**
-     * Add or remove editable elements to the focus tracker. It watches added and removed roots
-     * and adds or removes their editable elements to the focus tracker.
-     */
-    _trackFocusableEditableElements() {
-        const { editor, focusTracker } = this;
-        const { editing } = editor;
-        editing.view.addObserver(class TrackEditableElements extends Observer {
-            /**
-             * @inheritDoc
-             */
-            observe(domElement) {
-                focusTracker.add(domElement);
-            }
-            /**
-             * @inheritDoc
-             */
-            stopObserving(domElement) {
-                focusTracker.remove(domElement);
-            }
-        });
-    }
-    /**
-     * Returns positioning options for the {@link #_balloon}. They control the way balloon is attached
-     * to the selection.
-     */
-    _getBalloonPositionData() {
-        const editor = this.editor;
-        const view = editor.editing.view;
-        const viewDocument = view.document;
-        const viewSelection = viewDocument.selection;
-        // Get direction of the selection.
-        const isBackward = viewDocument.selection.isBackward;
-        return {
-            // Because the target for BalloonPanelView is a Rect (not DOMRange), it's geometry will stay fixed
-            // as the window scrolls. To let the BalloonPanelView follow such Rect, is must be continuously
-            // computed and hence, the target is defined as a function instead of a static value.
-            // https://github.com/ckeditor/ckeditor5-ui/issues/195
-            target: () => {
-                const range = isBackward ? viewSelection.getFirstRange() : viewSelection.getLastRange();
-                const rangeRects = Rect.getDomRangeRects(view.domConverter.viewRangeToDom(range));
-                // Select the proper range rect depending on the direction of the selection.
-                if (isBackward) {
-                    return rangeRects[0];
-                }
-                else {
-                    // Ditch the zero-width "orphan" rect in the next line for the forward selection if there's
-                    // another one preceding it. It is not rendered as a selection by the web browser anyway.
-                    // https://github.com/ckeditor/ckeditor5-ui/issues/308
-                    if (rangeRects.length > 1 && rangeRects[rangeRects.length - 1].width === 0) {
-                        rangeRects.pop();
-                    }
-                    return rangeRects[rangeRects.length - 1];
-                }
-            },
-            positions: this._getBalloonPositions(isBackward)
-        };
-    }
-    /**
-     * Updates the position of the {@link #_balloon} to make up for changes:
-     *
-     * * in the geometry of the selection it is attached to (e.g. the selection moved in the viewport or expanded or shrunk),
-     * * or the geometry of the balloon toolbar itself (e.g. the toolbar has grouped or ungrouped some items and it is shorter or longer).
-     */
-    _updatePosition() {
-        if (this._isToolbarVisible) {
-            this._balloon.updatePosition(this._getBalloonPositionData());
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.stopListening();
-        this._fireSelectionChangeDebounced.cancel();
-        this.toolbarView.destroy();
-        this.focusTracker.destroy();
-        if (this._resizeObserver) {
-            this._resizeObserver.destroy();
-        }
-    }
-    /**
-     * Returns toolbar positions for the given direction of the selection.
-     */
-    _getBalloonPositions(isBackward) {
-        const isSafariIniOS = env.isSafari && env.isiOS;
-        // https://github.com/ckeditor/ckeditor5/issues/7707
-        const positions = isSafariIniOS ? BalloonPanelView.generatePositions({
-            // 20px when zoomed out. Less then 20px when zoomed in; the "radius" of the native selection handle gets
-            // smaller as the user zooms in. No less than the default v-offset, though.
-            heightOffset: Math.max(BalloonPanelView.arrowHeightOffset, Math.round(20 / global.window.visualViewport.scale))
-        }) : BalloonPanelView.defaultPositions;
-        return isBackward ? [
-            positions.northWestArrowSouth,
-            positions.northWestArrowSouthWest,
-            positions.northWestArrowSouthEast,
-            positions.northWestArrowSouthMiddleEast,
-            positions.northWestArrowSouthMiddleWest,
-            positions.southWestArrowNorth,
-            positions.southWestArrowNorthWest,
-            positions.southWestArrowNorthEast,
-            positions.southWestArrowNorthMiddleWest,
-            positions.southWestArrowNorthMiddleEast
-        ] : [
-            positions.southEastArrowNorth,
-            positions.southEastArrowNorthEast,
-            positions.southEastArrowNorthWest,
-            positions.southEastArrowNorthMiddleEast,
-            positions.southEastArrowNorthMiddleWest,
-            positions.northEastArrowSouth,
-            positions.northEastArrowSouthEast,
-            positions.northEastArrowSouthWest,
-            positions.northEastArrowSouthMiddleEast,
-            positions.northEastArrowSouthMiddleWest
-        ];
-    }
-}
-/**
- * Returns "true" when the selection has multiple ranges and each range contains a selectable element
- * and nothing else.
- */
-function selectionContainsOnlyMultipleSelectables(selection, schema) {
-    // It doesn't contain multiple objects if there is only one range.
-    if (selection.rangeCount === 1) {
-        return false;
-    }
-    return [...selection.getRanges()].every(range => {
-        const element = range.getContainedElement();
-        return element && schema.isSelectable(element);
-    });
-}

package/src/toolbar/block/blockbuttonview.js

@@ -1,41 +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/toolbar/block/blockbuttonview
- */
-import { ButtonView } from '../../button/buttonview.js';
-import { toUnit } from '@ckeditor/ckeditor5-utils';
-import '../../../theme/components/toolbar/blocktoolbar.css';
-const toPx = /* #__PURE__ */ toUnit('px');
-/**
- * The block button view class.
- *
- * This view represents a button attached next to block element where the selection is anchored.
- *
- * See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.
- */
-export class BlockButtonView extends ButtonView {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        // Hide button on init.
-        this.isVisible = false;
-        this.isToggleable = true;
-        this.set('top', 0);
-        this.set('left', 0);
-        this.extendTemplate({
-            attributes: {
-                class: 'ck-block-toolbar-button',
-                style: {
-                    top: bind.to('top', val => toPx(val)),
-                    left: bind.to('left', val => toPx(val))
-                }
-            }
-        });
-    }
-}