@ckeditor/ckeditor5-editor-multi-root 0.0.0-nightly-20241215.0 → 0.0.0-nightly-20241217.0

package/dist/index.js

@@ -12,24 +12,18 @@ import { isElement as isElement$1 } from 'lodash-es';
  * The multi-root editor UI class.
  */ class MultiRootEditorUI extends EditorUI {
     /**
-	 * The main (top–most) view of the editor UI.
-	 */ view;
-    /**
-	 * The editable element that was focused the last time when any of the editables had focus.
-	 */ _lastFocusedEditableElement;
-    /**
-	 * Creates an instance of the multi-root editor UI class.
-	 *
-	 * @param editor The editor instance.
-	 * @param view The view of the UI.
-	 */ constructor(editor, view){
+     * Creates an instance of the multi-root editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */ constructor(editor, view){
         super(editor);
         this.view = view;
         this._lastFocusedEditableElement = null;
     }
     /**
-	 * Initializes the UI.
-	 */ init() {
+     * Initializes the UI.
+     */ init() {
         const view = this.view;
         view.render();
         // Keep track of the last focused editable element. Knowing which one was focused
@@ -61,17 +55,17 @@ import { isElement as isElement$1 } from 'lodash-es';
         this.fire('ready');
     }
     /**
-	 * Adds the editable to the editor UI.
-	 *
-	 * After the editable is added to the editor UI it can be considered "active".
-	 *
-	 * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
-	 * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
-	 *
-	 * @param editable The editable instance to add.
-	 * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
-	 * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
-	 */ addEditable(editable, placeholder) {
+     * Adds the editable to the editor UI.
+     *
+     * After the editable is added to the editor UI it can be considered "active".
+     *
+     * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
+     * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
+     *
+     * @param editable The editable instance to add.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     */ addEditable(editable, placeholder) {
         // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
         // But it can be available earlier if a DOM element has been passed to `MultiRootEditor.create()`.
         const editableElement = editable.element;
@@ -104,22 +98,22 @@ import { isElement as isElement$1 } from 'lodash-es';
         this._initPlaceholder(editable, placeholder);
     }
     /**
-	 * Removes the editable instance from the editor UI.
-	 *
-	 * Removed editable can be considered "deactivated".
-	 *
-	 * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
-	 * {@link #addEditable} is removed.
-	 *
-	 * @param editable Editable to remove from the editor UI.
-	 */ removeEditable(editable) {
+     * Removes the editable instance from the editor UI.
+     *
+     * Removed editable can be considered "deactivated".
+     *
+     * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
+     * {@link #addEditable} is removed.
+     *
+     * @param editable Editable to remove from the editor UI.
+     */ removeEditable(editable) {
         this.editor.editing.view.detachDomRoot(editable.name);
         editable.unbind('isFocused');
         this.removeEditableElement(editable.name);
     }
     /**
-	 * @inheritDoc
-	 */ destroy() {
+     * @inheritDoc
+     */ destroy() {
         super.destroy();
         for (const editable of Object.values(this.view.editables)){
             this.removeEditable(editable);
@@ -127,8 +121,8 @@ import { isElement as isElement$1 } from 'lodash-es';
         this.view.destroy();
     }
     /**
-	 * Initializes the editor main toolbar and its panel.
-	 */ _initToolbar() {
+     * Initializes the editor main toolbar and its panel.
+     */ _initToolbar() {
         const editor = this.editor;
         const view = this.view;
         const toolbar = view.toolbar;
@@ -137,12 +131,12 @@ import { isElement as isElement$1 } from 'lodash-es';
         this.addToolbar(view.toolbar);
     }
     /**
-	 * Enables the placeholder text on a given editable.
-	 *
-	 * @param editable Editable on which the placeholder should be set.
-	 * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
-	 * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
-	 */ _initPlaceholder(editable, placeholder) {
+     * Enables the placeholder text on a given editable.
+     *
+     * @param editable Editable on which the placeholder should be set.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     */ _initPlaceholder(editable, placeholder) {
         if (!placeholder) {
             const configPlaceholder = this.editor.config.get('placeholder');
             if (configPlaceholder) {
@@ -173,35 +167,22 @@ import { isElement as isElement$1 } from 'lodash-es';
  * to learn more about this view.
  */ class MultiRootEditorUIView extends EditorUIView {
     /**
-	 * The main toolbar of the multi-root editor UI.
-	 */ toolbar;
-    /**
-	 * Editable elements used by the multi-root editor UI.
-	 */ editables;
-    editable;
-    /**
-	 * Menu bar view instance.
-	 */ menuBarView;
-    /**
-	 * The editing view instance this view is related to.
-	 */ _editingView;
-    /**
-	 * Creates an instance of the multi-root editor UI view.
-	 *
-	 * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-	 * @param editingView The editing view instance this view is related to.
-	 * @param editableNames Names for all editable views. For each name, one
-	 * {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`} instance will be initialized.
-	 * @param options Configuration options for the view instance.
-	 * @param options.editableElements The editable elements to be used, assigned to their names. If not specified, they will be
-	 * automatically created by {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`}
-	 * instances.
-	 * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
-	 * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
-	 * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
-	 * @param options.label When set, this value will be used as an accessible `aria-label` of the
-	 * {@link module:ui/editableui/editableuiview~EditableUIView editable view} elements.
-	 */ constructor(locale, editingView, editableNames, options = {}){
+     * Creates an instance of the multi-root editor UI view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param editingView The editing view instance this view is related to.
+     * @param editableNames Names for all editable views. For each name, one
+     * {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`} instance will be initialized.
+     * @param options Configuration options for the view instance.
+     * @param options.editableElements The editable elements to be used, assigned to their names. If not specified, they will be
+     * automatically created by {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`}
+     * instances.
+     * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
+     * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     * @param options.label When set, this value will be used as an accessible `aria-label` of the
+     * {@link module:ui/editableui/editableuiview~EditableUIView editable view} elements.
+     */ constructor(locale, editingView, editableNames, options = {}){
         super(locale);
         this._editingView = editingView;
         this.toolbar = new ToolbarView(locale, {
@@ -243,16 +224,16 @@ import { isElement as isElement$1 } from 'lodash-es';
         });
     }
     /**
-	 * Creates an editable instance with given name and registers it in the editor UI view.
-	 *
-	 * If `editableElement` is provided, the editable instance will be created on top of it. Otherwise, the editor will create a new
-	 * DOM element and use it instead.
-	 *
-	 * @param editableName The name for the editable.
-	 * @param editableElement DOM element for which the editable should be created.
-	 * @param label The accessible editable label used by assistive technologies.
-	 * @returns The created editable instance.
-	 */ createEditable(editableName, editableElement, label) {
+     * Creates an editable instance with given name and registers it in the editor UI view.
+     *
+     * If `editableElement` is provided, the editable instance will be created on top of it. Otherwise, the editor will create a new
+     * DOM element and use it instead.
+     *
+     * @param editableName The name for the editable.
+     * @param editableElement DOM element for which the editable should be created.
+     * @param label The accessible editable label used by assistive technologies.
+     * @returns The created editable instance.
+     */ createEditable(editableName, editableElement, label) {
         const editable = new InlineEditableUIView(this.locale, this._editingView, editableElement, {
             label
         });
@@ -264,10 +245,10 @@ import { isElement as isElement$1 } from 'lodash-es';
         return editable;
     }
     /**
-	 * Destroys and removes the editable from the editor UI view.
-	 *
-	 * @param editableName The name of the editable that should be removed.
-	 */ removeEditable(editableName) {
+     * Destroys and removes the editable from the editor UI view.
+     *
+     * @param editableName The name of the editable that should be removed.
+     */ removeEditable(editableName) {
         const editable = this.editables[editableName];
         if (this.isRendered) {
             this.deregisterChild(editable);
@@ -276,8 +257,8 @@ import { isElement as isElement$1 } from 'lodash-es';
         editable.destroy();
     }
     /**
-	 * @inheritDoc
-	 */ render() {
+     * @inheritDoc
+     */ render() {
         super.render();
         this.registerChild(Object.values(this.editables));
         this.registerChild(this.toolbar);
@@ -300,34 +281,21 @@ import { isElement as isElement$1 } from 'lodash-es';
  * Note that you will need to attach the editor toolbar to your web page manually, in a desired place, after the editor is initialized.
  */ class MultiRootEditor extends Editor {
     /**
-	 * @inheritDoc
-	 */ static get editorName() {
+     * @inheritDoc
+     */ static get editorName() {
         return 'MultiRootEditor';
     }
     /**
-	 * @inheritDoc
-	 */ ui;
-    /**
-	 * The elements on which the editor has been initialized.
-	 */ sourceElements;
-    /**
-	 * Holds attributes keys that were passed in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
-	 * config property and should be returned by {@link #getRootsAttributes}.
-	 */ _registeredRootsAttributesKeys = new Set();
-    /**
-	 * A set of lock IDs for enabling or disabling particular root.
-	 */ _readOnlyRootLocks = new Map();
-    /**
-	 * Creates an instance of the multi-root editor.
-	 *
-	 * **Note:** Do not use the constructor to create editor instances. Use the static
-	 * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method instead.
-	 *
-	 * @param sourceElementsOrData The DOM elements that will be the source for the created editor
-	 * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
-	 * For more information see {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
-	 * @param config The editor configuration.
-	 */ constructor(sourceElementsOrData, config = {}){
+     * Creates an instance of the multi-root editor.
+     *
+     * **Note:** Do not use the constructor to create editor instances. Use the static
+     * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method instead.
+     *
+     * @param sourceElementsOrData The DOM elements that will be the source for the created editor
+     * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
+     * For more information see {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
+     * @param config The editor configuration.
+     */ constructor(sourceElementsOrData, config = {}){
         const rootNames = Object.keys(sourceElementsOrData);
         const sourceIsData = rootNames.length === 0 || typeof sourceElementsOrData[rootNames[0]] === 'string';
         if (sourceIsData && config.initialData !== undefined && Object.keys(config.initialData).length > 0) {
@@ -336,6 +304,13 @@ import { isElement as isElement$1 } from 'lodash-es';
             throw new CKEditorError('editor-create-initial-data', null);
         }
         super(config);
+        /**
+         * Holds attributes keys that were passed in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
+         * config property and should be returned by {@link #getRootsAttributes}.
+         */ this._registeredRootsAttributesKeys = new Set();
+        /**
+         * A set of lock IDs for enabling or disabling particular root.
+         */ this._readOnlyRootLocks = new Map();
         if (!sourceIsData) {
             this.sourceElements = sourceElementsOrData;
         } else {
@@ -388,13 +363,13 @@ import { isElement as isElement$1 } from 'lodash-es';
             for (const [rootName, attributes] of Object.entries(rootsAttributes)){
                 if (!this.model.document.getRoot(rootName)) {
                     /**
-					 * Trying to set attributes on a non-existing root.
-					 *
-					 * Roots specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes} do not match initial
-					 * editor roots.
-					 *
-					 * @error multi-root-editor-root-attributes-no-root
-					 */ throw new CKEditorError('multi-root-editor-root-attributes-no-root', null);
+                     * Trying to set attributes on a non-existing root.
+                     *
+                     * Roots specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes} do not match initial
+                     * editor roots.
+                     *
+                     * @error multi-root-editor-root-attributes-no-root
+                     */ throw new CKEditorError('multi-root-editor-root-attributes-no-root', null);
                 }
                 for (const key of Object.keys(attributes)){
                     this.registerRootAttribute(key);
@@ -469,19 +444,19 @@ import { isElement as isElement$1 } from 'lodash-es';
             const root = this.model.document.getRoot(rootName);
             if (!root) {
                 /**
-				 * The root to load does not exist.
-				 *
-				 * @error multi-root-editor-load-root-no-root
-				 */ throw new CKEditorError('multi-root-editor-load-root-no-root', this, {
+                 * The root to load does not exist.
+                 *
+                 * @error multi-root-editor-load-root-no-root
+                 */ throw new CKEditorError('multi-root-editor-load-root-no-root', this, {
                     rootName
                 });
             }
             if (root._isLoaded) {
                 /**
-				 * The root to load was already loaded before. The `loadRoot()` call has no effect.
-				 *
-				 * @error multi-root-editor-load-root-already-loaded
-				 */ logWarning('multi-root-editor-load-root-already-loaded');
+                 * The root to load was already loaded before. The `loadRoot()` call has no effect.
+                 *
+                 * @error multi-root-editor-load-root-already-loaded
+                 */ logWarning('multi-root-editor-load-root-already-loaded');
                 evt.stop();
             }
         }, {
@@ -489,29 +464,29 @@ import { isElement as isElement$1 } from 'lodash-es';
         });
     }
     /**
-	 * Destroys the editor instance, releasing all resources used by it.
-	 *
-	 * Updates the original editor element with the data if the
-	 * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
-	 * configuration option is set to `true`.
-	 *
-	 * **Note**: The multi-root editor does not remove the toolbar and editable when destroyed. You can
-	 * do that yourself in the destruction chain, if you need to:
-	 *
-	 * ```ts
-	 * editor.destroy().then( () => {
-	 * 	// Remove the toolbar from DOM.
-	 * 	editor.ui.view.toolbar.element.remove();
-	 *
-	 * 	// Remove editable elements from DOM.
-	 * 	for ( const editable of Object.values( editor.ui.view.editables ) ) {
-	 * 	    editable.element.remove();
-	 * 	}
-	 *
-	 * 	console.log( 'Editor was destroyed' );
-	 * } );
-	 * ```
-	 */ destroy() {
+     * Destroys the editor instance, releasing all resources used by it.
+     *
+     * Updates the original editor element with the data if the
+     * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
+     * configuration option is set to `true`.
+     *
+     * **Note**: The multi-root editor does not remove the toolbar and editable when destroyed. You can
+     * do that yourself in the destruction chain, if you need to:
+     *
+     * ```ts
+     * editor.destroy().then( () => {
+     * 	// Remove the toolbar from DOM.
+     * 	editor.ui.view.toolbar.element.remove();
+     *
+     * 	// Remove editable elements from DOM.
+     * 	for ( const editable of Object.values( editor.ui.view.editables ) ) {
+     * 	    editable.element.remove();
+     * 	}
+     *
+     * 	console.log( 'Editor was destroyed' );
+     * } );
+     * ```
+     */ destroy() {
         const shouldUpdateSourceElement = this.config.get('updateSourceElementOnDestroy');
         // Cache the data and editable DOM elements, then destroy.
         // It's safe to assume that the model->view conversion will not work after `super.destroy()`,
@@ -530,78 +505,78 @@ import { isElement as isElement$1 } from 'lodash-es';
         });
     }
     /**
-	 * Adds a new root to the editor.
-	 *
-	 * ```ts
-	 * editor.addRoot( 'myRoot', { data: '<p>Initial root data.</p>' } );
-	 * ```
-	 *
-	 * After a root is added, you will be able to modify and retrieve its data.
-	 *
-	 * All root names must be unique. An error will be thrown if you will try to create a root with the name same as
-	 * an already existing, attached root. However, you can call this method for a detached root. See also {@link #detachRoot}.
-	 *
-	 * Whenever a root is added, the editor instance will fire {@link #event:addRoot `addRoot` event}. The event is also called when
-	 * the root is added indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
-	 *
-	 * Note, that this method only adds a root to the editor model. It **does not** create a DOM editable element for the new root.
-	 * Until such element is created (and attached to the root), the root is "virtual": it is not displayed anywhere and its data can
-	 * be changed only using the editor API.
-	 *
-	 * To create a DOM editable element for the root, listen to {@link #event:addRoot `addRoot` event} and call {@link #createEditable}.
-	 * Then, insert the DOM element in a desired place, that will depend on the integration with your application and your requirements.
-	 *
-	 * ```ts
-	 * editor.on( 'addRoot', ( evt, root ) => {
-	 * 	const editableElement = editor.createEditable( root );
-	 *
-	 * 	// You may want to create a more complex DOM structure here.
-	 * 	//
-	 * 	// Alternatively, you may want to create a DOM structure before
-	 * 	// calling `editor.addRoot()` and only append `editableElement` at
-	 * 	// a proper place.
-	 *
-	 * 	document.querySelector( '#editors' ).appendChild( editableElement );
-	 * } );
-	 *
-	 * // ...
-	 *
-	 * editor.addRoot( 'myRoot' ); // Will create a root, a DOM editable element and append it to `#editors` container element.
-	 * ```
-	 *
-	 * You can set root attributes on the new root while you add it:
-	 *
-	 * ```ts
-	 * // Add a collapsed root at fourth position from top.
-	 * // Keep in mind that these are just examples of attributes. You need to provide your own features that will handle the attributes.
-	 * editor.addRoot( 'myRoot', { attributes: { isCollapsed: true, index: 4 } } );
-	 * ```
-	 *
-	 * Note that attributes added together with a root are automatically registered.
-	 *
-	 * See also {@link ~MultiRootEditor#registerRootAttribute `MultiRootEditor#registerRootAttribute()`} and
-	 * {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `config.rootsAttributes` configuration option}.
-	 *
-	 * By setting `isUndoable` flag to `true`, you can allow for detaching the root using the undo feature.
-	 *
-	 * Additionally, you can group adding multiple roots in one undo step. This can be useful if you add multiple roots that are
-	 * combined into one, bigger UI element, and want them all to be undone together.
-	 *
-	 * ```ts
-	 * let rowId = 0;
-	 *
-	 * editor.model.change( () => {
-	 * 	editor.addRoot( 'left-row-' + rowId, { isUndoable: true } );
-	 * 	editor.addRoot( 'center-row-' + rowId, { isUndoable: true } );
-	 * 	editor.addRoot( 'right-row-' + rowId, { isUndoable: true } );
-	 *
-	 * 	rowId++;
-	 * } );
-	 * ```
-	 *
-	 * @param rootName Name of the root to add.
-	 * @param options Additional options for the added root.
-	 */ addRoot(rootName, { data = '', attributes = {}, elementName = '$root', isUndoable = false } = {}) {
+     * Adds a new root to the editor.
+     *
+     * ```ts
+     * editor.addRoot( 'myRoot', { data: '<p>Initial root data.</p>' } );
+     * ```
+     *
+     * After a root is added, you will be able to modify and retrieve its data.
+     *
+     * All root names must be unique. An error will be thrown if you will try to create a root with the name same as
+     * an already existing, attached root. However, you can call this method for a detached root. See also {@link #detachRoot}.
+     *
+     * Whenever a root is added, the editor instance will fire {@link #event:addRoot `addRoot` event}. The event is also called when
+     * the root is added indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
+     *
+     * Note, that this method only adds a root to the editor model. It **does not** create a DOM editable element for the new root.
+     * Until such element is created (and attached to the root), the root is "virtual": it is not displayed anywhere and its data can
+     * be changed only using the editor API.
+     *
+     * To create a DOM editable element for the root, listen to {@link #event:addRoot `addRoot` event} and call {@link #createEditable}.
+     * Then, insert the DOM element in a desired place, that will depend on the integration with your application and your requirements.
+     *
+     * ```ts
+     * editor.on( 'addRoot', ( evt, root ) => {
+     * 	const editableElement = editor.createEditable( root );
+     *
+     * 	// You may want to create a more complex DOM structure here.
+     * 	//
+     * 	// Alternatively, you may want to create a DOM structure before
+     * 	// calling `editor.addRoot()` and only append `editableElement` at
+     * 	// a proper place.
+     *
+     * 	document.querySelector( '#editors' ).appendChild( editableElement );
+     * } );
+     *
+     * // ...
+     *
+     * editor.addRoot( 'myRoot' ); // Will create a root, a DOM editable element and append it to `#editors` container element.
+     * ```
+     *
+     * You can set root attributes on the new root while you add it:
+     *
+     * ```ts
+     * // Add a collapsed root at fourth position from top.
+     * // Keep in mind that these are just examples of attributes. You need to provide your own features that will handle the attributes.
+     * editor.addRoot( 'myRoot', { attributes: { isCollapsed: true, index: 4 } } );
+     * ```
+     *
+     * Note that attributes added together with a root are automatically registered.
+     *
+     * See also {@link ~MultiRootEditor#registerRootAttribute `MultiRootEditor#registerRootAttribute()`} and
+     * {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `config.rootsAttributes` configuration option}.
+     *
+     * By setting `isUndoable` flag to `true`, you can allow for detaching the root using the undo feature.
+     *
+     * Additionally, you can group adding multiple roots in one undo step. This can be useful if you add multiple roots that are
+     * combined into one, bigger UI element, and want them all to be undone together.
+     *
+     * ```ts
+     * let rowId = 0;
+     *
+     * editor.model.change( () => {
+     * 	editor.addRoot( 'left-row-' + rowId, { isUndoable: true } );
+     * 	editor.addRoot( 'center-row-' + rowId, { isUndoable: true } );
+     * 	editor.addRoot( 'right-row-' + rowId, { isUndoable: true } );
+     *
+     * 	rowId++;
+     * } );
+     * ```
+     *
+     * @param rootName Name of the root to add.
+     * @param options Additional options for the added root.
+     */ addRoot(rootName, { data = '', attributes = {}, elementName = '$root', isUndoable = false } = {}) {
         const _addRoot = (writer)=>{
             const root = writer.addRoot(rootName, elementName);
             if (data) {
@@ -621,59 +596,59 @@ import { isElement as isElement$1 } from 'lodash-es';
         }
     }
     /**
-	 * Detaches a root from the editor.
-	 *
-	 * ```ts
-	 * editor.detachRoot( 'myRoot' );
-	 * ```
-	 *
-	 * A detached root is not entirely removed from the editor model, however it can be considered removed.
-	 *
-	 * After a root is detached all its children are removed, all markers inside it are removed, and whenever something is inserted to it,
-	 * it is automatically removed as well. Finally, a detached root is not returned by
-	 * {@link module:engine/model/document~Document#getRootNames} by default.
-	 *
-	 * It is possible to re-add a previously detached root calling {@link #addRoot}.
-	 *
-	 * Whenever a root is detached, the editor instance will fire {@link #event:detachRoot `detachRoot` event}. The event is also
-	 * called when the root is detached indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
-	 *
-	 * Note, that this method only detached a root in the editor model. It **does not** destroy the DOM editable element linked with
-	 * the root and it **does not** remove the DOM element from the DOM structure of your application.
-	 *
-	 * To properly remove a DOM editable element after a root was detached, listen to {@link #event:detachRoot `detachRoot` event}
-	 * and call {@link #detachEditable}. Then, remove the DOM element from your application.
-	 *
-	 * ```ts
-	 * editor.on( 'detachRoot', ( evt, root ) => {
-	 * 	const editableElement = editor.detachEditable( root );
-	 *
-	 * 	// You may want to do an additional DOM clean-up here.
-	 *
-	 * 	editableElement.remove();
-	 * } );
-	 *
-	 * // ...
-	 *
-	 * editor.detachRoot( 'myRoot' ); // Will detach the root, and remove the DOM editable element.
-	 * ```
-	 *
-	 * By setting `isUndoable` flag to `true`, you can allow for re-adding the root using the undo feature.
-	 *
-	 * Additionally, you can group detaching multiple roots in one undo step. This can be useful if the roots are combined into one,
-	 * bigger UI element, and you want them all to be re-added together.
-	 *
-	 * ```ts
-	 * editor.model.change( () => {
-	 * 	editor.detachRoot( 'left-row-3', true );
-	 * 	editor.detachRoot( 'center-row-3', true );
-	 * 	editor.detachRoot( 'right-row-3', true );
-	 * } );
-	 * ```
-	 *
-	 * @param rootName Name of the root to detach.
-	 * @param isUndoable Whether detaching the root can be undone (using the undo feature) or not.
-	 */ detachRoot(rootName, isUndoable = false) {
+     * Detaches a root from the editor.
+     *
+     * ```ts
+     * editor.detachRoot( 'myRoot' );
+     * ```
+     *
+     * A detached root is not entirely removed from the editor model, however it can be considered removed.
+     *
+     * After a root is detached all its children are removed, all markers inside it are removed, and whenever something is inserted to it,
+     * it is automatically removed as well. Finally, a detached root is not returned by
+     * {@link module:engine/model/document~Document#getRootNames} by default.
+     *
+     * It is possible to re-add a previously detached root calling {@link #addRoot}.
+     *
+     * Whenever a root is detached, the editor instance will fire {@link #event:detachRoot `detachRoot` event}. The event is also
+     * called when the root is detached indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
+     *
+     * Note, that this method only detached a root in the editor model. It **does not** destroy the DOM editable element linked with
+     * the root and it **does not** remove the DOM element from the DOM structure of your application.
+     *
+     * To properly remove a DOM editable element after a root was detached, listen to {@link #event:detachRoot `detachRoot` event}
+     * and call {@link #detachEditable}. Then, remove the DOM element from your application.
+     *
+     * ```ts
+     * editor.on( 'detachRoot', ( evt, root ) => {
+     * 	const editableElement = editor.detachEditable( root );
+     *
+     * 	// You may want to do an additional DOM clean-up here.
+     *
+     * 	editableElement.remove();
+     * } );
+     *
+     * // ...
+     *
+     * editor.detachRoot( 'myRoot' ); // Will detach the root, and remove the DOM editable element.
+     * ```
+     *
+     * By setting `isUndoable` flag to `true`, you can allow for re-adding the root using the undo feature.
+     *
+     * Additionally, you can group detaching multiple roots in one undo step. This can be useful if the roots are combined into one,
+     * bigger UI element, and you want them all to be re-added together.
+     *
+     * ```ts
+     * editor.model.change( () => {
+     * 	editor.detachRoot( 'left-row-3', true );
+     * 	editor.detachRoot( 'center-row-3', true );
+     * 	editor.detachRoot( 'right-row-3', true );
+     * } );
+     * ```
+     *
+     * @param rootName Name of the root to detach.
+     * @param isUndoable Whether detaching the root can be undone (using the undo feature) or not.
+     */ detachRoot(rootName, isUndoable = false) {
         if (isUndoable) {
             this.model.change((writer)=>writer.detachRoot(rootName));
         } else {
@@ -683,27 +658,27 @@ import { isElement as isElement$1 } from 'lodash-es';
         }
     }
     /**
-	 * Creates and returns a new DOM editable element for the given root element.
-	 *
-	 * The new DOM editable is attached to the model root and can be used to modify the root content.
-	 *
-	 * @param root Root for which the editable element should be created.
-	 * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
-	 * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
-	 * @param label The accessible label text describing the editable to the assistive technologies.
-	 * @returns The created DOM element. Append it in a desired place in your application.
-	 */ createEditable(root, placeholder, label) {
+     * Creates and returns a new DOM editable element for the given root element.
+     *
+     * The new DOM editable is attached to the model root and can be used to modify the root content.
+     *
+     * @param root Root for which the editable element should be created.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     * @param label The accessible label text describing the editable to the assistive technologies.
+     * @returns The created DOM element. Append it in a desired place in your application.
+     */ createEditable(root, placeholder, label) {
         const editable = this.ui.view.createEditable(root.rootName, undefined, label);
         this.ui.addEditable(editable, placeholder);
         this.editing.view.forceRender();
         return editable.element;
     }
     /**
-	 * Detaches the DOM editable element that was attached to the given root.
-	 *
-	 * @param root Root for which the editable element should be detached.
-	 * @returns The DOM element that was detached. You may want to remove it from your application DOM structure.
-	 */ detachEditable(root) {
+     * Detaches the DOM editable element that was attached to the given root.
+     *
+     * @param root Root for which the editable element should be detached.
+     * @returns The DOM element that was detached. You may want to remove it from your application DOM structure.
+     */ detachEditable(root) {
         const rootName = root.rootName;
         const editable = this.ui.view.editables[rootName];
         this.ui.removeEditable(editable);
@@ -711,34 +686,34 @@ import { isElement as isElement$1 } from 'lodash-es';
         return editable.element;
     }
     /**
-	 * Loads a root that has previously been declared in {@link module:core/editor/editorconfig~EditorConfig#lazyRoots `lazyRoots`}
-	 * configuration option.
-	 *
-	 * Only roots specified in the editor config can be loaded. A root cannot be loaded multiple times. A root cannot be unloaded and
-	 * loading a root cannot be reverted using the undo feature.
-	 *
-	 * When a root becomes loaded, it will be treated by the editor as though it was just added. This, among others, means that all
-	 * related events and mechanisms will be fired, including {@link ~MultiRootEditor#event:addRoot `addRoot` event},
-	 * {@link module:engine/model/document~Document#event:change `model.Document` `change` event}, model post-fixers and conversion.
-	 *
-	 * Until the root becomes loaded, all above mechanisms are suppressed.
-	 *
-	 * This method is {@link module:utils/observablemixin~Observable#decorate decorated}.
-	 *
-	 * Note that attributes loaded together with a root are automatically registered.
-	 *
-	 * See also {@link ~MultiRootEditor#registerRootAttribute `MultiRootEditor#registerRootAttribute()`} and
-	 * {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `config.rootsAttributes` configuration option}.
-	 *
-	 * When this method is used in real-time collaboration environment, its effects become asynchronous as the editor will first synchronize
-	 * with the remote editing session, before the root is added to the editor.
-	 *
-	 * If the root has been already loaded by any other client, the additional data passed in `loadRoot()` parameters will be ignored.
-	 *
-	 * @param rootName Name of the root to load.
-	 * @param options Additional options for the loaded root.
-	 * @fires loadRoot
-	 */ loadRoot(rootName, { data = '', attributes = {} } = {}) {
+     * Loads a root that has previously been declared in {@link module:core/editor/editorconfig~EditorConfig#lazyRoots `lazyRoots`}
+     * configuration option.
+     *
+     * Only roots specified in the editor config can be loaded. A root cannot be loaded multiple times. A root cannot be unloaded and
+     * loading a root cannot be reverted using the undo feature.
+     *
+     * When a root becomes loaded, it will be treated by the editor as though it was just added. This, among others, means that all
+     * related events and mechanisms will be fired, including {@link ~MultiRootEditor#event:addRoot `addRoot` event},
+     * {@link module:engine/model/document~Document#event:change `model.Document` `change` event}, model post-fixers and conversion.
+     *
+     * Until the root becomes loaded, all above mechanisms are suppressed.
+     *
+     * This method is {@link module:utils/observablemixin~Observable#decorate decorated}.
+     *
+     * Note that attributes loaded together with a root are automatically registered.
+     *
+     * See also {@link ~MultiRootEditor#registerRootAttribute `MultiRootEditor#registerRootAttribute()`} and
+     * {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `config.rootsAttributes` configuration option}.
+     *
+     * When this method is used in real-time collaboration environment, its effects become asynchronous as the editor will first synchronize
+     * with the remote editing session, before the root is added to the editor.
+     *
+     * If the root has been already loaded by any other client, the additional data passed in `loadRoot()` parameters will be ignored.
+     *
+     * @param rootName Name of the root to load.
+     * @param options Additional options for the loaded root.
+     * @fires loadRoot
+     */ loadRoot(rootName, { data = '', attributes = {} } = {}) {
         // `root` will be defined as it is guaranteed by a check in a higher priority callback.
         const root = this.model.document.getRoot(rootName);
         this.model.enqueueChange({
@@ -756,15 +731,15 @@ import { isElement as isElement$1 } from 'lodash-es';
         });
     }
     /**
-	 * Returns the document data for all attached roots.
-	 *
-	 * @param options Additional configuration for the retrieved data.
-	 * Editor features may introduce more configuration options that can be set through this parameter.
-	 * @param options.trim Whether returned data should be trimmed. This option is set to `'empty'` by default,
-	 * which means that whenever editor content is considered empty, an empty string is returned. To turn off trimming
-	 * use `'none'`. In such cases exact content will be returned (for example `'<p>&nbsp;</p>'` for an empty editor).
-	 * @returns The full document data.
-	 */ getFullData(options) {
+     * Returns the document data for all attached roots.
+     *
+     * @param options Additional configuration for the retrieved data.
+     * Editor features may introduce more configuration options that can be set through this parameter.
+     * @param options.trim Whether returned data should be trimmed. This option is set to `'empty'` by default,
+     * which means that whenever editor content is considered empty, an empty string is returned. To turn off trimming
+     * use `'none'`. In such cases exact content will be returned (for example `'<p>&nbsp;</p>'` for an empty editor).
+     * @returns The full document data.
+     */ getFullData(options) {
         const data = {};
         for (const rootName of this.model.document.getRootNames()){
             data[rootName] = this.data.get({
@@ -775,13 +750,13 @@ import { isElement as isElement$1 } from 'lodash-es';
         return data;
     }
     /**
-	 * Returns attributes for all attached roots.
-	 *
-	 * Note: all and only {@link ~MultiRootEditor#registerRootAttribute registered} roots attributes will be returned.
-	 * If a registered root attribute is not set for a given root, `null` will be returned.
-	 *
-	 * @returns Object with roots attributes. Keys are roots names, while values are attributes set on given root.
-	 */ getRootsAttributes() {
+     * Returns attributes for all attached roots.
+     *
+     * Note: all and only {@link ~MultiRootEditor#registerRootAttribute registered} roots attributes will be returned.
+     * If a registered root attribute is not set for a given root, `null` will be returned.
+     *
+     * @returns Object with roots attributes. Keys are roots names, while values are attributes set on given root.
+     */ getRootsAttributes() {
         const rootsAttributes = {};
         for (const rootName of this.model.document.getRootNames()){
             rootsAttributes[rootName] = this.getRootAttributes(rootName);
@@ -789,11 +764,11 @@ import { isElement as isElement$1 } from 'lodash-es';
         return rootsAttributes;
     }
     /**
-	 * Returns attributes for the specified root.
-	 *
-	 * Note: all and only {@link ~MultiRootEditor#registerRootAttribute registered} roots attributes will be returned.
-	 * If a registered root attribute is not set for a given root, `null` will be returned.
-	 */ getRootAttributes(rootName) {
+     * Returns attributes for the specified root.
+     *
+     * Note: all and only {@link ~MultiRootEditor#registerRootAttribute registered} roots attributes will be returned.
+     * If a registered root attribute is not set for a given root, `null` will be returned.
+     */ getRootAttributes(rootName) {
         const rootAttributes = {};
         const root = this.model.document.getRoot(rootName);
         for (const key of this._registeredRootsAttributesKeys){
@@ -802,15 +777,15 @@ import { isElement as isElement$1 } from 'lodash-es';
         return rootAttributes;
     }
     /**
-	 * Registers given string as a root attribute key. Registered root attributes are added to
-	 * {@link module:engine/model/schema~Schema schema}, and also returned by
-	 * {@link ~MultiRootEditor#getRootAttributes `getRootAttributes()`} and
-	 * {@link ~MultiRootEditor#getRootsAttributes `getRootsAttributes()`}.
-	 *
-	 * Note: attributes passed in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `config.rootsAttributes`} are
-	 * automatically registered as the editor is initialized. However, registering the same attribute twice does not have any negative
-	 * impact, so it is recommended to use this method in any feature that uses roots attributes.
-	 */ registerRootAttribute(key) {
+     * Registers given string as a root attribute key. Registered root attributes are added to
+     * {@link module:engine/model/schema~Schema schema}, and also returned by
+     * {@link ~MultiRootEditor#getRootAttributes `getRootAttributes()`} and
+     * {@link ~MultiRootEditor#getRootsAttributes `getRootsAttributes()`}.
+     *
+     * Note: attributes passed in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `config.rootsAttributes`} are
+     * automatically registered as the editor is initialized. However, registering the same attribute twice does not have any negative
+     * impact, so it is recommended to use this method in any feature that uses roots attributes.
+     */ registerRootAttribute(key) {
         if (this._registeredRootsAttributesKeys.has(key)) {
             return;
         }
@@ -820,46 +795,46 @@ import { isElement as isElement$1 } from 'lodash-es';
         });
     }
     /**
-	 * Switches given editor root to the read-only mode.
-	 *
-	 * In contrary to {@link module:core/editor/editor~Editor#enableReadOnlyMode `enableReadOnlyMode()`}, which switches the whole editor
-	 * to the read-only mode, this method turns only a particular root to the read-only mode. This can be useful when you want to prevent
-	 * editing only a part of the editor content.
-	 *
-	 * When you switch a root to the read-only mode, you need provide a unique identifier (`lockId`) that will identify this request. You
-	 * will need to provide the same `lockId` when you will want to
-	 * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#enableRoot re-enable} the root.
-	 *
-	 * ```ts
-	 * const model = editor.model;
-	 * const myRoot = model.document.getRoot( 'myRoot' );
-	 *
-	 * editor.disableRoot( 'myRoot', 'my-lock' );
-	 * model.canEditAt( myRoot ); // `false`
-	 *
-	 * editor.disableRoot( 'myRoot', 'other-lock' );
-	 * editor.disableRoot( 'myRoot', 'other-lock' ); // Multiple locks with the same ID have no effect.
-	 * model.canEditAt( myRoot ); // `false`
-	 *
-	 * editor.enableRoot( 'myRoot', 'my-lock' );
-	 * model.canEditAt( myRoot ); // `false`
-	 *
-	 * editor.enableRoot( 'myRoot', 'other-lock' );
-	 * model.canEditAt( myRoot ); // `true`
-	 * ```
-	 *
-	 * See also {@link module:core/editor/editor~Editor#enableReadOnlyMode `Editor#enableReadOnlyMode()`} and
-	 * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#enableRoot `MultiRootEditor#enableRoot()`}.
-	 *
-	 * @param rootName Name of the root to switch to read-only mode.
-	 * @param lockId A unique ID for setting the editor to the read-only state.
-	 */ disableRoot(rootName, lockId) {
+     * Switches given editor root to the read-only mode.
+     *
+     * In contrary to {@link module:core/editor/editor~Editor#enableReadOnlyMode `enableReadOnlyMode()`}, which switches the whole editor
+     * to the read-only mode, this method turns only a particular root to the read-only mode. This can be useful when you want to prevent
+     * editing only a part of the editor content.
+     *
+     * When you switch a root to the read-only mode, you need provide a unique identifier (`lockId`) that will identify this request. You
+     * will need to provide the same `lockId` when you will want to
+     * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#enableRoot re-enable} the root.
+     *
+     * ```ts
+     * const model = editor.model;
+     * const myRoot = model.document.getRoot( 'myRoot' );
+     *
+     * editor.disableRoot( 'myRoot', 'my-lock' );
+     * model.canEditAt( myRoot ); // `false`
+     *
+     * editor.disableRoot( 'myRoot', 'other-lock' );
+     * editor.disableRoot( 'myRoot', 'other-lock' ); // Multiple locks with the same ID have no effect.
+     * model.canEditAt( myRoot ); // `false`
+     *
+     * editor.enableRoot( 'myRoot', 'my-lock' );
+     * model.canEditAt( myRoot ); // `false`
+     *
+     * editor.enableRoot( 'myRoot', 'other-lock' );
+     * model.canEditAt( myRoot ); // `true`
+     * ```
+     *
+     * See also {@link module:core/editor/editor~Editor#enableReadOnlyMode `Editor#enableReadOnlyMode()`} and
+     * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#enableRoot `MultiRootEditor#enableRoot()`}.
+     *
+     * @param rootName Name of the root to switch to read-only mode.
+     * @param lockId A unique ID for setting the editor to the read-only state.
+     */ disableRoot(rootName, lockId) {
         if (rootName == '$graveyard') {
             /**
-			 * You cannot disable the `$graveyard` root.
-			 *
-			 * @error multi-root-editor-cannot-disable-graveyard-root
-			 */ throw new CKEditorError('multi-root-editor-cannot-disable-graveyard-root', this);
+             * You cannot disable the `$graveyard` root.
+             *
+             * @error multi-root-editor-cannot-disable-graveyard-root
+             */ throw new CKEditorError('multi-root-editor-cannot-disable-graveyard-root', this);
         }
         const locksForGivenRoot = this._readOnlyRootLocks.get(rootName);
         if (locksForGivenRoot) {
@@ -875,13 +850,13 @@ import { isElement as isElement$1 } from 'lodash-es';
         }
     }
     /**
-	 * Removes given read-only lock from the given root.
-	 *
-	 * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor#disableRoot `disableRoot()`}.
-	 *
-	 * @param rootName Name of the root to switch back from the read-only mode.
-	 * @param lockId A unique ID for setting the editor to the read-only state.
-	 */ enableRoot(rootName, lockId) {
+     * Removes given read-only lock from the given root.
+     *
+     * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor#disableRoot `disableRoot()`}.
+     *
+     * @param rootName Name of the root to switch back from the read-only mode.
+     * @param lockId A unique ID for setting the editor to the read-only state.
+     */ enableRoot(rootName, lockId) {
         const locksForGivenRoot = this._readOnlyRootLocks.get(rootName);
         if (!locksForGivenRoot || !locksForGivenRoot.has(lockId)) {
             return;
@@ -897,127 +872,127 @@ import { isElement as isElement$1 } from 'lodash-es';
         }
     }
     /**
-	 * Creates a new multi-root editor instance.
-	 *
-	 * **Note:** remember that `MultiRootEditor` does not append the toolbar element to your web page, so you have to do it manually
-	 * after the editor has been initialized.
-	 *
-	 * There are a few different ways to initialize the multi-root editor.
-	 *
-	 * # Using existing DOM elements:
-	 *
-	 * ```ts
-	 * MultiRootEditor.create( {
-	 * 	intro: document.querySelector( '#editor-intro' ),
-	 * 	content: document.querySelector( '#editor-content' ),
-	 * 	sidePanelLeft: document.querySelector( '#editor-side-left' ),
-	 * 	sidePanelRight: document.querySelector( '#editor-side-right' ),
-	 * 	outro: document.querySelector( '#editor-outro' )
-	 * } )
-	 * .then( editor => {
-	 * 	console.log( 'Editor was initialized', editor );
-	 *
-	 * 	// Append the toolbar inside a provided DOM element.
-	 * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
-	 * } )
-	 * .catch( err => {
-	 * 	console.error( err.stack );
-	 * } );
-	 * ```
-	 *
-	 * The elements' content will be used as the editor data and elements will become editable elements.
-	 *
-	 * # Creating a detached editor
-	 *
-	 * Alternatively, you can initialize the editor by passing the initial data directly as strings.
-	 * In this case, you will have to manually append both the toolbar element and the editable elements to your web page.
-	 *
-	 * ```ts
-	 * MultiRootEditor.create( {
-	 * 	intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
-	 * 	content: '<p>Lorem ipsum dolor sit amet.</p>',
-	 * 	sidePanelLeft: '<blockquote>Strong quotation from article.</blockquote>',
-	 * 	sidePanelRight: '<p>List of similar articles...</p>',
-	 * 	outro: '<p>Closing text.</p>'
-	 * } )
-	 * .then( editor => {
-	 * 	console.log( 'Editor was initialized', editor );
-	 *
-	 * 	// Append the toolbar inside a provided DOM element.
-	 * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
-	 *
-	 * 	// Append DOM editable elements created by the editor.
-	 * 	const editables = editor.ui.view.editables;
-	 * 	const container = document.querySelector( '#editable-container' );
-	 *
-	 * 	container.appendChild( editables.intro.element );
-	 * 	container.appendChild( editables.content.element );
-	 * 	container.appendChild( editables.outro.element );
-	 * } )
-	 * .catch( err => {
-	 * 	console.error( err.stack );
-	 * } );
-	 * ```
-	 *
-	 * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
-	 * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
-	 *
-	 * # Using an existing DOM element (and data provided in `config.initialData`)
-	 *
-	 * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
-	 *
-	 * ```ts
-	 * MultiRootEditor.create( {
-	 * 	intro: document.querySelector( '#editor-intro' ),
-	 * 	content: document.querySelector( '#editor-content' ),
-	 * 	sidePanelLeft: document.querySelector( '#editor-side-left' ),
-	 * 	sidePanelRight: document.querySelector( '#editor-side-right' ),
-	 * 	outro: document.querySelector( '#editor-outro' )
-	 * }, {
-	 * 	initialData: {
-	 * 		intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
-	 * 		content: '<p>Lorem ipsum dolor sit amet.</p>',
-	 * 		sidePanelLeft '<blockquote>Strong quotation from article.</blockquote>':
-	 * 		sidePanelRight '<p>List of similar articles...</p>':
-	 * 		outro: '<p>Closing text.</p>'
-	 * 	}
-	 * } )
-	 * .then( editor => {
-	 * 	console.log( 'Editor was initialized', editor );
-	 *
-	 * 	// Append the toolbar inside a provided DOM element.
-	 * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
-	 * } )
-	 * .catch( err => {
-	 * 	console.error( err.stack );
-	 * } );
-	 * ```
-	 *
-	 * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
-	 * makes it difficult to set the content of the source element.
-	 *
-	 * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
-	 *
-	 * # Configuring the editor
-	 *
-	 * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
-	 * customizing plugins, toolbar and more.
-	 *
-	 * @param sourceElementsOrData The DOM elements that will be the source for the created editor
-	 * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
-	 *
-	 * If DOM elements are passed, their content will be automatically loaded to the editor upon initialization and the elements will be
-	 * used as the editor's editable areas. The editor data will be set back to the original element once the editor is destroyed if the
-	 * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy} option
-	 * is set to `true`.
-	 *
-	 * If the initial data is passed, a detached editor will be created. For each entry in the passed object, one editor root and one
-	 * editable DOM element will be created. You will need to attach the editable elements into the DOM manually. The elements are available
-	 * through the {@link module:editor-multi-root/multirooteditorui~MultiRootEditorUI#getEditableElement `editor.ui.getEditableElement()`}
-	 * method.
-	 * @param config The editor configuration.
-	 * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
-	 */ static create(sourceElementsOrData, config = {}) {
+     * Creates a new multi-root editor instance.
+     *
+     * **Note:** remember that `MultiRootEditor` does not append the toolbar element to your web page, so you have to do it manually
+     * after the editor has been initialized.
+     *
+     * There are a few different ways to initialize the multi-root editor.
+     *
+     * # Using existing DOM elements:
+     *
+     * ```ts
+     * MultiRootEditor.create( {
+     * 	intro: document.querySelector( '#editor-intro' ),
+     * 	content: document.querySelector( '#editor-content' ),
+     * 	sidePanelLeft: document.querySelector( '#editor-side-left' ),
+     * 	sidePanelRight: document.querySelector( '#editor-side-right' ),
+     * 	outro: document.querySelector( '#editor-outro' )
+     * } )
+     * .then( editor => {
+     * 	console.log( 'Editor was initialized', editor );
+     *
+     * 	// Append the toolbar inside a provided DOM element.
+     * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+     * } )
+     * .catch( err => {
+     * 	console.error( err.stack );
+     * } );
+     * ```
+     *
+     * The elements' content will be used as the editor data and elements will become editable elements.
+     *
+     * # Creating a detached editor
+     *
+     * Alternatively, you can initialize the editor by passing the initial data directly as strings.
+     * In this case, you will have to manually append both the toolbar element and the editable elements to your web page.
+     *
+     * ```ts
+     * MultiRootEditor.create( {
+     * 	intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
+     * 	content: '<p>Lorem ipsum dolor sit amet.</p>',
+     * 	sidePanelLeft: '<blockquote>Strong quotation from article.</blockquote>',
+     * 	sidePanelRight: '<p>List of similar articles...</p>',
+     * 	outro: '<p>Closing text.</p>'
+     * } )
+     * .then( editor => {
+     * 	console.log( 'Editor was initialized', editor );
+     *
+     * 	// Append the toolbar inside a provided DOM element.
+     * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+     *
+     * 	// Append DOM editable elements created by the editor.
+     * 	const editables = editor.ui.view.editables;
+     * 	const container = document.querySelector( '#editable-container' );
+     *
+     * 	container.appendChild( editables.intro.element );
+     * 	container.appendChild( editables.content.element );
+     * 	container.appendChild( editables.outro.element );
+     * } )
+     * .catch( err => {
+     * 	console.error( err.stack );
+     * } );
+     * ```
+     *
+     * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
+     * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
+     *
+     * # Using an existing DOM element (and data provided in `config.initialData`)
+     *
+     * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
+     *
+     * ```ts
+     * MultiRootEditor.create( {
+     * 	intro: document.querySelector( '#editor-intro' ),
+     * 	content: document.querySelector( '#editor-content' ),
+     * 	sidePanelLeft: document.querySelector( '#editor-side-left' ),
+     * 	sidePanelRight: document.querySelector( '#editor-side-right' ),
+     * 	outro: document.querySelector( '#editor-outro' )
+     * }, {
+     * 	initialData: {
+     * 		intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
+     * 		content: '<p>Lorem ipsum dolor sit amet.</p>',
+     * 		sidePanelLeft '<blockquote>Strong quotation from article.</blockquote>':
+     * 		sidePanelRight '<p>List of similar articles...</p>':
+     * 		outro: '<p>Closing text.</p>'
+     * 	}
+     * } )
+     * .then( editor => {
+     * 	console.log( 'Editor was initialized', editor );
+     *
+     * 	// Append the toolbar inside a provided DOM element.
+     * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+     * } )
+     * .catch( err => {
+     * 	console.error( err.stack );
+     * } );
+     * ```
+     *
+     * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
+     * makes it difficult to set the content of the source element.
+     *
+     * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
+     *
+     * # Configuring the editor
+     *
+     * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
+     * customizing plugins, toolbar and more.
+     *
+     * @param sourceElementsOrData The DOM elements that will be the source for the created editor
+     * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
+     *
+     * If DOM elements are passed, their content will be automatically loaded to the editor upon initialization and the elements will be
+     * used as the editor's editable areas. The editor data will be set back to the original element once the editor is destroyed if the
+     * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy} option
+     * is set to `true`.
+     *
+     * If the initial data is passed, a detached editor will be created. For each entry in the passed object, one editor root and one
+     * editable DOM element will be created. You will need to attach the editable elements into the DOM manually. The elements are available
+     * through the {@link module:editor-multi-root/multirooteditorui~MultiRootEditorUI#getEditableElement `editor.ui.getEditableElement()`}
+     * method.
+     * @param config The editor configuration.
+     * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
+     */ static create(sourceElementsOrData, config = {}) {
         return new Promise((resolve)=>{
             for (const sourceItem of Object.values(sourceElementsOrData)){
                 if (isElement(sourceItem) && sourceItem.tagName === 'TEXTAREA') {
@@ -1036,26 +1011,26 @@ import { isElement as isElement$1 } from 'lodash-es';
         });
     }
     /**
-	 * @internal
-	 */ _verifyRootsWithInitialData() {
+     * @internal
+     */ _verifyRootsWithInitialData() {
         const initialData = this.config.get('initialData');
         // Roots that are not in the initial data.
         for (const rootName of this.model.document.getRootNames()){
             if (!(rootName in initialData)) {
                 /**
-				 * Editor roots do not match the
-				 * {@link module:core/editor/editorconfig~EditorConfig#initialData `initialData` configuration}.
-				 *
-				 * This may happen for one of the two reasons:
-				 *
-				 * * Configuration error. The `sourceElementsOrData` parameter in
-				 * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} contains different
-				 * roots than {@link module:core/editor/editorconfig~EditorConfig#initialData `initialData` configuration}.
-				 * * As the editor was initialized, the {@link module:core/editor/editorconfig~EditorConfig#initialData `initialData`}
-				 * configuration value or the state of the editor roots has been changed.
-				 *
-				 * @error multi-root-editor-root-initial-data-mismatch
-				 */ throw new CKEditorError('multi-root-editor-root-initial-data-mismatch', null);
+                 * Editor roots do not match the
+                 * {@link module:core/editor/editorconfig~EditorConfig#initialData `initialData` configuration}.
+                 *
+                 * This may happen for one of the two reasons:
+                 *
+                 * * Configuration error. The `sourceElementsOrData` parameter in
+                 * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} contains different
+                 * roots than {@link module:core/editor/editorconfig~EditorConfig#initialData `initialData` configuration}.
+                 * * As the editor was initialized, the {@link module:core/editor/editorconfig~EditorConfig#initialData `initialData`}
+                 * configuration value or the state of the editor roots has been changed.
+                 *
+                 * @error multi-root-editor-root-initial-data-mismatch
+                 */ throw new CKEditorError('multi-root-editor-root-initial-data-mismatch', null);
             }
         }
         // Roots that are not in the editor.