@ckeditor/ckeditor5-ui 36.0.0 → 37.0.0-alpha.0

package/src/dropdown/utils.js

@@ -30,57 +30,63 @@ import '../../theme/components/dropdown/listdropdown.css';
  * By default, the default {@link module:ui/dropdown/button/dropdownbuttonview~DropdownButtonView} class is used as
  * definition of the button:
  *
- *		const dropdown = createDropdown( model );
+ * ```ts
+ * const dropdown = createDropdown( model );
  *
- *		// Configure dropdown's button properties:
- *		dropdown.buttonView.set( {
- *			label: 'A dropdown',
- *			withText: true
- *		} );
+ * // Configure dropdown's button properties:
+ * dropdown.buttonView.set( {
+ * 	label: 'A dropdown',
+ * 	withText: true
+ * } );
  *
- *		dropdown.render();
+ * dropdown.render();
  *
- *		// Will render a dropdown labeled "A dropdown" with an empty panel.
- *		document.body.appendChild( dropdown.element );
+ * // Will render a dropdown labeled "A dropdown" with an empty panel.
+ * document.body.appendChild( dropdown.element );
+ * ```
  *
  * You can also provide other button views (they need to implement the
  * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface). For instance, you can use
  * {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} to create a dropdown with a split button.
  *
- *		const dropdown = createDropdown( locale, SplitButtonView );
+ * ```ts
+ * const dropdown = createDropdown( locale, SplitButtonView );
  *
- *		// Configure dropdown's button properties:
- *		dropdown.buttonView.set( {
- *			label: 'A dropdown',
- *			withText: true
- *		} );
+ * // Configure dropdown's button properties:
+ * dropdown.buttonView.set( {
+ * 	label: 'A dropdown',
+ * 	withText: true
+ * } );
  *
- *		dropdown.buttonView.on( 'execute', () => {
- *			// Add the behavior of the "action part" of the split button.
- *			// Split button consists of the "action part" and "arrow part".
- *			// The arrow opens the dropdown while the action part can have some other behavior.
- * 		} );
+ * dropdown.buttonView.on( 'execute', () => {
+ * 	// Add the behavior of the "action part" of the split button.
+ * 	// Split button consists of the "action part" and "arrow part".
+ * 	// The arrow opens the dropdown while the action part can have some other behavior.
+ * } );
  *
- *		dropdown.render();
+ * dropdown.render();
  *
- *		// Will render a dropdown labeled "A dropdown" with an empty panel.
- *		document.body.appendChild( dropdown.element );
+ * // Will render a dropdown labeled "A dropdown" with an empty panel.
+ * document.body.appendChild( dropdown.element );
+ * ```
  *
  * # Adding content to the dropdown's panel
  *
  * The content of the panel can be inserted directly into the `dropdown.panelView.element`:
  *
- *		dropdown.panelView.element.textContent = 'Content of the panel';
+ * ```ts
+ * dropdown.panelView.element.textContent = 'Content of the panel';
+ * ```
  *
  * However, most of the time you will want to add there either a {@link module:ui/list/listview~ListView list of options}
  * or a list of buttons (i.e. a {@link module:ui/toolbar/toolbarview~ToolbarView toolbar}).
  * To simplify the task, you can use, respectively, {@link module:ui/dropdown/utils~addListToDropdown} or
  * {@link module:ui/dropdown/utils~addToolbarToDropdown} utils.
  *
- * @param {module:utils/locale~Locale} locale The locale instance.
- * @param {Function} ButtonClass The dropdown button view class. Needs to implement the
+ * @param locale The locale instance.
+ * @param ButtonClass The dropdown button view class. Needs to implement the
  * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface.
- * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
+ * @returns The dropdown view instance.
  */
 export function createDropdown(locale, ButtonClass = DropdownButtonView) {
     const buttonView = new ButtonClass(locale);
@@ -99,23 +105,25 @@ export function createDropdown(locale, ButtonClass = DropdownButtonView) {
 /**
  * Adds an instance of {@link module:ui/toolbar/toolbarview~ToolbarView} to a dropdown.
  *
- *		const buttonsCreator = () => {
- *			const buttons = [];
+ * ```ts
+ * const buttonsCreator = () => {
+ * 	const buttons = [];
  *
- *			// Either create a new ButtonView instance or create existing.
- *			buttons.push( new ButtonView() );
- *			buttons.push( editor.ui.componentFactory.create( 'someButton' ) );
- *		};
+ * 	// Either create a new ButtonView instance or create existing.
+ * 	buttons.push( new ButtonView() );
+ * 	buttons.push( editor.ui.componentFactory.create( 'someButton' ) );
+ * };
  *
- *		const dropdown = createDropdown( locale );
+ * const dropdown = createDropdown( locale );
  *
- *		addToolbarToDropdown( dropdown, buttonsCreator, { isVertical: true } );
+ * addToolbarToDropdown( dropdown, buttonsCreator, { isVertical: true } );
  *
- *		// Will render a vertical button dropdown labeled "A button dropdown"
- *		// with a button group in the panel containing two buttons.
- *		// Buttons inside the dropdown will be created on first dropdown panel open.
- *		dropdown.render()
- *		document.body.appendChild( dropdown.element );
+ * // Will render a vertical button dropdown labeled "A button dropdown"
+ * // with a button group in the panel containing two buttons.
+ * // Buttons inside the dropdown will be created on first dropdown panel open.
+ * dropdown.render()
+ * document.body.appendChild( dropdown.element );
+ * ```
  *
  * **Note:** To improve the accessibility, you can tell the dropdown to focus the first active button of the toolbar when the dropdown
  * {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open}. See the documentation of `options` to learn more.
@@ -124,21 +132,19 @@ export function createDropdown(locale, ButtonClass = DropdownButtonView) {
  *
  * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
  *
- * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdown instance to which `ToolbarView` will be added.
- * @param {Iterable.<module:ui/button/buttonview~ButtonView>|Function} buttonsOrCallback
- * @param {Object} [options]
- * @param {Boolean} [options.enableActiveItemFocusOnDropdownOpen=false] When set `true`, the focus will automatically move to the first
+ * @param dropdownView A dropdown instance to which `ToolbarView` will be added.
+ * @param options.enableActiveItemFocusOnDropdownOpen When set `true`, the focus will automatically move to the first
  * active {@link module:ui/toolbar/toolbarview~ToolbarView#items item} of the toolbar upon
  * {@link module:ui/dropdown/dropdownview~DropdownView#isOpen opening} the dropdown. Active items are those with the `isOn` property set
  * `true` (for instance {@link module:ui/button/buttonview~ButtonView buttons}). If no active items is found, the toolbar will be focused
  * as a whole resulting in the focus moving to its first focusable item (default behavior of
  * {@link module:ui/dropdown/dropdownview~DropdownView}).
- * @param {String} [options.ariaLabel] Label used by assistive technologies to describe toolbar element.
- * @param {String} [options.maxWidth] The maximum width of the toolbar element.
+ * @param options.ariaLabel Label used by assistive technologies to describe toolbar element.
+ * @param options.maxWidth The maximum width of the toolbar element.
  * Details: {@link module:ui/toolbar/toolbarview~ToolbarView#maxWidth}.
- * @param {String} [options.class] An additional CSS class added to the toolbar element.
- * @param {Boolean} [options.isCompact] When set true, makes the toolbar look compact with toolbar element.
- * @param {Boolean} [options.isVertical] Controls the orientation of toolbar items.
+ * @param options.class An additional CSS class added to the toolbar element.
+ * @param options.isCompact When set true, makes the toolbar look compact with toolbar element.
+ * @param options.isVertical Controls the orientation of toolbar items.
  */
 export function addToolbarToDropdown(dropdownView, buttonsOrCallback, options = {}) {
     dropdownView.extendTemplate({
@@ -190,34 +196,36 @@ function addToolbarToOpenDropdown(dropdownView, buttonsOrCallback, options) {
 /**
  * Adds an instance of {@link module:ui/list/listview~ListView} to a dropdown.
  *
- *		const items = new Collection();
- *
- *		items.add( {
- *			type: 'button',
- *			model: new Model( {
- *				withText: true,
- *				label: 'First item',
- *				labelStyle: 'color: red'
- *			} )
- *		} );
- *
- *		items.add( {
- *			 type: 'button',
- *			 model: new Model( {
- *				withText: true,
- *				label: 'Second item',
- *				labelStyle: 'color: green',
- *				class: 'foo'
- *			} )
- *		} );
- *
- *		const dropdown = createDropdown( locale );
- *
- *		addListToDropdown( dropdown, items );
- *
- *		// Will render a dropdown with a list in the panel containing two items.
- *		dropdown.render()
- *		document.body.appendChild( dropdown.element );
+ * ```ts
+ * const items = new Collection();
+ *
+ * items.add( {
+ * 	type: 'button',
+ * 	model: new Model( {
+ * 		withText: true,
+ * 		label: 'First item',
+ * 		labelStyle: 'color: red'
+ * 	} )
+ * } );
+ *
+ * items.add( {
+ * 	 type: 'button',
+ * 	 model: new Model( {
+ * 		withText: true,
+ * 		label: 'Second item',
+ * 		labelStyle: 'color: green',
+ * 		class: 'foo'
+ * 	} )
+ * } );
+ *
+ * const dropdown = createDropdown( locale );
+ *
+ * addListToDropdown( dropdown, items );
+ *
+ * // Will render a dropdown with a list in the panel containing two items.
+ * dropdown.render()
+ * document.body.appendChild( dropdown.element );
+ * ```
  *
  * The `items` collection passed to this methods controls the presence and attributes of respective
  * {@link module:ui/list/listitemview~ListItemView list items}.
@@ -230,11 +238,9 @@ function addToolbarToOpenDropdown(dropdownView, buttonsOrCallback, options) {
  *
  * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:list/list~List}.
  *
- * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdown instance to which `ListVIew` will be added.
- * @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>|Function} itemsOrCallback A collection of the list item
- * definitions or a callback returning a list item definitions to populate the list.
- * @param {Object} [options]
- * @param {String} [options.ariaLabel] Label used by assistive technologies to describe list element.
+ * @param dropdownView A dropdown instance to which `ListVIew` will be added.
+ * @param itemsOrCallback A collection of the list item definitions or a callback returning a list item definitions to populate the list.
+ * @param options.ariaLabel Label used by assistive technologies to describe list element.
  */
 export function addListToDropdown(dropdownView, itemsOrCallback, options = {}) {
     if (dropdownView.isOpen) {
@@ -287,8 +293,8 @@ function addListToOpenDropdown(dropdownView, itemsOrCallback, options) {
  * A helper to be used on an existing {@link module:ui/dropdown/dropdownview~DropdownView} that focuses
  * a specific child in DOM when the dropdown {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open}.
  *
- * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdown instance to which the focus behavior will be added.
- * @param {Function} childSelectorCallback A callback executed when the dropdown gets open. It should return a {@link module:ui/view~View}
+ * @param dropdownView A dropdown instance to which the focus behavior will be added.
+ * @param childSelectorCallback A callback executed when the dropdown gets open. It should return a {@link module:ui/view~View}
  * instance (child of {@link module:ui/dropdown/dropdownview~DropdownView#panelView}) that will get focused or a falsy value.
  * If falsy value is returned, a default behavior of the dropdown will engage focusing the first focusable child in
  * the {@link module:ui/dropdown/dropdownview~DropdownView#panelView}.
@@ -323,9 +329,9 @@ export function focusChildOnDropdownOpen(dropdownView, childSelectorCallback) {
         // * Execute after focusDropdownPanelOnOpen(). See focusDropdownPanelOnOpen() to learn more.
     }, { priority: priorities.low - 10 });
 }
-// Add a set of default behaviors to dropdown view.
-//
-// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+/**
+ * Add a set of default behaviors to dropdown view.
+ */
 function addDefaultBehavior(dropdownView) {
     closeDropdownOnClickOutside(dropdownView);
     closeDropdownOnExecute(dropdownView);
@@ -334,9 +340,9 @@ function addDefaultBehavior(dropdownView) {
     focusDropdownButtonOnClose(dropdownView);
     focusDropdownPanelOnOpen(dropdownView);
 }
-// Adds a behavior to a dropdownView that closes opened dropdown when user clicks outside the dropdown.
-//
-// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+/**
+ * Adds a behavior to a dropdownView that closes opened dropdown when user clicks outside the dropdown.
+ */
 function closeDropdownOnClickOutside(dropdownView) {
     dropdownView.on('render', () => {
         clickOutsideHandler({
@@ -349,9 +355,9 @@ function closeDropdownOnClickOutside(dropdownView) {
         });
     });
 }
-// Adds a behavior to a dropdownView that closes the dropdown view on "execute" event.
-//
-// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+/**
+ * Adds a behavior to a dropdownView that closes the dropdown view on "execute" event.
+ */
 function closeDropdownOnExecute(dropdownView) {
     // Close the dropdown when one of the list items has been executed.
     dropdownView.on('execute', evt => {
@@ -362,9 +368,9 @@ function closeDropdownOnExecute(dropdownView) {
         dropdownView.isOpen = false;
     });
 }
-// Adds a behavior to a dropdown view that closes opened dropdown when it loses focus.
-//
-// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+/**
+ * Adds a behavior to a dropdown view that closes opened dropdown when it loses focus.
+ */
 function closeDropdownOnBlur(dropdownView) {
     dropdownView.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
         if (dropdownView.isOpen && !isFocused) {
@@ -372,9 +378,9 @@ function closeDropdownOnBlur(dropdownView) {
         }
     });
 }
-// Adds a behavior to a dropdownView that focuses the dropdown's panel view contents on keystrokes.
-//
-// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+/**
+ * Adds a behavior to a dropdownView that focuses the dropdown's panel view contents on keystrokes.
+ */
 function focusDropdownContentsOnArrows(dropdownView) {
     // If the dropdown panel is already open, the arrow down key should focus the first child of the #panelView.
     dropdownView.keystrokes.set('arrowdown', (data, cancel) => {
@@ -391,10 +397,10 @@ function focusDropdownContentsOnArrows(dropdownView) {
         }
     });
 }
-// Adds a behavior that focuses the #buttonView when the dropdown was closed but focus was within the #panelView element.
-// This makes sure the focus is never lost.
-//
-// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+/**
+ * Adds a behavior that focuses the #buttonView when the dropdown was closed but focus was within the #panelView element.
+ * This makes sure the focus is never lost.
+ */
 function focusDropdownButtonOnClose(dropdownView) {
     dropdownView.on('change:isOpen', (evt, name, isOpen) => {
         if (isOpen) {
@@ -409,9 +415,9 @@ function focusDropdownButtonOnClose(dropdownView) {
         }
     });
 }
-// Adds a behavior that focuses the #panelView when dropdown gets open (accessibility).
-//
-// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+/**
+ * Adds a behavior that focuses the #panelView when dropdown gets open (accessibility).
+ */
 function focusDropdownPanelOnOpen(dropdownView) {
     dropdownView.on('change:isOpen', (evt, name, isOpen) => {
         if (!isOpen) {

package/src/editableui/editableuiview.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/editableui/editableuiview
+ */
+import View from '../view';
+import type { View as EditingView } from '@ckeditor/ckeditor5-engine';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The editable UI view class.
+ */
+export default class EditableUIView extends View {
+    /**
+     * The name of the editable UI view.
+     */
+    name: string | null;
+    /**
+     * Controls whether the editable is focused, i.e. the user is typing in it.
+     *
+     * @observable
+     */
+    isFocused: boolean;
+    /**
+     * The editing view instance the editable is related to. Editable uses the editing
+     * view to dynamically modify its certain DOM attributes after {@link #render rendering}.
+     *
+     * **Note**: The DOM attributes are performed by the editing view and not UI
+     * {@link module:ui/view~View#bindTemplate template bindings} because once rendered,
+     * the editable DOM element must remain under the full control of the engine to work properly.
+     */
+    protected _editingView: EditingView;
+    /**
+     * The element which is the main editable element (usually the one with `contentEditable="true"`).
+     */
+    private _editableElement;
+    /**
+     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
+     * the view will not render its {@link #template}.
+     */
+    private _hasExternalElement;
+    /**
+     * Creates an instance of EditableUIView class.
+     *
+     * @param locale The locale instance.
+     * @param editingView The editing view instance the editable is related to.
+     * @param editableElement The editable element. If not specified, this view
+     * should create it. Otherwise, the existing element should be used.
+     */
+    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement);
+    /**
+     * Renders the view by either applying the {@link #template} to the existing
+     * {@link #_editableElement} or assigning {@link #element} as {@link #_editableElement}.
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
+     * the view will not render its {@link #template}.
+     */
+    get hasExternalElement(): boolean;
+    /**
+     * Updates the `ck-focused` and `ck-blurred` CSS classes on the {@link #element} according to
+     * the {@link #isFocused} property value using the {@link #_editingView editing view} API.
+     */
+    private _updateIsFocusedClasses;
+}

package/src/editableui/editableuiview.js

@@ -8,20 +8,22 @@
 import View from '../view';
 /**
  * The editable UI view class.
- *
- * @extends module:ui/view~View
  */
 export default class EditableUIView extends View {
     /**
      * Creates an instance of EditableUIView class.
      *
-     * @param {module:utils/locale~Locale} [locale] The locale instance.
-     * @param {module:engine/view/view~View} editingView The editing view instance the editable is related to.
-     * @param {HTMLElement} [editableElement] The editable element. If not specified, this view
+     * @param locale The locale instance.
+     * @param editingView The editing view instance the editable is related to.
+     * @param editableElement The editable element. If not specified, this view
      * should create it. Otherwise, the existing element should be used.
      */
     constructor(locale, editingView, editableElement) {
         super(locale);
+        /**
+         * The name of the editable UI view.
+         */
+        this.name = null;
         this.setTemplate({
             tag: 'div',
             attributes: {
@@ -35,45 +37,9 @@ export default class EditableUIView extends View {
                 dir: locale.contentLanguageDirection
             }
         });
-        /**
-         * The name of the editable UI view.
-         *
-         * @member {String} #name
-         */
-        this.name = null;
-        /**
-         * Controls whether the editable is focused, i.e. the user is typing in it.
-         *
-         * @observable
-         * @member {Boolean} #isFocused
-         */
         this.set('isFocused', false);
-        /**
-         * The element which is the main editable element (usually the one with `contentEditable="true"`).
-         *
-         * @private
-         * @type {HTMLElement}
-         */
         this._editableElement = editableElement;
-        /**
-         * Whether an external {@link #_editableElement} was passed into the constructor, which also means
-         * the view will not render its {@link #template}.
-         *
-         * @private
-         * @type {Boolean}
-         */
         this._hasExternalElement = !!this._editableElement;
-        /**
-         * The editing view instance the editable is related to. Editable uses the editing
-         * view to dynamically modify its certain DOM attributes after {@link #render rendering}.
-         *
-         * **Note**: The DOM attributes are performed by the editing view and not UI
-         * {@link module:ui/view~View#bindTemplate template bindings} because once rendered,
-         * the editable DOM element must remain under the full control of the engine to work properly.
-         *
-         * @protected
-         * @type {module:engine/view/view~View}
-         */
         this._editingView = editingView;
     }
     /**
@@ -100,11 +66,16 @@ export default class EditableUIView extends View {
         }
         super.destroy();
     }
+    /**
+     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
+     * the view will not render its {@link #template}.
+     */
+    get hasExternalElement() {
+        return this._hasExternalElement;
+    }
     /**
      * Updates the `ck-focused` and `ck-blurred` CSS classes on the {@link #element} according to
      * the {@link #isFocused} property value using the {@link #_editingView editing view} API.
-     *
-     * @private
      */
     _updateIsFocusedClasses() {
         const editingView = this._editingView;

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

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/editableui/inline/inlineeditableuiview
+ */
+import EditableUIView from '../editableuiview';
+import type { View } from '@ckeditor/ckeditor5-engine';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
+ */
+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.
+     */
+    private readonly _generateLabel;
+    /**
+     * Creates an instance of the InlineEditableUIView class.
+     *
+     * @param locale The locale instance.
+     * @param editingView The editing view instance the editable is related to.
+     * @param editableElement The editable element. If not specified, the
+     * {@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.
+     */
+    constructor(locale: Locale, editingView: View, editableElement?: HTMLElement, options?: {
+        label?: (view: InlineEditableUIView) => string;
+    });
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+}

package/src/editableui/inline/inlineeditableuiview.js

@@ -8,20 +8,18 @@
 import EditableUIView from '../editableuiview';
 /**
  * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
- *
- * @extends module:ui/editableui/editableuiview~EditableUIView
  */
 export default class InlineEditableUIView extends EditableUIView {
     /**
      * Creates an instance of the InlineEditableUIView class.
      *
-     * @param {module:utils/locale~Locale} [locale] The locale instance.
-     * @param {module:engine/view/view~View} editingView The editing view instance the editable is related to.
-     * @param {HTMLElement} [editableElement] The editable element. If not specified, the
+     * @param locale The locale instance.
+     * @param editingView The editing view instance the editable is related to.
+     * @param editableElement The editable element. If not specified, the
      * {@link module:ui/editableui/editableuiview~EditableUIView}
      * will create it. Otherwise, the existing element will be used.
-     * @param {Object} [options] Additional configuration of the view.
-     * @param {Function} [options.label] A function that gets called with the instance of this view as an argument
+     * @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.
      */
@@ -34,14 +32,6 @@ export default class InlineEditableUIView extends EditableUIView {
                 class: 'ck-editor__editable_inline'
             }
         });
-        /**
-         * 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.
-         *
-         * @private
-         * @readonly
-         * @param {Function}
-         */
         this._generateLabel = options.label || (() => t('Editor editing area: %0', this.name));
     }
     /**

package/src/editorui/bodycollection.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import ViewCollection from '../viewcollection';
+import type View from '../view';
+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.
+ *
+ * The body collection is available in 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.
+ *
+ * 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}.
+ */
+export default class BodyCollection extends ViewCollection {
+    /**
+     * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
+     * See the view {@link module:ui/view~View#locale locale} property.
+     */
+    readonly locale: Locale;
+    /**
+     * The element holding elements of the body region.
+     */
+    private _bodyCollectionContainer?;
+    /**
+     * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
+     * @param initialItems The initial items of the collection.
+     */
+    constructor(locale: Locale, initialItems?: Iterable<View>);
+    /**
+     * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
+     * the body collection.
+     */
+    attachToDom(): void;
+    /**
+     * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
+     * anymore to clean-up the DOM structure.
+     */
+    detachFromDom(): void;
+}