@ckeditor/ckeditor5-ui 45.0.0-alpha.9 → 45.1.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "45.0.0-alpha.9",
+  "version": "45.1.0-alpha.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -17,11 +17,11 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "45.0.0-alpha.9",
-    "@ckeditor/ckeditor5-editor-multi-root": "45.0.0-alpha.9",
-    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.9",
-    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.9",
-    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-core": "45.1.0-alpha.0",
+    "@ckeditor/ckeditor5-editor-multi-root": "45.1.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "45.1.0-alpha.0",
+    "@ckeditor/ckeditor5-icons": "45.1.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "45.1.0-alpha.0",
     "@types/color-convert": "2.0.4",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",

package/src/colorselector/colorgridsfragmentview.d.ts

@@ -114,14 +114,15 @@ export default class ColorGridsFragmentView extends View {
      * Creates an instance of the view.
      *
      * @param locale The localization services instance.
-     * @param colors An array with definitions of colors to be displayed in the table.
-     * @param columns The number of columns in the color grid.
-     * @param removeButtonLabel The label of the button responsible for removing the color.
-     * @param colorPickerLabel The label of the button responsible for color picker appearing.
-     * @param documentColorsLabel The label for the section with the document colors.
-     * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
-     * @param focusTracker Tracks information about the DOM focus in the list.
-     * @param focusables A collection of views that can be focused in the view.
+     * @param options Constructor options.
+     * @param options.colors An array with definitions of colors to be displayed in the table.
+     * @param options.columns The number of columns in the color grid.
+     * @param options.removeButtonLabel The label of the button responsible for removing the color.
+     * @param options.colorPickerLabel The label of the button responsible for color picker appearing.
+     * @param options.documentColorsLabel The label for the section with the document colors.
+     * @param options.documentColorsCount The number of colors in the document colors section inside the color dropdown.
+     * @param options.focusTracker Tracks information about the DOM focus in the list.
+     * @param options.focusables A collection of views that can be focused in the view.
      */
     constructor(locale: Locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, focusTracker, focusables }: {
         colors: Array<ColorDefinition>;

package/src/colorselector/colorgridsfragmentview.js

@@ -105,14 +105,15 @@ export default class ColorGridsFragmentView extends View {
      * Creates an instance of the view.
      *
      * @param locale The localization services instance.
-     * @param colors An array with definitions of colors to be displayed in the table.
-     * @param columns The number of columns in the color grid.
-     * @param removeButtonLabel The label of the button responsible for removing the color.
-     * @param colorPickerLabel The label of the button responsible for color picker appearing.
-     * @param documentColorsLabel The label for the section with the document colors.
-     * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
-     * @param focusTracker Tracks information about the DOM focus in the list.
-     * @param focusables A collection of views that can be focused in the view.
+     * @param options Constructor options.
+     * @param options.colors An array with definitions of colors to be displayed in the table.
+     * @param options.columns The number of columns in the color grid.
+     * @param options.removeButtonLabel The label of the button responsible for removing the color.
+     * @param options.colorPickerLabel The label of the button responsible for color picker appearing.
+     * @param options.documentColorsLabel The label for the section with the document colors.
+     * @param options.documentColorsCount The number of colors in the document colors section inside the color dropdown.
+     * @param options.focusTracker Tracks information about the DOM focus in the list.
+     * @param options.focusables A collection of views that can be focused in the view.
      */
     constructor(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, focusTracker, focusables }) {
         super(locale);

package/src/colorselector/colorpickerfragmentview.d.ts

@@ -77,10 +77,11 @@ export default class ColorPickerFragmentView extends View {
      * Creates an instance of the view.
      *
      * @param locale The localization services instance.
-     * @param focusTracker Tracks information about the DOM focus in the list.
-     * @param focusables A collection of views that can be focused in the view..
-     * @param keystrokes An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     * @param colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker
+     * @param options Constructor options.
+     * @param options.focusTracker Tracks information about the DOM focus in the list.
+     * @param options.focusables A collection of views that can be focused in the view.
+     * @param options.keystrokes An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     * @param options.colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker
      * will not be rendered.
      */
     constructor(locale: Locale, { focusTracker, focusables, keystrokes, colorPickerViewConfig }: {

package/src/colorselector/colorpickerfragmentview.js

@@ -66,10 +66,11 @@ export default class ColorPickerFragmentView extends View {
      * Creates an instance of the view.
      *
      * @param locale The localization services instance.
-     * @param focusTracker Tracks information about the DOM focus in the list.
-     * @param focusables A collection of views that can be focused in the view..
-     * @param keystrokes An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     * @param colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker
+     * @param options Constructor options.
+     * @param options.focusTracker Tracks information about the DOM focus in the list.
+     * @param options.focusables A collection of views that can be focused in the view.
+     * @param options.keystrokes An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     * @param options.colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker
      * will not be rendered.
      */
     constructor(locale, { focusTracker, focusables, keystrokes, colorPickerViewConfig }) {

package/src/colorselector/colorselectorview.d.ts

@@ -120,13 +120,14 @@ export default class ColorSelectorView extends View {
      * Creates a view to be inserted as a child of {@link module:ui/dropdown/dropdownview~DropdownView}.
      *
      * @param locale The localization services instance.
-     * @param colors An array with definitions of colors to be displayed in the table.
-     * @param columns The number of columns in the color grid.
-     * @param removeButtonLabel The label of the button responsible for removing the color.
-     * @param colorPickerLabel The label of the button responsible for color picker appearing.
-     * @param documentColorsLabel The label for the section with the document colors.
-     * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
-     * @param colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker will be hidden.
+     * @param options Constructor options.
+     * @param options.colors An array with definitions of colors to be displayed in the table.
+     * @param options.columns The number of columns in the color grid.
+     * @param options.removeButtonLabel The label of the button responsible for removing the color.
+     * @param options.colorPickerLabel The label of the button responsible for color picker appearing.
+     * @param options.documentColorsLabel The label for the section with the document colors.
+     * @param options.documentColorsCount The number of colors in the document colors section inside the color dropdown.
+     * @param options.colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker will be hidden.
      */
     constructor(locale: Locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, colorPickerViewConfig }: {
         colors: Array<ColorDefinition>;

package/src/colorselector/colorselectorview.js

@@ -101,13 +101,14 @@ export default class ColorSelectorView extends View {
      * Creates a view to be inserted as a child of {@link module:ui/dropdown/dropdownview~DropdownView}.
      *
      * @param locale The localization services instance.
-     * @param colors An array with definitions of colors to be displayed in the table.
-     * @param columns The number of columns in the color grid.
-     * @param removeButtonLabel The label of the button responsible for removing the color.
-     * @param colorPickerLabel The label of the button responsible for color picker appearing.
-     * @param documentColorsLabel The label for the section with the document colors.
-     * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
-     * @param colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker will be hidden.
+     * @param options Constructor options.
+     * @param options.colors An array with definitions of colors to be displayed in the table.
+     * @param options.columns The number of columns in the color grid.
+     * @param options.removeButtonLabel The label of the button responsible for removing the color.
+     * @param options.colorPickerLabel The label of the button responsible for color picker appearing.
+     * @param options.documentColorsLabel The label for the section with the document colors.
+     * @param options.documentColorsCount The number of colors in the document colors section inside the color dropdown.
+     * @param options.colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker will be hidden.
      */
     constructor(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, colorPickerViewConfig }) {
         super(locale);
@@ -145,7 +146,7 @@ export default class ColorSelectorView extends View {
         this.colorPickerFragmentView.bind('isVisible').to(this, '_isColorPickerFragmentVisible');
         /**
          * This is kind of bindings. Unfortunately we could not use this.bind() method because the same property
-         * can not be bound twice. So this is work around how to bind 'selectedColor' property between components.
+         * cannot be bound twice. So this is work around how to bind 'selectedColor' property between components.
          */
         this.on('change:selectedColor', (evt, evtName, data) => {
             this.colorGridsFragmentView.set('selectedColor', data);

package/src/componentfactory.js

@@ -85,7 +85,7 @@ export default class ComponentFactory {
              * {@link module:ui/componentfactory~ComponentFactory#add added} to the factory.
              *
              * @error componentfactory-item-missing
-             * @param name The name of the missing component.
+             * @param {string} name The name of the missing component.
              */
             throw new CKEditorError('componentfactory-item-missing', this, { name });
         }

package/src/dropdown/dropdownpanelview.js

@@ -79,8 +79,8 @@ export default class DropdownPanelView extends View {
                  * provides the `focus()` method for the best user experience.
                  *
                  * @error ui-dropdown-panel-focus-child-missing-focus
-                 * @param childView
-                 * @param dropdownPanel
+                 * @param {module:ui/view~View} childView Child view.
+                 * @param {module:ui/dropdown/dropdownpanelview~DropdownPanelView} dropdownPanel A parent of a child.
                  */
                 logWarning('ui-dropdown-panel-focus-child-missing-focus', { childView: this.children.first, dropdownPanel: this });
             }

package/src/dropdown/utils.d.ts

@@ -79,8 +79,6 @@ import type { DropdownMenuDefinition } from './menu/utils.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.
  */

package/src/dropdown/utils.js

@@ -87,8 +87,6 @@ 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.
  */
@@ -390,7 +388,7 @@ export function focusChildOnDropdownOpen(dropdownView, childSelectorCallback) {
              * experience.
              *
              * @error ui-dropdown-focus-child-on-open-child-missing-focus
-             * @param {module:ui/view~View} view
+             * @param {module:ui/view~View} view Child to focus.
              */
             logWarning('ui-dropdown-focus-child-on-open-child-missing-focus', { view: childToFocus });
         }
@@ -525,23 +523,7 @@ function focusDropdownPanelOnOpen(dropdownView) {
  * @param locale
  */
 function bindViewCollectionItemsToDefinitions(dropdownView, listItems, definitions, locale) {
-    // List item checkboxes have a reserved space for the check icon, so we need to know if there are any checkboxes in the list
-    // to adjust the layout accordingly. It'd look weird if the items on the list were not aligned horizontally.
-    //
-    // Possible theoretical performance problem if many items are added one by one, as this will be called for each item.
-    listItems.on('change', () => {
-        // Filter-map. Check all items, leave only these that have buttons and return the buttons.
-        const listItemButtons = [...listItems].reduce((acc, item) => {
-            if (item instanceof ListItemView && item.children.first instanceof ListItemButtonView) {
-                acc.push(item.children.first);
-            }
-            return acc;
-        }, []);
-        const hasAnyCheckboxOnList = listItemButtons.some(button => button.isToggleable);
-        listItemButtons.forEach(item => {
-            item.hasCheckSpace = hasAnyCheckboxOnList;
-        });
-    });
+    bindDropdownToggleableButtonsAlignment(listItems);
     listItems.bindTo(definitions).using(def => {
         if (def.type === 'separator') {
             return new ListSeparatorView(locale);
@@ -575,3 +557,98 @@ function bindViewCollectionItemsToDefinitions(dropdownView, listItems, definitio
         return null;
     });
 }
+/**
+ * Sets up alignment handling for toggleable buttons in a dropdown list.
+ *
+ * Buttons in dropdowns have reserved space for a check icon when they are toggleable.
+ * When at least one button in the list is toggleable, all other buttons (even non-toggleable ones)
+ * will have space on their left side to align with toggleable buttons.
+ *
+ * This function handles a special case where a new toggleable button is added (or removed) to a list
+ * where previous buttons weren't toggleable. In that case, those previous buttons will
+ * automatically allocate space to align with the new toggleable button.
+ *
+ * Example:
+ * ```
+ * Before adding toggleable button:
+ * +----------------+
+ * | Normal Button  |
+ * +----------------+
+ * | Another Button |
+ * +----------------+
+ *
+ * After adding toggleable button:
+ * +-------------------+
+ * |    Normal Button  |
+ * +-------------------+
+ * |    Another Button |
+ * +-------------------+
+ * | ✓ Toggle Button   |
+ * +-------------------+
+ * ```
+ *
+ * @param listItems Collection of list items to observe for toggleable buttons.
+ */
+function bindDropdownToggleableButtonsAlignment(listItems) {
+    // Keep track of how many toggleable buttons are in the list.
+    let toggleableButtonsCount = 0;
+    // Helper function that checks if a view item is a list item button.
+    const pickListItemButtonIfPresent = (item) => {
+        // Check if the item is a ListItemView with a ListItemButtonView as its first child.
+        if (!(item instanceof ListItemView) || !(item.children.first instanceof ListItemButtonView)) {
+            return null;
+        }
+        return item.children.first;
+    };
+    // Helper function that checks if a view item is a toggleable button.
+    // Returns the button if it's toggleable - otherwise, returns null.
+    const pickListItemToggleableButtonIfPresent = (item) => {
+        const listItemButtonView = pickListItemButtonIfPresent(item);
+        // Only return buttons that are configured as toggleable.
+        if (!listItemButtonView || !listItemButtonView.isToggleable) {
+            return null;
+        }
+        return listItemButtonView;
+    };
+    // Updates all buttons in the list to either allocate space for check marks or not.
+    // This ensures all buttons are properly aligned regardless of their toggleable state.
+    const updateAllButtonsCheckSpace = (hasSpace) => {
+        for (const listItem of listItems) {
+            const listItemButton = pickListItemButtonIfPresent(listItem);
+            if (listItemButton) {
+                listItemButton.hasCheckSpace = hasSpace;
+            }
+        }
+    };
+    // Listen for changes in the list items collection.
+    listItems.on('change', (evt, data) => {
+        // Remember the current state - whether we have any toggleable buttons.
+        const prevToggleable = toggleableButtonsCount > 0;
+        // Process removed items - decrease count for each toggleable button removed.
+        for (const item of data.removed) {
+            if (pickListItemToggleableButtonIfPresent(item)) {
+                toggleableButtonsCount--;
+            }
+        }
+        // Process added items - increase count for each toggleable button added.
+        for (const item of data.added) {
+            const button = pickListItemButtonIfPresent(item);
+            if (!button) {
+                continue;
+            }
+            if (button.isToggleable) {
+                // Check if the button is toggleable and increase the count.
+                toggleableButtonsCount++;
+            }
+            // Depending on the current state, set the check space for the button.
+            button.hasCheckSpace = toggleableButtonsCount > 0;
+        }
+        // Check if the current state has changed.
+        const currentToggleable = toggleableButtonsCount > 0;
+        // Only update button alignment if we've crossed the threshold between
+        // having no toggleable buttons and having at least one.
+        if (prevToggleable !== currentToggleable) {
+            updateAllButtonsCheckSpace(currentToggleable);
+        }
+    });
+}

package/src/editorui/editorui.d.ts

@@ -13,7 +13,7 @@ import AriaLiveAnnouncer from '../arialiveannouncer.js';
 import type EditorUIView from './editoruiview.js';
 import type ToolbarView from '../toolbar/toolbarview.js';
 import { FocusTracker } from '@ckeditor/ckeditor5-utils';
-import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { Editor, ViewportOffsetConfig } from '@ckeditor/ckeditor5-core';
 import type { default as MenuBarView, MenuBarConfigAddedGroup, MenuBarConfigAddedItem, MenuBarConfigAddedMenu } from '../menubar/menubarview.js';
 declare const EditorUI_base: {
     new (): import("@ckeditor/ckeditor5-utils").Observable;
@@ -75,7 +75,8 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * 	top: 50,
      * 	right: 50,
      * 	bottom: 50,
-     * 	left: 50
+     * 	left: 50,
+     * 	visualTop: 50
      * }
      * ```
      *
@@ -92,12 +93,7 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      *
      * @observable
      */
-    viewportOffset: {
-        left?: number;
-        right?: number;
-        top?: number;
-        bottom?: number;
-    };
+    viewportOffset: ViewportOffset;
     /**
      * Stores all editable elements used by the editor instance.
      */
@@ -114,6 +110,10 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * The last focused element to which focus should return on `Esc` press.
      */
     private _lastFocusedForeignElement;
+    /**
+     * The DOM emitter instance used for visual viewport watching.
+     */
+    private _domEmitter?;
     /**
      * Creates an instance of the editor UI class.
      *
@@ -291,6 +291,19 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * Ensures that the focus tracker is aware of all views' DOM elements in the body collection.
      */
     private _bindBodyCollectionWithFocusTracker;
+    /**
+     * Set initial viewport offset and setup visualTop augmentation.
+     */
+    private _initViewportOffset;
+    /**
+     * Listen to visual viewport changes and update the viewportOffset with the visualTop property
+     * according to the visible part of it (visual viewport).
+     */
+    private _initVisualViewportSupport;
+    /**
+     * Calculate the viewport top offset according to the visible part of it (visual viewport).
+     */
+    private _getVisualViewportTopOffset;
 }
 /**
  * Fired when the editor UI is ready.
@@ -351,4 +364,12 @@ export interface FocusableToolbarOptions {
      */
     afterBlur?: () => void;
 }
+export interface ViewportOffset extends ViewportOffsetConfig {
+    /**
+     * The top offset of the visual viewport.
+     *
+     * This value is calculated based on the visual viewport position.
+     */
+    visualTop?: number;
+}
 export {};

package/src/editorui/editorui.js

@@ -11,7 +11,7 @@ import TooltipManager from '../tooltipmanager.js';
 import PoweredBy from './poweredby.js';
 import EvaluationBadge from './evaluationbadge.js';
 import AriaLiveAnnouncer from '../arialiveannouncer.js';
-import { ObservableMixin, isVisible, FocusTracker } from '@ckeditor/ckeditor5-utils';
+import { ObservableMixin, DomEmitterMixin, global, isVisible, FocusTracker, getVisualViewportOffset } from '@ckeditor/ckeditor5-utils';
 import { normalizeMenuBarConfig } from '../menubar/utils.js';
 /**
  * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
@@ -71,6 +71,10 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
      * The last focused element to which focus should return on `Esc` press.
      */
     _lastFocusedForeignElement = null;
+    /**
+     * The DOM emitter instance used for visual viewport watching.
+     */
+    _domEmitter;
     /**
      * Creates an instance of the editor UI class.
      *
@@ -86,7 +90,7 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
         this.poweredBy = new PoweredBy(editor);
         this.evaluationBadge = new EvaluationBadge(editor);
         this.ariaLiveAnnouncer = new AriaLiveAnnouncer(editor);
-        this.set('viewportOffset', this._readViewportOffsetFromConfig());
+        this._initViewportOffset(this._readViewportOffsetFromConfig());
         this.once('ready', () => {
             this._bindBodyCollectionWithFocusTracker();
             this.isReady = true;
@@ -95,6 +99,7 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
         this.listenTo(editingView.document, 'layoutChanged', this.update.bind(this));
         this.listenTo(editingView, 'scrollToTheSelection', this._handleScrollToTheSelection.bind(this));
         this._initFocusTracking();
+        this._initVisualViewportSupport();
     }
     /**
      * The main (outermost) DOM element of the editor UI.
@@ -136,6 +141,9 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
         }
         this._editableElementsMap = new Map();
         this._focusableToolbarDefinitions = [];
+        if (this._domEmitter) {
+            this._domEmitter.stopListening();
+        }
     }
     /**
      * Stores the native DOM editable element used by the editor under a unique name.
@@ -279,7 +287,7 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
          * {@link module:ui/editorui/editorui~EditorUI#getEditableElement `getEditableElement()`} methods instead.
          *
          * @error editor-ui-deprecated-editable-elements
-         * @param editorUI Editor UI instance the deprecated property belongs to.
+         * @param {module:ui/editorui/editorui~EditorUI} editorUI Editor UI instance the deprecated property belongs to.
          */
         console.warn('editor-ui-deprecated-editable-elements: ' +
             'The EditorUI#_editableElements property has been deprecated and will be removed in the near future.', { editorUI: this });
@@ -529,6 +537,51 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
             this.focusTracker.remove(view.element);
         });
     }
+    /**
+     * Set initial viewport offset and setup visualTop augmentation.
+     */
+    _initViewportOffset(viewportOffsetConfig) {
+        // Augment the viewport offset set from outside the editor with the visualTop property.
+        this.on('set:viewportOffset', (evt, name, value) => {
+            const visualTop = this._getVisualViewportTopOffset(value);
+            // Update only if there is a change in a value, so we do not trigger
+            // listeners to the viewportOffset observable.
+            if (value.visualTop !== visualTop) {
+                evt.return = { ...value, visualTop };
+            }
+        });
+        // Set the initial value after augmenting the setter.
+        this.set('viewportOffset', viewportOffsetConfig);
+    }
+    /**
+     * Listen to visual viewport changes and update the viewportOffset with the visualTop property
+     * according to the visible part of it (visual viewport).
+     */
+    _initVisualViewportSupport() {
+        if (!global.window.visualViewport) {
+            return;
+        }
+        const updateViewport = () => {
+            const visualTop = this._getVisualViewportTopOffset(this.viewportOffset);
+            // Update only if there is a change in a value, so we do not trigger
+            // listeners to the viewportOffset observable.
+            if (this.viewportOffset.visualTop !== visualTop) {
+                this.viewportOffset = { ...this.viewportOffset, visualTop };
+            }
+        };
+        // Listen to the changes in the visual viewport to adjust the visualTop of viewport offset.
+        this._domEmitter = new (DomEmitterMixin())();
+        this._domEmitter.listenTo(global.window.visualViewport, 'scroll', updateViewport);
+        this._domEmitter.listenTo(global.window.visualViewport, 'resize', updateViewport);
+    }
+    /**
+     * Calculate the viewport top offset according to the visible part of it (visual viewport).
+     */
+    _getVisualViewportTopOffset(viewportOffset) {
+        const visualViewportOffsetTop = getVisualViewportOffset().top;
+        const viewportTopOffset = viewportOffset.top || 0;
+        return visualViewportOffsetTop > viewportTopOffset ? 0 : viewportTopOffset - visualViewportOffsetTop;
+    }
 }
 /**
  * Returns a number (weight) for a toolbar definition. Visible toolbars have a higher priority and so do

package/src/menubar/menubarview.js

@@ -217,8 +217,8 @@ export default class MenuBarView extends View {
              * {@link module:ui/menubar/menubarmenulistitembuttonview~MenuBarMenuListItemButtonView} (button).
              *
              * @error menu-bar-component-unsupported
-             * @param componentName A name of the unsupported component used in the configuration.
-             * @param componentView An unsupported component view.
+             * @param {string} componentName A name of the unsupported component used in the configuration.
+             * @param {module:ui/view~View} componentView An unsupported component view.
              */
             logWarning('menu-bar-component-unsupported', {
                 componentName,

package/src/menubar/utils.js

@@ -1142,8 +1142,8 @@ function handleAdditions(originalConfig, config, items) {
              * {@link module:core/editor/editorconfig~EditorConfig#menuBar menu bar configuration}.
              *
              * @error menu-bar-item-could-not-be-removed
-             * @param menuBarConfig The full configuration of the menu bar.
-             * @param itemName The name of the item that was not removed from the menu bar.
+             * @param {object} menuBarConfig The full configuration of the menu bar.
+             * @param {object} addedItemConfig The name of the item that was not removed from the menu bar.
              */
             logWarning('menu-bar-item-could-not-be-added', {
                 menuBarConfig: originalConfig,
@@ -1222,9 +1222,9 @@ function purgeUnavailableComponents(originalConfig, config, componentFactory) {
                      * menu bar item.
                      *
                      * @error menu-bar-item-unavailable
-                     * @param menuBarConfig The full configuration of the menu bar.
-                     * @param parentMenuConfig The config of the menu the unavailable component was defined in.
-                     * @param componentName The name of the unavailable component.
+                     * @param {object} menuBarConfig The full configuration of the menu bar.
+                     * @param {object} parentMenuConfig The config of the menu the unavailable component was defined in.
+                     * @param {string} componentName The name of the unavailable component.
                      */
                     logWarning('menu-bar-item-unavailable', {
                         menuBarConfig: originalConfig,
@@ -1303,8 +1303,8 @@ function warnAboutEmptyMenu(originalConfig, emptyMenuConfig, isUsingDefaultConfi
      * to account for the missing menu items.
      *
      * @error menu-bar-menu-empty
-     * @param menuBarConfig The full configuration of the menu bar.
-     * @param emptyMenuConfig The definition of the menu that has no child items.
+     * @param {object} menuBarConfig The full configuration of the menu bar.
+     * @param {object} emptyMenuConfig The definition of the menu that has no child items.
      */
     logWarning('menu-bar-menu-empty', {
         menuBarConfig: originalConfig,

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, isText, ResizeObserver } from '@ckeditor/ckeditor5-utils';
+import { getOptimalPosition, global, isRange, toUnit, isVisible, isText, ResizeObserver, Rect } from '@ckeditor/ckeditor5-utils';
 import { isElement } from 'es-toolkit/compat';
 import '../../../theme/components/panel/balloonpanel.css';
 const toPx = /* #__PURE__ */ toUnit('px');
@@ -563,18 +563,26 @@ class BalloonPanelView extends View {
                 ...(config && { config })
             }),
             // ------- Sticky
-            viewportStickyNorth: (targetRect, balloonRect, viewportRect, limiterRect) => {
-                const boundaryRect = limiterRect || viewportRect;
-                if (!targetRect.getIntersection(boundaryRect)) {
+            viewportStickyNorth: (targetRect, balloonRect, viewportRect) => {
+                // Get the intersection of the viewport and the document body.
+                const boundaryRect = new Rect(global.document.body).getIntersection(viewportRect.getVisible());
+                if (!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) {
+                // Get the visible intersection of the boundary and the document body.
+                const visibleBoundaryRect = boundaryRect.getVisible();
+                // Check if the target is in the boundary.
+                if (!targetRect.getIntersection(visibleBoundaryRect)) {
+                    return null;
+                }
+                // Checks if there is enough space to put the balloon on the top or bottom of the target.
+                // If not, makes the balloon sticky.
+                if (!(visibleBoundaryRect.top - targetRect.top - stickyVerticalOffset < balloonRect.height &&
+                    visibleBoundaryRect.bottom - targetRect.bottom < balloonRect.height)) {
                     return null;
                 }
                 return {
-                    top: boundaryRect.top + stickyVerticalOffset,
+                    top: visibleBoundaryRect.top + stickyVerticalOffset,
                     left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
                     name: 'arrowless',
                     config: {

package/src/panel/balloon/contextualballoon.js

@@ -265,7 +265,10 @@ export default class ContextualBalloon extends Plugin {
             }
             // Don't modify the original options object.
             position = Object.assign({}, position, {
-                viewportOffsetConfig: this.editor.ui.viewportOffset
+                viewportOffsetConfig: {
+                    ...this.editor.ui.viewportOffset,
+                    top: this.editor.ui.viewportOffset.visualTop
+                }
             });
         }
         return position;