Improvements to getOptimalPosition to handle cases with scrollable ancestors

packages/ckeditor5-ui/src/dropdown/dropdownview.ts

@@ -269,12 +269,16 @@ export default class DropdownView extends View<HTMLDivElement> {
 			// If "auto", find the best position of the panel to fit into the viewport.
 			// Otherwise, simply assign the static position.
 			if ( this.panelPosition === 'auto' ) {
-				this.panelView.position = DropdownView._getOptimalPosition( {
+				const optimalPanelPosition = DropdownView._getOptimalPosition( {
 					element: this.panelView.element!,
 					target: this.buttonView.element!,
 					fitInViewport: true,
 					positions: this._panelPositions
-				} ).name as PanelPosition;
+				} );
+
+				this.panelView.position = (
+					optimalPanelPosition ? optimalPanelPosition.name : this._panelPositions[ 0 ].name
+				) as PanelPosition;
 			} else {
 				this.panelView.position = this.panelPosition;
 			}

packages/ckeditor5-ui/src/editorui/poweredby.ts

@@ -9,9 +9,8 @@
 
 import type { Editor, UiConfig } from '@ckeditor/ckeditor5-core';
 import {
-	Rect,
 	DomEmitterMixin,
-	findClosestScrollableAncestor,
+	Rect,
 	verifyLicense,
 	type PositionOptions,
 	type Locale
@@ -30,14 +29,6 @@ const ICON_HEIGHT = 10;
 const NARROW_ROOT_HEIGHT_THRESHOLD = 50;
 const NARROW_ROOT_WIDTH_THRESHOLD = 350;
 const DEFAULT_LABEL = 'Powered by';
-const OFF_THE_SCREEN_POSITION = {
-	top: -99999,
-	left: -99999,
-	name: 'invalid',
-	config: {
-		withArrow: false
-	}
-};
 
 type PoweredByConfig = Required<UiConfig>[ 'poweredBy' ];
 
@@ -312,18 +303,13 @@ function getLowerLeftCornerPosition( focusedEditableElement: HTMLElement, config
 function getLowerCornerPosition(
 	focusedEditableElement: HTMLElement,
 	config: PoweredByConfig,
-	getBalloonLeft: ( editableElementRect: Rect, balloonRect: Rect ) => number
+	getBalloonLeft: ( visibleEditableElementRect: Rect, balloonRect: Rect ) => number
 ) {
-	return ( editableElementRect: Rect, balloonRect: Rect ) => {
-		const visibleEditableElementRect = editableElementRect.getVisible();
-
-		// Root cropped by ancestors.
-		if ( !visibleEditableElementRect ) {
-			return OFF_THE_SCREEN_POSITION;
-		}
+	return ( visibleEditableElementRect: Rect, balloonRect: Rect ) => {
+		const editableElementRect = new Rect( focusedEditableElement );
 
 		if ( editableElementRect.width < NARROW_ROOT_WIDTH_THRESHOLD || editableElementRect.height < NARROW_ROOT_HEIGHT_THRESHOLD ) {
-			return OFF_THE_SCREEN_POSITION;
+			return null;
 		}
 
 		let balloonTop;
@@ -339,31 +325,20 @@ function getLowerCornerPosition(
 
 		const balloonLeft = getBalloonLeft( editableElementRect, balloonRect );
 
-		if ( config.position === 'inside' ) {
-			const newBalloonRect = balloonRect.clone().moveTo( balloonLeft, balloonTop );
+		// Clone the editable element rect and place it where the balloon would be placed.
+		// This will allow getVisible() to work from editable element's perspective (rect source).
+		// and yield a result as if the balloon was on the same (scrollable) layer as the editable element.
+		const newBalloonPositionRect = visibleEditableElementRect
+			.clone()
+			.moveTo( balloonLeft, balloonTop )
+			.getIntersection( balloonRect.clone().moveTo( balloonLeft, balloonTop ) )!;
 
-			// The watermark cannot be positioned in this corner because the corner is not quite visible.
-			if ( newBalloonRect.getIntersectionArea( visibleEditableElementRect ) < newBalloonRect.getArea() ) {
-				return OFF_THE_SCREEN_POSITION;
-			}
-		}
-		else {
-			const firstScrollableEditableElementAncestor = findClosestScrollableAncestor( focusedEditableElement );
-
-			if ( firstScrollableEditableElementAncestor ) {
-				const firstScrollableEditableElementAncestorRect = new Rect( firstScrollableEditableElementAncestor );
-				const notVisibleVertically = visibleEditableElementRect.bottom + balloonRect.height / 2 >
-				firstScrollableEditableElementAncestorRect.bottom;
-				const notVisibleHorizontally = config.side === 'left' ?
-					editableElementRect.left < firstScrollableEditableElementAncestorRect.left :
-					editableElementRect.right > firstScrollableEditableElementAncestorRect.right;
-
-				// The watermark cannot be positioned in this corner because the corner is "not visible enough".
-				if ( notVisibleVertically || notVisibleHorizontally ) {
-					return OFF_THE_SCREEN_POSITION;
-				}
-			}
+		const newBalloonPositionVisibleRect = newBalloonPositionRect.getVisible();
+
+		if ( !newBalloonPositionVisibleRect || newBalloonPositionVisibleRect.getArea() < balloonRect.getArea() ) {
+			return null;
 		}
+
 		return {
 			top: balloonTop,
 			left: balloonLeft,

packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.ts

@@ -17,18 +17,35 @@ import {
 	toUnit,
 	type Locale,
 	type ObservableChangeEvent,
+	type Position,
 	type PositionOptions,
 	type PositioningFunction,
 	type Rect
 } from '@ckeditor/ckeditor5-utils';
 
 import { isElement } from 'lodash-es';
-
 import '../../../theme/components/panel/balloonpanel.css';
 
 const toPx = toUnit( 'px' );
 const defaultLimiterElement = global.document.body;
 
+// A static balloon panel positioning function that moves the balloon far off the viewport.
+// It is used as a fallback when there is no way to position the balloon using provided
+// positioning functions (see: `getOptimalPosition()`), for instance, when the target the
+// balloon should be attached to gets obscured by scrollable containers or the viewport.
+//
+// It prevents the balloon from being attached to the void and possible degradation of the UX.
+// At the same time, it keeps the balloon physically visible in the DOM so the focus remains
+// uninterrupted.
+const POSITION_OFF_SCREEN: Position = {
+	top: -99999,
+	left: -99999,
+	name: 'arrowless',
+	config: {
+		withArrow: false
+	}
+};
+
 /**
  * The balloon panel view class.
  *
@@ -251,7 +268,7 @@ export default class BalloonPanelView extends View {
 			fitInViewport: true
 		}, options ) as PositionOptions;
 
-		const optimalPosition = BalloonPanelView._getOptimalPosition( positionOptions );
+		const optimalPosition = BalloonPanelView._getOptimalPosition( positionOptions ) || POSITION_OFF_SCREEN;
 
 		// Usually browsers make some problems with super accurate values like 104.345px
 		// so it is better to use int values.
@@ -1131,13 +1148,21 @@ export function generatePositions( options: {
 
 		// ------- Sticky
 
-		viewportStickyNorth: ( targetRect, balloonRect, viewportRect ) => {
-			if ( !targetRect.getIntersection( viewportRect! ) ) {
+		viewportStickyNorth: ( targetRect, balloonRect, viewportRect, limiterRect ) => {
+			const boundaryRect = limiterRect || viewportRect;
+
+			if ( !targetRect.getIntersection( boundaryRect ) ) {
+				return null;
+			}
+
+			// Engage when the target top and bottom edges are close or off the boundary.
+			// By close, it means there's not enough space for the balloon arrow (offset).
+			if ( boundaryRect.height - targetRect.height > stickyVerticalOffset ) {
 				return null;
 			}
 
 			return {
-				top: viewportRect!.top + stickyVerticalOffset,
+				top: boundaryRect.top + stickyVerticalOffset,
 				left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
 				name: 'arrowless',
 				config: {

packages/ckeditor5-ui/src/panel/sticky/stickypanelview.ts

@@ -15,14 +15,15 @@ import type ViewCollection from '../../viewcollection';
 import {
 	type Locale,
 	type ObservableChangeEvent,
-	getElementsIntersectionRect,
-	getScrollableAncestors,
 	global,
 	toUnit,
 	Rect
 } from '@ckeditor/ckeditor5-utils';
 
-// @if CK_DEBUG_STICKYPANEL // const RectDrawer = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' ).default
+// @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';
 
@@ -234,8 +235,8 @@ export default class StickyPanelView extends View {
 		this.checkIfShouldBeSticky();
 
 		// Update sticky state of the panel as the window and ancestors are being scrolled.
-		this.listenTo( global.document, 'scroll', ( evt, data ) => {
-			this.checkIfShouldBeSticky( data.target as HTMLElement | Document );
+		this.listenTo( global.document, 'scroll', () => {
+			this.checkIfShouldBeSticky();
 		}, { useCapture: true } );
 
 		// Synchronize with `model.isActive` because sticking an inactive panel is pointless.
@@ -247,10 +248,8 @@ export default class StickyPanelView extends View {
 	/**
 	 * Analyzes the environment to decide whether the panel should be sticky or not.
 	 * Then handles the positioning of the panel.
-	 *
-	 * @param [scrollTarget] The element which is being scrolled.
 	 */
-	public checkIfShouldBeSticky( scrollTarget?: HTMLElement | Document ): void {
+	public checkIfShouldBeSticky(): void {
 		// @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
 
 		if ( !this.limiterElement || !this.isActive ) {
@@ -259,17 +258,21 @@ export default class StickyPanelView extends View {
 			return;
 		}
 
-		const scrollableAncestors = getScrollableAncestors( this.limiterElement );
+		const limiterRect = new Rect( this.limiterElement );
 
-		if ( scrollTarget && !scrollableAncestors.includes( scrollTarget ) ) {
-			return;
-		}
+		let visibleLimiterRect = limiterRect.getVisible();
 
-		const visibleAncestorsRect = getElementsIntersectionRect( scrollableAncestors, this.viewportTopOffset );
-		const limiterRect = new Rect( this.limiterElement );
+		if ( visibleLimiterRect ) {
+			const windowRect = new Rect( global.window );
+
+			windowRect.top += this.viewportTopOffset;
+			windowRect.height -= this.viewportTopOffset;
 
-		// @if CK_DEBUG_STICKYPANEL // if ( visibleAncestorsRect ) {
-		// @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleAncestorsRect,
+			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 // 	);
@@ -283,48 +286,40 @@ export default class StickyPanelView extends View {
 		// 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 ( visibleAncestorsRect && limiterRect.top < visibleAncestorsRect.top ) {
-			const visibleLimiterRect = limiterRect.getIntersection( visibleAncestorsRect );
-
-			// Sticky the panel only if the limiter's visible rect is at least partially visible in the
-			// visible ancestors' rects intersection.
-			if ( visibleLimiterRect ) {
-				// @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 ( 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 // );
 
-				const visibleAncestorsTop = visibleAncestorsRect.top;
-
-				// Check if there's a change the panel can be sticky to the bottom of the limiter.
-				if ( visibleAncestorsTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom ) {
-					const stickyBottomOffset = Math.max( limiterRect.bottom - visibleAncestorsRect.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();
-					}
+				// 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 {
-					if ( this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height ) {
-						this._stickToTopOfAncestors( visibleAncestorsTop );
-					} else {
-						this._unstick();
-					}
+					this._unstick();
 				}
 			} else {
-				this._unstick();
+				if ( this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height ) {
+					this._stickToTopOfAncestors( visibleLimiterTop );
+				} else {
+					this._unstick();
+				}
 			}
 		} else {
 			this._unstick();
@@ -335,6 +330,14 @@ export default class StickyPanelView extends View {
 		// @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 // }
 	}
 
 	/**

packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.ts

@@ -18,7 +18,6 @@ import {
 import {
 	Rect,
 	ResizeObserver,
-	getOptimalPosition,
 	toUnit,
 	type ObservableChangeEvent
 } from '@ckeditor/ckeditor5-utils';
@@ -430,29 +429,21 @@ export default class BlockToolbar extends Plugin {
 		// MDN says that 'normal' == ~1.2 on desktop browsers.
 		const contentLineHeight = parseInt( contentStyles.lineHeight, 10 ) || parseInt( contentStyles.fontSize, 10 ) * 1.2;
 
-		const position = getOptimalPosition( {
-			element: this.buttonView.element!,
-			target: targetElement,
-			positions: [
-				( contentRect, buttonRect ) => {
-					let left;
-
-					if ( this.editor.locale.uiLanguageDirection === 'ltr' ) {
-						left = editableRect.left - buttonRect.width;
-					} else {
-						left = editableRect.right;
-					}
-
-					return {
-						top: contentRect.top + contentPaddingTop + ( contentLineHeight - buttonRect.height ) / 2,
-						left
-					};
-				}
-			]
-		} );
+		const buttonRect = new Rect( this.buttonView.element! ).toAbsoluteRect();
+		const contentRect = new Rect( targetElement ).toAbsoluteRect();
+
+		let positionLeft;
+
+		if ( this.editor.locale.uiLanguageDirection === 'ltr' ) {
+			positionLeft = editableRect.left - buttonRect.width;
+		} else {
+			positionLeft = editableRect.right;
+		}
+
+		const positionTop = contentRect.top + contentPaddingTop + ( contentLineHeight - buttonRect.height ) / 2;
 
-		this.buttonView.top = position.top;
-		this.buttonView.left = position.left;
+		this.buttonView.top = positionTop;
+		this.buttonView.left = positionLeft;
 	}
 
 	/**