Fix pinning the balloons to #text nodes

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

@@ -16,6 +16,7 @@ import {
 	isRange,
 	toUnit,
 	isVisible,
+	isText,
 	ResizeObserver,
 	type Locale,
 	type ObservableChangeEvent,
@@ -396,7 +397,7 @@ export default class BalloonPanelView extends View {
 			return false;
 		}
 
-		const targetElement = getDomElement( options.target );
+		let targetElement = getDomElement( options.target );
 		const limiterElement = options.limiter ? getDomElement( options.limiter ) : global.document.body;
 
 		// Then we need to listen on scroll event of eny element in the document.
@@ -422,17 +423,25 @@ export default class BalloonPanelView extends View {
 		} );
 
 		// Hide the panel if the target element is no longer visible.
-		if ( targetElement && !this._resizeObserver ) {
-			const checkVisibility = () => {
-				// If the target element is no longer visible, hide the panel.
-				if ( !isVisible( targetElement ) ) {
-					this.unpin();
-				}
-			};
+		if ( !this._resizeObserver ) {
+			// If the target element is a text node, we need to check the parent element.
+			// It's because `ResizeObserver` accept only elements, not text nodes.
+			if ( targetElement && isText( targetElement ) ) {
+				targetElement = targetElement.parentElement;
+			}
+
+			if ( targetElement ) {
+				const checkVisibility = () => {
+					// If the target element is no longer visible, hide the panel.
+					if ( !isVisible( targetElement ) ) {
+						this.unpin();
+					}
+				};
 
-			// Element is being resized to 0x0 after it's parent became hidden,
-			// so we need to check size in order to determine if it's visible or not.
-			this._resizeObserver = new ResizeObserver( targetElement, checkVisibility );
+				// Element is being resized to 0x0 after it's parent became hidden,
+				// so we need to check size in order to determine if it's visible or not.
+				this._resizeObserver = new ResizeObserver( targetElement, checkVisibility );
+			}
 		}
 
 		return true;

packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js

@@ -1107,6 +1107,35 @@ describe( 'BalloonPanelView', () => {
 					expect( view._resizeObserver ).to.be.null;
 				} );
 
+				it( 'should watch parent element visibility changes if target is text node', () => {
+					const resizeCallbackRef = createResizeObserverCallbackRef();
+					const textNode = target.appendChild(
+						document.createTextNode( 'Hello World' )
+					);
+
+					const range = document.createRange();
+					range.setStart( textNode, 1 );
+					range.setEnd( textNode, 8 );
+
+					view.pin( { target: range, limiter } );
+					clock.tick( 100 );
+
+					expect( view.isVisible ).to.be.true;
+
+					// It's still visible, nothing changed.
+					resizeCallbackRef.current( [ { target } ] );
+					clock.tick( 100 );
+					expect( view.isVisible ).to.be.true;
+
+					// Hide the target and force call resize callback.
+					target.style.display = 'none';
+					resizeCallbackRef.current( [ { target } ] );
+
+					// It should be hidden now.
+					clock.tick( 100 );
+					expect( view.isVisible ).to.be.false;
+				} );
+
 				function createResizeObserverCallbackRef() {
 					const resizeCallbackRef = { current: null };
 

packages/ckeditor5-utils/src/dom/isvisible.ts

@@ -7,6 +7,8 @@
  * @module utils/dom/isvisible
  */
 
+import isText from './istext.js';
+
 /**
  * Checks whether the element is visible to the user in DOM:
  *
@@ -17,6 +19,18 @@
  * **Note**: This helper does not check whether the element is hidden by cropping, overflow, etc..
  * To check that, use {@link module:utils/dom/rect~Rect} instead.
  */
-export default function isVisible( element: HTMLElement | null | undefined ): boolean {
-	return !!( element && element.getClientRects && element.getClientRects().length );
+export default function isVisible( element: Text | HTMLElement | null | undefined ): boolean {
+	if ( !element ) {
+		return false;
+	}
+
+	if ( isText( element ) ) {
+		return isVisible( element.parentElement );
+	}
+
+	if ( element.getClientRects ) {
+		return !!( element.getClientRects().length );
+	}
+
+	return false;
 }

packages/ckeditor5-utils/tests/dom/isvisible.js

@@ -80,4 +80,17 @@ describe( 'isVisible()', () => {
 
 		expect( isVisible( element ) ).to.be.false;
 	} );
+
+	it( 'should return visibility of parent element if text node is passed', () => {
+		document.body.appendChild( element );
+
+		const textNode = document.createTextNode( 'foo' );
+		element.appendChild( textNode );
+
+		expect( isVisible( textNode ) ).to.be.true;
+
+		element.style.display = 'none';
+
+		expect( isVisible( textNode ) ).to.be.false;
+	} );
 } );