@ckeditor/ckeditor5-editor-multi-root 38.1.1 → 38.2.0-alpha.1

package/src/multirooteditorui.d.ts

@@ -1,74 +1,74 @@
-/**
- * @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 editor-multi-root/multirooteditorui
- */
-import { type Editor } from 'ckeditor5/src/core';
-import { EditorUI, type InlineEditableUIView } from 'ckeditor5/src/ui';
-import type MultiRootEditorUIView from './multirooteditoruiview';
-/**
- * The multi-root editor UI class.
- */
-export default class MultiRootEditorUI extends EditorUI {
-    /**
-     * The main (top–most) view of the editor UI.
-     */
-    readonly view: MultiRootEditorUIView;
-    /**
-     * The editable element that was focused the last time when any of the editables had focus.
-     */
-    private _lastFocusedEditableElement;
-    /**
-     * Creates an instance of the multi-root editor UI class.
-     *
-     * @param editor The editor instance.
-     * @param view The view of the UI.
-     */
-    constructor(editor: Editor, view: MultiRootEditorUIView);
-    /**
-     * Initializes the UI.
-     */
-    init(): void;
-    /**
-     * Adds the editable to the editor UI.
-     *
-     * After the editable is added to the editor UI it can be considered "active".
-     *
-     * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
-     * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
-     *
-     * @param editable The editable instance to add.
-     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
-     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
-     */
-    addEditable(editable: InlineEditableUIView, placeholder?: string): void;
-    /**
-     * Removes the editable instance from the editor UI.
-     *
-     * Removed editable can be considered "deactivated".
-     *
-     * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
-     * {@link #addEditable} is removed.
-     *
-     * @param editable Editable to remove from the editor UI.
-     */
-    removeEditable(editable: InlineEditableUIView): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Initializes the editor main toolbar and its panel.
-     */
-    private _initToolbar;
-    /**
-     * Enables the placeholder text on a given editable, if the placeholder was configured.
-     *
-     * @param editable Editable on which the placeholder should be set.
-     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
-     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
-     */
-    private _initPlaceholder;
-}
+/**
+ * @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 editor-multi-root/multirooteditorui
+ */
+import { type Editor } from 'ckeditor5/src/core.js';
+import { EditorUI, type InlineEditableUIView } from 'ckeditor5/src/ui.js';
+import type MultiRootEditorUIView from './multirooteditoruiview.js';
+/**
+ * The multi-root editor UI class.
+ */
+export default class MultiRootEditorUI extends EditorUI {
+    /**
+     * The main (top–most) view of the editor UI.
+     */
+    readonly view: MultiRootEditorUIView;
+    /**
+     * The editable element that was focused the last time when any of the editables had focus.
+     */
+    private _lastFocusedEditableElement;
+    /**
+     * Creates an instance of the multi-root editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */
+    constructor(editor: Editor, view: MultiRootEditorUIView);
+    /**
+     * Initializes the UI.
+     */
+    init(): void;
+    /**
+     * Adds the editable to the editor UI.
+     *
+     * After the editable is added to the editor UI it can be considered "active".
+     *
+     * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
+     * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
+     *
+     * @param editable The editable instance to add.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     */
+    addEditable(editable: InlineEditableUIView, placeholder?: string): void;
+    /**
+     * Removes the editable instance from the editor UI.
+     *
+     * Removed editable can be considered "deactivated".
+     *
+     * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
+     * {@link #addEditable} is removed.
+     *
+     * @param editable Editable to remove from the editor UI.
+     */
+    removeEditable(editable: InlineEditableUIView): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Initializes the editor main toolbar and its panel.
+     */
+    private _initToolbar;
+    /**
+     * Enables the placeholder text on a given editable, if the placeholder was configured.
+     *
+     * @param editable Editable on which the placeholder should be set.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     */
+    private _initPlaceholder;
+}

package/src/multirooteditorui.js

@@ -1,169 +1,169 @@
-/**
- * @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 { EditorUI } from 'ckeditor5/src/ui';
-import { enablePlaceholder } from 'ckeditor5/src/engine';
-/**
- * The multi-root editor UI class.
- */
-export default class MultiRootEditorUI extends EditorUI {
-    /**
-     * Creates an instance of the multi-root editor UI class.
-     *
-     * @param editor The editor instance.
-     * @param view The view of the UI.
-     */
-    constructor(editor, view) {
-        super(editor);
-        this.view = view;
-        this._lastFocusedEditableElement = null;
-    }
-    /**
-     * Initializes the UI.
-     */
-    init() {
-        const view = this.view;
-        view.render();
-        // Keep track of the last focused editable element. Knowing which one was focused
-        // is useful when the focus moves from editable to other UI components like balloons
-        // (especially inputs) but the editable remains the "focus context" (e.g. link balloon
-        // attached to a link in an editable). In this case, the editable should preserve visual
-        // focus styles.
-        this.focusTracker.on('change:focusedElement', (evt, name, focusedElement) => {
-            for (const editable of Object.values(this.view.editables)) {
-                if (focusedElement === editable.element) {
-                    this._lastFocusedEditableElement = editable.element;
-                }
-            }
-        });
-        // If the focus tracker loses focus, stop tracking the last focused editable element.
-        // Wherever the focus is restored, it will no longer be in the context of that editable
-        // because the focus "came from the outside", as opposed to the focus moving from one element
-        // to another within the editor UI.
-        this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
-            if (!isFocused) {
-                this._lastFocusedEditableElement = null;
-            }
-        });
-        for (const editable of Object.values(this.view.editables)) {
-            this.addEditable(editable);
-        }
-        this._initToolbar();
-        this.fire('ready');
-    }
-    /**
-     * Adds the editable to the editor UI.
-     *
-     * After the editable is added to the editor UI it can be considered "active".
-     *
-     * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
-     * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
-     *
-     * @param editable The editable instance to add.
-     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
-     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
-     */
-    addEditable(editable, placeholder) {
-        // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
-        // But it can be available earlier if a DOM element has been passed to `MultiRootEditor.create()`.
-        const editableElement = editable.element;
-        // Bind the editable UI element to the editing view, making it an end– and entry–point
-        // of the editor's engine. This is where the engine meets the UI.
-        this.editor.editing.view.attachDomRoot(editableElement, editable.name);
-        // Register each editable UI view in the editor.
-        this.setEditableElement(editable.name, editableElement);
-        // Let the editable UI element respond to the changes in the global editor focus
-        // tracker. It has been added to the same tracker a few lines above but, in reality, there are
-        // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
-        // as they have focus, the editable should act like it is focused too (although technically
-        // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
-        // Doing otherwise will result in editable focus styles disappearing, once e.g. the
-        // toolbar gets focused.
-        editable.bind('isFocused').to(this.focusTracker, 'isFocused', this.focusTracker, 'focusedElement', (isFocused, focusedElement) => {
-            // When the focus tracker is blurred, it means the focus moved out of the editor UI.
-            // No editable will maintain focus then.
-            if (!isFocused) {
-                return false;
-            }
-            // If the focus tracker says the editor UI is focused and currently focused element
-            // is the editable, then the editable should be visually marked as focused too.
-            if (focusedElement === editableElement) {
-                return true;
-            }
-            // If the focus tracker says the editor UI is focused but the focused element is
-            // not an editable, it is possible that the editable is still (context–)focused.
-            // For instance, the focused element could be an input inside of a balloon attached
-            // to the content in the editable. In such case, the editable should remain _visually_
-            // focused even though technically the focus is somewhere else. The focus moved from
-            // the editable to the input but the focus context remained the same.
-            else {
-                return this._lastFocusedEditableElement === editableElement;
-            }
-        });
-        this._initPlaceholder(editable, placeholder);
-    }
-    /**
-     * Removes the editable instance from the editor UI.
-     *
-     * Removed editable can be considered "deactivated".
-     *
-     * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
-     * {@link #addEditable} is removed.
-     *
-     * @param editable Editable to remove from the editor UI.
-     */
-    removeEditable(editable) {
-        this.editor.editing.view.detachDomRoot(editable.name);
-        editable.unbind('isFocused');
-        this.removeEditableElement(editable.name);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        for (const editable of Object.values(this.view.editables)) {
-            this.removeEditable(editable);
-        }
-        this.view.destroy();
-    }
-    /**
-     * Initializes the editor main toolbar and its panel.
-     */
-    _initToolbar() {
-        const editor = this.editor;
-        const view = this.view;
-        const toolbar = view.toolbar;
-        toolbar.fillFromConfig(editor.config.get('toolbar'), this.componentFactory);
-        // Register the toolbar, so it becomes available for Alt+F10 and Esc navigation.
-        this.addToolbar(view.toolbar);
-    }
-    /**
-     * Enables the placeholder text on a given editable, if the placeholder was configured.
-     *
-     * @param editable Editable on which the placeholder should be set.
-     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
-     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
-     */
-    _initPlaceholder(editable, placeholder) {
-        if (!placeholder) {
-            const configPlaceholder = this.editor.config.get('placeholder');
-            if (configPlaceholder) {
-                placeholder = typeof configPlaceholder === 'string' ? configPlaceholder : configPlaceholder[editable.name];
-            }
-        }
-        if (!placeholder) {
-            return;
-        }
-        const editingView = this.editor.editing.view;
-        const editingRoot = editingView.document.getRoot(editable.name);
-        enablePlaceholder({
-            view: editingView,
-            element: editingRoot,
-            text: placeholder,
-            isDirectHost: false,
-            keepOnFocus: true
-        });
-    }
-}
+/**
+ * @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 { EditorUI } from 'ckeditor5/src/ui.js';
+import { enablePlaceholder } from 'ckeditor5/src/engine.js';
+/**
+ * The multi-root editor UI class.
+ */
+export default class MultiRootEditorUI extends EditorUI {
+    /**
+     * Creates an instance of the multi-root editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */
+    constructor(editor, view) {
+        super(editor);
+        this.view = view;
+        this._lastFocusedEditableElement = null;
+    }
+    /**
+     * Initializes the UI.
+     */
+    init() {
+        const view = this.view;
+        view.render();
+        // Keep track of the last focused editable element. Knowing which one was focused
+        // is useful when the focus moves from editable to other UI components like balloons
+        // (especially inputs) but the editable remains the "focus context" (e.g. link balloon
+        // attached to a link in an editable). In this case, the editable should preserve visual
+        // focus styles.
+        this.focusTracker.on('change:focusedElement', (evt, name, focusedElement) => {
+            for (const editable of Object.values(this.view.editables)) {
+                if (focusedElement === editable.element) {
+                    this._lastFocusedEditableElement = editable.element;
+                }
+            }
+        });
+        // If the focus tracker loses focus, stop tracking the last focused editable element.
+        // Wherever the focus is restored, it will no longer be in the context of that editable
+        // because the focus "came from the outside", as opposed to the focus moving from one element
+        // to another within the editor UI.
+        this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
+            if (!isFocused) {
+                this._lastFocusedEditableElement = null;
+            }
+        });
+        for (const editable of Object.values(this.view.editables)) {
+            this.addEditable(editable);
+        }
+        this._initToolbar();
+        this.fire('ready');
+    }
+    /**
+     * Adds the editable to the editor UI.
+     *
+     * After the editable is added to the editor UI it can be considered "active".
+     *
+     * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
+     * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
+     *
+     * @param editable The editable instance to add.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     */
+    addEditable(editable, placeholder) {
+        // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
+        // But it can be available earlier if a DOM element has been passed to `MultiRootEditor.create()`.
+        const editableElement = editable.element;
+        // Bind the editable UI element to the editing view, making it an end– and entry–point
+        // of the editor's engine. This is where the engine meets the UI.
+        this.editor.editing.view.attachDomRoot(editableElement, editable.name);
+        // Register each editable UI view in the editor.
+        this.setEditableElement(editable.name, editableElement);
+        // Let the editable UI element respond to the changes in the global editor focus
+        // tracker. It has been added to the same tracker a few lines above but, in reality, there are
+        // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
+        // as they have focus, the editable should act like it is focused too (although technically
+        // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
+        // Doing otherwise will result in editable focus styles disappearing, once e.g. the
+        // toolbar gets focused.
+        editable.bind('isFocused').to(this.focusTracker, 'isFocused', this.focusTracker, 'focusedElement', (isFocused, focusedElement) => {
+            // When the focus tracker is blurred, it means the focus moved out of the editor UI.
+            // No editable will maintain focus then.
+            if (!isFocused) {
+                return false;
+            }
+            // If the focus tracker says the editor UI is focused and currently focused element
+            // is the editable, then the editable should be visually marked as focused too.
+            if (focusedElement === editableElement) {
+                return true;
+            }
+            // If the focus tracker says the editor UI is focused but the focused element is
+            // not an editable, it is possible that the editable is still (context–)focused.
+            // For instance, the focused element could be an input inside of a balloon attached
+            // to the content in the editable. In such case, the editable should remain _visually_
+            // focused even though technically the focus is somewhere else. The focus moved from
+            // the editable to the input but the focus context remained the same.
+            else {
+                return this._lastFocusedEditableElement === editableElement;
+            }
+        });
+        this._initPlaceholder(editable, placeholder);
+    }
+    /**
+     * Removes the editable instance from the editor UI.
+     *
+     * Removed editable can be considered "deactivated".
+     *
+     * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
+     * {@link #addEditable} is removed.
+     *
+     * @param editable Editable to remove from the editor UI.
+     */
+    removeEditable(editable) {
+        this.editor.editing.view.detachDomRoot(editable.name);
+        editable.unbind('isFocused');
+        this.removeEditableElement(editable.name);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        for (const editable of Object.values(this.view.editables)) {
+            this.removeEditable(editable);
+        }
+        this.view.destroy();
+    }
+    /**
+     * Initializes the editor main toolbar and its panel.
+     */
+    _initToolbar() {
+        const editor = this.editor;
+        const view = this.view;
+        const toolbar = view.toolbar;
+        toolbar.fillFromConfig(editor.config.get('toolbar'), this.componentFactory);
+        // Register the toolbar, so it becomes available for Alt+F10 and Esc navigation.
+        this.addToolbar(view.toolbar);
+    }
+    /**
+     * Enables the placeholder text on a given editable, if the placeholder was configured.
+     *
+     * @param editable Editable on which the placeholder should be set.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     */
+    _initPlaceholder(editable, placeholder) {
+        if (!placeholder) {
+            const configPlaceholder = this.editor.config.get('placeholder');
+            if (configPlaceholder) {
+                placeholder = typeof configPlaceholder === 'string' ? configPlaceholder : configPlaceholder[editable.name];
+            }
+        }
+        if (!placeholder) {
+            return;
+        }
+        const editingView = this.editor.editing.view;
+        const editingRoot = editingView.document.getRoot(editable.name);
+        enablePlaceholder({
+            view: editingView,
+            element: editingRoot,
+            text: placeholder,
+            isDirectHost: false,
+            keepOnFocus: true
+        });
+    }
+}

package/src/multirooteditoruiview.d.ts

@@ -1,74 +1,74 @@
-/**
- * @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 editor-multi-root/multirooteditoruiview
- */
-import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
-import type { Locale } from 'ckeditor5/src/utils';
-import type { View } from 'ckeditor5/src/engine';
-/**
- * The multi-root editor UI view. It is a virtual view providing an inline
- * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#editable} and a
- * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar}, but without any
- * specific arrangement of the components in the DOM.
- *
- * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}
- * to learn more about this view.
- */
-export default class MultiRootEditorUIView extends EditorUIView {
-    /**
-     * The main toolbar of the multi-root editor UI.
-     */
-    readonly toolbar: ToolbarView;
-    /**
-     * Editable elements used by the multi-root editor UI.
-     */
-    readonly editables: Record<string, InlineEditableUIView>;
-    readonly editable: InlineEditableUIView;
-    /**
-     * The editing view instance this view is related to.
-     */
-    private readonly _editingView;
-    /**
-     * Creates an instance of the multi-root editor UI view.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param editingView The editing view instance this view is related to.
-     * @param editableNames Names for all editable views. For each name, one
-     * {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`} instance will be initialized.
-     * @param options Configuration options for the view instance.
-     * @param options.editableElements The editable elements to be used, assigned to their names. If not specified, they will be
-     * automatically created by {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`}
-     * instances.
-     * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
-     * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
-     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
-     */
-    constructor(locale: Locale, editingView: View, editableNames: Array<string>, options?: {
-        editableElements?: Record<string, HTMLElement>;
-        shouldToolbarGroupWhenFull?: boolean;
-    });
-    /**
-     * Creates an editable instance with given name and registers it in the editor UI view.
-     *
-     * If `editableElement` is provided, the editable instance will be created on top of it. Otherwise, the editor will create a new
-     * DOM element and use it instead.
-     *
-     * @param editableName The name for the editable.
-     * @param editableElement DOM element for which the editable should be created.
-     * @returns The created editable instance.
-     */
-    createEditable(editableName: string, editableElement?: HTMLElement): InlineEditableUIView;
-    /**
-     * Destroys and removes the editable from the editor UI view.
-     *
-     * @param editableName The name of the editable that should be removed.
-     */
-    removeEditable(editableName: string): void;
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-}
+/**
+ * @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 editor-multi-root/multirooteditoruiview
+ */
+import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui.js';
+import type { Locale } from 'ckeditor5/src/utils.js';
+import type { View } from 'ckeditor5/src/engine.js';
+/**
+ * The multi-root editor UI view. It is a virtual view providing an inline
+ * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#editable} and a
+ * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar}, but without any
+ * specific arrangement of the components in the DOM.
+ *
+ * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}
+ * to learn more about this view.
+ */
+export default class MultiRootEditorUIView extends EditorUIView {
+    /**
+     * The main toolbar of the multi-root editor UI.
+     */
+    readonly toolbar: ToolbarView;
+    /**
+     * Editable elements used by the multi-root editor UI.
+     */
+    readonly editables: Record<string, InlineEditableUIView>;
+    readonly editable: InlineEditableUIView;
+    /**
+     * The editing view instance this view is related to.
+     */
+    private readonly _editingView;
+    /**
+     * Creates an instance of the multi-root editor UI view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param editingView The editing view instance this view is related to.
+     * @param editableNames Names for all editable views. For each name, one
+     * {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`} instance will be initialized.
+     * @param options Configuration options for the view instance.
+     * @param options.editableElements The editable elements to be used, assigned to their names. If not specified, they will be
+     * automatically created by {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`}
+     * instances.
+     * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
+     * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     */
+    constructor(locale: Locale, editingView: View, editableNames: Array<string>, options?: {
+        editableElements?: Record<string, HTMLElement>;
+        shouldToolbarGroupWhenFull?: boolean;
+    });
+    /**
+     * Creates an editable instance with given name and registers it in the editor UI view.
+     *
+     * If `editableElement` is provided, the editable instance will be created on top of it. Otherwise, the editor will create a new
+     * DOM element and use it instead.
+     *
+     * @param editableName The name for the editable.
+     * @param editableElement DOM element for which the editable should be created.
+     * @returns The created editable instance.
+     */
+    createEditable(editableName: string, editableElement?: HTMLElement): InlineEditableUIView;
+    /**
+     * Destroys and removes the editable from the editor UI view.
+     *
+     * @param editableName The name of the editable that should be removed.
+     */
+    removeEditable(editableName: string): void;
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+}