@ckeditor/ckeditor5-core 48.2.0-alpha.7 → 48.3.0-alpha.0

package/dist/editor/editorconfig.d.ts

@@ -1,1660 +1,1700 @@
 /**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
 /**
- * @module core/editor/editorconfig
- */
-import type { ArrayOrItem, Translations } from '@ckeditor/ckeditor5-utils';
-import { type Context } from '../context.js';
-import type { PluginConstructor } from '../plugin.js';
-import type { EditorRootAttributes, Editor } from './editor.js';
-import type { MenuBarConfig } from '@ckeditor/ckeditor5-ui';
-import type { EngineConfig } from '@ckeditor/ckeditor5-engine';
+* @module core/editor/editorconfig
+*/
+import type { ArrayOrItem, Translations } from "@ckeditor/ckeditor5-utils";
+import { type Context } from "../context.js";
+import type { PluginConstructor } from "../plugin.js";
+import type { EditorRootAttributes, Editor } from "./editor.js";
+import type { MenuBarConfig } from "@ckeditor/ckeditor5-ui";
+import type { EngineConfig } from "@ckeditor/ckeditor5-engine";
 /**
- * CKEditor configuration options.
- *
- * An object defining the editor configuration can be passed when initializing the editor:
- *
- * ```ts
- * EditorClass
- * 	.create( {
- * 		toolbar: [ 'bold', 'italic' ],
- * 		image: {
- * 			styles: [
- * 				...
- * 			]
- * 		}
- * 	} )
- * 	.then( ... )
- * 	.catch( ... );
- * ```
- */
+* CKEditor configuration options.
+*
+* An object defining the editor configuration can be passed when initializing the editor:
+*
+* ```ts
+* EditorClass
+* 	.create( {
+* 		toolbar: [ 'bold', 'italic' ],
+* 		image: {
+* 			styles: [
+* 				...
+* 			]
+* 		}
+* 	} )
+* 	.then( ... )
+* 	.catch( ... );
+* ```
+*/
 export interface EditorConfig extends EngineConfig {
-    /**
-     * The DOM element that will be the source for the created editor.
-     *
-     * **Note:** This option is only available in the {@link module:editor-classic/classiceditor~ClassicEditor}.
-     * Other editor types expect configuration for the root elements to be passed in the
-     * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots`} configuration.
-     *
-     * If a DOM element is passed, its content will be automatically loaded to the editor upon initialization
-     * and the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element editor element} will replace the passed element
-     * in the DOM (the original one will be hidden and the editor will be injected next to it).
-     *
-     * If the {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
-     * option is set to `true`, the editor data will be set back to the original element once the editor is destroyed and when a form,
-     * in which this element is contained, is submitted (if the original element is a `<textarea>`). This ensures seamless integration
-     * with native web forms.
-     *
-     * If the element is not provided, a detached editor will be created. In this case you need to insert it into the DOM manually.
-     * It is available under the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element `editor.ui.element`} property.
-     */
-    attachTo?: HTMLElement;
-    context?: Context;
-    /**
-     * The list of additional plugins to load along those already available in the
-     * editor. It extends the {@link #plugins `plugins`} configuration.
-     *
-     * ```ts
-     * function MyPlugin( editor ) {
-     * 	// ...
-     * }
-     *
-     * const config = {
-     * 	extraPlugins: [ MyPlugin ]
-     * };
-     * ```
-     *
-     * **Note:** This configuration works only for simple plugins which utilize the
-     * {@link module:core/plugin~PluginInterface plugin interface} and have no dependencies. To extend a
-     * build with complex features, try [CKEditr 5 Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs).
-     *
-     * **Note:** Make sure you include the new features in you toolbar configuration. Learn more
-     * about the {@glink getting-started/setup/toolbar toolbar setup}.
-     */
-    extraPlugins?: Array<PluginConstructor<Editor>>;
-    /**
-     * The initial editor data to be used instead of the provided element's HTML content.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		root: {
-     * 			initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * By default, the editor is initialized with the content of the element on which this editor is initialized.
-     * This configuration option lets you override this behavior and pass different initial data.
-     * It is especially useful if it is difficult for your integration to put the data inside the HTML element.
-     *
-     * If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor
-     * roots names and values equal to the data that should be set in each root:
-     *
-     * ```ts
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		header: {
-     * 			element: document.querySelector( '#header' ),
-     * 			initialData: '<p>Content for header part.</p>'
-     * 		},
-     * 		content: {
-     * 			element: document.querySelector( '#content' ),
-     * 			initialData: '<p>Content for main part.</p>'
-     * 		},
-     * 		leftSide: {
-     * 			element: document.querySelector( '#left-side' ),
-     * 			initialData: '<p>Content for left-side box.</p>'
-     * 		},
-     * 		rightSide: {
-     * 			element: document.querySelector( '#right-side' ),
-     * 			initialData: '<p>Content for right-side box.</p>'
-     * 		}
-     * 	}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     *
-     * See also {@link module:core/editor/editor~Editor.create Editor.create()} documentation for the editor implementation which you use.
-     *
-     * **Note:** If `config.initialData` is set together with `config.root.initialData` or `config.roots.<rootName>.initialData`,
-     * an error will be thrown as those options exclude themselves.
-     *
-     * If `config.initialData` is not set when the editor is initialized, the data received in `Editor.create()` call
-     * will be used to set `config.initialData`. As a result, `initialData` is always set in the editor's config and
-     * plugins can read and/or modify it during initialization.
-     *
-     * **This property has been deprecated and will be removed in the future versions of CKEditor. Please use
-     * {@link module:core/editor/editorconfig~EditorConfig#root `config.root.initialData`} instead.
-     * For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use
-     * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.initialData`}.**
-     *
-     * @deprecated
-     */
-    initialData?: string | Record<string, string>;
-    /**
-     * The language of the editor UI and its content.
-     *
-     * Simple usage (change the language of the UI and the content):
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		// The UI of the editor as well as its content will be in German.
-     * 		language: 'de'
-     * 	} )
-     * 	.then( editor => {
-     * 		console.log( editor );
-     * 	} )
-     * 	.catch( error => {
-     * 		console.error( error );
-     * 	} );
-     * ```
-     *
-     * Use different languages for the UI and the content using the {@link module:core/editor/editorconfig~LanguageConfig configuration}
-     * syntax:
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		language: {
-     * 			// The UI will be in English.
-     * 			ui: 'en',
-     *
-     * 			// But the content will be edited in Arabic.
-     * 			content: 'ar'
-     * 		}
-     * 	} )
-     * 	.then( editor => {
-     * 		console.log( editor );
-     * 	} )
-     * 	.catch( error => {
-     * 		console.error( error );
-     * 	} );
-     * ```
-     *
-     * The language of the content has an impact on the editing experience, for instance it affects screen readers
-     * and spell checkers. It is also particularly useful for typing in certain languages (e.g. right–to–left ones)
-     * because it changes the default alignment of the text.
-     *
-     * The language codes are defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.
-     *
-     * You need to add the corresponding translation file for the new UI language to work.
-     * Translation files are available on CDN:
-     *
-     * ```html
-     * <script type="importmap">
-     * {
-     *   "imports": {
-     *     "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/<VERSION>/ckeditor5.js",
-     *     "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/<VERSION>/"
-     *   }
-     * }
-     * </script>
-     * <script type="module">
-     * import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
-     * import { translations } from 'ckeditor5/dist/translations/pl.js';
-     *
-     * await ClassicEditor.create( {
-     *   attachTo: document.querySelector( '#editor' ),
-     *   plugins: [
-     *     Essentials,
-     *     Paragraph,
-     *   ],
-     *   toolbar: {
-     *     items: [ 'undo', 'redo' ]
-     *   },
-     *   translations
-     * } );
-     * </script>
-     * ```
-     *
-     * You can add translation using NPM as well.
-     *
-     * ```html
-     * import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
-     * import { translations } from 'ckeditor5/dist/translations/pl.js';
-     *
-     * import 'ckeditor5/dist/styles.css';
-     *
-     * await ClassicEditor.create( {
-     *   attachTo: document.querySelector( '#editor' ),
-     *   plugins: [
-     *     Essentials,
-     *     Paragraph,
-     *   ],
-     *   toolbar: {
-     *     items: [ 'undo', 'redo' ]
-     *   },
-     *   translations
-     * } );
-     * ```
-     *
-     * Check the {@glink getting-started/setup/ui-language UI language} guide for more information about
-     * the localization options and translation process.
-     */
-    language?: string | LanguageConfig;
-    /**
-     * The editor menu bar configuration.
-     *
-     * **Note**: The menu bar is not available in all editor types. Currently, only the
-     * {@link module:editor-classic/classiceditor~ClassicEditor Classic editor} and
-     * {@link module:editor-decoupled/decouplededitor~DecoupledEditor Decoupled editor}
-     * support this feature. Setting the `config.menuBar` configuration for other editor types will have no effect.
-     *
-     * In Classic editor, the menu bar is hidden by default. Set the `isVisible` configuration flag to `true` in order to show it:
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		menuBar: {
-     * 			isVisible: true
-     * 		}
-     * 	} )
-     * 	.then( ... );
-     * ```
-     *
-     * When using the Decoupled editor, you will need to insert the menu bar in a desired place yourself. For example:
-     *
-     * ```ts
-     * DecoupledEditor
-     * 	.create( {
-     * 		root: { element: document.querySelector( '#editor' ) },
-     * 		toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ],
-     * 	} )
-     *  .then( editor => {
-     * 		document.getElementById( '#menuBarContainer' ).appendChild( editor.ui.view.menuBarView.element );
-     * 	} );
-     * ```
-     *
-     * **Note**: You do not have to set the `items` property in this configuration in order to use the menu bar.
-     * By default, a {@link module:ui/menubar/utils#DefaultMenuBarItems default set of items} is used that already includes
-     * **all core editor features**. For your convenience, there are `config.menuBar.addItems` and
-     * `config.menuBar.removeItems` options available that will help you adjust the default configuration without setting the
-     * entire menu bar structure from scratch (see below).
-     *
-     * **Removing items from the menu bar**
-     *
-     * You can use the `config.menuBar.removeItems` option to remove items from the default menu bar configuration. You can
-     * remove individual buttons (e.g. "Bold" or "Block quote"), item groups (e.g. the basic styles section that
-     * includes multiple buttons such as "Bold", "Italic", "Underline", etc.), or whole menus (e.g. the "Insert" menu). Please
-     * refer to the {@link module:ui/menubar/utils#DefaultMenuBarItems default configuration} to see default buttons/groups/menus
-     * and their structure.
-     *
-     * To remove individual buttons from the menu bar:
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		menuBar: {
-     * 			// Removes "Bold" and "Block quote" buttons from their respective menus.
-     * 			removeItems: [ 'menuBar:bold', 'menuBar:blockQuote' ]
-     * 		}
-     * 	} )
-     * 	.then( ... );
-     * ```
-     *
-     * To remove a group of buttons from the menu bar:
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		menuBar: {
-     * 			// Removes the entire basic styles group ("Bold", "Italic", "Underline", etc.) from the "Format" menu.
-     * 			removeItems: [ 'basicStyles' ]
-     * 		}
-     * 	} )
-     * 	.then( ... );
-     * ```
-     *
-     * To remove a menu from the menu bar:
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		menuBar: {
-     * 			// Removes the whole top-level "Insert" menu from the menu bar.
-     * 			removeItems: [ 'insert' ]
-     * 		}
-     * 	} )
-     * 	.then( ... );
-     * ```
-     *
-     * **Adding items to the menu bar**
-     *
-     * Using the `config.menuBar.addItems` option you can add individual buttons, button groups or entire menus to the structure
-     * of the menu bar. You can add existing components that you removed from their original position, or add your own components.
-     *
-     * **Note**: When adding items please make sure that features (editor plugins) that bring specific menu bar items are loaded.
-     * For instance, the "Bold" button will not show up in the menu bar unless the {@glink features/basic-styles basic styles} feature is
-     * loaded. {@link module:core/editor/editorconfig~EditorConfig#plugins Learn more} about loading plugins.
-     *
-     * Each entry in the `config.menuBar.addItems` is an object with one of the following properties:
-     *
-     * * `item` &ndash; A name of the button to be added to a specific button group (e.g. `'menuBar:bold'` or `'myButton'`),
-     * * `menu` &ndash; A {@link module:ui/menubar/menubarview#MenuBarMenuDefinition definition of a menu} that should be added to
-     * the menu bar,
-     * * `group` &ndash; A {@link module:ui/menubar/menubarview#MenuBarMenuGroupDefinition definition of a button group} that should be
-     * added to a specific menu.
-     *
-     * Additionally, each entry must define the `position` property that accepts the following values:
-     * * `'start'` &ndash; Adds a top-level menu (e.g. "Format", "Insert", etc.) at the beginning of the menu bar,
-     * * `'start:GROUP_OR_MENU'` &ndash; Adds a button/group at the beginning of the specific group/menu,
-     * * `'end'` &ndash; Adds a top-level menu (e.g. "Format", "Insert", etc.) at the end of the menu bar,
-     * * `'end:GROUP_OR_MENU'` &ndash; Adds a button/group at the end of the specific group/menu,
-     * * `'after:BUTTON_OR_GROUP_OR_MENU'` &ndash; Adds a button/group/menu right after the specific button/group/menu,
-     * * `'before:BUTTON_OR_GROUP_OR_MENU'` &ndash; Adds a button/group/menu right after the specific button/group/menu.
-     *
-     * Please refer to the {@link module:ui/menubar/utils#DefaultMenuBarItems default configuration} to learn about the
-     * names of buttons and positions they can be added at.
-     *
-     * To add a new top-level menu with specific buttons at the end of the menu bar:
-     *
-     * ```ts
-     *  ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		menuBar: {
-     *  		addItems: [
-     * 				{
-     * 					menu: {
-     * 						menuId: 'my-menu',
-     * 						label: 'My menu',
-     * 						groups: [
-     * 							{
-     * 								groupId: 'my-buttons',
-     * 								items: [
-     * 									'menuBar:bold',
-     * 									'menuBar:italic',
-     * 									'menuBar:underline'
-     * 								]
-     * 							}
-     * 						]
-     * 					},
-     * 					position: 'end'
-     * 				}
-     * 			]
-     * 		}
-     * 	} )
-     * 	.then( ... );
-     * ```
-     *
-     * To add a new group of buttons to the "Format" menu after basic styles buttons ("Bold", "Italic", "Underline", etc.):
-     *
-     * ```ts
-     *  ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		menuBar: {
-     *  		addItems: [
-     * 				{
-     * 					group: {
-     * 						groupId: 'my-buttons',
-     * 						items: [
-     * 							'myButton1',
-     * 							'myButton2',
-     * 						]
-     * 					},
-     * 					position: 'after:basicStyles'
-     * 				}
-     * 			]
-     * 		}
-     * 	} )
-     * 	.then( ... );
-     * ```
-     *
-     * To add a new button to the basic styles group ("Bold", "Italic", "Underline", etc.) in the "Format" menu:
-     *
-     * ```ts
-     *  ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		menuBar: {
-     *  		addItems: [
-     * 				{
-     * 					item: 'myButton',
-     * 					position: 'end:basicStyles'
-     * 				}
-     * 			]
-     * 		}
-     * 	} )
-     * 	.then( ... );
-     * ```
-     *
-     * To add a new sub-menu in the "Format" menu:
-     *
-     * ```ts
-     *  ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		menuBar: {
-     *  		addItems: [
-     * 				{
-     * 					menu: {
-     * 						menuId: 'my-sub-menu',
-     * 						label: 'My sub-menu',
-     * 						groups: [
-     * 							{
-     * 								groupId: 'my-buttons',
-     * 								items: [
-     * 									'myButton1',
-     * 									'myButton2',
-     * 								]
-     * 							}
-     * 						]
-     * 					},
-     * 					position: 'after:basicStyles'
-     * 				}
-     * 			]
-     * 		}
-     * 	} )
-     * 	.then( ... );
-     * ```
-     *
-     * **Defining menu bar from scratch**
-     *
-     * If the `config.menuBar.addItems` and `config.menuBar.removeItems` options are not enough to adjust the
-     * {@link module:ui/menubar/utils#DefaultMenuBarItems default configuration}, you can set the menu bar structure from scratch.
-     *
-     * For instance, to create a minimalistic menu bar configuration with just two main categories (menus), use the following code snippet:
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		menuBar: {
-     * 			items: [
-     * 				{
-     * 					menuId: 'formatting',
-     * 					label: 'Formatting',
-     * 					groups: [
-     * 						{
-     * 							groupId: 'basicStyles',
-     * 							items: [
-     * 								'menuBar:bold',
-     * 								'menuBar:italic',
-     * 							]
-     * 						},
-     * 						{
-     * 							groupId: 'misc',
-     * 							items: [
-     * 								'menuBar:heading',
-     * 								'menuBar:bulletedList',
-     * 								'menuBar:numberedList'
-     * 							]
-     * 						}
-     * 					]
-     * 				},
-     * 				{
-     * 					menuId: 'myButtons',
-     * 					label: 'My actions',
-     * 					groups: [
-     * 						{
-     * 							groupId: 'undo',
-     * 							items: [
-     * 								'myButton1',
-     * 								'myButton2'
-     * 							]
-     * 						}
-     * 					]
-     * 				}
-     * 			]
-     * 		}
-     * 	} )
-     * 	.then( ... );
-     * ```
-     */
-    menuBar?: MenuBarConfig;
-    /**
-     * Specifies the text displayed in the editor when there is no content (editor is empty). It is intended to
-     * help users locate the editor in the application (form) and prompt them to input the content. Work similarly
-     * as to the native DOM
-     * [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute)
-     * used by inputs.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		root: {
-     * 			placeholder: 'Type some text...'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor
-     * roots names and values equal to the placeholder that should be set in each root:
-     *
-     * ```ts
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		header: {
-     * 			element: document.querySelector( '#header' ),
-     * 			placeholder: 'Type header...'
-     * 		},
-     * 		content: {
-     * 			element: document.querySelector( '#content' ),
-     * 			placeholder: 'Type content...'
-     * 		},
-     * 		leftSide: {
-     * 			element: document.querySelector( '#left-side' ),
-     * 			placeholder: 'Type left-side...'
-     * 		},
-     * 		rightSide: {
-     * 			element: document.querySelector( '#right-side' ),
-     * 			placeholder: 'Type right-side...'
-     * 		}
-     * 	}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     *
-     * The placeholder text is displayed as a pseudo–element of an empty paragraph in the editor content.
-     * The paragraph has the `.ck-placeholder` CSS class and the `data-placeholder` attribute.
-     *
-     * ```html
-     * <p data-placeholder="Type some text..." class="ck-placeholder">
-     * 	::before
-     * </p>
-     * ```
-     *
-     * **Note**: Placeholder text can also be set using the `placeholder` attribute if a `<textarea>` is passed to
-     * the `create()` method, e.g. {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
-     *
-     * **Note**: This configuration has precedence over the value of the `placeholder` attribute of a `<textarea>`
-     * element passed to the `create()` method.
-     *
-     * See the {@glink features/editor-placeholder "Editor placeholder"} guide for more information and live examples.
-     *
-     * **This property has been deprecated and will be removed in the future versions of CKEditor. Please use
-     * {@link module:core/editor/editorconfig~EditorConfig#root `config.root.placeholder`} instead.
-     * For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use
-     * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.placeholder`}.**
-     *
-     * @deprecated
-     */
-    placeholder?: string | Record<string, string>;
-    /**
-     * The list of plugins to load.
-     *
-     * ```ts
-     * import {
-     * // A preset of plugins is a plugin as well.
-     * 	Essentials,
-     * // The bold plugin.
-     * 	Bold
-     * } from 'ckeditor5';
-     *
-     * const config = {
-     * 	plugins: [ Essentials, Bold ]
-     * };
-     * ```
-     *
-     * **Note:** To load additional plugins, you should use the {@link #extraPlugins `extraPlugins`} configuration.
-     * To narrow the list of loaded plugins, use the {@link #removePlugins `removePlugins`} configuration.
-     */
-    plugins?: Array<PluginConstructor<Editor> | string>;
-    /**
-     * The list of plugins which should not be loaded despite being available in
-     * the editor.
-     *
-     * ```ts
-     * const config = {
-     * 	removePlugins: [ 'Bold', 'Italic' ]
-     * };
-     * ```
-     *
-     * **Note:** Be careful when removing plugins using `config.removePlugins`.
-     * If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build
-     * will become invalid. In such case you need to provide the updated
-     * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar configuration}.
-     */
-    removePlugins?: Array<PluginConstructor<Editor> | string>;
-    substitutePlugins?: Array<PluginConstructor<Editor>>;
-    /**
-     * The editor toolbar configuration.
-     *
-     * Simple format (specifies only toolbar items):
-     *
-     * ```ts
-     * const config = {
-     * 	toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
-     * };
-     * ```
-     *
-     * Extended format:
-     *
-     * ```ts
-     * const config = {
-     * 	toolbar: {
-     * 		items: [ 'bold', 'italic', '|', 'undo', 'redo', '-', 'numberedList', 'bulletedList' ],
-     *
-     * 		shouldNotGroupWhenFull: true
-     * 	}
-     * };
-     * ```
-     *
-     * Options which can be set using the extended format:
-     *
-     * * **`toolbar.items`** &ndash; An array of toolbar item names. The components (buttons, dropdowns, etc.) which can be used
-     *	as toolbar items are defined in `editor.ui.componentFactory` and can be listed using the following snippet:
-     *
-     *	```ts
-     *	Array.from( editor.ui.componentFactory.names() );
-     *	```
-     *
-     *	You can also use `'|'` to create a separator between groups of items:
-     *
-     *	```
-     *	toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
-     *	```
-     *
-     * or `'-'` to make a line break and render items in multiple lines:
-     *
-     *	```
-     *	toolbar: [ 'bold', 'italic', '-', 'undo', 'redo' ]
-     *	```
-     *
-     *	Line break will work only in the extended format when `shouldNotGroupWhenFull` option is set to `true`.
-     *
-     *	**Note**: To save space in your toolbar, you can group several items into a dropdown:
-     *
-     *	```
-     *	toolbar: [
-     *		{
-     *			label: 'Basic styles',
-     *			icon: 'text',
-     *			items: [ 'bold', 'italic', ... ]
-     *		},
-     *		'|',
-     *		'undo', 'redo'
-     *	]
-     *	```
-     *
-     *	The code above will create a "Basic styles" dropdown with a "text" icon containing the "bold" and "italic" buttons.
-     *	You can customize the look of the dropdown by setting the `withText`, `icon`, and `tooltip` properties:
-     *
-     *	* **Displaying a label**
-     *
-     *		For instance, to hide the icon and to display the label only, you can use the following configuration:
-     *
-     *		```ts
-     *		{
-     *			label: 'Basic styles',
-     *			// Show the textual label of the drop-down. Note that the "icon" property is not configured.
-     *			withText: true,
-     *			items: [ 'bold', 'italic', ... ]
-     *		}
-     *		```
-     *
-     *	* **Selecting an icon**
-     *
-     *		You can use one of the common icons provided by the editor (`'bold'`, `'plus'`, `'text'`, `'importExport'`, `'alignLeft'`,
-     *		`'paragraph'`, `'threeVerticalDots'`, `'dragIndicator'`, `'pilcrow'`):
-     *
-     *		```ts
-     *		{
-     *			label: '...',
-     *			// A "plus" sign icon works best for content insertion tools.
-     *			icon: 'plus',
-     *			items: [ ... ]
-     *		}
-     *		```
-     *
-     *		If no icon is specified, `'threeVerticalDots'` will be used as a default:
-     *
-     *		```ts
-     *		// No icon specified, using a default one.
-     *		{
-     *			label: 'Default icon',
-     *			items: [ ... ]
-     *		}
-     *		```
-     *
-     *		If `icon: false` is configured, no icon will be displayed at all and the text label will show up instead:
-     *
-     *		```ts
-     *		// This drop-down has no icon. The text label will be displayed instead.
-     *		{
-     *			label: 'No icon',
-     *			icon: false,
-     *			items: [ ... ]
-     *		}
-     *		```
-     *
-     *		You can also set a custom icon for the drop-down by passing an SVG string:
-     *
-     *		```ts
-     *		{
-     *			label: '...',
-     *			// If you want your icon to change the color dynamically (e.g. when the dropdown opens), avoid fill="..."
-     *			// and stroke="..." styling attributes. Use solid shapes and avoid paths with strokes.
-     *			icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">...</svg>',
-     *			items: [ ... ]
-     *		}
-     *		```
-     *
-     *	* **Customizing the tooltip**
-     *
-     *		By default, the tooltip of the button shares its text with the label. You can customize it to better describe your dropdown
-     *		using the `tooltip` property ({@link module:ui/button/buttonview~ButtonView#tooltip learn more}):
-     *
-     *		```ts
-     *		{
-     *			label: 'Drop-down label',
-     *			tooltip: 'Custom tooltip of the drop-down',
-     *			icon: '...',
-     *			items: [ ... ]
-     *		}
-     *		```
-     *
-     * * **`toolbar.viewportTopOffset` (deprecated)** &ndash; The offset (in pixels) from the top of the viewport used when positioning a
-     *	sticky toolbar.
-     *	Useful when a page with which the editor is being integrated has some other sticky or fixed elements
-     *	(e.g. the top menu). Thanks to setting the toolbar offset the toolbar will not be positioned underneath or above the page's UI.
-     *
-     *	**This property has been deprecated and will be removed in the future versions of CKEditor. Please use
-     *	`{@link module:core/editor/editorconfig~EditorConfig#ui EditorConfig#ui.viewportOffset}` instead.**
-     *
-     * * **`toolbar.shouldNotGroupWhenFull`** &ndash; When set to `true`, the toolbar will stop grouping items
-     *	and let them wrap to the next line if there is not enough space to display them in a single row.
-     */
-    toolbar?: ToolbarConfig;
-    /**
-     * The editor UI configuration.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		ui: { ... }
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * Options which can be set using the UI configuration:
-     *
-     * * **`ui.viewportOffset`** &ndash; The offset (in pixels) of the viewport from every direction. It is
-     * used when positioning a sticky toolbar or other absolutely positioned UI elements.
-     * Useful when a page with which the editor is being integrated has some other sticky or fixed elements
-     * (e.g. the top menu). Thanks to setting the UI viewport offset, the toolbar and other contextual balloons will not be positioned
-     * underneath or above the page's UI.
-     *
-     * 	```ts
-     * 	ui: {
-     * 		viewportOffset: { top: 10, right: 10, bottom: 10, left: 10 }
-     * 	}
-     * 	```
-     *
-     * 	**Note:** If you want to modify the viewport offset in runtime (after the editor was created), you can do that by overriding
-     * 	{@link module:ui/editorui/editorui~EditorUI#viewportOffset `editor.ui.viewportOffset`}.
-     *
-     * * **`ui.poweredBy`** &ndash; The configuration of the project logo displayed over the editor's editing area in
-     *  open-source integrations. It allows customizing the position of the logo to minimize the risk of collision with the
-     *  editor content and UI.
-     *
-     * 	The following configuration properties are supported:
-     *
-     * 	* **`position`** &ndash; The position of the project's logo (default: `'border'`).
-     * 		* When `'inside'`, the logo will be displayed within the boundaries of the editing area.
-     * 		* When `'border'`, the logo will be displayed over the bottom border of the editing area.
-     *
-     * 	* **`side`** (`'left'` or `'right'`, default: `'right'`) &ndash; The side of the editing area where the
-     * 	logo 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.
-     *
-     * 	* **`label`** (default: `'Powered by'`) &ndash; The label displayed next to the project's logo.
-     *
-     * 		**Note**: Set the value to `null` to display the logo without any text.
-     *
-     * 	* **`verticalOffset`** (default: `5`) &ndash; The vertical distance the logo can be moved away from its default position.
-     *
-     * 		**Note**: If `position` is `'border'`, the offset is measured from the (vertical) center of the logo.
-     *
-     * 	* **`horizontalOffset`** (default: `5`) &ndash; The horizontal distance between the side of the editing root and the
-     * 	nearest side of the logo.
-     *
-     * 	```ts
-     * 	ui: {
-     * 		poweredBy: {
-     * 			position: 'border',
-     * 			side: 'left',
-     * 			verticalOffset: 2,
-     * 			horizontalOffset: 30
-     * 		}
-     * 	}
-     */
-    ui?: UiConfig;
-    /**
-     * Enables updating the source element after the editor is destroyed.
-     *
-     * Enabling this option might have some security implications, as the editor doesn't have control over all data
-     * in the output.
-     *
-     * Be careful, especially while using the
-     * {@glink features/markdown Markdown}, {@glink features/html/general-html-support General HTML Support}, or
-     * {@glink features/html/html-embed HTML embed} features.
-     */
-    updateSourceElementOnDestroy?: boolean;
-    /**
-     * The CKEditor 5 license key. If you want to obtain a license key, please do one of the following:
-     *
-     * * Create a free account, and test the premium features with a [14-day free trial](https://portal.ckeditor.com/checkout?plan=free).
-     * * [Contact us](https://ckeditor.com/contact/) for a commercial license.
-     * * If you are using the editor under a GPL license or another license from our Open Source Initiative,
-     *   use the 'GPL' license key instead.
-     */
-    licenseKey?: string;
-    /**
-     * Translations to be used in the editor.
-     */
-    translations?: ArrayOrItem<Translations>;
-    /**
-     * Label which briefly describes the editing area. Used for the `aria-label` attribute set on the editor editing area,
-     * helping assistive technologies to tell apart multiple editor instances (editing areas) on the page. If not set,
-     * a default "Rich Text Editor. Editing area [name of the area]" is used instead.
-     *
-     * It can also be used by other features when referring to this editing area (e.g. AI features).
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		root: {
-     * 			label: 'Article main content'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor
-     * roots names and values equal to the label that should be used for each root:
-     *
-     * ```ts
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		header: {
-     * 			element: document.querySelector( '#header' ),
-     * 			label: 'Article header'
-     * 		},
-     * 		content: {
-     * 			element: document.querySelector( '#content' ),
-     * 			label: 'Article main content'
-     * 		},
-     * 		sideQuote: {
-     * 			element: document.querySelector( '#side-quote' ),
-     * 			label: 'Side-quote'
-     * 		},
-     * 		relatedLinks: {
-     * 			element: document.querySelector( '#related-links' ),
-     * 			label: 'Related links'
-     * 		}
-     * 	}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     *
-     * **This property has been deprecated and will be removed in the future versions of CKEditor. Please use
-     * {@link module:core/editor/editorconfig~EditorConfig#root `config.root.label`} instead.
-     * For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use
-     * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.label`}.**
-     *
-     * @deprecated
-     */
-    label?: string | Record<string, string>;
-    /**
-     * The root configuration for the default `main` root. Use this option to configure the initial data,
-     * placeholder, label, and source element for a single-root editor.
-     *
-     * This is the recommended way to configure a single-root editor:
-     *
-     * ```ts
-     * // Classic editor – uses `attachTo` for the source element.
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		root: {
-     * 			initialData: '<p>Hello world!</p>',
-     * 			placeholder: 'Type some text...'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * ```ts
-     * // Inline editor – uses `root.element` for the source element.
-     * InlineEditor
-     * 	.create( {
-     * 		root: {
-     * 			element: document.querySelector( '#editor' ),
-     * 			initialData: '<p>Hello world!</p>',
-     * 			placeholder: 'Type some text...'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * ```ts
-     * // Balloon editor – uses `root.element` for the source element.
-     * BalloonEditor
-     * 	.create( {
-     * 		root: {
-     * 			element: document.querySelector( '#editor' ),
-     * 			placeholder: 'Type some text...'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * ```ts
-     * // Decoupled editor – uses `root.element` for the source element.
-     * // The toolbar and editable area must be manually added to the DOM.
-     * DecoupledEditor
-     * 	.create( {
-     * 		root: {
-     * 			element: document.querySelector( '#editor' ),
-     * 			initialData: '<p>Hello world!</p>'
-     * 		}
-     * 	} )
-     * 	.then( editor => {
-     * 		document.querySelector( '#toolbar' ).appendChild( editor.ui.view.toolbar.element );
-     * 	} )
-     * 	.catch( ... );
-     * ```
-     *
-     * Internally, this option is an alias for `config.roots.main`. If both `config.root` and `config.roots.main`
-     * are set, an error will be thrown.
-     *
-     * For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use the
-     * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots`} option instead to define
-     * configuration for each root individually.
-     */
-    root?: RootConfig;
-    /**
-     * The root configuration options grouped by the root name. This option is used primarily by the
-     * {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor} to define
-     * configuration for each root individually.
-     *
-     * For a typical single-root editor, use the simpler {@link module:core/editor/editorconfig~EditorConfig#root `config.root`}
-     * option instead.
-     *
-     * ```ts
-     * // Using existing DOM elements as source for each root.
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		header: {
-     * 			element: document.querySelector( '#header' ),
-     * 			placeholder: 'Type header...',
-     * 			label: 'Article header'
-     * 		},
-     * 		content: {
-     * 			element: document.querySelector( '#content' ),
-     * 			placeholder: 'Type content...',
-     * 			label: 'Article main content'
-     * 		}
-     * 	}
-     * } )
-     * .then( editor => {
-     * 	document.querySelector( '#toolbar' ).appendChild( editor.ui.view.toolbar.element );
-     * } )
-     * .catch( ... );
-     * ```
-     *
-     * ```ts
-     * // Creating a detached editor with initial data for each root.
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		header: {
-     * 			initialData: '<h2>Article title</h2>',
-     * 			placeholder: 'Type header...',
-     * 			label: 'Article header'
-     * 		},
-     * 		content: {
-     * 			initialData: '<p>Article body...</p>',
-     * 			placeholder: 'Type content...',
-     * 			label: 'Article main content'
-     * 		}
-     * 	}
-     * } )
-     * .then( editor => {
-     * 	document.querySelector( '#toolbar' ).appendChild( editor.ui.view.toolbar.element );
-     *
-     * 	for ( const rootName of editor.ui.getEditableElementsNames() ) {
-     * 		document.querySelector( '#editables' ).appendChild( editor.ui.view.getEditable( rootName ).element );
-     * 	}
-     * } )
-     * .catch( ... );
-     * ```
-     */
-    roots?: Record<string, RootConfig>;
+	/**
+	* The DOM element that will be the source for the created editor.
+	*
+	* **Note:** This option is only available in the {@link module:editor-classic/classiceditor~ClassicEditor}.
+	* Other editor types expect configuration for the root elements to be passed in the
+	* {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots`} configuration.
+	*
+	* If a DOM element is passed, its content will be automatically loaded to the editor upon initialization
+	* and the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element editor element} will replace the passed element
+	* in the DOM (the original one will be hidden and the editor will be injected next to it).
+	*
+	* If the {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
+	* option is set to `true`, the editor data will be set back to the original element once the editor is destroyed and when a form,
+	* in which this element is contained, is submitted (if the original element is a `<textarea>`). This ensures seamless integration
+	* with native web forms.
+	*
+	* If the element is not provided, a detached editor will be created. In this case you need to insert it into the DOM manually.
+	* It is available under the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element `editor.ui.element`} property.
+	*/
+	attachTo?: HTMLElement;
+	context?: Context;
+	/**
+	* The list of additional plugins to load along those already available in the
+	* editor. It extends the {@link #plugins `plugins`} configuration.
+	*
+	* ```ts
+	* function MyPlugin( editor ) {
+	* 	// ...
+	* }
+	*
+	* const config = {
+	* 	extraPlugins: [ MyPlugin ]
+	* };
+	* ```
+	*
+	* **Note:** This configuration works only for simple plugins which utilize the
+	* {@link module:core/plugin~PluginInterface plugin interface} and have no dependencies. To extend a
+	* build with complex features, try [CKEditr 5 Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs).
+	*
+	* **Note:** Make sure you include the new features in you toolbar configuration. Learn more
+	* about the {@glink getting-started/setup/toolbar toolbar setup}.
+	*/
+	extraPlugins?: Array<PluginConstructor<Editor>>;
+	/**
+	* The initial editor data to be used instead of the provided element's HTML content.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		root: {
+	* 			initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* By default, the editor is initialized with the content of the element on which this editor is initialized.
+	* This configuration option lets you override this behavior and pass different initial data.
+	* It is especially useful if it is difficult for your integration to put the data inside the HTML element.
+	*
+	* If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor
+	* roots names and values equal to the data that should be set in each root:
+	*
+	* ```ts
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			element: document.querySelector( '#header' ),
+	* 			initialData: '<p>Content for header part.</p>'
+	* 		},
+	* 		content: {
+	* 			element: document.querySelector( '#content' ),
+	* 			initialData: '<p>Content for main part.</p>'
+	* 		},
+	* 		leftSide: {
+	* 			element: document.querySelector( '#left-side' ),
+	* 			initialData: '<p>Content for left-side box.</p>'
+	* 		},
+	* 		rightSide: {
+	* 			element: document.querySelector( '#right-side' ),
+	* 			initialData: '<p>Content for right-side box.</p>'
+	* 		}
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*
+	* See also {@link module:core/editor/editor~Editor.create Editor.create()} documentation for the editor implementation which you use.
+	*
+	* **Note:** If `config.initialData` is set together with `config.root.initialData` or `config.roots.<rootName>.initialData`,
+	* an error will be thrown as those options exclude themselves.
+	*
+	* If `config.initialData` is not set when the editor is initialized, the data received in `Editor.create()` call
+	* will be used to set `config.initialData`. As a result, `initialData` is always set in the editor's config and
+	* plugins can read and/or modify it during initialization.
+	*
+	* **This property has been deprecated and will be removed in the future versions of CKEditor. Please use
+	* {@link module:core/editor/editorconfig~EditorConfig#root `config.root.initialData`} instead.
+	* For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use
+	* {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.initialData`}.**
+	*
+	* @deprecated
+	*/
+	initialData?: string | Record<string, string>;
+	/**
+	* The language of the editor UI and its content.
+	*
+	* Simple usage (change the language of the UI and the content):
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		// The UI of the editor as well as its content will be in German.
+	* 		language: 'de'
+	* 	} )
+	* 	.then( editor => {
+	* 		console.log( editor );
+	* 	} )
+	* 	.catch( error => {
+	* 		console.error( error );
+	* 	} );
+	* ```
+	*
+	* Use different languages for the UI and the content using the {@link module:core/editor/editorconfig~LanguageConfig configuration}
+	* syntax:
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		language: {
+	* 			// The UI will be in English.
+	* 			ui: 'en',
+	*
+	* 			// But the content will be edited in Arabic.
+	* 			content: 'ar'
+	* 		}
+	* 	} )
+	* 	.then( editor => {
+	* 		console.log( editor );
+	* 	} )
+	* 	.catch( error => {
+	* 		console.error( error );
+	* 	} );
+	* ```
+	*
+	* The language of the content has an impact on the editing experience, for instance it affects screen readers
+	* and spell checkers. It is also particularly useful for typing in certain languages (e.g. right–to–left ones)
+	* because it changes the default alignment of the text.
+	*
+	* The language codes are defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.
+	*
+	* You need to add the corresponding translation file for the new UI language to work.
+	* Translation files are available on CDN:
+	*
+	* ```html
+	* <script type="importmap">
+	* {
+	*   "imports": {
+	*     "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/<VERSION>/ckeditor5.js",
+	*     "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/<VERSION>/"
+	*   }
+	* }
+	* <\/script>
+	* <script type="module">
+	* import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
+	* import { translations } from 'ckeditor5/dist/translations/pl.js';
+	*
+	* await ClassicEditor.create( {
+	*   attachTo: document.querySelector( '#editor' ),
+	*   plugins: [
+	*     Essentials,
+	*     Paragraph,
+	*   ],
+	*   toolbar: {
+	*     items: [ 'undo', 'redo' ]
+	*   },
+	*   translations
+	* } );
+	* <\/script>
+	* ```
+	*
+	* You can add translation using NPM as well.
+	*
+	* ```html
+	* import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
+	* import { translations } from 'ckeditor5/dist/translations/pl.js';
+	*
+	* import 'ckeditor5/dist/styles.css';
+	*
+	* await ClassicEditor.create( {
+	*   attachTo: document.querySelector( '#editor' ),
+	*   plugins: [
+	*     Essentials,
+	*     Paragraph,
+	*   ],
+	*   toolbar: {
+	*     items: [ 'undo', 'redo' ]
+	*   },
+	*   translations
+	* } );
+	* ```
+	*
+	* Check the {@glink getting-started/setup/ui-language UI language} guide for more information about
+	* the localization options and translation process.
+	*/
+	language?: string | LanguageConfig;
+	/**
+	* The editor menu bar configuration.
+	*
+	* **Note**: The menu bar is not available in all editor types. Currently, only the
+	* {@link module:editor-classic/classiceditor~ClassicEditor Classic editor} and
+	* {@link module:editor-decoupled/decouplededitor~DecoupledEditor Decoupled editor}
+	* support this feature. Setting the `config.menuBar` configuration for other editor types will have no effect.
+	*
+	* In Classic editor, the menu bar is hidden by default. Set the `isVisible` configuration flag to `true` in order to show it:
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		menuBar: {
+	* 			isVisible: true
+	* 		}
+	* 	} )
+	* 	.then( ... );
+	* ```
+	*
+	* When using the Decoupled editor, you will need to insert the menu bar in a desired place yourself. For example:
+	*
+	* ```ts
+	* DecoupledEditor
+	* 	.create( {
+	* 		root: { element: document.querySelector( '#editor' ) },
+	* 		toolbar: [ 'undo', 'redo', 'bold', 'italic', 'numberedList', 'bulletedList' ],
+	* 	} )
+	*  .then( editor => {
+	* 		document.getElementById( '#menuBarContainer' ).appendChild( editor.ui.view.menuBarView.element );
+	* 	} );
+	* ```
+	*
+	* **Note**: You do not have to set the `items` property in this configuration in order to use the menu bar.
+	* By default, a {@link module:ui/menubar/utils#DefaultMenuBarItems default set of items} is used that already includes
+	* **all core editor features**. For your convenience, there are `config.menuBar.addItems` and
+	* `config.menuBar.removeItems` options available that will help you adjust the default configuration without setting the
+	* entire menu bar structure from scratch (see below).
+	*
+	* **Removing items from the menu bar**
+	*
+	* You can use the `config.menuBar.removeItems` option to remove items from the default menu bar configuration. You can
+	* remove individual buttons (e.g. "Bold" or "Block quote"), item groups (e.g. the basic styles section that
+	* includes multiple buttons such as "Bold", "Italic", "Underline", etc.), or whole menus (e.g. the "Insert" menu). Please
+	* refer to the {@link module:ui/menubar/utils#DefaultMenuBarItems default configuration} to see default buttons/groups/menus
+	* and their structure.
+	*
+	* To remove individual buttons from the menu bar:
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		menuBar: {
+	* 			// Removes "Bold" and "Block quote" buttons from their respective menus.
+	* 			removeItems: [ 'menuBar:bold', 'menuBar:blockQuote' ]
+	* 		}
+	* 	} )
+	* 	.then( ... );
+	* ```
+	*
+	* To remove a group of buttons from the menu bar:
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		menuBar: {
+	* 			// Removes the entire basic styles group ("Bold", "Italic", "Underline", etc.) from the "Format" menu.
+	* 			removeItems: [ 'basicStyles' ]
+	* 		}
+	* 	} )
+	* 	.then( ... );
+	* ```
+	*
+	* To remove a menu from the menu bar:
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		menuBar: {
+	* 			// Removes the whole top-level "Insert" menu from the menu bar.
+	* 			removeItems: [ 'insert' ]
+	* 		}
+	* 	} )
+	* 	.then( ... );
+	* ```
+	*
+	* **Adding items to the menu bar**
+	*
+	* Using the `config.menuBar.addItems` option you can add individual buttons, button groups or entire menus to the structure
+	* of the menu bar. You can add existing components that you removed from their original position, or add your own components.
+	*
+	* **Note**: When adding items please make sure that features (editor plugins) that bring specific menu bar items are loaded.
+	* For instance, the "Bold" button will not show up in the menu bar unless the {@glink features/basic-styles basic styles} feature is
+	* loaded. {@link module:core/editor/editorconfig~EditorConfig#plugins Learn more} about loading plugins.
+	*
+	* Each entry in the `config.menuBar.addItems` is an object with one of the following properties:
+	*
+	* * `item` &ndash; A name of the button to be added to a specific button group (e.g. `'menuBar:bold'` or `'myButton'`),
+	* * `menu` &ndash; A {@link module:ui/menubar/menubarview#MenuBarMenuDefinition definition of a menu} that should be added to
+	* the menu bar,
+	* * `group` &ndash; A {@link module:ui/menubar/menubarview#MenuBarMenuGroupDefinition definition of a button group} that should be
+	* added to a specific menu.
+	*
+	* Additionally, each entry must define the `position` property that accepts the following values:
+	* * `'start'` &ndash; Adds a top-level menu (e.g. "Format", "Insert", etc.) at the beginning of the menu bar,
+	* * `'start:GROUP_OR_MENU'` &ndash; Adds a button/group at the beginning of the specific group/menu,
+	* * `'end'` &ndash; Adds a top-level menu (e.g. "Format", "Insert", etc.) at the end of the menu bar,
+	* * `'end:GROUP_OR_MENU'` &ndash; Adds a button/group at the end of the specific group/menu,
+	* * `'after:BUTTON_OR_GROUP_OR_MENU'` &ndash; Adds a button/group/menu right after the specific button/group/menu,
+	* * `'before:BUTTON_OR_GROUP_OR_MENU'` &ndash; Adds a button/group/menu right after the specific button/group/menu.
+	*
+	* Please refer to the {@link module:ui/menubar/utils#DefaultMenuBarItems default configuration} to learn about the
+	* names of buttons and positions they can be added at.
+	*
+	* To add a new top-level menu with specific buttons at the end of the menu bar:
+	*
+	* ```ts
+	*  ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		menuBar: {
+	*  		addItems: [
+	* 				{
+	* 					menu: {
+	* 						menuId: 'my-menu',
+	* 						label: 'My menu',
+	* 						groups: [
+	* 							{
+	* 								groupId: 'my-buttons',
+	* 								items: [
+	* 									'menuBar:bold',
+	* 									'menuBar:italic',
+	* 									'menuBar:underline'
+	* 								]
+	* 							}
+	* 						]
+	* 					},
+	* 					position: 'end'
+	* 				}
+	* 			]
+	* 		}
+	* 	} )
+	* 	.then( ... );
+	* ```
+	*
+	* To add a new group of buttons to the "Format" menu after basic styles buttons ("Bold", "Italic", "Underline", etc.):
+	*
+	* ```ts
+	*  ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		menuBar: {
+	*  		addItems: [
+	* 				{
+	* 					group: {
+	* 						groupId: 'my-buttons',
+	* 						items: [
+	* 							'myButton1',
+	* 							'myButton2',
+	* 						]
+	* 					},
+	* 					position: 'after:basicStyles'
+	* 				}
+	* 			]
+	* 		}
+	* 	} )
+	* 	.then( ... );
+	* ```
+	*
+	* To add a new button to the basic styles group ("Bold", "Italic", "Underline", etc.) in the "Format" menu:
+	*
+	* ```ts
+	*  ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		menuBar: {
+	*  		addItems: [
+	* 				{
+	* 					item: 'myButton',
+	* 					position: 'end:basicStyles'
+	* 				}
+	* 			]
+	* 		}
+	* 	} )
+	* 	.then( ... );
+	* ```
+	*
+	* To add a new sub-menu in the "Format" menu:
+	*
+	* ```ts
+	*  ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		menuBar: {
+	*  		addItems: [
+	* 				{
+	* 					menu: {
+	* 						menuId: 'my-sub-menu',
+	* 						label: 'My sub-menu',
+	* 						groups: [
+	* 							{
+	* 								groupId: 'my-buttons',
+	* 								items: [
+	* 									'myButton1',
+	* 									'myButton2',
+	* 								]
+	* 							}
+	* 						]
+	* 					},
+	* 					position: 'after:basicStyles'
+	* 				}
+	* 			]
+	* 		}
+	* 	} )
+	* 	.then( ... );
+	* ```
+	*
+	* **Defining menu bar from scratch**
+	*
+	* If the `config.menuBar.addItems` and `config.menuBar.removeItems` options are not enough to adjust the
+	* {@link module:ui/menubar/utils#DefaultMenuBarItems default configuration}, you can set the menu bar structure from scratch.
+	*
+	* For instance, to create a minimalistic menu bar configuration with just two main categories (menus), use the following code snippet:
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		menuBar: {
+	* 			items: [
+	* 				{
+	* 					menuId: 'formatting',
+	* 					label: 'Formatting',
+	* 					groups: [
+	* 						{
+	* 							groupId: 'basicStyles',
+	* 							items: [
+	* 								'menuBar:bold',
+	* 								'menuBar:italic',
+	* 							]
+	* 						},
+	* 						{
+	* 							groupId: 'misc',
+	* 							items: [
+	* 								'menuBar:heading',
+	* 								'menuBar:bulletedList',
+	* 								'menuBar:numberedList'
+	* 							]
+	* 						}
+	* 					]
+	* 				},
+	* 				{
+	* 					menuId: 'myButtons',
+	* 					label: 'My actions',
+	* 					groups: [
+	* 						{
+	* 							groupId: 'undo',
+	* 							items: [
+	* 								'myButton1',
+	* 								'myButton2'
+	* 							]
+	* 						}
+	* 					]
+	* 				}
+	* 			]
+	* 		}
+	* 	} )
+	* 	.then( ... );
+	* ```
+	*/
+	menuBar?: MenuBarConfig;
+	/**
+	* Specifies the text displayed in the editor when there is no content (editor is empty). It is intended to
+	* help users locate the editor in the application (form) and prompt them to input the content. Work similarly
+	* as to the native DOM
+	* [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute)
+	* used by inputs.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		root: {
+	* 			placeholder: 'Type some text...'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor
+	* roots names and values equal to the placeholder that should be set in each root:
+	*
+	* ```ts
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			element: document.querySelector( '#header' ),
+	* 			placeholder: 'Type header...'
+	* 		},
+	* 		content: {
+	* 			element: document.querySelector( '#content' ),
+	* 			placeholder: 'Type content...'
+	* 		},
+	* 		leftSide: {
+	* 			element: document.querySelector( '#left-side' ),
+	* 			placeholder: 'Type left-side...'
+	* 		},
+	* 		rightSide: {
+	* 			element: document.querySelector( '#right-side' ),
+	* 			placeholder: 'Type right-side...'
+	* 		}
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*
+	* The placeholder text is displayed as a pseudo–element of an empty paragraph in the editor content.
+	* The paragraph has the `.ck-placeholder` CSS class and the `data-placeholder` attribute.
+	*
+	* ```html
+	* <p data-placeholder="Type some text..." class="ck-placeholder">
+	* 	::before
+	* </p>
+	* ```
+	*
+	* **Note**: Placeholder text can also be set using the `placeholder` attribute if a `<textarea>` is passed to
+	* the `create()` method, e.g. {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
+	*
+	* **Note**: This configuration has precedence over the value of the `placeholder` attribute of a `<textarea>`
+	* element passed to the `create()` method.
+	*
+	* See the {@glink features/editor-placeholder "Editor placeholder"} guide for more information and live examples.
+	*
+	* **This property has been deprecated and will be removed in the future versions of CKEditor. Please use
+	* {@link module:core/editor/editorconfig~EditorConfig#root `config.root.placeholder`} instead.
+	* For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use
+	* {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.placeholder`}.**
+	*
+	* @deprecated
+	*/
+	placeholder?: string | Record<string, string>;
+	/**
+	* The list of plugins to load.
+	*
+	* ```ts
+	* import {
+	* // A preset of plugins is a plugin as well.
+	* 	Essentials,
+	* // The bold plugin.
+	* 	Bold
+	* } from 'ckeditor5';
+	*
+	* const config = {
+	* 	plugins: [ Essentials, Bold ]
+	* };
+	* ```
+	*
+	* **Note:** To load additional plugins, you should use the {@link #extraPlugins `extraPlugins`} configuration.
+	* To narrow the list of loaded plugins, use the {@link #removePlugins `removePlugins`} configuration.
+	*/
+	plugins?: Array<PluginConstructor<Editor> | string>;
+	/**
+	* The list of plugins which should not be loaded despite being available in
+	* the editor.
+	*
+	* ```ts
+	* const config = {
+	* 	removePlugins: [ 'Bold', 'Italic' ]
+	* };
+	* ```
+	*
+	* **Note:** Be careful when removing plugins using `config.removePlugins`.
+	* If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build
+	* will become invalid. In such case you need to provide the updated
+	* {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar configuration}.
+	*/
+	removePlugins?: Array<PluginConstructor<Editor> | string>;
+	substitutePlugins?: Array<PluginConstructor<Editor>>;
+	/**
+	* The editor toolbar configuration.
+	*
+	* Simple format (specifies only toolbar items):
+	*
+	* ```ts
+	* const config = {
+	* 	toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
+	* };
+	* ```
+	*
+	* Extended format:
+	*
+	* ```ts
+	* const config = {
+	* 	toolbar: {
+	* 		items: [ 'bold', 'italic', '|', 'undo', 'redo', '-', 'numberedList', 'bulletedList' ],
+	*
+	* 		shouldNotGroupWhenFull: true
+	* 	}
+	* };
+	* ```
+	*
+	* Options which can be set using the extended format:
+	*
+	* * **`toolbar.items`** &ndash; An array of toolbar item names. The components (buttons, dropdowns, etc.) which can be used
+	*	as toolbar items are defined in `editor.ui.componentFactory` and can be listed using the following snippet:
+	*
+	*	```ts
+	*	Array.from( editor.ui.componentFactory.names() );
+	*	```
+	*
+	*	You can also use `'|'` to create a separator between groups of items:
+	*
+	*	```
+	*	toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
+	*	```
+	*
+	* or `'-'` to make a line break and render items in multiple lines:
+	*
+	*	```
+	*	toolbar: [ 'bold', 'italic', '-', 'undo', 'redo' ]
+	*	```
+	*
+	*	Line break will work only in the extended format when `shouldNotGroupWhenFull` option is set to `true`.
+	*
+	*	**Note**: To save space in your toolbar, you can group several items into a dropdown:
+	*
+	*	```
+	*	toolbar: [
+	*		{
+	*			label: 'Basic styles',
+	*			icon: 'text',
+	*			items: [ 'bold', 'italic', ... ]
+	*		},
+	*		'|',
+	*		'undo', 'redo'
+	*	]
+	*	```
+	*
+	*	The code above will create a "Basic styles" dropdown with a "text" icon containing the "bold" and "italic" buttons.
+	*	You can customize the look of the dropdown by setting the `withText`, `icon`, and `tooltip` properties:
+	*
+	*	* **Displaying a label**
+	*
+	*		For instance, to hide the icon and to display the label only, you can use the following configuration:
+	*
+	*		```ts
+	*		{
+	*			label: 'Basic styles',
+	*			// Show the textual label of the drop-down. Note that the "icon" property is not configured.
+	*			withText: true,
+	*			items: [ 'bold', 'italic', ... ]
+	*		}
+	*		```
+	*
+	*	* **Selecting an icon**
+	*
+	*		You can use one of the common icons provided by the editor (`'bold'`, `'plus'`, `'text'`, `'importExport'`, `'alignLeft'`,
+	*		`'paragraph'`, `'threeVerticalDots'`, `'dragIndicator'`, `'pilcrow'`):
+	*
+	*		```ts
+	*		{
+	*			label: '...',
+	*			// A "plus" sign icon works best for content insertion tools.
+	*			icon: 'plus',
+	*			items: [ ... ]
+	*		}
+	*		```
+	*
+	*		If no icon is specified, `'threeVerticalDots'` will be used as a default:
+	*
+	*		```ts
+	*		// No icon specified, using a default one.
+	*		{
+	*			label: 'Default icon',
+	*			items: [ ... ]
+	*		}
+	*		```
+	*
+	*		If `icon: false` is configured, no icon will be displayed at all and the text label will show up instead:
+	*
+	*		```ts
+	*		// This drop-down has no icon. The text label will be displayed instead.
+	*		{
+	*			label: 'No icon',
+	*			icon: false,
+	*			items: [ ... ]
+	*		}
+	*		```
+	*
+	*		You can also set a custom icon for the drop-down by passing an SVG string:
+	*
+	*		```ts
+	*		{
+	*			label: '...',
+	*			// If you want your icon to change the color dynamically (e.g. when the dropdown opens), avoid fill="..."
+	*			// and stroke="..." styling attributes. Use solid shapes and avoid paths with strokes.
+	*			icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">...</svg>',
+	*			items: [ ... ]
+	*		}
+	*		```
+	*
+	*	* **Customizing the tooltip**
+	*
+	*		By default, the tooltip of the button shares its text with the label. You can customize it to better describe your dropdown
+	*		using the `tooltip` property ({@link module:ui/button/buttonview~ButtonView#tooltip learn more}):
+	*
+	*		```ts
+	*		{
+	*			label: 'Drop-down label',
+	*			tooltip: 'Custom tooltip of the drop-down',
+	*			icon: '...',
+	*			items: [ ... ]
+	*		}
+	*		```
+	*
+	* * **`toolbar.viewportTopOffset` (deprecated)** &ndash; The offset (in pixels) from the top of the viewport used when positioning a
+	*	sticky toolbar.
+	*	Useful when a page with which the editor is being integrated has some other sticky or fixed elements
+	*	(e.g. the top menu). Thanks to setting the toolbar offset the toolbar will not be positioned underneath or above the page's UI.
+	*
+	*	**This property has been deprecated and will be removed in the future versions of CKEditor. Please use
+	*	`{@link module:core/editor/editorconfig~EditorConfig#ui EditorConfig#ui.viewportOffset}` instead.**
+	*
+	* * **`toolbar.shouldNotGroupWhenFull`** &ndash; When set to `true`, the toolbar will stop grouping items
+	*	and let them wrap to the next line if there is not enough space to display them in a single row.
+	*/
+	toolbar?: ToolbarConfig;
+	/**
+	* The editor UI configuration.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		ui: { ... }
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* Options which can be set using the UI configuration:
+	*
+	* * **`ui.viewportOffset`** &ndash; The offset (in pixels) of the viewport from every direction. It is
+	* used when positioning a sticky toolbar or other absolutely positioned UI elements.
+	* Useful when a page with which the editor is being integrated has some other sticky or fixed elements
+	* (e.g. the top menu). Thanks to setting the UI viewport offset, the toolbar and other contextual balloons will not be positioned
+	* underneath or above the page's UI.
+	*
+	* 	```ts
+	* 	ui: {
+	* 		viewportOffset: { top: 10, right: 10, bottom: 10, left: 10 }
+	* 	}
+	* 	```
+	*
+	* 	**Note:** If you want to modify the viewport offset in runtime (after the editor was created), you can do that by overriding
+	* 	{@link module:ui/editorui/editorui~EditorUI#viewportOffset `editor.ui.viewportOffset`}.
+	*
+	* * **`ui.poweredBy`** &ndash; The configuration of the project logo displayed over the editor's editing area in
+	*  open-source integrations. It allows customizing the position of the logo to minimize the risk of collision with the
+	*  editor content and UI.
+	*
+	* 	The following configuration properties are supported:
+	*
+	* 	* **`position`** &ndash; The position of the project's logo (default: `'border'`).
+	* 		* When `'inside'`, the logo will be displayed within the boundaries of the editing area.
+	* 		* When `'border'`, the logo will be displayed over the bottom border of the editing area.
+	*
+	* 	* **`side`** (`'left'` or `'right'`, default: `'right'`) &ndash; The side of the editing area where the
+	* 	logo 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.
+	*
+	* 	* **`label`** (default: `'Powered by'`) &ndash; The label displayed next to the project's logo.
+	*
+	* 		**Note**: Set the value to `null` to display the logo without any text.
+	*
+	* 	* **`verticalOffset`** (default: `5`) &ndash; The vertical distance the logo can be moved away from its default position.
+	*
+	* 		**Note**: If `position` is `'border'`, the offset is measured from the (vertical) center of the logo.
+	*
+	* 	* **`horizontalOffset`** (default: `5`) &ndash; The horizontal distance between the side of the editing root and the
+	* 	nearest side of the logo.
+	*
+	* 	```ts
+	* 	ui: {
+	* 		poweredBy: {
+	* 			position: 'border',
+	* 			side: 'left',
+	* 			verticalOffset: 2,
+	* 			horizontalOffset: 30
+	* 		}
+	* 	}
+	*/
+	ui?: UiConfig;
+	/**
+	* Enables updating the source element after the editor is destroyed.
+	*
+	* Enabling this option might have some security implications, as the editor doesn't have control over all data
+	* in the output.
+	*
+	* Be careful, especially while using the
+	* {@glink features/markdown Markdown}, {@glink features/html/general-html-support General HTML Support}, or
+	* {@glink features/html/html-embed HTML embed} features.
+	*/
+	updateSourceElementOnDestroy?: boolean;
+	/**
+	* The CKEditor 5 license key. If you want to obtain a license key, please do one of the following:
+	*
+	* * Create a free account, and test the premium features with a [14-day free trial](https://portal.ckeditor.com/checkout?plan=free).
+	* * [Contact us](https://ckeditor.com/contact/) for a commercial license.
+	* * If you are using the editor under a GPL license or another license from our Open Source Initiative,
+	*   use the 'GPL' license key instead.
+	*/
+	licenseKey?: string;
+	/**
+	* Translations to be used in the editor.
+	*/
+	translations?: ArrayOrItem<Translations>;
+	/**
+	* Label which briefly describes the editing area. Used for the `aria-label` attribute set on the editor editing area,
+	* helping assistive technologies to tell apart multiple editor instances (editing areas) on the page. If not set,
+	* a default "Rich Text Editor. Editing area [name of the area]" is used instead.
+	*
+	* It can also be used by other features when referring to this editing area (e.g. AI features).
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		root: {
+	* 			label: 'Article main content'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* If your editor implementation uses multiple roots, you should pass an object with keys corresponding to the editor
+	* roots names and values equal to the label that should be used for each root:
+	*
+	* ```ts
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			element: document.querySelector( '#header' ),
+	* 			label: 'Article header'
+	* 		},
+	* 		content: {
+	* 			element: document.querySelector( '#content' ),
+	* 			label: 'Article main content'
+	* 		},
+	* 		sideQuote: {
+	* 			element: document.querySelector( '#side-quote' ),
+	* 			label: 'Side-quote'
+	* 		},
+	* 		relatedLinks: {
+	* 			element: document.querySelector( '#related-links' ),
+	* 			label: 'Related links'
+	* 		}
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*
+	* **This property has been deprecated and will be removed in the future versions of CKEditor. Please use
+	* {@link module:core/editor/editorconfig~EditorConfig#root `config.root.label`} instead.
+	* For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use
+	* {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.label`}.**
+	*
+	* @deprecated
+	*/
+	label?: string | Record<string, string>;
+	/**
+	* The root configuration for the default `main` root. Use this option to configure the initial data,
+	* placeholder, label, and source element for a single-root editor.
+	*
+	* This is the recommended way to configure a single-root editor:
+	*
+	* ```ts
+	* // Classic editor – uses `attachTo` for the source element.
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		root: {
+	* 			initialData: '<p>Hello world!</p>',
+	* 			placeholder: 'Type some text...'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* ```ts
+	* // Inline editor – uses `root.element` for the source element.
+	* InlineEditor
+	* 	.create( {
+	* 		root: {
+	* 			element: document.querySelector( '#editor' ),
+	* 			initialData: '<p>Hello world!</p>',
+	* 			placeholder: 'Type some text...'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* ```ts
+	* // Balloon editor – uses `root.element` for the source element.
+	* BalloonEditor
+	* 	.create( {
+	* 		root: {
+	* 			element: document.querySelector( '#editor' ),
+	* 			placeholder: 'Type some text...'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* ```ts
+	* // Decoupled editor – uses `root.element` for the source element.
+	* // The toolbar and editable area must be manually added to the DOM.
+	* DecoupledEditor
+	* 	.create( {
+	* 		root: {
+	* 			element: document.querySelector( '#editor' ),
+	* 			initialData: '<p>Hello world!</p>'
+	* 		}
+	* 	} )
+	* 	.then( editor => {
+	* 		document.querySelector( '#toolbar' ).appendChild( editor.ui.view.toolbar.element );
+	* 	} )
+	* 	.catch( ... );
+	* ```
+	*
+	* Internally, this option is an alias for `config.roots.main`. If both `config.root` and `config.roots.main`
+	* are set, an error will be thrown.
+	*
+	* For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use the
+	* {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots`} option instead to define
+	* configuration for each root individually.
+	*/
+	root?: RootConfig;
+	/**
+	* The root configuration options grouped by the root name. This option is used primarily by the
+	* {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor} to define
+	* configuration for each root individually.
+	*
+	* For a typical single-root editor, use the simpler {@link module:core/editor/editorconfig~EditorConfig#root `config.root`}
+	* option instead.
+	*
+	* ```ts
+	* // Using existing DOM elements as source for each root.
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			element: document.querySelector( '#header' ),
+	* 			placeholder: 'Type header...',
+	* 			label: 'Article header'
+	* 		},
+	* 		content: {
+	* 			element: document.querySelector( '#content' ),
+	* 			placeholder: 'Type content...',
+	* 			label: 'Article main content'
+	* 		}
+	* 	}
+	* } )
+	* .then( editor => {
+	* 	document.querySelector( '#toolbar' ).appendChild( editor.ui.view.toolbar.element );
+	* } )
+	* .catch( ... );
+	* ```
+	*
+	* ```ts
+	* // Creating a detached editor with initial data for each root.
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			initialData: '<h2>Article title</h2>',
+	* 			placeholder: 'Type header...',
+	* 			label: 'Article header'
+	* 		},
+	* 		content: {
+	* 			initialData: '<p>Article body...</p>',
+	* 			placeholder: 'Type content...',
+	* 			label: 'Article main content'
+	* 		}
+	* 	}
+	* } )
+	* .then( editor => {
+	* 	document.querySelector( '#toolbar' ).appendChild( editor.ui.view.toolbar.element );
+	*
+	* 	for ( const rootName of editor.ui.getEditableElementsNames() ) {
+	* 		document.querySelector( '#editables' ).appendChild( editor.ui.view.getEditable( rootName ).element );
+	* 	}
+	* } )
+	* .catch( ... );
+	* ```
+	*/
+	roots?: Record<string, RootConfig>;
 }
 /**
- * Configuration for an editor root. It is used in {@link module:core/editor/editorconfig~EditorConfig#root `EditorConfig#root`} and
- * {@link module:core/editor/editorconfig~EditorConfig#roots `EditorConfig#roots.<rootName>`}.
- *
- * For a typical single-root editor (Classic, Inline, Balloon, Decoupled), use
- * {@link module:core/editor/editorconfig~EditorConfig#root `config.root`} to set the root configuration.
- * For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use
- * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots`} to define configuration for each root.
- *
- * ```ts
- * // Classic editor – the source element is set via `config.attachTo`.
- * ClassicEditor.create( {
- * 	attachTo: document.querySelector( '#editor' ),
- * 	root: {
- * 		initialData: '<p>Hello world!</p>',
- * 		placeholder: 'Type some text...',
- * 		label: 'Article main content'
- * 	}
- * } );
- * ```
- *
- * ```ts
- * // Inline editor – the source element is set via `root.element`.
- * InlineEditor.create( {
- * 	root: {
- * 		element: document.querySelector( '#editor' ),
- * 		initialData: '<p>Hello world!</p>',
- * 		placeholder: 'Type some text...',
- * 		label: 'Article main content'
- * 	}
- * } );
- * ```
- *
- * ```ts
- * // Multi-root editor – each root is configured separately via `config.roots`.
- * MultiRootEditor.create( {
- * 	roots: {
- * 		header: {
- * 			element: document.querySelector( '#header' ),
- * 			placeholder: 'Type header...',
- * 			label: 'Article header'
- * 		},
- * 		content: {
- * 			element: document.querySelector( '#content' ),
- * 			placeholder: 'Type content...',
- * 			label: 'Article main content'
- * 		}
- * 	}
- * } );
- * ```
- */
+* Configuration for an editor root. It is used in {@link module:core/editor/editorconfig~EditorConfig#root `EditorConfig#root`} and
+* {@link module:core/editor/editorconfig~EditorConfig#roots `EditorConfig#roots.<rootName>`}.
+*
+* For a typical single-root editor (Classic, Inline, Balloon, Decoupled), use
+* {@link module:core/editor/editorconfig~EditorConfig#root `config.root`} to set the root configuration.
+* For the {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root editor}, use
+* {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots`} to define configuration for each root.
+*
+* ```ts
+* // Classic editor – the source element is set via `config.attachTo`.
+* ClassicEditor.create( {
+* 	attachTo: document.querySelector( '#editor' ),
+* 	root: {
+* 		initialData: '<p>Hello world!</p>',
+* 		placeholder: 'Type some text...',
+* 		label: 'Article main content'
+* 	}
+* } );
+* ```
+*
+* ```ts
+* // Inline editor – the source element is set via `root.element`.
+* InlineEditor.create( {
+* 	root: {
+* 		element: document.querySelector( '#editor' ),
+* 		initialData: '<p>Hello world!</p>',
+* 		placeholder: 'Type some text...',
+* 		label: 'Article main content'
+* 	}
+* } );
+* ```
+*
+* ```ts
+* // Multi-root editor – each root is configured separately via `config.roots`.
+* MultiRootEditor.create( {
+* 	roots: {
+* 		header: {
+* 			element: document.querySelector( '#header' ),
+* 			placeholder: 'Type header...',
+* 			label: 'Article header'
+* 		},
+* 		content: {
+* 			element: document.querySelector( '#content' ),
+* 			placeholder: 'Type content...',
+* 			label: 'Article main content'
+* 		}
+* 	}
+* } );
+* ```
+*/
 export interface RootConfig {
-    /**
-     * The DOM element to use as the editor's editable root, or a description of one to create.
-     *
-     * Accepted forms:
-     *
-     * * An existing DOM element.
-     *
-     *   Its content is automatically loaded to the editor upon initialization (but only when
-     *   {@link #initialData `initialData`} is not set).
-     *
-     *   The editor data will be set back to the original element once the editor is destroyed only if the
-     *   {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
-     *   option is set to `true`.
-     *
-     *   Not accepted by {@link module:editor-classic/classiceditor~ClassicEditor} - use
-     *   {@link module:core/editor/editorconfig~EditorConfig#attachTo `config.attachTo`} instead.
-     *
-     * * A tag name string, e.g. `'h1'`. The editor creates a fresh element with that tag and uses it as the editable.
-     *
-     * * A {@link ~ViewRootElementDefinition} object. The editor creates a fresh element matching the definition and
-     * uses it as the editable.
-     *
-     * ```ts
-     * // Tag name string.
-     * BalloonEditor.create( {
-     * 	root: {
-     * 		element: 'h1'
-     * 	}
-     * } );
-     *
-     * // Element definition.
-     * BalloonEditor.create( {
-     * 	root: {
-     * 		element: {
-     * 			name: 'h1',
-     * 			classes: [ 'article-title' ],
-     * 			styles: { 'font-weight': 'bold' },
-     * 			attributes: { 'data-id': '123' }
-     * 		}
-     * 	}
-     * } );
-     * ```
-     *
-     * Unless an existing DOM element is provided, a detached editor will be created. In this case you need to insert
-     * it into the DOM manually.
-     */
-    element?: HTMLElement | string | ViewRootElementDefinition;
-    /**
-     * The initial editor data to be used instead of the HTML content of the
-     * {@link module:core/editor/editorconfig~RootConfig#element source element}.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		root: {
-     * 			initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * By default, the editor is initialized with the content of the source element on which this editor root is initialized.
-     * This configuration option lets you override this behavior and pass different initial data.
-     * It is especially useful if it is difficult for your integration to put the data inside the HTML element.
-     *
-     * If your editor implementation uses multiple roots, you should provide config for roots individually:
-     *
-     * ```ts
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		header: {
-     * 			element: document.querySelector( '#header' ),
-     * 			initialData: '<p>Content for header part.</p>'
-     * 		},
-     * 		content: {
-     * 			element: document.querySelector( '#content' ),
-     * 			initialData: '<p>Content for main part.</p>'
-     * 		},
-     * 		leftSide: {
-     * 			element: document.querySelector( '#left-side' ),
-     * 			initialData: '<p>Content for left-side box.</p>'
-     * 		},
-     * 		rightSide: {
-     * 			element: document.querySelector( '#right-side' ),
-     * 			initialData: '<p>Content for right-side box.</p>'
-     * 		}
-     * 	}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     *
-     * See also {@link module:core/editor/editor~Editor.create Editor.create()} documentation for the editor implementation which you use.
-     */
-    initialData?: string;
-    /**
-     * Specifies the text displayed in the editor when there is no content (editor is empty). It is intended to
-     * help users locate the editor in the application (form) and prompt them to input the content. Works similarly
-     * to the native DOM
-     * [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute)
-     * used by inputs.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		root: {
-     * 			placeholder: 'Type some text...'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * If your editor implementation uses multiple roots, you should provide config for roots individually:
-     *
-     * ```ts
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		header: {
-     * 			element: document.querySelector( '#header' ),
-     * 			placeholder: 'Type header...'
-     * 		},
-     * 		content: {
-     * 			element: document.querySelector( '#content' ),
-     * 			placeholder: 'Type content...'
-     * 		},
-     * 		leftSide: {
-     * 			element: document.querySelector( '#left-side' ),
-     * 			placeholder: 'Type left-side...'
-     * 		},
-     * 		rightSide: {
-     * 			element: document.querySelector( '#right-side' ),
-     * 			placeholder: 'Type right-side...'
-     * 		}
-     * 	}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     *
-     * The placeholder text is displayed as a pseudo–element of an empty paragraph in the editor content.
-     * The paragraph has the `.ck-placeholder` CSS class and the `data-placeholder` attribute.
-     *
-     * ```html
-     * <p data-placeholder="Type some text..." class="ck-placeholder">
-     * 	::before
-     * </p>
-     * ```
-     *
-     * **Note**: Placeholder text can also be set using the `placeholder` attribute if a `<textarea>` is passed to
-     * the `create()` method, e.g. {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
-     *
-     * **Note**: This configuration has precedence over the value of the `placeholder` attribute of a `<textarea>`
-     * element passed to the `create()` method.
-     *
-     * See the {@glink features/editor-placeholder "Editor placeholder"} guide for more information and live examples.
-     */
-    placeholder?: string;
-    /**
-     * The name of the model root element to use for this editor root.
-     *
-     * By default, the editor creates model roots using the generic `$root` element, which allows all standard block
-     * content (paragraphs, headings, lists, tables, etc.). You can set this option to a custom element name if you
-     * need a root with different schema rules — for example, a root that restricts or extends what content is allowed
-     * at the top level.
-     *
-     * The element name must be registered in the {@link module:engine/model/schema~ModelSchema schema} before or during
-     * editor initialization. See the {@glink framework/deep-dive/schema "Schema"} guide for more information about
-     * generic items like `$root` and `$inlineRoot`.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		root: {
-     * 			modelElement: '$inlineRoot'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * If your editor implementation uses multiple roots, you can set a different model element for each root:
-     *
-     * ```ts
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		header: {
-     * 			modelElement: '$inlineRoot',
-     * 			initialData: 'My document title'
-     * 		},
-     * 		content: {
-     * 			initialData: '<p>Main content goes here.</p>'
-     * 		}
-     * 	}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     *
-     * @default '$root'
-     */
-    modelElement?: string;
-    /**
-     * Label which briefly describes this editing area.
-     *
-     * It is used for the `aria-label` attribute set on the editor editing area, helping assistive technologies
-     * to tell apart multiple editor instances (editing areas) on the page. If not set, a default
-     * "Rich Text Editor. Editing area [name of the area]" is used instead.
-     *
-     * It can also be used by other features when referring to this editing area.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		root: {
-     * 			label: 'Article main content'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * If your editor implementation uses multiple roots, you should provide config for roots individually:
-     *
-     * ```ts
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		header: {
-     * 			element: document.querySelector( '#header' ),
-     * 			label: 'Article header'
-     * 		},
-     * 		content: {
-     * 			element: document.querySelector( '#content' ),
-     * 			label: 'Article main content'
-     * 		},
-     * 		sideQuote: {
-     * 			element: document.querySelector( '#side-quote' ),
-     * 			label: 'Side-quote'
-     * 		},
-     * 		relatedLinks: {
-     * 			element: document.querySelector( '#related-links' ),
-     * 			label: 'Related links'
-     * 		}
-     * 	}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     */
-    label?: string;
-    /**
-     * An optional, longer description of this editing area. It is intended as a stable, human-readable identifier
-     * so features can match a root across sessions, for instance AI features interacting with multiple editor instances
-     * and multi-root editors.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		attachTo: document.querySelector( '#editor' ),
-     * 		root: {
-     * 			description: '...'
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * If your editor implementation uses multiple roots, you should provide config for roots individually:
-     *
-     * ```ts
-     * MultiRootEditor.create( {
-     * 	roots: {
-     * 		chapter1: {
-     * 			element: document.querySelector( '#chapter1' ),
-     * 			description: 'Editing root for the first chapter.'
-     * 		},
-     * 		chapter2: {
-     * 			element: document.querySelector( '#chapter2' ),
-     * 			description: 'Editing root for the second chapter.'
-     * 		},
-     * 		chapter3: {
-     * 			element: document.querySelector( '#chapter3' ),
-     * 			description: 'Editing root for the third chapter.'
-     * 		}
-     * 	}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     */
-    description?: string;
-    /**
-     * Initial root attributes for a root.
-     *
-     * **Note: You must provide full set of attributes for each root. If an attribute is not set on a root, set the value to `null`.
-     * Only provided attribute keys will be returned by {@link module:core/editor/editor~Editor#getRootAttributes} or
-     *  {@link module:editor-multi-root/multirooteditor~MultiRootEditor#getRootsAttributes}.**
-     *
-     * Roots attributes hold additional data related to the document roots, in addition to the regular document data (which usually is
-     * HTML). In roots attributes, for each root, you can store arbitrary key-value pairs with attributes connected with that root.
-     * Use it to store any custom data that is specific to your integration or custom features.
-     *
-     * Currently, any official plugins do not use root attributes. This is a mechanism that is prepared for custom features
-     * and non-standard integrations. If you do not provide any custom feature that would use root attributes, you do not need to
-     * handle (save and load) this property.
-     *
-     * ```ts
-     * ClassicEditor.create( {
-     * 	root: {
-     * 		modelAttributes: { customAttribute: true }
-     * 	}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     *
-     * If your editor implementation uses multiple roots, you should provide attributes for roots individually:
-     *
-     * ```ts
-     * MultiRootEditor.create(
-     * 	{
-     * 		roots: {
-     * 			uid1: {
-     * 				// ... other root config
-     * 				modelAttributes: { order: 20, isLocked: false } // Third, unlocked.
-     * 			},
-     * 			uid2: {
-     * 				// ... other root config
-     * 				modelAttributes: { order: 10, isLocked: true } // Second, locked.
-     * 			},
-     * 			uid3: {
-     * 				// ... other root config
-     * 				modelAttributes: { order: 30, isLocked: true } // Fourth, locked.
-     * 			},
-     * 			uid4: {
-     * 				// ... other root config
-     * 				modelAttributes: { order: 0, isLocked: false } // First, unlocked.
-     * 			}
-     * 		}
-     * 	}
-     * )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     *
-     * Note, that the above code snippet is only an example. You need to implement your own features that will use these attributes.
-     *
-     * Roots attributes can be changed the same way as attributes set on other model nodes:
-     *
-     * ```ts
-     * editor.model.change( writer => {
-     * 	const root = editor.model.getRoot( 'uid3' );
-     *
-     * 	writer.setAttribute( 'order', 40, root );
-     * } );
-     * ```
-     *
-     * You can react to root attributes changes by listening to
-     * {@link module:engine/model/document~ModelDocument#event:change:data document `change:data` event}:
-     *
-     * ```ts
-     * editor.model.document.on( 'change:data', () => {
-     * 	const changedRoots = editor.model.document.differ.getChangedRoots();
-     *
-     * 	for ( const change of changedRoots ) {
-     * 		if ( change.attributes ) {
-     * 			const root = editor.model.getRoot( change.name );
-     *
-     * 			// ...
-     * 		}
-     * 	}
-     * } );
-     * ```
-     */
-    modelAttributes?: EditorRootAttributes;
+	/**
+	* The DOM element to use as the editor's editable root, or a description of one to create.
+	*
+	* Accepted forms:
+	*
+	* * An existing DOM element.
+	*
+	*   Its content is automatically loaded to the editor upon initialization (but only when
+	*   {@link #initialData `initialData`} is not set).
+	*
+	*   The editor data will be set back to the original element once the editor is destroyed only if the
+	*   {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
+	*   option is set to `true`.
+	*
+	*   Not accepted by {@link module:editor-classic/classiceditor~ClassicEditor} - use
+	*   {@link module:core/editor/editorconfig~EditorConfig#attachTo `config.attachTo`} instead.
+	*
+	* * A tag name string, e.g. `'h1'`. The editor creates a fresh element with that tag and uses it as the editable.
+	*
+	* * A {@link ~ViewRootElementDefinition} object. The editor creates a fresh element matching the definition and
+	* uses it as the editable.
+	*
+	* ```ts
+	* // Tag name string.
+	* BalloonEditor.create( {
+	* 	root: {
+	* 		element: 'h1'
+	* 	}
+	* } );
+	*
+	* // Element definition.
+	* BalloonEditor.create( {
+	* 	root: {
+	* 		element: {
+	* 			name: 'h1',
+	* 			classes: [ 'article-title' ],
+	* 			styles: { 'font-weight': 'bold' },
+	* 			attributes: { 'data-id': '123' }
+	* 		}
+	* 	}
+	* } );
+	* ```
+	*
+	* Unless an existing DOM element is provided, a detached editor will be created. In this case you need to insert
+	* it into the DOM manually.
+	*/
+	element?: HTMLElement | string | ViewRootElementDefinition;
+	/**
+	* The initial editor data to be used instead of the HTML content of the
+	* {@link module:core/editor/editorconfig~RootConfig#element source element}.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		root: {
+	* 			initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* By default, the editor is initialized with the content of the source element on which this editor root is initialized.
+	* This configuration option lets you override this behavior and pass different initial data.
+	* It is especially useful if it is difficult for your integration to put the data inside the HTML element.
+	*
+	* If your editor implementation uses multiple roots, you should provide config for roots individually:
+	*
+	* ```ts
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			element: document.querySelector( '#header' ),
+	* 			initialData: '<p>Content for header part.</p>'
+	* 		},
+	* 		content: {
+	* 			element: document.querySelector( '#content' ),
+	* 			initialData: '<p>Content for main part.</p>'
+	* 		},
+	* 		leftSide: {
+	* 			element: document.querySelector( '#left-side' ),
+	* 			initialData: '<p>Content for left-side box.</p>'
+	* 		},
+	* 		rightSide: {
+	* 			element: document.querySelector( '#right-side' ),
+	* 			initialData: '<p>Content for right-side box.</p>'
+	* 		}
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*
+	* See also {@link module:core/editor/editor~Editor.create Editor.create()} documentation for the editor implementation which you use.
+	*/
+	initialData?: string;
+	/**
+	* Specifies the text displayed in the editor when there is no content (editor is empty). It is intended to
+	* help users locate the editor in the application (form) and prompt them to input the content. Works similarly
+	* to the native DOM
+	* [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute)
+	* used by inputs.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		root: {
+	* 			placeholder: 'Type some text...'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* If your editor implementation uses multiple roots, you should provide config for roots individually:
+	*
+	* ```ts
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			element: document.querySelector( '#header' ),
+	* 			placeholder: 'Type header...'
+	* 		},
+	* 		content: {
+	* 			element: document.querySelector( '#content' ),
+	* 			placeholder: 'Type content...'
+	* 		},
+	* 		leftSide: {
+	* 			element: document.querySelector( '#left-side' ),
+	* 			placeholder: 'Type left-side...'
+	* 		},
+	* 		rightSide: {
+	* 			element: document.querySelector( '#right-side' ),
+	* 			placeholder: 'Type right-side...'
+	* 		}
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*
+	* The placeholder text is displayed as a pseudo–element of an empty paragraph in the editor content.
+	* The paragraph has the `.ck-placeholder` CSS class and the `data-placeholder` attribute.
+	*
+	* ```html
+	* <p data-placeholder="Type some text..." class="ck-placeholder">
+	* 	::before
+	* </p>
+	* ```
+	*
+	* **Note**: Placeholder text can also be set using the `placeholder` attribute if a `<textarea>` is passed to
+	* the `create()` method, e.g. {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
+	*
+	* **Note**: This configuration has precedence over the value of the `placeholder` attribute of a `<textarea>`
+	* element passed to the `create()` method.
+	*
+	* See the {@glink features/editor-placeholder "Editor placeholder"} guide for more information and live examples.
+	*/
+	placeholder?: string;
+	/**
+	* The name of the model root element to use for this editor root.
+	*
+	* By default, the editor creates model roots using the generic `$root` element, which allows all standard block
+	* content (paragraphs, headings, lists, tables, etc.). You can set this option to a custom element name if you
+	* need a root with different schema rules — for example, a root that restricts or extends what content is allowed
+	* at the top level.
+	*
+	* The element name must be registered in the {@link module:engine/model/schema~ModelSchema schema} before or during
+	* editor initialization. See the {@glink framework/deep-dive/schema "Schema"} guide for more information about
+	* generic items like `$root` and `$inlineRoot`.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		root: {
+	* 			modelElement: '$inlineRoot'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* If your editor implementation uses multiple roots, you can set a different model element for each root:
+	*
+	* ```ts
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			modelElement: '$inlineRoot',
+	* 			initialData: 'My document title'
+	* 		},
+	* 		content: {
+	* 			initialData: '<p>Main content goes here.</p>'
+	* 		}
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*
+	* @default '$root'
+	*/
+	modelElement?: string;
+	/**
+	* Label which briefly describes this editing area.
+	*
+	* It is used for the `aria-label` attribute set on the editor editing area, helping assistive technologies
+	* to tell apart multiple editor instances (editing areas) on the page. If not set, a default
+	* "Rich Text Editor. Editing area [name of the area]" is used instead.
+	*
+	* It can also be used by other features when referring to this editing area.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		root: {
+	* 			label: 'Article main content'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* If your editor implementation uses multiple roots, you should provide config for roots individually:
+	*
+	* ```ts
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			element: document.querySelector( '#header' ),
+	* 			label: 'Article header'
+	* 		},
+	* 		content: {
+	* 			element: document.querySelector( '#content' ),
+	* 			label: 'Article main content'
+	* 		},
+	* 		sideQuote: {
+	* 			element: document.querySelector( '#side-quote' ),
+	* 			label: 'Side-quote'
+	* 		},
+	* 		relatedLinks: {
+	* 			element: document.querySelector( '#related-links' ),
+	* 			label: 'Related links'
+	* 		}
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*/
+	label?: string;
+	/**
+	* An optional, longer description of this editing area. It is intended as a stable, human-readable identifier
+	* so features can match a root across sessions, for instance AI features interacting with multiple editor instances
+	* and multi-root editors.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		root: {
+	* 			description: '...'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* If your editor implementation uses multiple roots, you should provide config for roots individually:
+	*
+	* ```ts
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		chapter1: {
+	* 			element: document.querySelector( '#chapter1' ),
+	* 			description: 'Editing root for the first chapter.'
+	* 		},
+	* 		chapter2: {
+	* 			element: document.querySelector( '#chapter2' ),
+	* 			description: 'Editing root for the second chapter.'
+	* 		},
+	* 		chapter3: {
+	* 			element: document.querySelector( '#chapter3' ),
+	* 			description: 'Editing root for the third chapter.'
+	* 		}
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*/
+	description?: string;
+	/**
+	* An optional, human-readable name of this editing area.
+	*
+	* Unlike {@link #label `label`} (which is primarily used as the `aria-label` accessibility text), the title is
+	* intended as a semantic name that features can present to users or send to external services. For instance, the
+	* AI features use it to tell roots apart, so that requests scoped to a specific area ("edit the title",
+	* "summarize the introduction") can be routed to the intended root.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		attachTo: document.querySelector( '#editor' ),
+	* 		root: {
+	* 			title: 'Article main content'
+	* 		}
+	* 	} )
+	* 	.then( ... )
+	* 	.catch( ... );
+	* ```
+	*
+	* If your editor implementation uses multiple roots, you should provide config for roots individually:
+	*
+	* ```ts
+	* MultiRootEditor.create( {
+	* 	roots: {
+	* 		header: {
+	* 			element: document.querySelector( '#header' ),
+	* 			title: 'Article header'
+	* 		},
+	* 		content: {
+	* 			element: document.querySelector( '#content' ),
+	* 			title: 'Article main content'
+	* 		}
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*/
+	title?: string;
+	/**
+	* Initial root attributes for a root.
+	*
+	* **Note: You must provide full set of attributes for each root. If an attribute is not set on a root, set the value to `null`.
+	* Only provided attribute keys will be returned by {@link module:core/editor/editor~Editor#getRootAttributes} or
+	*  {@link module:editor-multi-root/multirooteditor~MultiRootEditor#getRootsAttributes}.**
+	*
+	* Roots attributes hold additional data related to the document roots, in addition to the regular document data (which usually is
+	* HTML). In roots attributes, for each root, you can store arbitrary key-value pairs with attributes connected with that root.
+	* Use it to store any custom data that is specific to your integration or custom features.
+	*
+	* Currently, any official plugins do not use root attributes. This is a mechanism that is prepared for custom features
+	* and non-standard integrations. If you do not provide any custom feature that would use root attributes, you do not need to
+	* handle (save and load) this property.
+	*
+	* ```ts
+	* ClassicEditor.create( {
+	* 	root: {
+	* 		modelAttributes: { customAttribute: true }
+	* 	}
+	* } )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*
+	* If your editor implementation uses multiple roots, you should provide attributes for roots individually:
+	*
+	* ```ts
+	* MultiRootEditor.create(
+	* 	{
+	* 		roots: {
+	* 			uid1: {
+	* 				// ... other root config
+	* 				modelAttributes: { order: 20, isLocked: false } // Third, unlocked.
+	* 			},
+	* 			uid2: {
+	* 				// ... other root config
+	* 				modelAttributes: { order: 10, isLocked: true } // Second, locked.
+	* 			},
+	* 			uid3: {
+	* 				// ... other root config
+	* 				modelAttributes: { order: 30, isLocked: true } // Fourth, locked.
+	* 			},
+	* 			uid4: {
+	* 				// ... other root config
+	* 				modelAttributes: { order: 0, isLocked: false } // First, unlocked.
+	* 			}
+	* 		}
+	* 	}
+	* )
+	* .then( ... )
+	* .catch( ... );
+	* ```
+	*
+	* Note, that the above code snippet is only an example. You need to implement your own features that will use these attributes.
+	*
+	* Roots attributes can be changed the same way as attributes set on other model nodes:
+	*
+	* ```ts
+	* editor.model.change( writer => {
+	* 	const root = editor.model.getRoot( 'uid3' );
+	*
+	* 	writer.setAttribute( 'order', 40, root );
+	* } );
+	* ```
+	*
+	* You can react to root attributes changes by listening to
+	* {@link module:engine/model/document~ModelDocument#event:change:data document `change:data` event}:
+	*
+	* ```ts
+	* editor.model.document.on( 'change:data', () => {
+	* 	const changedRoots = editor.model.document.differ.getChangedRoots();
+	*
+	* 	for ( const change of changedRoots ) {
+	* 		if ( change.attributes ) {
+	* 			const root = editor.model.getRoot( change.name );
+	*
+	* 			// ...
+	* 		}
+	* 	}
+	* } );
+	* ```
+	*/
+	modelAttributes?: EditorRootAttributes;
 }
 /**
- * A description of the DOM element used as an editor's editable root, accepted by
- * {@link module:core/editor/editorconfig~RootConfig#element `config.root.element`}.
- *
- * ```ts
- * const element: ViewRootElementDefinition = {
- * 	name: 'h1',
- * 	classes: [ 'article-title' ],
- * 	styles: { 'font-weight': 'bold' },
- * 	attributes: { 'data-id': '123' }
- * };
- * ```
- *
- * `class` and `style` may also be passed as strings inside `attributes` as a shorthand:
- *
- * ```ts
- * const element: ViewRootElementDefinition = {
- * 	name: 'h1',
- * 	attributes: { class: 'article-title', style: 'font-weight: bold' }
- * };
- * ```
- */
+* A description of the DOM element used as an editor's editable root, accepted by
+* {@link module:core/editor/editorconfig~RootConfig#element `config.root.element`}.
+*
+* ```ts
+* const element: ViewRootElementDefinition = {
+* 	name: 'h1',
+* 	classes: [ 'article-title' ],
+* 	styles: { 'font-weight': 'bold' },
+* 	attributes: { 'data-id': '123' }
+* };
+* ```
+*
+* `class` and `style` may also be passed as strings inside `attributes` as a shorthand:
+*
+* ```ts
+* const element: ViewRootElementDefinition = {
+* 	name: 'h1',
+* 	attributes: { class: 'article-title', style: 'font-weight: bold' }
+* };
+* ```
+*/
 export interface ViewRootElementDefinition {
-    /**
-     * The DOM tag name to use. Defaults to `'div'` when not provided, so integrators can keep the default element and
-     * still specify {@link #classes}, {@link #styles}, or {@link #attributes}.
-     */
-    name?: string;
-    /**
-     * Class name or array of class names to apply to the editable element. Each name can be provided as a string.
-     */
-    classes?: string | Array<string>;
-    /**
-     * Inline styles to apply to the editable element as a record of style properties.
-     */
-    styles?: Record<string, string>;
-    /**
-     * Additional DOM attributes to apply to the editable element.
-     */
-    attributes?: Record<string, string>;
+	/**
+	* The DOM tag name to use. Defaults to `'div'` when not provided, so integrators can keep the default element and
+	* still specify {@link #classes}, {@link #styles}, or {@link #attributes}.
+	*/
+	name?: string;
+	/**
+	* Class name or array of class names to apply to the editable element. Each name can be provided as a string.
+	*/
+	classes?: string | Array<string>;
+	/**
+	* Inline styles to apply to the editable element as a record of style properties.
+	*/
+	styles?: Record<string, string>;
+	/**
+	* Additional DOM attributes to apply to the editable element.
+	*/
+	attributes?: Record<string, string>;
 }
 /**
- * The configuration of the editor language.
- *
- * ```ts
- * ClassicEditor
- * 	.create( {
- * 		attachTo: document.querySelector( '#editor' ),
- * 		language: ... // The editor language configuration.
- * 	} )
- * 	.then( editor => {
- * 		console.log( editor );
- * 	} )
- * 	.catch( error => {
- * 		console.error( error );
- * 	} );
- * ```
- *
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- */
+* The configuration of the editor language.
+*
+* ```ts
+* ClassicEditor
+* 	.create( {
+* 		attachTo: document.querySelector( '#editor' ),
+* 		language: ... // The editor language configuration.
+* 	} )
+* 	.then( editor => {
+* 		console.log( editor );
+* 	} )
+* 	.catch( error => {
+* 		console.error( error );
+* 	} );
+* ```
+*
+* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+*/
 export interface LanguageConfig {
-    /**
-     * Allows to use a different language for the editor UI.
-     *
-     * The language codes are defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.
-     */
-    ui?: string;
-    /**
-     * Allows to use a different language of the editor content.
-     *
-     * The language codes are defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.
-     */
-    content?: string;
+	/**
+	* Allows to use a different language for the editor UI.
+	*
+	* The language codes are defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.
+	*/
+	ui?: string;
+	/**
+	* Allows to use a different language of the editor content.
+	*
+	* The language codes are defined in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) standard.
+	*/
+	content?: string;
 }
 export type ToolbarConfig = Array<ToolbarConfigItem> | {
-    items?: Array<ToolbarConfigItem>;
-    removeItems?: Array<string>;
-    shouldNotGroupWhenFull?: boolean;
-    icon?: string;
+	items?: Array<ToolbarConfigItem>;
+	removeItems?: Array<string>;
+	shouldNotGroupWhenFull?: boolean;
+	icon?: string;
 };
 export type ToolbarConfigItem = string | {
-    items: Array<ToolbarConfigItem>;
-    label: string;
-    icon?: string | false;
-    withText?: boolean;
-    tooltip?: boolean | string | ((label: string, keystroke: string | undefined) => string);
+	items: Array<ToolbarConfigItem>;
+	label: string;
+	icon?: string | false;
+	withText?: boolean;
+	tooltip?: boolean | string | ((label: string, keystroke: string | undefined) => string);
 };
 /**
- * The “Powered by CKEditor” logo configuration options.
- **/
+* The “Powered by CKEditor” logo configuration options.
+**/
 export interface PoweredByConfig {
-    /**
-     * The position of the project's logo.
-     *
-     * * When `'inside'`, the logo will be displayed within the boundaries of the editing area.
-     * * When `'border'`, the logo 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 logo 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';
-    /**
-     * Allows changing the label displayed next to the CKEditor logo.
-     *
-     * **Note:** Set the value to `null` to hide the label.
-     *
-     * @default 'Powered by'
-     */
-    label?: string | null;
-    /**
-     * The vertical distance the logo can be moved away from its default position.
-     *
-     * **Note:** If `position` is `'border'`, the offset is measured from the (vertical) center of the logo.
-     *
-     * @default 5
-     */
-    verticalOffset?: number;
-    /**
-     * The horizontal distance between the side of the editing root and the nearest side of the logo.
-     *
-     * @default 5
-     */
-    horizontalOffset?: number;
-    /**
-     * Allows to show the logo even if the valid commercial license is configured using
-     * the {@link module:core/editor/editorconfig~EditorConfig#licenseKey `config.licenseKey`} setting.
-     *
-     * @default false
-     */
-    forceVisible?: boolean;
+	/**
+	* The position of the project's logo.
+	*
+	* * When `'inside'`, the logo will be displayed within the boundaries of the editing area.
+	* * When `'border'`, the logo 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 logo 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";
+	/**
+	* Allows changing the label displayed next to the CKEditor logo.
+	*
+	* **Note:** Set the value to `null` to hide the label.
+	*
+	* @default 'Powered by'
+	*/
+	label?: string | null;
+	/**
+	* The vertical distance the logo can be moved away from its default position.
+	*
+	* **Note:** If `position` is `'border'`, the offset is measured from the (vertical) center of the logo.
+	*
+	* @default 5
+	*/
+	verticalOffset?: number;
+	/**
+	* The horizontal distance between the side of the editing root and the nearest side of the logo.
+	*
+	* @default 5
+	*/
+	horizontalOffset?: number;
+	/**
+	* Allows to show the logo even if the valid commercial license is configured using
+	* the {@link module:core/editor/editorconfig~EditorConfig#licenseKey `config.licenseKey`} setting.
+	*
+	* @default false
+	*/
+	forceVisible?: boolean;
 }
 /**
- * The offset (in pixels) of the viewport from every direction used when positioning a sticky toolbar or other
- * absolutely positioned UI elements.
- */
+* The offset (in pixels) of the viewport from every direction used when positioning a sticky toolbar or other
+* absolutely positioned UI elements.
+*/
 export interface ViewportOffsetConfig {
-    /**
-     * The bottom offset in pixels.
-     */
-    bottom?: number;
-    /**
-     * The left offset in pixels.
-     */
-    left?: number;
-    /**
-     * The right offset in pixels.
-     */
-    right?: number;
-    /**
-     * The top offset in pixels.
-     */
-    top?: number;
+	/**
+	* The bottom offset in pixels.
+	*/
+	bottom?: number;
+	/**
+	* The left offset in pixels.
+	*/
+	left?: number;
+	/**
+	* The right offset in pixels.
+	*/
+	right?: number;
+	/**
+	* The top offset in pixels.
+	*/
+	top?: number;
 }
 export interface UiConfig {
-    /**
-     * The viewport offset used for positioning various absolutely positioned UI elements.
-     *
-     * Read more in {@link module:core/editor/editorconfig~ViewportOffsetConfig}.
-     **/
-    viewportOffset?: ViewportOffsetConfig;
-    /**
-     * The configuration of the “Powered by CKEditor” logo.
-     *
-     * Read more in {@link module:core/editor/editorconfig~PoweredByConfig}.
-     **/
-    poweredBy?: PoweredByConfig;
+	/**
+	* The viewport offset used for positioning various absolutely positioned UI elements.
+	*
+	* Read more in {@link module:core/editor/editorconfig~ViewportOffsetConfig}.
+	**/
+	viewportOffset?: ViewportOffsetConfig;
+	/**
+	* The configuration of the “Powered by CKEditor” logo.
+	*
+	* Read more in {@link module:core/editor/editorconfig~PoweredByConfig}.
+	**/
+	poweredBy?: PoweredByConfig;
 }