@ckeditor/ckeditor5-ui 43.0.0 → 43.1.0-alpha.1

package/src/dropdown/utils.js

@@ -8,6 +8,7 @@
 import DropdownPanelView from './dropdownpanelview.js';
 import DropdownView from './dropdownview.js';
 import DropdownButtonView from './button/dropdownbuttonview.js';
+import DropdownMenuRootListView from './menu/dropdownmenurootlistview.js';
 import ToolbarView from '../toolbar/toolbarview.js';
 import ListView from '../list/listview.js';
 import ListItemView from '../list/listitemview.js';
@@ -86,6 +87,8 @@ import ListItemButtonView from '../button/listitembuttonview.js';
  *
  * @param locale The locale instance.
  * @param ButtonClassOrInstance The dropdown button view class. Needs to implement the
+ * @param behaviorOptions Attributes for the default behavior of the dropdown.
+ *
  * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface.
  * @returns The dropdown view instance.
  */
@@ -100,9 +103,90 @@ export function createDropdown(locale, ButtonClassOrInstance = DropdownButtonVie
     else {
         buttonView.bind('isOn').to(dropdownView, 'isOpen');
     }
-    addDefaultBehavior(dropdownView);
+    addDefaultBehaviors(dropdownView);
     return dropdownView;
 }
+/**
+ * Adds a menu UI component to a dropdown and sets all common behaviors and interactions between the dropdown and the menu.
+ *
+ * Use this helper to create multi-level dropdown menus that are displayed in a toolbar.
+ *
+ * Internally, it creates an instance of {@link module:ui/dropdown/menu/dropdownmenurootlistview~DropdownMenuRootListView}.
+ *
+ * Example:
+ *
+ * ```ts
+ * const definitions = [
+ * 	{
+ * 		id: 'menu_1',
+ * 		menu: 'Menu 1',
+ * 		children: [
+ * 			{
+ * 				id: 'menu_1_a',
+ * 				label: 'Item A'
+ * 			},
+ * 			{
+ * 				id: 'menu_1_b',
+ * 				label: 'Item B'
+ * 			}
+ * 		]
+ * 	},
+ * 	{
+ * 		id: 'top_a',
+ * 		label: 'Top Item A'
+ * 	},
+ * 	{
+ * 		id: 'top_b',
+ * 		label: 'Top Item B'
+ * 	}
+ * ];
+ *
+ * const dropdownView = createDropdown( editor.locale );
+ *
+ * addMenuToDropdown( dropdownView, editor.ui.view.body, definitions );
+ * ```
+ *
+ * After using this helper, the `dropdown` will fire {@link module:ui/dropdown/dropdownview~DropdownViewEvent `execute`} event when
+ * a nested menu button is pressed.
+ *
+ * The helper will make sure that the `dropdownMenuRootListView` is lazy loaded, i.e., the menu component structure will be initialized
+ * and rendered only after the `dropdown` is opened for the first time.
+ *
+ * @param dropdownView A dropdown instance to which the menu component will be added.
+ * @param body Body collection to which floating menu panels will be added.
+ * @param definition The menu component definition.
+ * @param options.ariaLabel Label used by assistive technologies to describe the top-level menu.
+ */
+export function addMenuToDropdown(dropdownView, body, definition, options = {}) {
+    dropdownView.menuView = new DropdownMenuRootListView(dropdownView.locale, body, definition);
+    if (dropdownView.isOpen) {
+        addMenuToOpenDropdown(dropdownView, options);
+    }
+    else {
+        // Load the UI elements only after the dropdown is opened for the first time - lazy loading.
+        dropdownView.once('change:isOpen', () => {
+            addMenuToOpenDropdown(dropdownView, options);
+        }, { priority: 'highest' });
+    }
+}
+function addMenuToOpenDropdown(dropdownView, options) {
+    const dropdownMenuRootListView = dropdownView.menuView;
+    const t = dropdownView.locale.t;
+    dropdownMenuRootListView.delegate('menu:execute').to(dropdownView, 'execute');
+    dropdownMenuRootListView.listenTo(dropdownView, 'change:isOpen', (evt, name, isOpen) => {
+        if (!isOpen) {
+            dropdownMenuRootListView.closeMenus();
+        }
+    }, { priority: 'low' }); // Make sure this is fired after `focusDropdownButtonOnClose` behavior.
+    // When `dropdownMenuRootListView` is added as a `panelView` child, it becomes rendered (`panelView` is rendered at this point).
+    dropdownView.panelView.children.add(dropdownMenuRootListView);
+    // Nested menu panels are added to body collection, so they are not children of the `dropdownView` from DOM perspective.
+    // Add these panels to `dropdownView` focus tracker, so they are treated like part of the `dropdownView` for focus-related purposes.
+    for (const menu of dropdownMenuRootListView.menus) {
+        dropdownView.focusTracker.add(menu.panelView.element);
+    }
+    dropdownMenuRootListView.ariaLabel = options.ariaLabel || t('Dropdown menu');
+}
 /**
  * Adds an instance of {@link module:ui/toolbar/toolbarview~ToolbarView} to a dropdown.
  *
@@ -315,7 +399,7 @@ export function focusChildOnDropdownOpen(dropdownView, childSelectorCallback) {
 /**
  * Add a set of default behaviors to dropdown view.
  */
-function addDefaultBehavior(dropdownView) {
+function addDefaultBehaviors(dropdownView) {
     closeDropdownOnClickOutside(dropdownView);
     closeDropdownOnExecute(dropdownView);
     closeDropdownOnBlur(dropdownView);
@@ -327,18 +411,16 @@ function addDefaultBehavior(dropdownView) {
  * Adds a behavior to a dropdownView that closes opened dropdown when user clicks outside the dropdown.
  */
 function closeDropdownOnClickOutside(dropdownView) {
-    dropdownView.on('render', () => {
-        clickOutsideHandler({
-            emitter: dropdownView,
-            activator: () => dropdownView.isOpen,
-            callback: () => {
-                dropdownView.isOpen = false;
-            },
-            contextElements: () => [
-                dropdownView.element,
-                ...dropdownView.focusTracker._elements
-            ]
-        });
+    clickOutsideHandler({
+        emitter: dropdownView,
+        activator: () => dropdownView.isRendered && dropdownView.isOpen,
+        callback: () => {
+            dropdownView.isOpen = false;
+        },
+        contextElements: () => [
+            dropdownView.element,
+            ...dropdownView.focusTracker.elements
+        ]
     });
 }
 /**
@@ -359,9 +441,10 @@ function closeDropdownOnExecute(dropdownView) {
  */
 function closeDropdownOnBlur(dropdownView) {
     dropdownView.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
-        if (dropdownView.isOpen && !isFocused) {
-            dropdownView.isOpen = false;
+        if (isFocused || !dropdownView.isOpen) {
+            return;
         }
+        dropdownView.isOpen = false;
     });
 }
 /**
@@ -392,11 +475,11 @@ function focusDropdownButtonOnClose(dropdownView) {
         if (isOpen) {
             return;
         }
-        const element = dropdownView.panelView.element;
+        const elements = dropdownView.focusTracker.elements;
         // If the dropdown was closed, move the focus back to the button (#12125).
         // Don't touch the focus, if it moved somewhere else (e.g. moved to the editing root on #execute) (#12178).
         // Note: Don't use the state of the DropdownView#focusTracker here. It fires #blur with the timeout.
-        if (element && element.contains(global.document.activeElement)) {
+        if (elements.some(element => element.contains(global.document.activeElement))) {
             dropdownView.buttonView.focus();
         }
     });

package/src/editableui/editableuiview.d.ts

@@ -34,7 +34,7 @@ export default class EditableUIView extends View {
     /**
      * The element which is the main editable element (usually the one with `contentEditable="true"`).
      */
-    private _editableElement;
+    protected _editableElement: HTMLElement | null | undefined;
     /**
      * Whether an external {@link #_editableElement} was passed into the constructor, which also means
      * the view will not render its {@link #template}.

package/src/editableui/inline/inlineeditableuiview.d.ts

@@ -13,10 +13,9 @@ import type { Locale } from '@ckeditor/ckeditor5-utils';
  */
 export default class InlineEditableUIView extends EditableUIView {
     /**
-     * A function that gets called with the instance of this view as an argument and should return a string that
-     * represents the label of the editable for assistive technologies.
+     * The cached options object passed to the constructor.
      */
-    private readonly _generateLabel;
+    private readonly _options;
     /**
      * Creates an instance of the InlineEditableUIView class.
      *
@@ -26,15 +25,20 @@ export default class InlineEditableUIView extends EditableUIView {
      * {@link module:ui/editableui/editableuiview~EditableUIView}
      * will create it. Otherwise, the existing element will be used.
      * @param options Additional configuration of the view.
-     * @param options.label A function that gets called with the instance of this view as an argument
-     * and should return a string that represents the label of the editable for assistive technologies. If not provided,
-     * a default label generator is used.
+     * @param options.label The label of the editable for assistive technologies. If not provided, a default label is used or,
+     * the existing `aria-label` attribute value from the specified `editableElement` is preserved.
      */
-    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement, options?: {
-        label?: (view: InlineEditableUIView) => string;
-    });
+    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement, options?: InlineEditableUIViewOptions);
     /**
      * @inheritDoc
      */
     render(): void;
+    /**
+     * Returns a normalized label for the editable view based on the environment.
+     */
+    getEditableAriaLabel(): string;
 }
+type InlineEditableUIViewOptions = {
+    label?: ((view: InlineEditableUIView) => string) | string | Record<string, string>;
+};
+export {};

package/src/editableui/inline/inlineeditableuiview.js

@@ -19,20 +19,18 @@ export default class InlineEditableUIView extends EditableUIView {
      * {@link module:ui/editableui/editableuiview~EditableUIView}
      * will create it. Otherwise, the existing element will be used.
      * @param options Additional configuration of the view.
-     * @param options.label A function that gets called with the instance of this view as an argument
-     * and should return a string that represents the label of the editable for assistive technologies. If not provided,
-     * a default label generator is used.
+     * @param options.label The label of the editable for assistive technologies. If not provided, a default label is used or,
+     * the existing `aria-label` attribute value from the specified `editableElement` is preserved.
      */
     constructor(locale, editingView, editableElement, options = {}) {
         super(locale, editingView, editableElement);
-        const t = locale.t;
+        this._options = options;
         this.extendTemplate({
             attributes: {
                 role: 'textbox',
                 class: 'ck-editor__editable_inline'
             }
         });
-        this._generateLabel = options.label || (() => t('Editor editing area: %0', this.name));
     }
     /**
      * @inheritDoc
@@ -42,7 +40,32 @@ export default class InlineEditableUIView extends EditableUIView {
         const editingView = this._editingView;
         editingView.change(writer => {
             const viewRoot = editingView.document.getRoot(this.name);
-            writer.setAttribute('aria-label', this._generateLabel(this), viewRoot);
+            writer.setAttribute('aria-label', this.getEditableAriaLabel(), viewRoot);
         });
     }
+    /**
+     * Returns a normalized label for the editable view based on the environment.
+     */
+    getEditableAriaLabel() {
+        const t = this.locale.t;
+        const label = this._options.label;
+        const editableElement = this._editableElement;
+        const editableName = this.name;
+        if (typeof label == 'string') {
+            return label;
+        }
+        else if (typeof label === 'object') {
+            return label[editableName];
+        }
+        else if (typeof label === 'function') {
+            return label(this);
+        }
+        else if (editableElement) {
+            const existingLabel = editableElement.getAttribute('aria-label');
+            if (existingLabel) {
+                return existingLabel;
+            }
+        }
+        return t('Rich Text Editor. Editing area: %0', editableName);
+    }
 }

package/src/editorui/accessibilityhelp/accessibilityhelp.js

@@ -106,7 +106,9 @@ export default class AccessibilityHelp extends Plugin {
         });
         function addAriaLabelTextToRoot(writer, viewRoot) {
             const currentAriaLabel = viewRoot.getAttribute('aria-label');
-            const newAriaLabel = `${currentAriaLabel}. ${t('Press %0 for help.', [getEnvKeystrokeText('Alt+0')])}`;
+            const newAriaLabel = [currentAriaLabel, t('Press %0 for help.', [getEnvKeystrokeText('Alt+0')])]
+                .filter(segment => segment)
+                .join('. ');
             writer.setAttribute('aria-label', newAriaLabel, viewRoot);
         }
     }

package/src/editorui/editorui.d.ts

@@ -282,6 +282,10 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * @param data The payload carried by the `scrollToTheSelection` event.
      */
     private _handleScrollToTheSelection;
+    /**
+     * Ensures that the focus tracker is aware of all views' DOM elements in the body collection.
+     */
+    private _bindBodyCollectionWithFocusTracker;
 }
 /**
  * Fired when the editor UI is ready.

package/src/editorui/editorui.js

@@ -55,6 +55,7 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
         this.ariaLiveAnnouncer = new AriaLiveAnnouncer(editor);
         this.set('viewportOffset', this._readViewportOffsetFromConfig());
         this.once('ready', () => {
+            this._bindBodyCollectionWithFocusTracker();
             this.isReady = true;
         });
         // Informs UI components that should be refreshed after layout change.
@@ -332,7 +333,6 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
      */
     _initFocusTracking() {
         const editor = this.editor;
-        const editingView = editor.editing.view;
         let candidateDefinitions;
         // Focus the next focusable toolbar on <kbd>Alt</kbd> + <kbd>F10</kbd>.
         editor.keystrokes.set('Alt+F10', (data, cancel) => {
@@ -480,6 +480,21 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
         data.viewportOffset.left += configuredViewportOffset.left;
         data.viewportOffset.right += configuredViewportOffset.right;
     }
+    /**
+     * Ensures that the focus tracker is aware of all views' DOM elements in the body collection.
+     */
+    _bindBodyCollectionWithFocusTracker() {
+        const body = this.view.body;
+        for (const view of body) {
+            this.focusTracker.add(view.element);
+        }
+        body.on('add', (evt, view) => {
+            this.focusTracker.add(view.element);
+        });
+        body.on('remove', (evt, view) => {
+            this.focusTracker.remove(view.element);
+        });
+    }
 }
 /**
  * Returns a number (weight) for a toolbar definition. Visible toolbars have a higher priority and so do

package/src/editorui/poweredby.js

@@ -97,7 +97,6 @@ export default class PoweredBy extends /* #__PURE__ */ DomEmitterMixin() {
             class: 'ck-powered-by-balloon'
         });
         editor.ui.view.body.add(balloon);
-        editor.ui.focusTracker.add(balloon.element);
         this._balloonView = balloon;
     }
     /**

package/src/index.d.ts

@@ -35,6 +35,12 @@ export { default as DropdownPanelView } from './dropdown/dropdownpanelview.js';
 export { default as DropdownButtonView } from './dropdown/button/dropdownbuttonview.js';
 export { default as SplitButtonView } from './dropdown/button/splitbuttonview.js';
 export * from './dropdown/utils.js';
+export * from './dropdown/menu/utils.js';
+export { default as DropdownMenuNestedMenuView } from './dropdown/menu/dropdownmenunestedmenuview.js';
+export { default as DropdownMenuRootListView } from './dropdown/menu/dropdownmenurootlistview.js';
+export { default as DropdownMenuListView } from './dropdown/menu/dropdownmenulistview.js';
+export { default as DropdownMenuListItemView } from './dropdown/menu/dropdownmenulistitemview.js';
+export { default as DropdownMenuListItemButtonView } from './dropdown/menu/dropdownmenulistitembuttonview.js';
 export { default as EditorUI, type EditorUIReadyEvent, type EditorUIUpdateEvent } from './editorui/editorui.js';
 export { default as EditorUIView } from './editorui/editoruiview.js';
 export { default as BoxedEditorUIView } from './editorui/boxed/boxededitoruiview.js';
@@ -58,7 +64,7 @@ export { default as filterGroupAndItemNames } from './search/filtergroupanditemn
 export { default as Notification } from './notification/notification.js';
 export { default as ViewModel } from './model.js';
 export { default as BalloonPanelView } from './panel/balloon/balloonpanelview.js';
-export { default as ContextualBalloon } from './panel/balloon/contextualballoon.js';
+export { default as ContextualBalloon, type ContextualBalloonGetPositionOptionsEvent } from './panel/balloon/contextualballoon.js';
 export { default as StickyPanelView } from './panel/sticky/stickypanelview.js';
 export { default as AutocompleteView, type AutocompleteViewConfig, type AutocompleteResultsView } from './autocomplete/autocompleteview.js';
 export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchTextViewConfig } from './search/text/searchtextview.js';

package/src/index.js

@@ -33,6 +33,12 @@ export { default as DropdownPanelView } from './dropdown/dropdownpanelview.js';
 export { default as DropdownButtonView } from './dropdown/button/dropdownbuttonview.js';
 export { default as SplitButtonView } from './dropdown/button/splitbuttonview.js';
 export * from './dropdown/utils.js';
+export * from './dropdown/menu/utils.js';
+export { default as DropdownMenuNestedMenuView } from './dropdown/menu/dropdownmenunestedmenuview.js';
+export { default as DropdownMenuRootListView } from './dropdown/menu/dropdownmenurootlistview.js';
+export { default as DropdownMenuListView } from './dropdown/menu/dropdownmenulistview.js';
+export { default as DropdownMenuListItemView } from './dropdown/menu/dropdownmenulistitemview.js';
+export { default as DropdownMenuListItemButtonView } from './dropdown/menu/dropdownmenulistitembuttonview.js';
 export { default as EditorUI } from './editorui/editorui.js';
 export { default as EditorUIView } from './editorui/editoruiview.js';
 export { default as BoxedEditorUIView } from './editorui/boxed/boxededitoruiview.js';

package/src/menubar/menubarmenuview.js

@@ -85,6 +85,7 @@ class MenuBarMenuView extends View {
             MenuBarMenuBehaviors.openOnButtonClick(this);
             MenuBarMenuBehaviors.openOnArrowRightKey(this);
             MenuBarMenuBehaviors.closeOnArrowLeftKey(this);
+            MenuBarMenuBehaviors.openAndFocusOnEnterKeyPress(this);
             MenuBarMenuBehaviors.closeOnParentClose(this);
         }
     }

package/src/menubar/utils.d.ts

@@ -6,9 +6,6 @@ import type MenuBarMenuView from './menubarmenuview.js';
 import type { default as MenuBarView, MenuBarConfig, MenuBarConfigObject, MenuBarConfigAddedGroup, MenuBarConfigAddedMenu, NormalizedMenuBarConfigObject, MenuBarConfigAddedItem } from './menubarview.js';
 import type ComponentFactory from '../componentfactory.js';
 import { type Locale, type PositioningFunction } from '@ckeditor/ckeditor5-utils';
-type DeepReadonly<T> = Readonly<{
-    [K in keyof T]: T[K] extends string ? Readonly<T[K]> : T[K] extends Array<infer A> ? Readonly<Array<DeepReadonly<A>>> : DeepReadonly<T[K]>;
-}>;
 /**
  * Behaviors of the {@link module:ui/menubar/menubarview~MenuBarView} component.
  */
@@ -71,6 +68,10 @@ export declare const MenuBarMenuBehaviors: {
      * Toggles the menu on its button click. This behavior is analogous to {@link module:ui/dropdown/dropdownview~DropdownView}.
      */
     toggleOnButtonClick(menuView: MenuBarMenuView): void;
+    /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView: MenuBarMenuView): void;
     /**
      * Closes the menu on the right left key press. This allows for navigating to sub-menus using the keyboard.
      */
@@ -425,7 +426,7 @@ export declare const MenuBarMenuViewPanelPositioningFunctions: Record<string, Po
  *
  * The menu bar can be customized using the `config.menuBar.removeItems` and `config.menuBar.addItems` properties.
  */
-export declare const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject['items']>;
+export declare const DefaultMenuBarItems: MenuBarConfigObject['items'];
 /**
  * Performs a cleanup and normalization of the menu bar configuration.
  */
@@ -444,4 +445,3 @@ export declare function processMenuBarConfig({ normalizedConfig, locale, compone
     componentFactory: ComponentFactory;
     extraItems: Array<MenuBarConfigAddedItem | MenuBarConfigAddedGroup | MenuBarConfigAddedMenu>;
 }): NormalizedMenuBarConfigObject;
-export {};

package/src/menubar/utils.js

@@ -124,20 +124,17 @@ export const MenuBarBehaviors = {
         let isKeyPressed = false;
         menuBarView.on('change:isOpen', (_, evt, isOpen) => {
             if (!isOpen) {
-                menuBarView.isFocusBorderEnabled = false;
+                // Keep the focus border if the menu bar was closed by a keyboard interaction (Esc key).
+                // The user remains in the keyboard navigation mode and can traverse the main categories.
+                // See https://github.com/ckeditor/ckeditor5/issues/16719.
+                if (!isKeyPressed) {
+                    menuBarView.isFocusBorderEnabled = false;
+                }
                 // Reset the flag when the menu bar is closed, menu items tend to intercept `keyup` event
                 // and sometimes, after pressing `enter` on focused item, `isKeyPressed` stuck in `true` state.
                 isKeyPressed = false;
             }
         });
-        // After clicking menu bar list item the focus is moved to the newly opened submenu.
-        // We need to enable focus border for the submenu items because after pressing arrow down it will
-        // focus second item instead of first which is not super intuitive.
-        menuBarView.listenTo(menuBarView.element, 'click', () => {
-            if (menuBarView.isOpen && menuBarView.element.matches(':focus-within')) {
-                menuBarView.isFocusBorderEnabled = true;
-            }
-        }, { useCapture: true });
         menuBarView.listenTo(menuBarView.element, 'keydown', () => {
             isKeyPressed = true;
         }, { useCapture: true });
@@ -194,9 +191,6 @@ export const MenuBarMenuBehaviors = {
     openOnButtonClick(menuView) {
         menuView.buttonView.on('execute', () => {
             menuView.isOpen = true;
-            if (menuView.parentMenuView) {
-                menuView.panelView.focus();
-            }
         });
     },
     /**
@@ -207,6 +201,21 @@ export const MenuBarMenuBehaviors = {
             menuView.isOpen = !menuView.isOpen;
         });
     },
+    /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView) {
+        menuView.keystrokes.set('enter', (data, cancel) => {
+            // Engage only for Enter key press when the button is focused. The panel can contain
+            // other UI components and features that rely on the Enter key press.
+            if (menuView.focusTracker.focusedElement !== menuView.buttonView.element) {
+                return;
+            }
+            menuView.isOpen = true;
+            menuView.panelView.focus();
+            cancel();
+        });
+    },
     /**
      * Closes the menu on the right left key press. This allows for navigating to sub-menus using the keyboard.
      */

package/src/panel/balloon/balloonpanelview.js

@@ -6,7 +6,7 @@
  * @module ui/panel/balloon/balloonpanelview
  */
 import View from '../../view.js';
-import { getOptimalPosition, global, isRange, toUnit, isVisible, ResizeObserver } from '@ckeditor/ckeditor5-utils';
+import { getOptimalPosition, global, isRange, toUnit, isVisible, isText, ResizeObserver } from '@ckeditor/ckeditor5-utils';
 import { isElement } from 'lodash-es';
 import '../../../theme/components/panel/balloonpanel.css';
 const toPx = /* #__PURE__ */ toUnit('px');
@@ -273,7 +273,7 @@ class BalloonPanelView extends View {
         if (!this.attachTo(options)) {
             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.
         this.listenTo(global.document, 'scroll', (evt, domEvt) => {
@@ -293,16 +293,23 @@ class BalloonPanelView extends View {
             this.attachTo(options);
         });
         // 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();
-                }
-            };
-            // 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);
+        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);
+            }
         }
         return true;
     }

package/src/panel/balloon/contextualballoon.d.ts

@@ -10,7 +10,7 @@ import View from '../../view.js';
 import ButtonView from '../../button/buttonview.js';
 import type ViewCollection from '../../viewcollection.js';
 import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
-import { FocusTracker, type Locale, type PositionOptions } from '@ckeditor/ckeditor5-utils';
+import { FocusTracker, type Locale, type PositionOptions, type DecoratedMethodEvent } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/panel/balloonrotator.css';
 import '../../../theme/components/panel/fakepanel.css';
 /**
@@ -152,6 +152,11 @@ export default class ContextualBalloon extends Plugin {
      * @param position Position options.
      */
     updatePosition(position?: Partial<PositionOptions>): void;
+    /**
+     * Returns position options of the last view in the stack.
+     * This keeps the balloon in the same position when the view is changed.
+     */
+    getPositionOptions(): Partial<PositionOptions> | undefined;
     /**
      * Shows the last view from the stack of a given ID.
      */
@@ -194,12 +199,13 @@ export default class ContextualBalloon extends Plugin {
      * @param data.withArrow Whether the {@link #view balloon} should be rendered with an arrow.
      */
     private _showView;
-    /**
-     * Returns position options of the last view in the stack.
-     * This keeps the balloon in the same position when the view is changed.
-     */
-    private _getBalloonPosition;
 }
+/**
+ * An event fired when the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon} is about to get the position of the balloon.
+ *
+ * @eventName ~ContextualBalloon#getPositionOptions
+ */
+export type ContextualBalloonGetPositionOptionsEvent = DecoratedMethodEvent<ContextualBalloon, 'getPositionOptions'>;
 /**
  * The configuration of the view.
  */