@ckeditor/ckeditor5-ui 43.3.1 → 44.0.0-alpha.1

package/dist/menubar/menubarmenupanelview.d.ts

@@ -54,4 +54,4 @@ export default class MenuBarMenuPanelView extends View implements FocusableView
  *
  * They are reflected as CSS class suffixes on the panel view element.
  */
-export type MenuBarMenuPanelPosition = 'se' | 'sw' | 'ne' | 'nw' | 'w' | 'e';
+export type MenuBarMenuPanelPosition = 'se' | 'sw' | 'ne' | 'nw' | 'w' | 'ws' | 'e' | 'es';

package/dist/menubar/menubarmenuview.d.ts

@@ -104,6 +104,11 @@ export default class MenuBarMenuView extends View implements FocusableView {
      * the {@link module:ui/menubar/menubarview~MenuBarView menu bar} and the UI language direction.
      */
     get _panelPositions(): Array<PositioningFunction>;
+    /**
+     * The default position of the panel when the menu is opened.
+     * It is used when the optimal position cannot be calculated.
+     */
+    private get _defaultMenuPositionName();
     /**
      * A function used to calculate the optimal position for the dropdown panel.
      *

package/dist/menubar/utils.d.ts

@@ -272,6 +272,7 @@ export declare const MenuBarMenuViewPanelPositioningFunctions: Record<string, Po
  * 				groupId: 'insertInline',
  * 				items: [
  * 					'menuBar:link',
+ * 					'menuBar:bookmark',
  * 					'menuBar:comment',
  * 					'menuBar:insertMergeField'
  * 				]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "43.3.1",
+  "version": "44.0.0-alpha.1",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,9 +12,9 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "43.3.1",
-    "@ckeditor/ckeditor5-engine": "43.3.1",
-    "@ckeditor/ckeditor5-utils": "43.3.1",
+    "@ckeditor/ckeditor5-core": "44.0.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "44.0.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "44.0.0-alpha.1",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",
     "lodash-es": "4.17.21",

package/src/badge/badge.d.ts

@@ -0,0 +1,129 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/badge/badge
+ */
+import type { Editor } from '@ckeditor/ckeditor5-core';
+import type View from '../view.js';
+declare const Badge_base: {
+    new (): import("@ckeditor/ckeditor5-utils").DomEmitter;
+    prototype: import("@ckeditor/ckeditor5-utils").DomEmitter;
+};
+/**
+ * A helper that enables the badge feature in the editor and renders a custom view next to the bottom of the editable element
+ * (editor root, source editing area, etc.) when the editor is focused.
+ *
+ * @private
+ */
+export default abstract class Badge extends /* #__PURE__ */ Badge_base {
+    /**
+     * Editor instance the helper was created for.
+     */
+    protected readonly editor: Editor;
+    /**
+     * A reference to the balloon panel hosting and positioning the badge content.
+     */
+    private _balloonView;
+    /**
+     * A throttled version of the {@link #_showBalloon} method meant for frequent use to avoid performance loss.
+     */
+    private _showBalloonThrottled;
+    /**
+     * A reference to the last editable element (root, source editing area, etc.) focused by the user.
+     * Since the focus can move to other focusable elements in the UI, this reference allows positioning the balloon over the
+     * right element whether the user is typing or using the UI.
+     */
+    private _lastFocusedEditableElement;
+    /**
+     * An additional CSS class added to the `BalloonView`.
+     */
+    private readonly _balloonClass;
+    /**
+     * Creates a badge for a given editor. The feature is initialized on Editor#ready
+     * event.
+     */
+    protected constructor(editor: Editor, options?: {
+        balloonClass?: string;
+    });
+    /**
+     * Destroys the badge along with its view.
+     */
+    destroy(): void;
+    /**
+     * Enables badge label once the editor (ui) is ready.
+     */
+    protected _handleEditorReady(): void;
+    /**
+     * Returns normalized configuration for the badge.
+     */
+    protected _getNormalizedConfig(): BadgeConfig;
+    /**
+     * Creates the badge content.
+     */
+    protected abstract _createBadgeContent(): View<HTMLElement>;
+    /**
+     * Enables the badge feature.
+     */
+    protected abstract _isEnabled(): boolean;
+    /**
+     * Attempts to display the balloon with the badge view.
+     */
+    private _showBalloon;
+    /**
+     * Hides the badge balloon if already visible.
+     */
+    private _hideBalloon;
+    /**
+     * Creates an instance of the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon panel}
+     * with the badge view inside ready for positioning.
+     */
+    private _createBalloonView;
+    /**
+     * Returns the options for attaching the balloon to the focused editable element.
+     */
+    private _getBalloonAttachOptions;
+    /**
+     * Updates the {@link #_lastFocusedEditableElement} based on the state of the global focus tracker.
+     */
+    private _updateLastFocusedEditableElement;
+}
+/**
+ * The badge configuration options.
+ **/
+export interface BadgeConfig {
+    /**
+     * The position of the badge.
+     *
+     * * When `'inside'`, the badge will be displayed within the boundaries of the editing area.
+     * * When `'border'`, the basge will be displayed over the bottom border of the editing area.
+     *
+     * @default 'border'
+     */
+    position: 'inside' | 'border';
+    /**
+     * Allows choosing the side of the editing area where the badge will be displayed.
+     *
+     * **Note:** If {@link module:core/editor/editorconfig~EditorConfig#language `config.language`} is set to an RTL (right-to-left)
+     * language, the side switches to `'left'` by default.
+     *
+     * @default 'right'
+     */
+    side: 'left' | 'right';
+    /**
+     * The vertical distance the badge can be moved away from its default position.
+     *
+     * **Note:** If `position` is `'border'`, the offset is measured from the (vertical) center of the badge.
+     *
+     * @default 5
+     */
+    verticalOffset: number;
+    /**
+     * The horizontal distance between the side of the editing root and the nearest side of the badge.
+     *
+     * @default 5
+     */
+    horizontalOffset: number;
+}
+export {};

package/src/badge/badge.js

@@ -0,0 +1,218 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Rect, DomEmitterMixin } from '@ckeditor/ckeditor5-utils';
+import BalloonPanelView from '../panel/balloon/balloonpanelview.js';
+import { throttle } from 'lodash-es';
+// ⚠ Note, whenever changing the threshold, make sure to update the docs/support/managing-ckeditor-logo.md docs
+// as this information is also mentioned there ⚠.
+const NARROW_ROOT_HEIGHT_THRESHOLD = 50;
+const NARROW_ROOT_WIDTH_THRESHOLD = 350;
+/**
+ * A helper that enables the badge feature in the editor and renders a custom view next to the bottom of the editable element
+ * (editor root, source editing area, etc.) when the editor is focused.
+ *
+ * @private
+ */
+export default class Badge extends /* #__PURE__ */ DomEmitterMixin() {
+    /**
+     * Creates a badge for a given editor. The feature is initialized on Editor#ready
+     * event.
+     */
+    constructor(editor, options = {}) {
+        super();
+        /**
+         * A reference to the balloon panel hosting and positioning the badge content.
+         */
+        this._balloonView = null;
+        /**
+         * A throttled version of the {@link #_showBalloon} method meant for frequent use to avoid performance loss.
+         */
+        this._showBalloonThrottled = throttle(() => this._showBalloon(), 50, { leading: true });
+        /**
+         * A reference to the last editable element (root, source editing area, etc.) focused by the user.
+         * Since the focus can move to other focusable elements in the UI, this reference allows positioning the balloon over the
+         * right element whether the user is typing or using the UI.
+         */
+        this._lastFocusedEditableElement = null;
+        this.editor = editor;
+        this._balloonClass = options.balloonClass;
+        editor.on('ready', () => this._handleEditorReady());
+    }
+    /**
+     * Destroys the badge along with its view.
+     */
+    destroy() {
+        const balloon = this._balloonView;
+        if (balloon) {
+            // Balloon gets destroyed by the body collection.
+            // The badge view gets destroyed by the balloon.
+            balloon.unpin();
+            this._balloonView = null;
+        }
+        this._showBalloonThrottled.cancel();
+        this.stopListening();
+    }
+    /**
+     * Enables badge label once the editor (ui) is ready.
+     */
+    _handleEditorReady() {
+        const editor = this.editor;
+        if (!this._isEnabled()) {
+            return;
+        }
+        // No view means no body collection to append the badge balloon to.
+        if (!editor.ui.view) {
+            return;
+        }
+        editor.ui.focusTracker.on('change:isFocused', (evt, data, isFocused) => {
+            this._updateLastFocusedEditableElement();
+            if (isFocused) {
+                this._showBalloon();
+            }
+            else {
+                this._hideBalloon();
+            }
+        });
+        editor.ui.focusTracker.on('change:focusedElement', (evt, data, focusedElement) => {
+            this._updateLastFocusedEditableElement();
+            if (focusedElement) {
+                this._showBalloon();
+            }
+        });
+        editor.ui.on('update', () => {
+            this._showBalloonThrottled();
+        });
+    }
+    /**
+     * Returns normalized configuration for the badge.
+     */
+    _getNormalizedConfig() {
+        return {
+            side: this.editor.locale.contentLanguageDirection === 'ltr' ? 'right' : 'left',
+            position: 'border',
+            verticalOffset: 0,
+            horizontalOffset: 5
+        };
+    }
+    /**
+     * Attempts to display the balloon with the badge view.
+     */
+    _showBalloon() {
+        const attachOptions = this._getBalloonAttachOptions();
+        if (!attachOptions) {
+            return;
+        }
+        if (!this._balloonView) {
+            this._balloonView = this._createBalloonView();
+        }
+        this._balloonView.pin(attachOptions);
+    }
+    /**
+     * Hides the badge balloon if already visible.
+     */
+    _hideBalloon() {
+        if (this._balloonView) {
+            this._balloonView.unpin();
+        }
+    }
+    /**
+     * Creates an instance of the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon panel}
+     * with the badge view inside ready for positioning.
+     */
+    _createBalloonView() {
+        const editor = this.editor;
+        const balloon = new BalloonPanelView();
+        const view = this._createBadgeContent();
+        balloon.content.add(view);
+        if (this._balloonClass) {
+            balloon.class = this._balloonClass;
+        }
+        editor.ui.view.body.add(balloon);
+        return balloon;
+    }
+    /**
+     * Returns the options for attaching the balloon to the focused editable element.
+     */
+    _getBalloonAttachOptions() {
+        if (!this._lastFocusedEditableElement) {
+            return null;
+        }
+        const badgeConfig = this._getNormalizedConfig();
+        const positioningFunction = badgeConfig.side === 'right' ?
+            getLowerRightCornerPosition(this._lastFocusedEditableElement, badgeConfig) :
+            getLowerLeftCornerPosition(this._lastFocusedEditableElement, badgeConfig);
+        return {
+            target: this._lastFocusedEditableElement,
+            positions: [positioningFunction]
+        };
+    }
+    /**
+     * Updates the {@link #_lastFocusedEditableElement} based on the state of the global focus tracker.
+     */
+    _updateLastFocusedEditableElement() {
+        const editor = this.editor;
+        const isFocused = editor.ui.focusTracker.isFocused;
+        const focusedElement = editor.ui.focusTracker.focusedElement;
+        if (!isFocused || !focusedElement) {
+            this._lastFocusedEditableElement = null;
+            return;
+        }
+        const editableEditorElements = Array.from(editor.ui.getEditableElementsNames()).map(name => {
+            return editor.ui.getEditableElement(name);
+        });
+        if (editableEditorElements.includes(focusedElement)) {
+            this._lastFocusedEditableElement = focusedElement;
+        }
+        else {
+            // If it's none of the editable element, then the focus is somewhere in the UI. Let's display the badge
+            // over the first element then.
+            this._lastFocusedEditableElement = editableEditorElements[0];
+        }
+    }
+}
+function getLowerRightCornerPosition(focusedEditableElement, config) {
+    return getLowerCornerPosition(focusedEditableElement, config, (rootRect, balloonRect) => {
+        return rootRect.left + rootRect.width - balloonRect.width - config.horizontalOffset;
+    });
+}
+function getLowerLeftCornerPosition(focusedEditableElement, config) {
+    return getLowerCornerPosition(focusedEditableElement, config, rootRect => rootRect.left + config.horizontalOffset);
+}
+function getLowerCornerPosition(focusedEditableElement, config, getBalloonLeft) {
+    return (visibleEditableElementRect, balloonRect) => {
+        const editableElementRect = new Rect(focusedEditableElement);
+        if (editableElementRect.width < NARROW_ROOT_WIDTH_THRESHOLD || editableElementRect.height < NARROW_ROOT_HEIGHT_THRESHOLD) {
+            return null;
+        }
+        let balloonTop;
+        if (config.position === 'inside') {
+            balloonTop = editableElementRect.bottom - balloonRect.height;
+        }
+        else {
+            balloonTop = editableElementRect.bottom - balloonRect.height / 2;
+        }
+        balloonTop -= config.verticalOffset;
+        const balloonLeft = getBalloonLeft(editableElementRect, balloonRect);
+        // 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));
+        const newBalloonPositionVisibleRect = newBalloonPositionRect.getVisible();
+        if (!newBalloonPositionVisibleRect || newBalloonPositionVisibleRect.getArea() < balloonRect.getArea()) {
+            return null;
+        }
+        return {
+            top: balloonTop,
+            left: balloonLeft,
+            name: `position_${config.position}-side_${config.side}`,
+            config: {
+                withArrow: false
+            }
+        };
+    };
+}

package/src/dialog/dialogview.js

@@ -126,8 +126,12 @@ class DialogView extends /* #__PURE__ */ DraggableViewMixin(View) {
     render() {
         super.render();
         this.keystrokes.set('Esc', (data, cancel) => {
-            this.fire('close', { source: 'escKeyPress' });
-            cancel();
+            // Do not react to the Esc key if the event has already been handled and defaultPrevented
+            // by some logic of the dialog guest (child) view (https://github.com/ckeditor/ckeditor5/issues/17343).
+            if (!data.defaultPrevented) {
+                this.fire('close', { source: 'escKeyPress' });
+                cancel();
+            }
         });
         // Support for dragging the modal.
         this.on('drag', (evt, { deltaX, deltaY }) => {

package/src/dropdown/dropdownview.d.ts

@@ -189,6 +189,12 @@ export default class DropdownView extends View<HTMLDivElement> {
      * utility considering the direction of the language the UI of the editor is displayed in.
      */
     private get _panelPositions();
+    /**
+     * Returns the default position of the dropdown panel based on the direction of the UI language.
+     * It is used when the {@link #panelPosition} is set to `'auto'` and the panel has not found a
+     * suitable position to fit into the viewport.
+     */
+    private get _defaultPanelPositionName();
     /**
      * A set of positioning functions used by the dropdown view to determine
      * the optimal position (i.e. fitting into the browser viewport) of its

package/src/dropdown/dropdownview.js

@@ -134,7 +134,7 @@ class DropdownView extends View {
                     fitInViewport: true,
                     positions: this._panelPositions
                 });
-                this.panelView.position = (optimalPanelPosition ? optimalPanelPosition.name : this._panelPositions[0].name);
+                this.panelView.position = (optimalPanelPosition ? optimalPanelPosition.name : this._defaultPanelPositionName);
             }
             else {
                 this.panelView.position = this.panelPosition;
@@ -192,6 +192,14 @@ class DropdownView extends View {
             ];
         }
     }
+    /**
+     * Returns the default position of the dropdown panel based on the direction of the UI language.
+     * It is used when the {@link #panelPosition} is set to `'auto'` and the panel has not found a
+     * suitable position to fit into the viewport.
+     */
+    get _defaultPanelPositionName() {
+        return this.locale.uiLanguageDirection === 'rtl' ? 'sw' : 'se';
+    }
 }
 /**
  * A set of positioning functions used by the dropdown view to determine

package/src/editorui/bodycollection.d.ts

@@ -6,20 +6,51 @@ import ViewCollection from '../viewcollection.js';
 import type View from '../view.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 /**
- * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
- * from the DOM structure of the editor, like panels, icons, etc.
+ * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached from the DOM structure of
+ * the editor, like floating panels, floating toolbars, dialogs, etc.
  *
- * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
+ * The body collection is available under the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
  * Any plugin can add a {@link module:ui/view~View view} to this collection.
- * These views will render in a container placed directly in the `<body>` element.
- * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
  *
- * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
+ * All views added to a body collection render in a dedicated DOM container (`<div class="ck ck-body ...">...</div>`). All body collection
+ * containers render in a common shared (`<div class="ck-body-wrapper">...</div>`) in the DOM to limit the pollution of
+ * the `<body>` element. The resulting DOM structure is as follows:
  *
- * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
- * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
- * elements created directly in the body and remove it when the last body collection will be
- * {@link ~BodyCollection#detachFromDom detached}.
+ * ```html
+ * <body>
+ * 	<!-- Content of the webpage... -->
+ *
+ * 	<!-- The shared wrapper for all body collection containers. -->
+ * 	<div class="ck-body-wrapper">
+ * 		<!-- The container of the first body collection instance. -->
+ * 		<div class="ck ck-body ...">
+ * 			<!-- View elements belonging to the first body collection -->
+ * 		</div>
+ *
+ * 		<!-- The container of the second body collection instance. -->
+ * 		<div class="ck ck-body ...">...</div>
+ *
+ * 		<!-- More body collection containers for the rest of instances... -->
+ * 	</div>
+ * </body>
+ * ```
+ *
+ * By default, the {@link module:ui/editorui/editoruiview~EditorUIView `editor.ui.view`} manages the life cycle of the
+ * {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} collection, attaching and detaching it
+ * when the editor gets created or {@link module:core/editor/editor~Editor#destroy destroyed}.
+ *
+ * # Custom body collection instances
+ *
+ * Even though most editor instances come with a built-in body collection
+ * ({@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`}), you can create your own instance of this
+ * class if you need to control their life cycle.
+ *
+ * The life cycle of a custom body collection must be handled manually by the developer using the dedicated API:
+ * * A body collection will render itself automatically in the DOM as soon as you call {@link ~BodyCollection#attachToDom}.
+ * * Calling {@link ~BodyCollection#detachFromDom} will remove the collection from the DOM.
+ *
+ * **Note**: The shared collection wrapper (`<div class="ck-body-wrapper">...</div>`) gets automatically removed from DOM when the
+ * last body collection is {@link ~BodyCollection#detachFromDom detached} and does not require any special handling.
  */
 export default class BodyCollection extends ViewCollection {
     /**
@@ -28,9 +59,13 @@ export default class BodyCollection extends ViewCollection {
      */
     readonly locale: Locale;
     /**
-     * The element holding elements of the body region.
+     * The element holding elements of the body collection.
      */
     private _bodyCollectionContainer?;
+    /**
+     * The wrapper element that holds all of the {@link #_bodyCollectionContainer} elements.
+     */
+    private static _bodyWrapper?;
     /**
      * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
      *
@@ -39,7 +74,7 @@ export default class BodyCollection extends ViewCollection {
      */
     constructor(locale: Locale, initialItems?: Iterable<View>);
     /**
-     * The element holding elements of the body region.
+     * The element holding elements of the body collection.
      */
     get bodyCollectionContainer(): HTMLElement | undefined;
     /**

package/src/editorui/bodycollection.js

@@ -10,20 +10,51 @@ import Template from '../template.js';
 import ViewCollection from '../viewcollection.js';
 import { createElement } from '@ckeditor/ckeditor5-utils';
 /**
- * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
- * from the DOM structure of the editor, like panels, icons, etc.
+ * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached from the DOM structure of
+ * the editor, like floating panels, floating toolbars, dialogs, etc.
  *
- * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
+ * The body collection is available under the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
  * Any plugin can add a {@link module:ui/view~View view} to this collection.
- * These views will render in a container placed directly in the `<body>` element.
- * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
  *
- * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
+ * All views added to a body collection render in a dedicated DOM container (`<div class="ck ck-body ...">...</div>`). All body collection
+ * containers render in a common shared (`<div class="ck-body-wrapper">...</div>`) in the DOM to limit the pollution of
+ * the `<body>` element. The resulting DOM structure is as follows:
  *
- * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
- * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
- * elements created directly in the body and remove it when the last body collection will be
- * {@link ~BodyCollection#detachFromDom detached}.
+ * ```html
+ * <body>
+ * 	<!-- Content of the webpage... -->
+ *
+ * 	<!-- The shared wrapper for all body collection containers. -->
+ * 	<div class="ck-body-wrapper">
+ * 		<!-- The container of the first body collection instance. -->
+ * 		<div class="ck ck-body ...">
+ * 			<!-- View elements belonging to the first body collection -->
+ * 		</div>
+ *
+ * 		<!-- The container of the second body collection instance. -->
+ * 		<div class="ck ck-body ...">...</div>
+ *
+ * 		<!-- More body collection containers for the rest of instances... -->
+ * 	</div>
+ * </body>
+ * ```
+ *
+ * By default, the {@link module:ui/editorui/editoruiview~EditorUIView `editor.ui.view`} manages the life cycle of the
+ * {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} collection, attaching and detaching it
+ * when the editor gets created or {@link module:core/editor/editor~Editor#destroy destroyed}.
+ *
+ * # Custom body collection instances
+ *
+ * Even though most editor instances come with a built-in body collection
+ * ({@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`}), you can create your own instance of this
+ * class if you need to control their life cycle.
+ *
+ * The life cycle of a custom body collection must be handled manually by the developer using the dedicated API:
+ * * A body collection will render itself automatically in the DOM as soon as you call {@link ~BodyCollection#attachToDom}.
+ * * Calling {@link ~BodyCollection#detachFromDom} will remove the collection from the DOM.
+ *
+ * **Note**: The shared collection wrapper (`<div class="ck-body-wrapper">...</div>`) gets automatically removed from DOM when the
+ * last body collection is {@link ~BodyCollection#detachFromDom detached} and does not require any special handling.
  */
 export default class BodyCollection extends ViewCollection {
     /**
@@ -37,7 +68,7 @@ export default class BodyCollection extends ViewCollection {
         this.locale = locale;
     }
     /**
-     * The element holding elements of the body region.
+     * The element holding elements of the body collection.
      */
     get bodyCollectionContainer() {
         return this._bodyCollectionContainer;
@@ -61,12 +92,12 @@ export default class BodyCollection extends ViewCollection {
             },
             children: this
         }).render();
-        let wrapper = document.querySelector('.ck-body-wrapper');
-        if (!wrapper) {
-            wrapper = createElement(document, 'div', { class: 'ck-body-wrapper' });
-            document.body.appendChild(wrapper);
+        // Create a shared wrapper if there were none or the previous one got disconnected from DOM.
+        if (!BodyCollection._bodyWrapper || !BodyCollection._bodyWrapper.isConnected) {
+            BodyCollection._bodyWrapper = createElement(document, 'div', { class: 'ck-body-wrapper' });
+            document.body.appendChild(BodyCollection._bodyWrapper);
         }
-        wrapper.appendChild(this._bodyCollectionContainer);
+        BodyCollection._bodyWrapper.appendChild(this._bodyCollectionContainer);
     }
     /**
      * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
@@ -77,9 +108,9 @@ export default class BodyCollection extends ViewCollection {
         if (this._bodyCollectionContainer) {
             this._bodyCollectionContainer.remove();
         }
-        const wrapper = document.querySelector('.ck-body-wrapper');
-        if (wrapper && wrapper.childElementCount == 0) {
-            wrapper.remove();
+        if (BodyCollection._bodyWrapper && !BodyCollection._bodyWrapper.childElementCount) {
+            BodyCollection._bodyWrapper.remove();
+            delete BodyCollection._bodyWrapper;
         }
     }
 }

package/src/editorui/editorui.d.ts

@@ -8,6 +8,7 @@
 import ComponentFactory from '../componentfactory.js';
 import TooltipManager from '../tooltipmanager.js';
 import PoweredBy from './poweredby.js';
+import EvaluationBadge from './evaluationbadge.js';
 import AriaLiveAnnouncer from '../arialiveannouncer.js';
 import type EditorUIView from './editoruiview.js';
 import type ToolbarView from '../toolbar/toolbarview.js';
@@ -44,6 +45,10 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * A helper that enables the "powered by" feature in the editor and renders a link to the project's webpage.
      */
     readonly poweredBy: PoweredBy;
+    /**
+     * A helper that enables the "evaluation badge" feature in the editor.
+     */
+    readonly evaluationBadge: EvaluationBadge;
     /**
      * A helper that manages the content of an `aria-live` regions used by editor features to announce status changes
      * to screen readers.