@ckeditor/ckeditor5-ui 41.3.0-alpha.3 → 41.3.0

package/src/toolbar/toolbarview.js

@@ -16,6 +16,7 @@ import { FocusTracker, KeystrokeHandler, Rect, ResizeObserver, global, isVisible
 import { icons } from '@ckeditor/ckeditor5-core';
 import { isObject } from 'lodash-es';
 import '../../theme/components/toolbar/toolbar.css';
+const { threeVerticalDots } = icons;
 export const NESTED_TOOLBAR_ICONS = {
     alignLeft: icons.alignLeft,
     bold: icons.bold,
@@ -228,7 +229,8 @@ export default class ToolbarView extends View {
                  * name does not exist so it was omitted when rendering the toolbar.
                  *
                  * This warning usually shows up when the {@link module:core/plugin~Plugin} which is supposed
-                 * to provide a toolbar item has not been loaded or there is a typo in the configuration.
+                 * to provide a toolbar item has not been loaded or there is a typo in the
+                 * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar configuration}.
                  *
                  * Make sure the plugin responsible for this toolbar item is loaded and the toolbar configuration
                  * is correct, e.g. {@link module:basic-styles/bold~Bold} is loaded for the `'bold'` toolbar item.
@@ -334,7 +336,7 @@ export default class ToolbarView extends View {
         // Allow disabling icon by passing false.
         if (icon !== false) {
             // A pre-defined icon picked by name, SVG string, a fallback (default) icon.
-            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || icons.threeVerticalDots;
+            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || threeVerticalDots;
         }
         // If the icon is disabled, display the label automatically.
         else {
@@ -692,7 +694,7 @@ class DynamicGrouping {
             label: t('Show more items'),
             tooltip: true,
             tooltipPosition: locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw',
-            icon: icons.threeVerticalDots
+            icon: threeVerticalDots
         });
         return dropdown;
     }

package/src/tooltipmanager.d.ts

@@ -109,6 +109,10 @@ export default class TooltipManager extends TooltipManager_base {
      * to improve the UX.
      */
     private _pinTooltipDebounced;
+    /**
+     * A debounced version of {@link #_unpinTooltip}. Tooltips hide with a delay to allow hovering of their titles.
+     */
+    private _unpinTooltipDebounced;
     private readonly _watchdogExcluded;
     /**
      * A set of editors the single tooltip manager instance must listen to.
@@ -140,6 +144,13 @@ export default class TooltipManager extends TooltipManager_base {
      * @returns Positioning functions to be used by the {@link #balloonPanelView}.
      */
     static getPositioningFunctions(position: TooltipPosition): Array<PositioningFunction>;
+    /**
+     * Handles hiding tooltips on `keydown` in DOM.
+     *
+     * @param evt An object containing information about the fired event.
+     * @param domEvent The DOM event.
+     */
+    private _onKeyDown;
     /**
      * Handles displaying tooltips on `mouseenter` and `focus` in DOM.
      *

package/src/tooltipmanager.js

@@ -121,6 +121,8 @@ class TooltipManager extends DomEmitterMixin() {
             this._updateTooltipPosition();
         });
         this._pinTooltipDebounced = debounce(this._pinTooltip, 600);
+        this._unpinTooltipDebounced = debounce(this._unpinTooltip, 400);
+        this.listenTo(global.document, 'keydown', this._onKeyDown.bind(this), { useCapture: true });
         this.listenTo(global.document, 'mouseenter', this._onEnterOrFocus.bind(this), { useCapture: true });
         this.listenTo(global.document, 'mouseleave', this._onLeaveOrBlur.bind(this), { useCapture: true });
         this.listenTo(global.document, 'focus', this._onEnterOrFocus.bind(this), { useCapture: true });
@@ -179,6 +181,18 @@ class TooltipManager extends DomEmitterMixin() {
             se: [defaultPositions.southArrowNorthWest]
         }[position];
     }
+    /**
+     * Handles hiding tooltips on `keydown` in DOM.
+     *
+     * @param evt An object containing information about the fired event.
+     * @param domEvent The DOM event.
+     */
+    _onKeyDown(evt, domEvent) {
+        if (domEvent.key === 'Escape' && this._currentElementWithTooltip) {
+            this._unpinTooltip();
+            domEvent.stopPropagation();
+        }
+    }
     /**
      * Handles displaying tooltips on `mouseenter` and `focus` in DOM.
      *
@@ -189,6 +203,11 @@ class TooltipManager extends DomEmitterMixin() {
         const elementWithTooltipAttribute = getDescendantWithTooltip(target);
         // Abort when there's no descendant needing tooltip.
         if (!elementWithTooltipAttribute) {
+            // Unpin if element is focused, regardless of whether it contains a label or not.
+            // It also prevents tooltips from overlapping the menu bar
+            if (evt.name === 'focus') {
+                this._unpinTooltip();
+            }
             return;
         }
         // Abort to avoid flashing when, for instance:
@@ -212,19 +231,28 @@ class TooltipManager extends DomEmitterMixin() {
             if (!isElement(target)) {
                 return;
             }
+            const balloonElement = this.balloonPanelView.element;
+            const isEnteringBalloon = balloonElement && (balloonElement === relatedTarget || balloonElement.contains(relatedTarget));
+            const isLeavingBalloon = !isEnteringBalloon && target === balloonElement;
+            // Do not hide the tooltip when the user moves the cursor over it.
+            if (isEnteringBalloon) {
+                this._unpinTooltipDebounced.cancel();
+                return;
+            }
             // If a tooltip is currently visible, don't act for a targets other than the one it is attached to.
+            // The only exception is leaving balloon, in this scenario tooltip should be closed.
             // For instance, a random mouseleave far away in the page should not unpin the tooltip that was pinned because
             // of a previous focus. Only leaving the same element should hide the tooltip.
-            if (this._currentElementWithTooltip && target !== this._currentElementWithTooltip) {
+            if (!isLeavingBalloon && this._currentElementWithTooltip && target !== this._currentElementWithTooltip) {
                 return;
             }
             const descendantWithTooltip = getDescendantWithTooltip(target);
             const relatedDescendantWithTooltip = getDescendantWithTooltip(relatedTarget);
             // Unpin when the mouse was leaving element with a tooltip to a place which does not have or has a different tooltip.
-            // Note that this should happen whether the tooltip is already visible or not, for instance, it could be invisible but queued
-            // (debounced): it should get canceled.
-            if (descendantWithTooltip && descendantWithTooltip !== relatedDescendantWithTooltip) {
-                this._unpinTooltip();
+            // Note that this should happen whether the tooltip is already visible or not, for instance,
+            // it could be invisible but queued (debounced): it should get canceled.
+            if (isLeavingBalloon || (descendantWithTooltip && descendantWithTooltip !== relatedDescendantWithTooltip)) {
+                this._unpinTooltipDebounced();
             }
         }
         else {
@@ -235,7 +263,7 @@ class TooltipManager extends DomEmitterMixin() {
             }
             // Note that unpinning should happen whether the tooltip is already visible or not, for instance, it could be invisible but
             // queued (debounced): it should get canceled (e.g. quick focus then quick blur using the keyboard).
-            this._unpinTooltip();
+            this._unpinTooltipDebounced();
         }
     }
     /**
@@ -265,6 +293,7 @@ class TooltipManager extends DomEmitterMixin() {
      * @param options.cssClass Additional CSS class of the balloon with the tooltip.
      */
     _pinTooltip(targetDomElement, { text, position, cssClass }) {
+        this._unpinTooltip();
         // Use the body collection of the first editor.
         const bodyViewCollection = first(TooltipManager._editors.values()).ui.view.body;
         if (!bodyViewCollection.has(this.balloonPanelView)) {
@@ -299,6 +328,7 @@ class TooltipManager extends DomEmitterMixin() {
      * Unpins the tooltip and cancels all queued pinning.
      */
     _unpinTooltip() {
+        this._unpinTooltipDebounced.cancel();
         this._pinTooltipDebounced.cancel();
         this.balloonPanelView.unpin();
         for (const editor of TooltipManager._editors) {
@@ -306,6 +336,7 @@ class TooltipManager extends DomEmitterMixin() {
         }
         this._currentElementWithTooltip = null;
         this._currentTooltipPosition = null;
+        this.tooltipTextView.text = '';
         if (this._resizeObserver) {
             this._resizeObserver.destroy();
         }

package/theme/components/menubar/menubar.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/theme/components/menubar/menubarmenu.css

@@ -0,0 +1,9 @@
+/*
+ * 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
+ */
+
+.ck.ck-menu-bar__menu {
+	display: block;
+	position: relative;
+}

package/theme/components/menubar/menubarmenubutton.css

@@ -0,0 +1,11 @@
+/*
+ * 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
+ */
+
+.ck.ck-menu-bar__menu  {
+	& > .ck-menu-bar__menu__button > .ck-menu-bar__menu__button__arrow {
+		pointer-events: none;
+		z-index: var(--ck-z-default);
+	}
+}

package/theme/components/menubar/menubarmenulistitem.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/theme/components/menubar/menubarmenulistitembutton.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/theme/components/menubar/menubarmenupanel.css

@@ -0,0 +1,62 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-menu-bar-menu-max-width: 75vw;
+	--ck-menu-bar-nested-menu-horizontal-offset: 5px;
+}
+
+.ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
+	z-index: var(--ck-z-panel);
+	max-width: var(--ck-menu-bar-menu-max-width);
+	position: absolute;
+
+	&.ck-menu-bar__menu__panel_position_ne,
+	&.ck-menu-bar__menu__panel_position_nw {
+		bottom: 100%;
+	}
+
+	&.ck-menu-bar__menu__panel_position_se,
+	&.ck-menu-bar__menu__panel_position_sw {
+		top: 100%;
+		bottom: auto;
+	}
+
+	&.ck-menu-bar__menu__panel_position_ne,
+	&.ck-menu-bar__menu__panel_position_se {
+		left: 0px;
+	}
+
+	&.ck-menu-bar__menu__panel_position_nw,
+	&.ck-menu-bar__menu__panel_position_sw {
+		right: 0px;
+	}
+
+	&.ck-menu-bar__menu__panel_position_es,
+	&.ck-menu-bar__menu__panel_position_en {
+		left: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) );
+	}
+
+	&.ck-menu-bar__menu__panel_position_es {
+		top: 0px;
+	}
+
+	&.ck-menu-bar__menu__panel_position_en {
+		bottom: 0px;
+	}
+
+	&.ck-menu-bar__menu__panel_position_ws,
+	&.ck-menu-bar__menu__panel_position_wn {
+		right: calc( 100% - var(--ck-menu-bar-nested-menu-horizontal-offset) );
+	}
+
+	&.ck-menu-bar__menu__panel_position_ws {
+		top: 0px;
+	}
+
+	&.ck-menu-bar__menu__panel_position_wn {
+		bottom: 0px;
+	}
+}

package/theme/components/tooltip/tooltip.css

@@ -4,8 +4,5 @@
  */
 
 .ck.ck-balloon-panel.ck-tooltip {
-	/* Keep tooltips transparent for any interactions. */
-	pointer-events: none;
-
 	z-index: calc( var(--ck-z-dialog) + 100 );
 }

package/theme/globals/_reset.css

@@ -0,0 +1,13 @@
+/*
+ * 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
+ */
+
+.ck.ck-reset,
+.ck.ck-reset_all,
+.ck-reset_all *:not(.ck-reset_all-excluded *) {
+	box-sizing: border-box;
+	width: auto;
+	height: auto;
+	position: static;
+}

package/theme/globals/globals.css

@@ -4,6 +4,7 @@
  */
 
 @import "./_hidden.css";
+@import "./_reset.css";
 @import "./_zindex.css";
 @import "./_transition.css";
 @import "./_poweredby.css";

package/dist/content-index.css

@@ -1,4 +0,0 @@
-/**
- * @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
- */