@ckeditor/ckeditor5-editor-multi-root 47.6.1 → 48.0.0-alpha.1

package/dist/index.js

@@ -2,8 +2,8 @@
  * @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
  */
-import { Editor, secureSourceElement } from '@ckeditor/ckeditor5-core/dist/index.js';
-import { CKEditorError, logWarning, decodeLicenseKey, isFeatureBlockedByLicenseKey, setDataInElement, getDataFromElement } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { Editor, normalizeMultiRootEditorConstructorParams, normalizeRootsConfig, secureSourceElement } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { logWarning, CKEditorError, decodeLicenseKey, isFeatureBlockedByLicenseKey, setDataInElement } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { EditorUI, EditorUIView, ToolbarView, MenuBarView, InlineEditableUIView } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { enableViewPlaceholder } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { isElement as isElement$1 } from 'es-toolkit/compat';
@@ -147,10 +147,7 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
 	 * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
 	 */ _initPlaceholder(editable, placeholder) {
         if (!placeholder) {
-            const configPlaceholder = this.editor.config.get('placeholder');
-            if (configPlaceholder) {
-                placeholder = typeof configPlaceholder === 'string' ? configPlaceholder : configPlaceholder[editable.name];
-            }
+            placeholder = this.editor.config.get('roots')[editable.name]?.placeholder;
         }
         const editingView = this.editor.editing.view;
         const editingRoot = editingView.document.getRoot(editable.name);
@@ -214,7 +211,7 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         this.editables = {};
         // Create `InlineEditableUIView` instance for each editable.
         for (const editableName of editableNames){
-            const editableElement = options.editableElements ? options.editableElements[editableName] : undefined;
+            const editableElement = options.editableElements?.[editableName];
             let { label } = options;
             if (typeof label === 'object') {
                 label = label[editableName];
@@ -314,47 +311,49 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
 	 * 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}.
+	 * Holds attributes keys that were passed in
+	 * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.modelAttributes`}
+	 * 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 = {}){
-        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) {
-            // Documented in core/editor/editorconfig.jsdoc.
-            // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-            throw new CKEditorError('editor-create-initial-data', null);
+    constructor(sourceElementsOrDataOrConfig, config = {}){
+        const { sourceElementsOrData, editorConfig } = normalizeMultiRootEditorConstructorParams(sourceElementsOrDataOrConfig, config);
+        super(editorConfig);
+        normalizeRootsConfig(sourceElementsOrData, this.config, false);
+        if (isElement(this.config.get('attachTo'))) {
+            // Documented in core/editor/editorconfig.ts.
+            logWarning('editor-create-attachto-ignored');
         }
-        super(config);
-        if (!sourceIsData) {
-            this.sourceElements = sourceElementsOrData;
-        } else {
-            this.sourceElements = {};
+        if (this.config.get('lazyRoots')) {
+            /**
+			 * Using deprecated `config.lazyRoots` configuration option.
+			 * Use `config.roots.<rootName>.lazyLoad` instead.
+			 *
+			 * @error multi-root-editor-root-deprecated-config-lazy-roots
+			 */ throw new CKEditorError('multi-root-editor-root-deprecated-config-lazy-roots', null);
         }
-        if (this.config.get('initialData') === undefined) {
-            // Create initial data object containing data from all roots.
-            const initialData = {};
-            for (const rootName of rootNames){
-                initialData[rootName] = getInitialData(sourceElementsOrData[rootName]);
-            }
-            this.config.set('initialData', initialData);
+        if (this.config.get('rootsAttributes')) {
+            /**
+			 * Using deprecated `config.rootsAttributes` configuration option.
+			 * Use `config.roots.<rootName>.modelAttributes` instead.
+			 *
+			 * @error multi-root-editor-root-deprecated-config-roots-attributes
+			 */ throw new CKEditorError('multi-root-editor-root-deprecated-config-roots-attributes', null);
         }
-        if (!sourceIsData) {
-            for (const rootName of rootNames){
-                secureSourceElement(this, sourceElementsOrData[rootName]);
+        // From this point use only normalized `roots.<rootName>.element`, etc.
+        const rootsConfig = Object.entries(this.config.get('roots'));
+        this.sourceElements = {};
+        for (const [rootName, { element }] of rootsConfig){
+            if (isElement(element)) {
+                if (element.tagName === 'TEXTAREA') {
+                    // Documented in core/editor/editor.js
+                    // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
+                    throw new CKEditorError('editor-wrong-element', null);
+                }
+                this.sourceElements[rootName] = element;
+                secureSourceElement(this, element);
             }
         }
         this.editing.view.document.roots.on('add', (evt, viewRoot)=>{
@@ -376,54 +375,57 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
                 }
             });
         });
-        for (const rootName of rootNames){
+        for (const [rootName, rootConfig] of rootsConfig){
             // Create root and `UIView` element for each editable container.
-            this.model.document.createRoot('$root', rootName);
-        }
-        if (this.config.get('lazyRoots')) {
-            for (const rootName of this.config.get('lazyRoots')){
-                const root = this.model.document.createRoot('$root', rootName);
+            const root = this.model.document.createRoot('$root', rootName);
+            if (rootConfig.lazyLoad) {
                 root._isLoaded = false;
             }
-        }
-        if (this.config.get('rootsAttributes')) {
-            const rootsAttributes = this.config.get('rootsAttributes');
-            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);
-                }
+            const attributes = rootConfig.modelAttributes;
+            if (attributes) {
                 for (const key of Object.keys(attributes)){
                     this.registerRootAttribute(key);
                 }
             }
-            this.data.on('init', ()=>{
-                this.model.enqueueChange({
-                    isUndoable: false
-                }, (writer)=>{
-                    for (const [name, attributes] of Object.entries(rootsAttributes)){
-                        const root = this.model.document.getRoot(name);
-                        for (const [key, value] of Object.entries(attributes)){
-                            if (value !== null) {
-                                writer.setAttribute(key, value, root);
-                            }
+        }
+        // Registering `$rootEditableOptions` attribute to make it available in the editor model.
+        // This allows to store editable options for each root in the model, and make them available on other RTC clients.
+        // We do not use `registerRootAttribute()` method here, as this attribute is used internally
+        // and should not be returned by `getRootsAttributes()` method.
+        this.editing.model.schema.extend('$root', {
+            allowAttributes: '$rootEditableOptions'
+        });
+        this.data.on('init', ()=>{
+            this.model.enqueueChange({
+                isUndoable: false
+            }, (writer)=>{
+                for (const [rootName, rootConfig] of rootsConfig){
+                    const root = this.model.document.getRoot(rootName);
+                    for (const [key, value] of Object.entries(rootConfig.modelAttributes || {})){
+                        if (value !== null) {
+                            writer.setAttribute(key, value, root);
                         }
                     }
-                });
+                    // Set editable config for consistency with `addRoot()` method. This will allow features
+                    // to use the same configuration for both initially loaded and dynamically added roots.
+                    const rootEditableOptions = {
+                        ...rootConfig.placeholder && {
+                            placeholder: rootConfig.placeholder
+                        },
+                        ...rootConfig.label && {
+                            label: rootConfig.label
+                        }
+                    };
+                    writer.setAttribute('$rootEditableOptions', rootEditableOptions, root);
+                }
             });
-        }
+        });
         const options = {
             shouldToolbarGroupWhenFull: !this.config.get('toolbar.shouldNotGroupWhenFull'),
-            editableElements: sourceIsData ? undefined : sourceElementsOrData,
-            label: this.config.get('label')
+            editableElements: this.sourceElements,
+            label: extractRootsConfigField(this.config.get('roots'), 'label')
         };
-        const view = new MultiRootEditorUIView(this.locale, this.editing.view, rootNames, options);
+        const view = new MultiRootEditorUIView(this.locale, this.editing.view, getNonLazyLoadRootsNames(rootsConfig), options);
         this.ui = new MultiRootEditorUI(this, view);
         this.model.document.on('change:data', ()=>{
             const changedRoots = this.model.document.differ.getChangedRoots();
@@ -544,90 +546,36 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
             }
         });
     }
-    /**
-	 * 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 } = {}) {
+    addRoot(rootName, options = {}) {
+        const initialData = options.initialData || options.data || '';
+        const modelAttributes = options.modelAttributes || options.attributes || {};
+        const modelElement = options.elementName || '$root';
+        if (isElement(options.element)) {
+            /**
+			 * The `element` option is not supported in {@link #addRoot `addRoot()`} method, and will be ignored.
+			 */ logWarning('multi-root-editor-add-root-element-option-ignored');
+        }
         const _addRoot = (writer)=>{
-            const root = writer.addRoot(rootName, elementName);
-            if (data) {
-                writer.insert(this.data.parse(data, root), root, 0);
+            const root = writer.addRoot(rootName, modelElement);
+            if (initialData) {
+                writer.insert(this.data.parse(initialData, root), root, 0);
             }
-            for (const key of Object.keys(attributes)){
+            for (const key of Object.keys(modelAttributes)){
                 this.registerRootAttribute(key);
-                writer.setAttribute(key, attributes[key], root);
+                writer.setAttribute(key, modelAttributes[key], root);
             }
+            // Storing editable options as a root attribute to make them available on other RTC clients.
+            const rootEditableOptions = {
+                ...options.placeholder && {
+                    placeholder: options.placeholder
+                },
+                ...options.label && {
+                    label: options.label
+                }
+            };
+            writer.setAttribute('$rootEditableOptions', rootEditableOptions, root);
         };
-        if (isUndoable) {
+        if (options.isUndoable) {
             this.model.change(_addRoot);
         } else {
             this.model.enqueueChange({
@@ -697,19 +645,17 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
             }, (writer)=>writer.detachRoot(rootName));
         }
     }
-    /**
-	 * 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);
+    createEditable(root, optionsOrPlaceholder, label) {
+        let placeholder;
+        if (!optionsOrPlaceholder || typeof optionsOrPlaceholder === 'string') {
+            placeholder = optionsOrPlaceholder;
+        } else {
+            placeholder = optionsOrPlaceholder?.placeholder;
+            label = optionsOrPlaceholder?.label;
+        }
+        const rootEditableConfig = root.getAttribute('$rootEditableOptions') || {};
+        const editable = this.ui.view.createEditable(root.rootName, undefined, label || rootEditableConfig.label);
+        this.ui.addEditable(editable, placeholder || rootEditableConfig.placeholder);
         this.editing.view.forceRender();
         return editable.element;
     }
@@ -726,8 +672,8 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         return editable.element;
     }
     /**
-	 * Loads a root that has previously been declared in {@link module:core/editor/editorconfig~EditorConfig#lazyRoots `lazyRoots`}
-	 * configuration option.
+	 * Loads a root that has previously been declared in
+	 * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.lazyLoad`} configuration option.
 	 *
 	 * **Important! Lazy roots loading is an experimental feature, and may become deprecated. Be advised of the following
 	 * known limitations:**
@@ -756,7 +702,7 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
 	 * 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}.
+	 * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.modelAttributes` 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.
@@ -835,9 +781,10 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
 	 * {@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.
+	 * Note: attributes passed in
+	 * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>.modelAttributes`}
+	 * 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;
@@ -924,149 +871,21 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
             locksForGivenRoot.delete(lockId);
         }
     }
-    /**
-	 * 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 = {}) {
+    static create(sourceElementsOrDataOrConfig, config = {}) {
         return new Promise((resolve)=>{
-            for (const sourceItem of Object.values(sourceElementsOrData)){
-                if (isElement(sourceItem) && sourceItem.tagName === 'TEXTAREA') {
-                    // Documented in core/editor/editor.js
-                    // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-                    throw new CKEditorError('editor-wrong-element', null);
-                }
-            }
-            const editor = new this(sourceElementsOrData, config);
+            const editor = new this(sourceElementsOrDataOrConfig, config);
             resolve(editor.initPlugins().then(()=>editor.ui.init()).then(()=>{
+                const initialData = extractRootsConfigField(editor.config.get('roots'), 'initialData');
                 // This is checked directly before setting the initial data,
                 // as plugins may change `EditorConfig#initialData` value.
-                editor._verifyRootsWithInitialData();
-                return editor.data.init(editor.config.get('initialData'));
+                editor._verifyRootsWithInitialData(initialData);
+                return editor.data.init(initialData);
             }).then(()=>editor.fire('ready')).then(()=>editor));
         });
     }
     /**
 	 * @internal
-	 */ _verifyRootsWithInitialData() {
-        const initialData = this.config.get('initialData');
+	 */ _verifyRootsWithInitialData(initialData) {
         // Roots that are not in the initial data.
         for (const rootName of this.model.document.getRootNames()){
             if (!(rootName in initialData)) {
@@ -1095,8 +914,20 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         }
     }
 }
-function getInitialData(sourceElementOrData) {
-    return isElement(sourceElementOrData) ? getDataFromElement(sourceElementOrData) : sourceElementOrData;
+/**
+ * Returns names of roots that are not lazy-loaded.
+ */ function getNonLazyLoadRootsNames(rootsConfig) {
+    return rootsConfig.filter(([, { lazyLoad }])=>!lazyLoad).map(([rootName])=>rootName);
+}
+/**
+ * Collects a specific field from the editor configuration for all roots.
+ * Returns a simple map of root names and values of the specified field.
+ * If a root does not have the specified field defined, it is not included in the returned object.
+ */ function extractRootsConfigField(rootsConfig, key) {
+    return Object.fromEntries(Object.entries(rootsConfig).filter(([, config])=>!config.lazyLoad).map(([rootName, config])=>[
+            rootName,
+            config[key]
+        ]).filter(([, value])=>value !== undefined));
 }
 function isElement(value) {
     return isElement$1(value);