@ckeditor/ckeditor5-ui 0.0.0-internal-20241017.0

package/src/panel/sticky/stickypanelview.d.ts

@@ -0,0 +1,156 @@
+/**
+ * @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 ui/panel/sticky/stickypanelview
+ */
+import View from '../../view.js';
+import type ViewCollection from '../../viewcollection.js';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import '../../../theme/components/panel/stickypanel.css';
+/**
+ * The sticky panel view class.
+ */
+export default class StickyPanelView extends View {
+    /**
+     * Collection of the child views which creates balloon panel contents.
+     */
+    readonly content: ViewCollection;
+    /**
+     * Controls whether the sticky panel should be active.
+     *
+     * @readonly
+     * @observable
+     */
+    isActive: boolean;
+    /**
+     * Controls whether the sticky panel is in the "sticky" state.
+     *
+     * @readonly
+     * @observable
+     */
+    isSticky: boolean;
+    /**
+     * The limiter element for the sticky panel instance. Its bounding rect limits
+     * the "stickyness" of the panel, i.e. when the panel reaches the bottom
+     * edge of the limiter, it becomes sticky to that edge and does not float
+     * off the limiter. It is mandatory for the panel to work properly and once
+     * set, it cannot be changed.
+     *
+     * @readonly
+     * @observable
+     */
+    limiterElement: HTMLElement | null;
+    /**
+     * The offset from the bottom edge of {@link #limiterElement}
+     * which stops the panel from stickying any further to prevent limiter's content
+     * from being completely covered.
+     *
+     * @readonly
+     * @observable
+     * @default 50
+     */
+    limiterBottomOffset: number;
+    /**
+     * The offset from the top edge of the web browser's viewport which makes the
+     * panel become sticky. The default value is `0`, which means the panel becomes
+     * sticky when it's upper edge touches the top of the page viewport.
+     *
+     * This attribute is useful when the web page has UI elements positioned to the top
+     * either using `position: fixed` or `position: sticky`, which would cover the
+     * sticky panel or vice–versa (depending on the `z-index` hierarchy).
+     *
+     * Bound to {@link module:ui/editorui/editorui~EditorUI#viewportOffset `EditorUI#viewportOffset`}.
+     *
+     * If {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset.top`} is defined, then
+     * it will override the default value.
+     *
+     * @observable
+     * @default 0
+     */
+    viewportTopOffset: number;
+    /**
+     * The panel which accepts children into {@link #content} collection.
+     * Also an element which is positioned when {@link #isSticky}.
+     */
+    contentPanelElement: HTMLElement;
+    /**
+     * Controls the `margin-left` CSS style of the panel.
+     *
+     * @private
+     * @readonly
+     * @observable
+     */
+    _marginLeft: string | null;
+    /**
+     * Set `true` if the sticky panel reached the bottom edge of the
+     * {@link #limiterElement}.
+     *
+     * @private
+     * @readonly
+     * @observable
+     */
+    _isStickyToTheBottomOfLimiter: boolean;
+    /**
+     * The `top` CSS position of the panel when it is sticky to the top of the viewport or scrollable
+     * ancestors of the {@link #limiterElement}.
+     *
+     * @private
+     * @readonly
+     * @observable
+     */
+    _stickyTopOffset: number | null;
+    /**
+     * The `bottom` CSS position of the panel when it is sticky to the bottom of the {@link #limiterElement}.
+     *
+     * @private
+     * @readonly
+     * @observable
+     */
+    _stickyBottomOffset: number | null;
+    /**
+     * A dummy element which visually fills the space as long as the
+     * actual panel is sticky. It prevents flickering of the UI.
+     */
+    private _contentPanelPlaceholder;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Analyzes the environment to decide whether the panel should be sticky or not.
+     * Then handles the positioning of the panel.
+     */
+    checkIfShouldBeSticky(): void;
+    /**
+     * Sticks the panel at the given CSS `top` offset.
+     *
+     * @private
+     * @param topOffset
+     */
+    private _stickToTopOfAncestors;
+    /**
+     * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
+     *
+     * @private
+     * @param stickyBottomOffset
+     */
+    private _stickToBottomOfLimiter;
+    /**
+     * Unsticks the panel putting it back to its original position.
+     *
+     * @private
+     */
+    private _unstick;
+    /**
+     * Returns the bounding rect of the {@link #contentPanelElement}.
+     *
+     * @private
+     */
+    private get _contentPanelRect();
+}

package/src/panel/sticky/stickypanelview.js

@@ -0,0 +1,234 @@
+/**
+ * @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 ui/panel/sticky/stickypanelview
+ */
+import View from '../../view.js';
+import Template from '../../template.js';
+import { global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
+// @if CK_DEBUG_STICKYPANEL // const {
+// @if CK_DEBUG_STICKYPANEL // 	default: RectDrawer,
+// @if CK_DEBUG_STICKYPANEL // 	diagonalStylesBlack
+// @if CK_DEBUG_STICKYPANEL // } = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' );
+import '../../../theme/components/panel/stickypanel.css';
+const toPx = /* #__PURE__ */ toUnit('px');
+/**
+ * The sticky panel view class.
+ */
+export default class StickyPanelView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('isActive', false);
+        this.set('isSticky', false);
+        this.set('limiterElement', null);
+        this.set('limiterBottomOffset', 50);
+        this.set('viewportTopOffset', 0);
+        this.set('_marginLeft', null);
+        this.set('_isStickyToTheBottomOfLimiter', false);
+        this.set('_stickyTopOffset', null);
+        this.set('_stickyBottomOffset', null);
+        this.content = this.createCollection();
+        this._contentPanelPlaceholder = new Template({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-sticky-panel__placeholder'
+                ],
+                style: {
+                    display: bind.to('isSticky', isSticky => isSticky ? 'block' : 'none'),
+                    height: bind.to('isSticky', isSticky => {
+                        return isSticky ? toPx(this._contentPanelRect.height) : null;
+                    })
+                }
+            }
+        }).render();
+        this.contentPanelElement = new Template({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-sticky-panel__content',
+                    // Toggle class of the panel when "sticky" state changes in the view.
+                    bind.if('isSticky', 'ck-sticky-panel__content_sticky'),
+                    bind.if('_isStickyToTheBottomOfLimiter', 'ck-sticky-panel__content_sticky_bottom-limit')
+                ],
+                style: {
+                    width: bind.to('isSticky', isSticky => {
+                        return isSticky ? toPx(this._contentPanelPlaceholder.getBoundingClientRect().width) : null;
+                    }),
+                    top: bind.to('_stickyTopOffset', value => value ? toPx(value) : value),
+                    bottom: bind.to('_stickyBottomOffset', value => value ? toPx(value) : value),
+                    marginLeft: bind.to('_marginLeft')
+                }
+            },
+            children: this.content
+        }).render();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-sticky-panel'
+                ]
+            },
+            children: [
+                this._contentPanelPlaceholder,
+                this.contentPanelElement
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        // Check if the panel should go into the sticky state immediately.
+        this.checkIfShouldBeSticky();
+        // Update sticky state of the panel as the window and ancestors are being scrolled.
+        this.listenTo(global.document, 'scroll', () => {
+            this.checkIfShouldBeSticky();
+        }, { useCapture: true });
+        // Synchronize with `model.isActive` because sticking an inactive panel is pointless.
+        this.listenTo(this, 'change:isActive', () => {
+            this.checkIfShouldBeSticky();
+        });
+    }
+    /**
+     * Analyzes the environment to decide whether the panel should be sticky or not.
+     * Then handles the positioning of the panel.
+     */
+    checkIfShouldBeSticky() {
+        // @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
+        if (!this.limiterElement || !this.isActive) {
+            this._unstick();
+            return;
+        }
+        const limiterRect = new Rect(this.limiterElement);
+        let visibleLimiterRect = limiterRect.getVisible();
+        if (visibleLimiterRect) {
+            const windowRect = new Rect(global.window);
+            windowRect.top += this.viewportTopOffset;
+            windowRect.height -= this.viewportTopOffset;
+            visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);
+        }
+        // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
+        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
+        // @if CK_DEBUG_STICKYPANEL // 		{ outlineWidth: '3px', opacity: '.8', outlineColor: 'red', outlineOffset: '-3px' },
+        // @if CK_DEBUG_STICKYPANEL // 		'Visible anc'
+        // @if CK_DEBUG_STICKYPANEL // 	);
+        // @if CK_DEBUG_STICKYPANEL // }
+        // @if CK_DEBUG_STICKYPANEL //
+        // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( limiterRect,
+        // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '3px', opacity: '.8', outlineColor: 'green', outlineOffset: '-3px' },
+        // @if CK_DEBUG_STICKYPANEL // 	'Limiter'
+        // @if CK_DEBUG_STICKYPANEL // );
+        // Stick the panel only if
+        // * the limiter's ancestors are intersecting with each other so that some of their rects are visible,
+        // * and the limiter's top edge is above the visible ancestors' top edge.
+        if (visibleLimiterRect && limiterRect.top < visibleLimiterRect.top) {
+            // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
+            // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '3px', opacity: '.8', outlineColor: 'fuchsia', outlineOffset: '-3px',
+            // @if CK_DEBUG_STICKYPANEL // 		backgroundColor: 'rgba(255, 0, 255, .3)' },
+            // @if CK_DEBUG_STICKYPANEL // 	'Visible limiter'
+            // @if CK_DEBUG_STICKYPANEL // );
+            const visibleLimiterTop = visibleLimiterRect.top;
+            // Check if there's a change the panel can be sticky to the bottom of the limiter.
+            if (visibleLimiterTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom) {
+                const stickyBottomOffset = Math.max(limiterRect.bottom - visibleLimiterRect.bottom, 0) + this.limiterBottomOffset;
+                // @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {
+                // @if CK_DEBUG_STICKYPANEL // 	top: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,
+                // @if CK_DEBUG_STICKYPANEL // 	bottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1
+                // @if CK_DEBUG_STICKYPANEL // } );
+                // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,
+                // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },
+                // @if CK_DEBUG_STICKYPANEL // 	'Sticky bottom offset'
+                // @if CK_DEBUG_STICKYPANEL // );
+                // Check if sticking the panel to the bottom of the limiter does not cause it to suddenly
+                // move upwards if there's not enough space for it.
+                if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height) {
+                    this._stickToBottomOfLimiter(stickyBottomOffset);
+                }
+                else {
+                    this._unstick();
+                }
+            }
+            else {
+                if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
+                    this._stickToTopOfAncestors(visibleLimiterTop);
+                }
+                else {
+                    this._unstick();
+                }
+            }
+        }
+        else {
+            this._unstick();
+        }
+        // @if CK_DEBUG_STICKYPANEL // console.clear();
+        // @if CK_DEBUG_STICKYPANEL // console.log( 'isSticky', this.isSticky );
+        // @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );
+        // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );
+        // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );
+        // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
+        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
+        // @if CK_DEBUG_STICKYPANEL // 		{ ...diagonalStylesBlack,
+        // @if CK_DEBUG_STICKYPANEL // 			outlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',
+        // @if CK_DEBUG_STICKYPANEL // 			backgroundColor: 'rgba(0, 0, 255, .2)' },
+        // @if CK_DEBUG_STICKYPANEL // 		'visibleLimiterRect'
+        // @if CK_DEBUG_STICKYPANEL // 	);
+        // @if CK_DEBUG_STICKYPANEL // }
+    }
+    /**
+     * Sticks the panel at the given CSS `top` offset.
+     *
+     * @private
+     * @param topOffset
+     */
+    _stickToTopOfAncestors(topOffset) {
+        this.isSticky = true;
+        this._isStickyToTheBottomOfLimiter = false;
+        this._stickyTopOffset = topOffset;
+        this._stickyBottomOffset = null;
+        this._marginLeft = toPx(-global.window.scrollX);
+    }
+    /**
+     * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
+     *
+     * @private
+     * @param stickyBottomOffset
+     */
+    _stickToBottomOfLimiter(stickyBottomOffset) {
+        this.isSticky = true;
+        this._isStickyToTheBottomOfLimiter = true;
+        this._stickyTopOffset = null;
+        this._stickyBottomOffset = stickyBottomOffset;
+        this._marginLeft = toPx(-global.window.scrollX);
+    }
+    /**
+     * Unsticks the panel putting it back to its original position.
+     *
+     * @private
+     */
+    _unstick() {
+        this.isSticky = false;
+        this._isStickyToTheBottomOfLimiter = false;
+        this._stickyTopOffset = null;
+        this._stickyBottomOffset = null;
+        this._marginLeft = null;
+    }
+    /**
+     * Returns the bounding rect of the {@link #contentPanelElement}.
+     *
+     * @private
+     */
+    get _contentPanelRect() {
+        return new Rect(this.contentPanelElement);
+    }
+}

package/src/search/filteredview.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @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
+ */
+import type { FocusableView } from '../focuscycler.js';
+/**
+ * @module ui/search/filteredview
+ */
+/**
+ * A view that can be filtered by a {@link module:ui/search/text/searchtextview~SearchTextView}.
+ */
+export default interface FilteredView extends FocusableView {
+    /**
+     * Filters the view by the given regular expression.
+     */
+    filter(regExp: RegExp | null): {
+        resultsCount: number;
+        totalItemsCount: number;
+    };
+}
+/**
+ * Fired when the user selects an autocomplete option. The event data should contain the selected value.
+ *
+ * @eventName ~FilteredView#execute
+ */
+export interface FilteredViewExecuteEvent {
+    name: 'execute';
+    args: [{
+        value: string;
+    }];
+}

package/src/search/filteredview.js

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

package/src/search/filtergroupanditemnames.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @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
+ */
+import type ViewCollection from '../viewcollection.js';
+import type ListItemGroupView from '../list/listitemgroupview.js';
+import type ListItemView from '../list/listitemview.js';
+import type ListSeparatorView from '../list/listseparatorview.js';
+/**
+ * A filter function that returns matching item and group names in the list view.
+ */
+export default function filterGroupAndItemNames(regExp: RegExp | null, items: ViewCollection<ListItemGroupView | ListItemView | ListSeparatorView>): {
+    resultsCount: number;
+    totalItemsCount: number;
+};

package/src/search/filtergroupanditemnames.js

@@ -0,0 +1,38 @@
+/**
+ * @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
+ */
+/**
+ * A filter function that returns matching item and group names in the list view.
+ */
+export default function filterGroupAndItemNames(regExp, items) {
+    let totalItemsCount = 0;
+    let resultsCount = 0;
+    for (const groupView of items) {
+        const group = groupView;
+        const groupItems = group.items;
+        const isGroupLabelMatching = regExp && !!group.label.match(regExp);
+        group.labelView.highlightText(isGroupLabelMatching ? regExp : null);
+        for (const listItemView of groupItems) {
+            const buttonView = listItemView.children.first;
+            const labelView = buttonView.labelView;
+            if (!regExp) {
+                listItemView.isVisible = true;
+                labelView.highlightText(null);
+            }
+            else {
+                const isItemLabelMatching = !!buttonView.label.match(regExp);
+                labelView.highlightText(isItemLabelMatching ? regExp : null);
+                listItemView.isVisible = isGroupLabelMatching || isItemLabelMatching;
+            }
+        }
+        const visibleInGroupCount = groupItems.filter(listItemView => listItemView.isVisible).length;
+        totalItemsCount += group.items.length;
+        resultsCount += isGroupLabelMatching ? group.items.length : visibleInGroupCount;
+        group.isVisible = isGroupLabelMatching || !!visibleInGroupCount;
+    }
+    return {
+        resultsCount,
+        totalItemsCount
+    };
+}

package/src/search/searchinfoview.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @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 ui/search/searchinfoview
+*/
+import type { FocusableView } from '../focuscycler.js';
+import View from '../view.js';
+/**
+ * A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.
+ *
+ * @internal
+ */
+export default class SearchInfoView extends View implements FocusableView {
+    /**
+     * Controls whether the view is visible.
+     *
+     * @observable
+     * @default false
+     */
+    isVisible: boolean;
+    /**
+     * Controls the primary line of text in the info.
+     *
+     * @observable
+     * @default ''
+     */
+    primaryText: string;
+    /**
+     * Controls the secondary line of text in the info.
+     *
+     * @observable
+     * @default ''
+     */
+    secondaryText: string;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+    /**
+     * Focuses the view
+     */
+    focus(): void;
+}

package/src/search/searchinfoview.js

@@ -0,0 +1,59 @@
+/**
+ * @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
+ */
+import View from '../view.js';
+/**
+ * A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.
+ *
+ * @internal
+ */
+export default class SearchInfoView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor() {
+        super();
+        const bind = this.bindTemplate;
+        this.set({
+            isVisible: false,
+            primaryText: '',
+            secondaryText: ''
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-search__info',
+                    bind.if('isVisible', 'ck-hidden', value => !value)
+                ],
+                tabindex: -1
+            },
+            children: [
+                {
+                    tag: 'span',
+                    children: [
+                        {
+                            text: [bind.to('primaryText')]
+                        }
+                    ]
+                },
+                {
+                    tag: 'span',
+                    children: [
+                        {
+                            text: [bind.to('secondaryText')]
+                        }
+                    ]
+                }
+            ]
+        });
+    }
+    /**
+     * Focuses the view
+     */
+    focus() {
+        this.element.focus();
+    }
+}

package/src/search/searchresultsview.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @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 ui/search/searchresultsview
+ */
+import View from '../view.js';
+import type ViewCollection from '../viewcollection.js';
+import { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
+import { default as FocusCycler, type FocusableView } from '../focuscycler.js';
+/**
+ * A sub-component of {@link module:ui/search/text/searchtextview~SearchTextView}. It hosts the filtered and the information views.
+ */
+export default class SearchResultsView extends View implements FocusableView {
+    /**
+     * Tracks information about the DOM focus in the view.
+     *
+     * @readonly
+     */
+    focusTracker: FocusTracker;
+    /**
+     * The collection of the child views inside of the list item {@link #element}.
+     *
+     * @readonly
+     */
+    children: ViewCollection<FocusableView>;
+    /**
+     * Provides the focus management (keyboard navigation) in the view.
+     *
+     * @readonly
+     */
+    protected _focusCycler: FocusCycler;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the view.
+     */
+    focus(): void;
+    /**
+     * Focuses the first child view.
+     */
+    focusFirst(): void;
+    /**
+     * Focuses the last child view.
+     */
+    focusLast(): void;
+}