@ckeditor/ckeditor5-ui 42.0.2 → 43.0.0-alpha.0

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/text/searchtextview.js

@@ -127,6 +127,7 @@ export default class SearchTextView extends View {
     reset() {
         this.queryView.reset();
         this.search('');
+        this.filteredView.element.scrollTo(0, 0);
     }
     /**
      * Searches the {@link #filteredView} for the given query.

package/src/toolbar/balloon/balloontoolbar.js

@@ -162,7 +162,7 @@ export default class BalloonToolbar extends Plugin {
         if (selectionContainsOnlyMultipleSelectables(selection, schema)) {
             return;
         }
-        // Don not show the toolbar when all components inside are disabled
+        // 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;

package/src/toolbar/block/blocktoolbar.d.ts

@@ -133,12 +133,26 @@ export default class BlockToolbar extends Plugin {
      * @param focusEditable When `true`, the editable will be focused after hiding the panel.
      */
     private _hidePanel;
+    /**
+     * Repositions the button on scroll.
+     */
+    private _repositionButtonOnScroll;
     /**
      * Attaches the {@link #buttonView} to the target block of content.
      *
      * @param targetElement Target element.
      */
     private _attachButtonToElement;
+    /**
+     * Clips the button element to the viewport of the editable element.
+     *
+     * 	* If the button overflows the editable viewport, it is clipped to make it look like it's cut off by the editable scrollable region.
+     * 	* If the button is fully hidden by the top of the editable, it is not clickable but still visible in the DOM.
+     *
+     * @param buttonView The button view to clip.
+     * @param editableElement The editable element whose viewport is used for clipping.
+     */
+    private _clipButtonToViewport;
     /**
      * Creates a resize observer that observes selected editable and resizes the toolbar panel accordingly.
      */

package/src/toolbar/block/blocktoolbar.js

@@ -7,7 +7,7 @@
  */
 /* global window */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { Rect, ResizeObserver, toUnit } from '@ckeditor/ckeditor5-utils';
+import { global, Rect, ResizeObserver, toUnit } from '@ckeditor/ckeditor5-utils';
 import BlockButtonView from './blockbuttonview.js';
 import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
 import ToolbarView, { NESTED_TOOLBAR_ICONS } from '../toolbarview.js';
@@ -131,6 +131,8 @@ export default class BlockToolbar extends Plugin {
                 this._hidePanel();
             }
         });
+        // Reposition button on scroll.
+        this._repositionButtonOnScroll();
         // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
         editor.ui.addToolbar(this.toolbarView, {
             beforeFocus: () => this._showPanel(),
@@ -328,19 +330,52 @@ export default class BlockToolbar extends Plugin {
             this.editor.editing.view.focus();
         }
     }
+    /**
+     * Repositions the button on scroll.
+     */
+    _repositionButtonOnScroll() {
+        const { buttonView } = this;
+        let pendingAnimationFrame = false;
+        // Reposition the button on scroll, but do it only once per animation frame to avoid performance issues.
+        const repositionOnScroll = () => {
+            if (pendingAnimationFrame) {
+                return;
+            }
+            pendingAnimationFrame = true;
+            global.window.requestAnimationFrame(() => {
+                this._updateButton();
+                pendingAnimationFrame = false;
+            });
+        };
+        // Watch scroll event only when the button is visible, it prevents attaching the scroll event listener
+        // to the document when the button is not visible.
+        buttonView.on('change:isVisible', (evt, name, isVisible) => {
+            if (isVisible) {
+                buttonView.listenTo(global.document, 'scroll', repositionOnScroll, {
+                    useCapture: true,
+                    usePassive: true
+                });
+            }
+            else {
+                buttonView.stopListening(global.document, 'scroll', repositionOnScroll);
+            }
+        });
+    }
     /**
      * Attaches the {@link #buttonView} to the target block of content.
      *
      * @param targetElement Target element.
      */
     _attachButtonToElement(targetElement) {
+        const buttonElement = this.buttonView.element;
+        const editableElement = this._getSelectedEditableElement();
         const contentStyles = window.getComputedStyle(targetElement);
-        const editableRect = new Rect(this._getSelectedEditableElement());
+        const editableRect = new Rect(editableElement);
         const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
         // When line height is not an integer then treat it as "normal".
         // MDN says that 'normal' == ~1.2 on desktop browsers.
         const contentLineHeight = parseInt(contentStyles.lineHeight, 10) || parseInt(contentStyles.fontSize, 10) * 1.2;
-        const buttonRect = new Rect(this.buttonView.element);
+        const buttonRect = new Rect(buttonElement);
         const contentRect = new Rect(targetElement);
         let positionLeft;
         if (this.editor.locale.uiLanguageDirection === 'ltr') {
@@ -354,6 +389,51 @@ export default class BlockToolbar extends Plugin {
         const absoluteButtonRect = buttonRect.toAbsoluteRect();
         this.buttonView.top = absoluteButtonRect.top;
         this.buttonView.left = absoluteButtonRect.left;
+        this._clipButtonToViewport(this.buttonView, editableElement);
+    }
+    /**
+     * Clips the button element to the viewport of the editable element.
+     *
+     * 	* If the button overflows the editable viewport, it is clipped to make it look like it's cut off by the editable scrollable region.
+     * 	* If the button is fully hidden by the top of the editable, it is not clickable but still visible in the DOM.
+     *
+     * @param buttonView The button view to clip.
+     * @param editableElement The editable element whose viewport is used for clipping.
+     */
+    _clipButtonToViewport(buttonView, editableElement) {
+        const absoluteButtonRect = new Rect(buttonView.element);
+        const scrollViewportRect = new Rect(editableElement).getVisible();
+        // Sets polygon clip path for the button element, if there is no argument provided, the clip path is removed.
+        const setButtonClipping = (...paths) => {
+            buttonView.element.style.clipPath = paths.length ? `polygon(${paths.join(',')})` : '';
+        };
+        // Hide the button if it's fully hidden by the top of the editable.
+        // Note that the button is still visible in the DOM, but it's not clickable. It's because we don't
+        // want to hide the button completely, as there are plenty of `isVisible` watchers which toggles
+        // the button scroll listeners.
+        const markAsHidden = (isHidden) => {
+            buttonView.isEnabled = !isHidden;
+            buttonView.element.style.pointerEvents = isHidden ? 'none' : '';
+        };
+        if (scrollViewportRect && scrollViewportRect.bottom < absoluteButtonRect.bottom) {
+            // Calculate the delta between the button bottom and the editable bottom, and clip the button
+            // to make it look like it's cut off by the editable scrollable region.
+            const delta = Math.min(absoluteButtonRect.height, absoluteButtonRect.bottom - scrollViewportRect.bottom);
+            markAsHidden(delta >= absoluteButtonRect.height);
+            setButtonClipping('0 0', '100% 0', `100% calc(100% - ${toPx(delta)})`, `0 calc(100% - ${toPx(delta)}`);
+        }
+        else if (scrollViewportRect && scrollViewportRect.top > absoluteButtonRect.top) {
+            // Calculate the delta between the button top and the editable top, and clip the button
+            // to make it look like it's cut off by the editable scrollable region.
+            const delta = Math.min(absoluteButtonRect.height, scrollViewportRect.top - absoluteButtonRect.top);
+            markAsHidden(delta >= absoluteButtonRect.height);
+            setButtonClipping(`0 ${toPx(delta)}`, `100% ${toPx(delta)}`, '100% 100%', '0 100%');
+        }
+        else {
+            // Reset the clip path if button is fully visible.
+            markAsHidden(false);
+            setButtonClipping();
+        }
     }
     /**
      * Creates a resize observer that observes selected editable and resizes the toolbar panel accordingly.

package/src/tooltipmanager.d.ts

@@ -93,13 +93,6 @@ export default class TooltipManager extends /* #__PURE__ */ TooltipManager_base
      * Stores the current tooltip position. `null` when there's no tooltip in the UI.
      */
     private _currentTooltipPosition;
-    /**
-     * An instance of the resize observer that keeps track on target element visibility,
-     * when it hides the tooltip should also disappear.
-     *
-     * {@link module:core/editor/editorconfig~EditorConfig#balloonToolbar configuration}.
-     */
-    private _resizeObserver;
     /**
      * An instance of the mutation observer that keeps track on target element attributes changes.
      */

package/src/tooltipmanager.js

@@ -7,7 +7,7 @@
  */
 import View from './view.js';
 import BalloonPanelView from './panel/balloon/balloonpanelview.js';
-import { DomEmitterMixin, ResizeObserver, first, global, isVisible } from '@ckeditor/ckeditor5-utils';
+import { DomEmitterMixin, first, global, isVisible } from '@ckeditor/ckeditor5-utils';
 import { isElement, debounce } from 'lodash-es';
 import '../theme/components/tooltip/tooltip.css';
 const BALLOON_CLASS = 'ck-tooltip';
@@ -80,13 +80,6 @@ class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
          * Stores the current tooltip position. `null` when there's no tooltip in the UI.
          */
         this._currentTooltipPosition = null;
-        /**
-         * An instance of the resize observer that keeps track on target element visibility,
-         * when it hides the tooltip should also disappear.
-         *
-         * {@link module:core/editor/editorconfig~EditorConfig#balloonToolbar configuration}.
-         */
-        this._resizeObserver = null;
         /**
          * An instance of the mutation observer that keeps track on target element attributes changes.
          */
@@ -319,13 +312,6 @@ class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
             target: targetDomElement,
             positions: TooltipManager.getPositioningFunctions(position)
         });
-        this._resizeObserver = new ResizeObserver(targetDomElement, () => {
-            // The ResizeObserver will call its callback when the target element hides and the tooltip
-            // should also disappear (https://github.com/ckeditor/ckeditor5/issues/12492).
-            if (!isVisible(targetDomElement)) {
-                this._unpinTooltip();
-            }
-        });
         this._mutationObserver.attach(targetDomElement);
         // Start responding to changes in editor UI or content layout. For instance, when collaborators change content
         // and a contextual toolbar attached to a content starts to move (and so should move the tooltip).
@@ -349,9 +335,6 @@ class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
         this._currentElementWithTooltip = null;
         this._currentTooltipPosition = null;
         this.tooltipTextView.text = '';
-        if (this._resizeObserver) {
-            this._resizeObserver.destroy();
-        }
         this._mutationObserver.detach();
     }
     /**

package/theme/components/button/listitembutton.css

@@ -0,0 +1,38 @@
+/*
+ * 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 "../../mixins/_dir.css";
+
+.ck.ck-list-item-button {
+	min-height: unset;
+	width: 100%;
+	border-radius: 0;
+
+	@mixin ck-dir ltr {
+		text-align: left;
+	}
+
+	@mixin ck-dir rtl {
+		text-align: right;
+	}
+
+	& .ck-list-item-button__check-holder {
+		display: inline-flex;
+		width: 1em;
+		height: 1em;
+
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-standard);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	& .ck-list-item-button__check-icon {
+		height: 100%;
+	}
+}