@ckeditor/ckeditor5-ui 41.4.2 → 42.0.0-alpha.1

package/src/toolbar/toolbarview.js

@@ -16,7 +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';
-export const NESTED_TOOLBAR_ICONS = {
+export const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (() => ({
     alignLeft: icons.alignLeft,
     bold: icons.bold,
     importExport: icons.importExport,
@@ -26,7 +26,7 @@ export const NESTED_TOOLBAR_ICONS = {
     threeVerticalDots: icons.threeVerticalDots,
     pilcrow: icons.pilcrow,
     dragIndicator: icons.dragIndicator
-};
+}))();
 /**
  * The toolbar view class.
  */

package/src/tooltipmanager.d.ts

@@ -68,7 +68,7 @@ declare const TooltipManager_base: {
  * **Note**: This class is a singleton. All editor instances re-use the same instance loaded by
  * {@link module:ui/editorui/editorui~EditorUI} of the first editor.
  */
-export default class TooltipManager extends TooltipManager_base {
+export default class TooltipManager extends /* #__PURE__ */ TooltipManager_base {
     /**
      * The view rendering text of the tooltip.
      */

package/src/tooltipmanager.js

@@ -6,7 +6,7 @@
  * @module ui/tooltipmanager
  */
 import View from './view.js';
-import BalloonPanelView, { generatePositions } from './panel/balloon/balloonpanelview.js';
+import BalloonPanelView from './panel/balloon/balloonpanelview.js';
 import { DomEmitterMixin, ResizeObserver, first, global, isVisible } from '@ckeditor/ckeditor5-utils';
 import { isElement, debounce } from 'lodash-es';
 import '../theme/components/tooltip/tooltip.css';
@@ -65,7 +65,7 @@ const BALLOON_CLASS = 'ck-tooltip';
  * **Note**: This class is a singleton. All editor instances re-use the same instance loaded by
  * {@link module:ui/editorui/editorui~EditorUI} of the first editor.
  */
-class TooltipManager extends DomEmitterMixin() {
+class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
     /**
      * Creates an instance of the tooltip manager.
      */
@@ -217,7 +217,15 @@ class TooltipManager extends DomEmitterMixin() {
             return;
         }
         this._unpinTooltip();
-        this._pinTooltipDebounced(elementWithTooltipAttribute, getTooltipData(elementWithTooltipAttribute));
+        // The tooltip should be pinned immediately when the element gets focused using keyboard.
+        // If it is focused using the mouse, the tooltip should be pinned after a delay to prevent flashing.
+        // See https://github.com/ckeditor/ckeditor5/issues/16383
+        if (evt.name === 'focus' && !elementWithTooltipAttribute.matches(':hover')) {
+            this._pinTooltip(elementWithTooltipAttribute, getTooltipData(elementWithTooltipAttribute));
+        }
+        else {
+            this._pinTooltipDebounced(elementWithTooltipAttribute, getTooltipData(elementWithTooltipAttribute));
+        }
     }
     /**
      * Handles hiding tooltips on `mouseleave` and `blur` in DOM.
@@ -300,6 +308,13 @@ class TooltipManager extends DomEmitterMixin() {
             bodyViewCollection.add(this.balloonPanelView);
         }
         this.tooltipTextView.text = text;
+        this.balloonPanelView.class = [BALLOON_CLASS, cssClass]
+            .filter(className => className)
+            .join(' ');
+        // Ensure that all changes to the tooltip are set before pinning it.
+        // Setting class or text after pinning can cause the tooltip to be pinned in the wrong position.
+        // It happens especially often when tooltip has class modified (like adding `ck-tooltip_multi-line`).
+        // See https://github.com/ckeditor/ckeditor5/issues/16365
         this.balloonPanelView.pin({
             target: targetDomElement,
             positions: TooltipManager.getPositioningFunctions(position)
@@ -312,9 +327,6 @@ class TooltipManager extends DomEmitterMixin() {
             }
         });
         this._mutationObserver.attach(targetDomElement);
-        this.balloonPanelView.class = [BALLOON_CLASS, cssClass]
-            .filter(className => className)
-            .join(' ');
         // 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).
         // Note: Using low priority to let other listeners that position contextual toolbars etc. to react first.
@@ -370,7 +382,7 @@ class TooltipManager extends DomEmitterMixin() {
  * A set of default {@link module:utils/dom/position~PositioningFunction positioning functions} used by the `TooltipManager`
  * to pin tooltips in different positions.
  */
-TooltipManager.defaultBalloonPositions = generatePositions({
+TooltipManager.defaultBalloonPositions = BalloonPanelView.generatePositions({
     heightOffset: 5,
     sideOffset: 13
 });

package/src/view.d.ts

@@ -78,7 +78,7 @@ declare const View_base: import("@ckeditor/ckeditor5-utils").Mixed<{
  * } );
  * ```
  */
-export default class View<TElement extends HTMLElement = HTMLElement> extends View_base {
+export default class View<TElement extends HTMLElement = HTMLElement> extends /* #__PURE__ */ View_base {
     /**
      * An HTML element of the view. `null` until {@link #render rendered}
      * from the {@link #template}.

package/src/view.js

@@ -75,7 +75,7 @@ import '../theme/globals/globals.css';
  * } );
  * ```
  */
-export default class View extends DomEmitterMixin(ObservableMixin()) {
+export default class View extends /* #__PURE__ */ DomEmitterMixin(/* #__PURE__ */ ObservableMixin()) {
     /**
      * Creates an instance of the {@link module:ui/view~View} class.
      *