From bb269f7423ed48735861b256409656be0d5195ef Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Mon, 9 Mar 2026 18:32:39 +0100
Subject: [PATCH 01/22] Adding aggregated roots config.

---
 .../ckeditor5-core/src/editor/editorconfig.ts | 239 ++++++++++++++++++
 .../src/editor/utils/normalizerootsconfig.ts  | 151 +++++++++++
 packages/ckeditor5-core/src/index.ts          |   2 +
 .../src/ballooneditor.ts                      |  22 +-
 .../src/ballooneditorui.ts                    |   8 +-
 .../tests/ballooneditor.js                    |  61 ++++-
 .../src/classiceditor.ts                      |  23 +-
 .../src/classiceditorui.ts                    |   4 +-
 .../tests/classiceditor.js                    |  61 ++++-
 .../tests/classiceditorui.js                  |  48 +++-
 .../src/decouplededitor.ts                    |  26 +-
 .../src/decouplededitorui.ts                  |   8 +-
 .../tests/decouplededitor.js                  |  61 ++++-
 .../tests/decouplededitorui.js                |  26 +-
 .../src/inlineeditor.ts                       |  25 +-
 .../src/inlineeditorui.ts                     |   8 +-
 .../tests/inlineeditor.js                     |  61 ++++-
 .../tests/inlineeditorui.js                   |  26 +-
 .../src/multirooteditor.ts                    |  57 ++---
 .../src/multirooteditorui.ts                  |   6 +-
 .../tests/multirooteditor.js                  |  27 +-
 21 files changed, 765 insertions(+), 185 deletions(-)
 create mode 100644 packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts

diff --git a/packages/ckeditor5-core/src/editor/editorconfig.ts b/packages/ckeditor5-core/src/editor/editorconfig.ts
index eaf15b14b2d..c708b6ae9c6 100644
--- a/packages/ckeditor5-core/src/editor/editorconfig.ts
+++ b/packages/ckeditor5-core/src/editor/editorconfig.ts
@@ -109,6 +109,12 @@ export interface EditorConfig extends EngineConfig {
 	 * If `config.initialData` is not set when the editor is initialized, the data received in `Editor.create()` call
 	 * will be used to set `config.initialData`. As a result, `initialData` is always set in the editor's config and
 	 * plugins can read and/or modify it during initialization.
+	 *
+	 * **This property has been deprecated and will be removed in the future versions of CKEditor. Please use
+	 * {@link module:core/editor/editorconfig~EditorConfig#root `root.initialData`} or
+	 * {@link module:core/editor/editorconfig~EditorConfig#roots `roots.<rootName>.initialData`} instead.**
+	 *
+	 * @deprecated
 	 */
 	initialData?: string | Record<string, string>;
 
@@ -537,6 +543,12 @@ export interface EditorConfig extends EngineConfig {
 	 * element passed to the `create()` method.
 	 *
 	 * See the {@glink features/editor-placeholder "Editor placeholder"} guide for more information and live examples.
+	 *
+	 * **This property has been deprecated and will be removed in the future versions of CKEditor. Please use
+	 * {@link module:core/editor/editorconfig~EditorConfig#root `root.placeholder`} or
+	 * {@link module:core/editor/editorconfig~EditorConfig#roots `roots.<rootName>.placeholder`} instead.**
+	 *
+	 * @deprecated
 	 */
 	placeholder?: string | Record<string, string>;
 
@@ -864,8 +876,229 @@ export interface EditorConfig extends EngineConfig {
 	 * .then( ... )
 	 * .catch( ... );
 	 * ```
+	 *
+	 * **This property has been deprecated and will be removed in the future versions of CKEditor. Please use
+	 * {@link module:core/editor/editorconfig~EditorConfig#root `root.label`} or
+	 * {@link module:core/editor/editorconfig~EditorConfig#roots `roots.<rootName>.label`} instead.**
+	 *
+	 * @deprecated
 	 */
 	label?: string | Record<string, string>;
+
+	/**
+	 * The root configuration options for the default `main` root.
+	 *
+	 * This option is an alias for `config.roots.main`.
+	 */
+	root?: RootConfig;
+
+	/**
+	 * The root configuration options grouped by the root name.
+	 *
+	 * ```ts
+	 * ClassicEditor
+	 * 	.create( document.querySelector( '#editor' ), {
+	 * 		roots: {
+	 * 			main: {
+	 * 				initialData: '<p>Hello world!</p>',
+	 * 				placeholder: 'Type some text...',
+	 * 				label: 'Main content'
+	 * 			}
+	 * 		}
+	 * 	} );
+	 * ```
+	 */
+	roots?: Record<string, RootConfig>;
+}
+
+/**
+ * TODO
+ */
+export interface RootConfig {
+
+	/**
+	 * The initial editor data to be used instead of the provided element's HTML content.
+	 *
+	 * ```ts
+	 * ClassicEditor
+	 * 	.create( document.querySelector( '#editor' ), {
+	 * 		root: {
+	 * 			initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	 * 		}
+	 * 	} )
+	 * 	.then( ... )
+	 * 	.catch( ... );
+	 * ```
+	 *
+	 * By default, the editor is initialized with the content of the element on which this editor is initialized.
+	 * This configuration option lets you override this behavior and pass different initial data.
+	 * It is especially useful if it is difficult for your integration to put the data inside the HTML element.
+	 *
+	 * If your editor implementation uses multiple roots, you should provide config for roots individually:
+	 *
+	 * ```ts
+	 * MultiRootEditor.create(
+	 * 	// Roots for the editor:
+	 * 	{
+	 * 		header: document.querySelector( '#header' ),
+	 * 		content: document.querySelector( '#content' ),
+	 * 		leftSide: document.querySelector( '#left-side' ),
+	 * 		rightSide: document.querySelector( '#right-side' )
+	 * 	},
+	 * 	// Config:
+	 * 	{
+	 * 		roots: {
+	 * 			header: {
+	 * 				initialData: '<p>Content for header part.</p>'
+	 * 			},
+	 * 			content: {
+	 * 				initialData: '<p>Content for main part.</p>'
+	 * 			},
+	 * 			leftSide: {
+	 * 				initialData: '<p>Content for left-side box.</p>'
+	 * 			},
+	 * 			rightSide: {
+	 * 				initialData: '<p>Content for right-side box.</p>'
+	 * 			}
+	 * 		}
+	 * 	}
+	 * )
+	 * .then( ... )
+	 * .catch( ... );
+	 * ```
+	 * TODO link to root and roots config docs
+	 *
+	 * See also {@link module:core/editor/editor~Editor.create Editor.create()} documentation for the editor implementation which you use.
+	 *
+	 * **Note:** If initial data is passed to `Editor.create()` in the first parameter (instead of a DOM element), and,
+	 * at the same time, `config.initialData` is set, an error will be thrown as those two options exclude themselves.
+	 *
+	 * If `config.root.initialData` is not set when the editor is initialized, the data received in `Editor.create()` call
+	 * will be used to set `config.roots.main.initialData`. As a result, `initialData` is always set in the editor's config and
+	 * plugins can read and/or modify it during initialization. TODO breaking change - the updated initialData changes location
+	 */
+	initialData?: string;
+
+	/**
+	 * Specifies the text displayed in the editor when there is no content (editor is empty). It is intended to
+	 * help users locate the editor in the application (form) and prompt them to input the content. Work similarly
+	 * as to the native DOM
+	 * [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#The_placeholder_attribute)
+	 * used by inputs.
+	 *
+	 * ```ts
+	 * ClassicEditor
+	 * 	.create( document.querySelector( '#editor' ), {
+	 * 		root: {
+	 * 			placeholder: 'Type some text...'
+	 * 		}
+	 * 	} )
+	 * 	.then( ... )
+	 * 	.catch( ... );
+	 * ```
+	 *
+	 * If your editor implementation uses multiple roots, you should provide config for roots individually:
+	 *
+	 * ```ts
+	 * MultiRootEditor.create(
+	 * 	// Roots for the editor:
+	 * 	{
+	 * 		header: document.querySelector( '#header' ),
+	 * 		content: document.querySelector( '#content' ),
+	 * 		leftSide: document.querySelector( '#left-side' ),
+	 * 		rightSide: document.querySelector( '#right-side' )
+	 * 	},
+	 * 	// Config:
+	 * 	{
+	 * 		roots: {
+	 * 			header: {
+	 * 				placeholder: 'Type header...'
+	 * 			},
+	 * 			content: {
+	 * 				placeholder: 'Type content...'
+	 * 			},
+	 * 			leftSide: {
+	 * 				placeholder: 'Type left-side...'
+	 * 			},
+	 * 			rightSide: {
+	 * 				placeholder: 'Type right-side...'
+	 * 			}
+	 * 		}
+	 * 	}
+	 * )
+	 * .then( ... )
+	 * .catch( ... );
+	 * ```
+	 *
+	 * The placeholder text is displayed as a pseudo–element of an empty paragraph in the editor content.
+	 * The paragraph has the `.ck-placeholder` CSS class and the `data-placeholder` attribute.
+	 *
+	 * ```html
+	 * <p data-placeholder="Type some text..." class="ck-placeholder">
+	 * 	::before
+	 * </p>
+	 * ```
+	 *
+	 * **Note**: Placeholder text can also be set using the `placeholder` attribute if a `<textarea>` is passed to
+	 * the `create()` method, e.g. {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
+	 *
+	 * **Note**: This configuration has precedence over the value of the `placeholder` attribute of a `<textarea>`
+	 * element passed to the `create()` method.
+	 *
+	 * See the {@glink features/editor-placeholder "Editor placeholder"} guide for more information and live examples.
+	 */
+	placeholder?: string;
+
+	/**
+	 * Label text for the `aria-label` attribute set on editor editing area. Used by assistive technologies
+	 * to tell apart multiple editor instances (editing areas) on the page. If not set, a default
+	 * "Rich Text Editor. Editing area [name of the area]" is used instead.
+	 *
+	 * ```ts
+	 * ClassicEditor
+	 * 	.create( document.querySelector( '#editor' ), {
+	 * 		root: {
+	 * 			label: 'My editor'
+	 * 		}
+	 * 	} )
+	 * 	.then( ... )
+	 * 	.catch( ... );
+	 * ```
+	 *
+	 * If your editor implementation uses multiple roots, you should provide config for roots individually:
+	 *
+	 * ```ts
+	 * MultiRootEditor.create(
+	 * 	// Roots for the editor:
+	 * 	{
+	 * 		header: document.querySelector( '#header' ),
+	 * 		content: document.querySelector( '#content' ),
+	 * 		leftSide: document.querySelector( '#left-side' ),
+	 * 		rightSide: document.querySelector( '#right-side' )
+	 * 	},
+	 * 	// Config:
+	 * 	{
+	 * 		roots: {
+	 * 			header: {
+	 * 				label: 'Header label'
+	 * 			},
+	 * 			content: {
+	 * 				label: 'Content label'
+	 * 			},
+	 * 			leftSide: {
+	 * 				label: 'Left side label'
+	 * 			},
+	 * 			rightSide: {
+	 * 				label: 'Right side label'
+	 * 			}
+	 * 		}
+	 * 	}
+	 * )
+	 * .then( ... )
+	 * .catch( ... );
+	 * ```
+	 */
+	label?: string;
 }
 
 /**
@@ -875,6 +1108,12 @@ export interface EditorConfig extends EngineConfig {
  * @error editor-create-initial-data
  */
 
+/**
+ * The `config.initialData` option cannot be used together with the `config.root.initialData` or `config.roots.main.initialData`.
+ *
+ * @error editor-create-roots-initial-data
+ */
+
 /**
  * The configuration of the editor language.
  *
diff --git a/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts b/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
new file mode 100644
index 00000000000..c9b5e0dcf16
--- /dev/null
+++ b/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
@@ -0,0 +1,151 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/**
+ * @module core/editor/utils/normalizerootsconfig
+ */
+
+import type { EditorConfig } from '../editorconfig.js';
+
+import {
+	CKEditorError,
+	getDataFromElement,
+	type Config
+} from '@ckeditor/ckeditor5-utils';
+
+import { isElement as _isElement } from 'es-toolkit/compat';
+
+/**
+ * TODO
+ *
+ * @internal
+ */
+export function normalizeRootsConfig(
+	sourceElementsOrData: HTMLElement | string | Record<string, HTMLElement> | Record<string, string>,
+	config: Config<EditorConfig>,
+	defaultRootName: string | false = 'main'
+): void {
+	const mainRootConfig = config.get( 'root' );
+	const rootsConfig = config.get( 'roots' ) || {};
+
+	// Avoid mixing `config.root` and `config.roots.main`.
+	if ( mainRootConfig && ( !defaultRootName || defaultRootName in rootsConfig ) ) {
+		// Documented in core/editor/editorconfig.ts.
+		// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
+		throw new CKEditorError( 'editor-create-roots-initial-data' );
+	}
+
+	// Move `config.root` to `config.roots.main`.
+	// This makes access to root configuration more consistent as all roots will be defined in `config.roots`.
+	if ( defaultRootName ) {
+		rootsConfig[ defaultRootName ] = mainRootConfig || {};
+	}
+
+	const sourceElementIsObject = isSourceElementOrDataPlainObject( sourceElementsOrData );
+
+	// Collect legacy configuration values for `initialData`, `placeholder`, and `label` from the config.
+	const legacyInitialData = getLegacyConfigValue( config, 'initialData', sourceElementIsObject, defaultRootName );
+	const legacyPlaceholder = getLegacyConfigValue( config, 'placeholder', sourceElementIsObject, defaultRootName );
+	const legacyLabel = getLegacyConfigValue( config, 'label', sourceElementIsObject, defaultRootName );
+
+	// Collect root names. This includes root names from the source element (if it's an object),
+	// from `config.roots`, and from legacy config. This ensures that all roots are processed in the next step.
+	const rootNames = Array.from( new Set( [
+		...sourceElementIsObject ? Object.keys( sourceElementsOrData ) : [],
+		...Object.keys( rootsConfig ),
+		...Object.keys( legacyInitialData )
+	] ) );
+
+	// TODO handle legacy data mismatch with source element keys.
+
+	// Ensure that all roots have `initialData` defined. If not, try to get it from the source element or data.
+	for ( const rootName of rootNames ) {
+		const rootConfig = rootsConfig[ rootName ] || {};
+		const sourceElementOrDataForRoot = sourceElementIsObject ? sourceElementsOrData[ rootName ] : sourceElementsOrData;
+
+		// No dedicated initial data for the root.
+		if ( rootConfig.initialData === undefined ) {
+			// No legacy initial data for the root, either.
+			if ( legacyInitialData[ rootName ] === undefined ) {
+				// Use source element data or data itself as a string.
+				rootConfig.initialData = getInitialData( sourceElementOrDataForRoot );
+			}
+			// If both `config.initialData` is set and initial data is passed as the constructor parameter, then throw.
+			else if ( sourceElementOrDataForRoot && !isElement( sourceElementOrDataForRoot ) ) {
+				// Documented in core/editor/editorconfig.ts.
+				// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
+				throw new CKEditorError( 'editor-create-initial-data', null );
+			}
+			// Use legacy `config.initialData`.
+			else {
+				rootConfig.initialData = legacyInitialData[ rootName ];
+			}
+		}
+		// If both `rootConfig.initialData` is set and initial data is passed as the constructor parameter, then throw.
+		else if ( sourceElementOrDataForRoot && !isElement( sourceElementOrDataForRoot ) ) {
+			// Documented in core/editor/editorconfig.ts.
+			// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
+			throw new CKEditorError( 'editor-create-initial-data', null );
+		}
+		// If both `rootConfig.initialData` and legacy initial data are set, then throw.
+		else if ( legacyInitialData[ rootName ] !== undefined ) {
+			// Documented in core/editor/editorconfig.ts.
+			// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
+			throw new CKEditorError( 'editor-create-roots-initial-data' );
+		}
+
+		rootConfig.placeholder ??= legacyPlaceholder[ rootName ];
+		rootConfig.label ??= legacyLabel[ rootName ];
+
+		rootsConfig[ rootName ] = rootConfig;
+	}
+
+	config.set( 'roots', rootsConfig );
+}
+
+/**
+ * Type guard to check if the provided value is a plain object or plain value.
+ */
+function isSourceElementOrDataPlainObject(
+	sourceElementsOrData: HTMLElement | string | Record<string, HTMLElement> | Record<string, string>
+): sourceElementsOrData is Record<string, HTMLElement> | Record<string, string> {
+	return (
+		!!sourceElementsOrData &&
+		typeof sourceElementsOrData == 'object' &&
+		!Array.isArray( sourceElementsOrData ) &&
+		!isElement( sourceElementsOrData )
+	);
+}
+
+/**
+ * Retrieve data from source element or return the string data as is.
+ */
+function getInitialData( sourceElementOrData: HTMLElement | string ): string {
+	return isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : sourceElementOrData;
+}
+
+/**
+ * Retrieve legacy configuration value for `initialData`, `placeholder`, or `label` from the config.
+ * Normalize single-root config so returned value is always an object with root names as keys.
+ */
+function getLegacyConfigValue(
+	config: Config<EditorConfig>,
+	key: 'initialData' | 'placeholder' | 'label',
+	sourceElementIsObject: boolean,
+	defaultRootName: string | false
+): Record<string, string | undefined> {
+	return (
+		sourceElementIsObject || !defaultRootName ?
+			config.get( key ) || {} :
+			{ [ defaultRootName ]: config.get( key ) }
+	) as Record<string, string | undefined>;
+}
+
+/**
+ * An alias for `isElement` from `es-toolkit/compat` with additional type guard.
+ */
+function isElement( value: any ): value is Element {
+	return _isElement( value );
+}
diff --git a/packages/ckeditor5-core/src/index.ts b/packages/ckeditor5-core/src/index.ts
index 7b8a1c76e73..f31ab387640 100644
--- a/packages/ckeditor5-core/src/index.ts
+++ b/packages/ckeditor5-core/src/index.ts
@@ -39,6 +39,7 @@ export {
 
 export type {
 	EditorConfig,
+	RootConfig,
 	LanguageConfig,
 	ToolbarConfig,
 	ToolbarConfigItem,
@@ -50,6 +51,7 @@ export type {
 export { attachToForm } from './editor/utils/attachtoform.js';
 export { ElementApiMixin, type ElementApi } from './editor/utils/elementapimixin.js';
 export { secureSourceElement } from './editor/utils/securesourceelement.js';
+export { normalizeRootsConfig } from './editor/utils/normalizerootsconfig.js';
 
 export { PendingActions, type PendingAction, type PendingActionsAddEvent, type PendingActionsRemoveEvent } from './pendingactions.js';
 
diff --git a/packages/ckeditor5-editor-balloon/src/ballooneditor.ts b/packages/ckeditor5-editor-balloon/src/ballooneditor.ts
index 09c779158cd..489f39eb8ce 100644
--- a/packages/ckeditor5-editor-balloon/src/ballooneditor.ts
+++ b/packages/ckeditor5-editor-balloon/src/ballooneditor.ts
@@ -12,12 +12,13 @@ import {
 	ElementApiMixin,
 	attachToForm,
 	secureSourceElement,
+	normalizeRootsConfig,
 	type EditorConfig,
 	type EditorReadyEvent
 } from '@ckeditor/ckeditor5-core';
 
 import { BalloonToolbar } from '@ckeditor/ckeditor5-ui';
-import { CKEditorError, getDataFromElement } from '@ckeditor/ckeditor5-utils';
+import { CKEditorError } from '@ckeditor/ckeditor5-utils';
 
 import { BalloonEditorUI } from './ballooneditorui.js';
 import { BalloonEditorUIView } from './ballooneditoruiview.js';
@@ -57,18 +58,9 @@ export class BalloonEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * @param config The editor configuration.
 	 */
 	protected constructor( sourceElementOrData: HTMLElement | string, config: EditorConfig = {} ) {
-		// If both `config.initialData` is set and initial data is passed as the constructor parameter, then throw.
-		if ( !isElement( sourceElementOrData ) && config.initialData !== undefined ) {
-			// Documented in core/editor/editorconfig.jsdoc.
-			// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-			throw new CKEditorError( 'editor-create-initial-data', null );
-		}
-
 		super( config );
 
-		if ( this.config.get( 'initialData' ) === undefined ) {
-			this.config.set( 'initialData', getInitialData( sourceElementOrData ) );
-		}
+		normalizeRootsConfig( sourceElementOrData, this.config );
 
 		if ( isElement( sourceElementOrData ) ) {
 			this.sourceElement = sourceElementOrData;
@@ -84,7 +76,7 @@ export class BalloonEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 
 		this.model.document.createRoot();
 
-		const view = new BalloonEditorUIView( this.locale, this.editing.view, this.sourceElement, this.config.get( 'label' ) );
+		const view = new BalloonEditorUIView( this.locale, this.editing.view, this.sourceElement, this.config.get( 'roots' )!.main.label );
 		this.ui = new BalloonEditorUI( this, view );
 
 		attachToForm( this );
@@ -217,7 +209,7 @@ export class BalloonEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 			resolve(
 				editor.initPlugins()
 					.then( () => editor.ui.init() )
-					.then( () => editor.data.init( editor.config.get( 'initialData' )! ) )
+					.then( () => editor.data.init( editor.config.get( 'roots' )!.main.initialData! ) )
 					.then( () => editor.fire<EditorReadyEvent>( 'ready' ) )
 					.then( () => editor )
 			);
@@ -225,10 +217,6 @@ export class BalloonEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	}
 }
 
-function getInitialData( sourceElementOrData: HTMLElement | string ): string {
-	return isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : sourceElementOrData;
-}
-
 function isElement( value: any ): value is Element {
 	return _isElement( value );
 }
diff --git a/packages/ckeditor5-editor-balloon/src/ballooneditorui.ts b/packages/ckeditor5-editor-balloon/src/ballooneditorui.ts
index 8a07cc42df2..99b0a0aa97c 100644
--- a/packages/ckeditor5-editor-balloon/src/ballooneditorui.ts
+++ b/packages/ckeditor5-editor-balloon/src/ballooneditorui.ts
@@ -113,14 +113,10 @@ export class BalloonEditorUI extends EditorUI {
 		const editor = this.editor;
 		const editingView = editor.editing.view;
 		const editingRoot = editingView.document.getRoot()!;
-		const placeholder = editor.config.get( 'placeholder' );
+		const placeholder = editor.config.get( 'roots' )![ editingRoot.rootName ].placeholder;
 
 		if ( placeholder ) {
-			const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[ editingRoot.rootName ];
-
-			if ( placeholderText ) {
-				editingRoot.placeholder = placeholderText;
-			}
+			editingRoot.placeholder = placeholder;
 		}
 
 		enableViewPlaceholder( {
diff --git a/packages/ckeditor5-editor-balloon/tests/ballooneditor.js b/packages/ckeditor5-editor-balloon/tests/ballooneditor.js
index e5a05319d5d..e140176b23f 100644
--- a/packages/ckeditor5-editor-balloon/tests/ballooneditor.js
+++ b/packages/ckeditor5-editor-balloon/tests/ballooneditor.js
@@ -102,14 +102,14 @@ describe( 'BalloonEditor', () => {
 				.catch( done );
 		} );
 
-		describe( 'config.initialData', () => {
+		describe( 'config.roots.main.initialData', () => {
 			it( 'if not set, is set using DOM element data', async () => {
 				const editorElement = document.createElement( 'div' );
 				editorElement.innerHTML = '<p>Foo</p>';
 
 				const editor = new BalloonEditor( editorElement );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Foo</p>' );
 
 				editor.fire( 'ready' );
 				await editor.destroy();
@@ -118,7 +118,7 @@ describe( 'BalloonEditor', () => {
 			it( 'if not set, is set using data passed in constructor', async () => {
 				const editor = new BalloonEditor( '<p>Foo</p>' );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Foo</p>' );
 
 				editor.fire( 'ready' );
 				await editor.destroy();
@@ -130,7 +130,7 @@ describe( 'BalloonEditor', () => {
 
 				const editor = new BalloonEditor( editorElement, { initialData: '<p>Bar</p>' } );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Bar</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Bar</p>' );
 
 				editor.fire( 'ready' );
 				await editor.destroy();
@@ -142,6 +142,59 @@ describe( 'BalloonEditor', () => {
 					new BalloonEditor( '<p>Foo</p>', { initialData: '<p>Bar</p>' } );
 				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
 			} );
+
+			it( 'it should throw if config.root.initialData is set and initial data is passed in constructor', () => {
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new BalloonEditor( '<p>Foo</p>', { root: { initialData: '<p>Bar</p>' } } );
+				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
+			} );
+
+			it( 'it should throw if config.roots.main.initialData is set and initial data is passed in constructor', () => {
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new BalloonEditor( '<p>Foo</p>', { roots: { main: { initialData: '<p>Bar</p>' } } } );
+				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
+			} );
+
+			it( 'it should throw if config.root and config.roots.main is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new BalloonEditor( editorElement, {
+						root: { initialData: '<p>abc</p>' },
+						roots: { main: { initialData: '<p>Bar</p>' } }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
+
+			it( 'it should throw if config.initialData and config.root.initialData is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new BalloonEditor( editorElement, {
+						initialData: '<p>abc</p>',
+						root: { initialData: '<p>abc</p>' }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
+
+			it( 'it should throw if config.initialData and config.roots.main.initialData is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new BalloonEditor( editorElement, {
+						initialData: '<p>abc</p>',
+						roots: { main: { initialData: '<p>abc</p>' } }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
 		} );
 	} );
 
diff --git a/packages/ckeditor5-editor-classic/src/classiceditor.ts b/packages/ckeditor5-editor-classic/src/classiceditor.ts
index 7568c331c0b..27ac3f47b28 100644
--- a/packages/ckeditor5-editor-classic/src/classiceditor.ts
+++ b/packages/ckeditor5-editor-classic/src/classiceditor.ts
@@ -14,10 +14,10 @@ import {
 	Editor,
 	ElementApiMixin,
 	attachToForm,
+	normalizeRootsConfig,
 	type EditorConfig,
 	type EditorReadyEvent
 } from '@ckeditor/ckeditor5-core';
-import { getDataFromElement, CKEditorError } from '@ckeditor/ckeditor5-utils';
 
 import { isElement as _isElement } from 'es-toolkit/compat';
 
@@ -53,20 +53,11 @@ export class ClassicEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * @param config The editor configuration.
 	 */
 	protected constructor( sourceElementOrData: HTMLElement | string, config: EditorConfig = {} ) {
-		// If both `config.initialData` is set and initial data is passed as the constructor parameter, then throw.
-		if ( !isElement( sourceElementOrData ) && config.initialData !== undefined ) {
-			// Documented in core/editor/editorconfig.jsdoc.
-			// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-			throw new CKEditorError( 'editor-create-initial-data', null );
-		}
-
 		super( config );
 
-		this.config.define( 'menuBar.isVisible', false );
+		normalizeRootsConfig( sourceElementOrData, this.config );
 
-		if ( this.config.get( 'initialData' ) === undefined ) {
-			this.config.set( 'initialData', getInitialData( sourceElementOrData ) );
-		}
+		this.config.define( 'menuBar.isVisible', false );
 
 		if ( isElement( sourceElementOrData ) ) {
 			this.sourceElement = sourceElementOrData;
@@ -81,7 +72,7 @@ export class ClassicEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 		const view = new ClassicEditorUIView( this.locale, this.editing.view, {
 			shouldToolbarGroupWhenFull,
 			useMenuBar: menuBarConfig.isVisible,
-			label: this.config.get( 'label' )
+			label: this.config.get( 'roots' )!.main.label
 		} );
 
 		this.ui = new ClassicEditorUI( this, view );
@@ -202,7 +193,7 @@ export class ClassicEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 			resolve(
 				editor.initPlugins()
 					.then( () => editor.ui.init( isElement( sourceElementOrData ) ? sourceElementOrData : null ) )
-					.then( () => editor.data.init( editor.config.get( 'initialData' )! ) )
+					.then( () => editor.data.init( editor.config.get( 'roots' )!.main.initialData! ) )
 					.then( () => editor.fire<EditorReadyEvent>( 'ready' ) )
 					.then( () => editor )
 			);
@@ -210,10 +201,6 @@ export class ClassicEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	}
 }
 
-function getInitialData( sourceElementOrData: HTMLElement | string ): string {
-	return isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : sourceElementOrData;
-}
-
 function isElement( value: any ): value is Element {
 	return _isElement( value );
 }
diff --git a/packages/ckeditor5-editor-classic/src/classiceditorui.ts b/packages/ckeditor5-editor-classic/src/classiceditorui.ts
index c228b9df58c..d411959229c 100644
--- a/packages/ckeditor5-editor-classic/src/classiceditorui.ts
+++ b/packages/ckeditor5-editor-classic/src/classiceditorui.ts
@@ -172,10 +172,10 @@ export class ClassicEditorUI extends EditorUI {
 		const sourceElement = ( editor as Editor & ElementApi ).sourceElement;
 
 		let placeholderText;
-		const placeholder = editor.config.get( 'placeholder' );
+		const placeholder = editor.config.get( 'roots' )![ this.view.editable.name! ].placeholder;
 
 		if ( placeholder ) {
-			placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[ this.view.editable.name! ];
+			placeholderText = placeholder;
 		}
 
 		if ( !placeholderText && sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' ) {
diff --git a/packages/ckeditor5-editor-classic/tests/classiceditor.js b/packages/ckeditor5-editor-classic/tests/classiceditor.js
index b09bc927a1f..49551ff0315 100644
--- a/packages/ckeditor5-editor-classic/tests/classiceditor.js
+++ b/packages/ckeditor5-editor-classic/tests/classiceditor.js
@@ -135,14 +135,14 @@ describe( 'ClassicEditor', () => {
 			} );
 		} );
 
-		describe( 'config.initialData', () => {
+		describe( 'config.roots.main.initialData', () => {
 			it( 'if not set, is set using DOM element data', async () => {
 				const editorElement = document.createElement( 'div' );
 				editorElement.innerHTML = '<p>Foo</p>';
 
 				const editor = new ClassicEditor( editorElement );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Foo</p>' );
 
 				editor.fire( 'ready' );
 				await editor.destroy();
@@ -153,7 +153,7 @@ describe( 'ClassicEditor', () => {
 			it( 'if not set, is set using data passed in constructor', async () => {
 				const editor = new ClassicEditor( '<p>Foo</p>' );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Foo</p>' );
 
 				editor.fire( 'ready' );
 				await editor.destroy();
@@ -165,7 +165,7 @@ describe( 'ClassicEditor', () => {
 
 				const editor = new ClassicEditor( editorElement, { initialData: '<p>Bar</p>' } );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Bar</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Bar</p>' );
 
 				editor.fire( 'ready' );
 				await editor.destroy();
@@ -177,6 +177,59 @@ describe( 'ClassicEditor', () => {
 					new ClassicEditor( '<p>Foo</p>', { initialData: '<p>Bar</p>' } );
 				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
 			} );
+
+			it( 'it should throw if config.root.initialData is set and initial data is passed in constructor', () => {
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new ClassicEditor( '<p>Foo</p>', { root: { initialData: '<p>Bar</p>' } } );
+				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
+			} );
+
+			it( 'it should throw if config.roots.main.initialData is set and initial data is passed in constructor', () => {
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new ClassicEditor( '<p>Foo</p>', { roots: { main: { initialData: '<p>Bar</p>' } } } );
+				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
+			} );
+
+			it( 'it should throw if config.root and config.roots.main is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new ClassicEditor( editorElement, {
+						root: { initialData: '<p>abc</p>' },
+						roots: { main: { initialData: '<p>Bar</p>' } }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
+
+			it( 'it should throw if config.initialData and config.root.initialData is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new ClassicEditor( editorElement, {
+						initialData: '<p>abc</p>',
+						root: { initialData: '<p>abc</p>' }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
+
+			it( 'it should throw if config.initialData and config.roots.main.initialData is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new ClassicEditor( editorElement, {
+						initialData: '<p>abc</p>',
+						roots: { main: { initialData: '<p>abc</p>' } }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
 		} );
 	} );
 
diff --git a/packages/ckeditor5-editor-classic/tests/classiceditorui.js b/packages/ckeditor5-editor-classic/tests/classiceditorui.js
index b63447af3a1..4a3cf147f43 100644
--- a/packages/ckeditor5-editor-classic/tests/classiceditorui.js
+++ b/packages/ckeditor5-editor-classic/tests/classiceditorui.js
@@ -17,6 +17,7 @@ import { keyCodes, env } from '@ckeditor/ckeditor5-utils';
 import { testUtils } from '@ckeditor/ckeditor5-core/tests/_utils/utils.js';
 import { assertBinding } from '@ckeditor/ckeditor5-utils/tests/_utils/utils.js';
 import { isElement } from 'es-toolkit/compat';
+import { normalizeRootsConfig } from '@ckeditor/ckeditor5-core';
 
 describe( 'ClassicEditorUI', () => {
 	let editor, view, ui, viewElement;
@@ -179,7 +180,7 @@ describe( 'ClassicEditorUI', () => {
 				return VirtualClassicTestEditor
 					.create( 'foo', {
 						extraPlugins: [ Paragraph ],
-						placeholder: 'placeholder-text'
+						root: { placeholder: 'placeholder-text' }
 					} )
 					.then( newEditor => {
 						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
@@ -190,11 +191,50 @@ describe( 'ClassicEditorUI', () => {
 					} );
 			} );
 
-			it( 'sets placeholder from editor.config.placeholder - object', () => {
+			it( 'sets placeholder from the "placeholder" attribute of a passed <textarea>', () => {
+				const element = document.createElement( 'textarea' );
+
+				element.setAttribute( 'placeholder', 'placeholder-text' );
+
+				return VirtualClassicTestEditor
+					.create( element, {
+						extraPlugins: [ Paragraph ]
+					} )
+					.then( newEditor => {
+						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
+
+						expect( firstChild.getAttribute( 'data-placeholder' ) ).to.equal( 'placeholder-text' );
+
+						return newEditor.destroy();
+					} );
+			} );
+
+			it( 'uses editor.config.placeholder rather than the "placeholder" attribute of a passed <textarea>', () => {
+				const element = document.createElement( 'textarea' );
+
+				element.setAttribute( 'placeholder', 'placeholder-text' );
+
+				return VirtualClassicTestEditor
+					.create( element, {
+						root: { placeholder: 'config takes precedence' },
+						extraPlugins: [ Paragraph ]
+					} )
+					.then( newEditor => {
+						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
+
+						expect( firstChild.getAttribute( 'data-placeholder' ) ).to.equal( 'config takes precedence' );
+
+						return newEditor.destroy();
+					} );
+			} );
+		} );
+
+		describe( 'placeholder - legacy config', () => {
+			it( 'sets placeholder from editor.config.placeholder - string', () => {
 				return VirtualClassicTestEditor
 					.create( 'foo', {
 						extraPlugins: [ Paragraph ],
-						placeholder: { main: 'placeholder-text' }
+						placeholder: 'placeholder-text'
 					} )
 					.then( newEditor => {
 						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
@@ -1045,6 +1085,8 @@ class VirtualClassicTestEditor extends VirtualTestEditor {
 	constructor( sourceElementOrData, config ) {
 		super( config );
 
+		normalizeRootsConfig( sourceElementOrData, this.config );
+
 		if ( isElement( sourceElementOrData ) ) {
 			this.sourceElement = sourceElementOrData;
 		}
diff --git a/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts b/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts
index 12ab2c78124..c51a20d62da 100644
--- a/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts
+++ b/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts
@@ -11,13 +11,12 @@ import {
 	Editor,
 	ElementApiMixin,
 	secureSourceElement,
+	normalizeRootsConfig,
 	type EditorConfig,
 	type EditorReadyEvent
 } from '@ckeditor/ckeditor5-core';
-import {
-	CKEditorError,
-	getDataFromElement
-} from '@ckeditor/ckeditor5-utils';
+
+import { CKEditorError } from '@ckeditor/ckeditor5-utils';
 
 import { DecoupledEditorUI } from './decouplededitorui.js';
 import { DecoupledEditorUIView } from './decouplededitoruiview.js';
@@ -65,18 +64,9 @@ export class DecoupledEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * @param config The editor configuration.
 	 */
 	protected constructor( sourceElementOrData: HTMLElement | string, config: EditorConfig = {} ) {
-		// If both `config.initialData` is set and initial data is passed as the constructor parameter, then throw.
-		if ( !isElement( sourceElementOrData ) && config.initialData !== undefined ) {
-			// Documented in core/editor/editorconfig.jsdoc.
-			// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-			throw new CKEditorError( 'editor-create-initial-data', null );
-		}
-
 		super( config );
 
-		if ( this.config.get( 'initialData' ) === undefined ) {
-			this.config.set( 'initialData', getInitialData( sourceElementOrData ) );
-		}
+		normalizeRootsConfig( sourceElementOrData, this.config );
 
 		if ( isElement( sourceElementOrData ) ) {
 			this.sourceElement = sourceElementOrData;
@@ -89,7 +79,7 @@ export class DecoupledEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 		const view = new DecoupledEditorUIView( this.locale, this.editing.view, {
 			editableElement: this.sourceElement,
 			shouldToolbarGroupWhenFull,
-			label: this.config.get( 'label' )
+			label: this.config.get( 'roots' )!.main.label
 		} );
 
 		this.ui = new DecoupledEditorUI( this, view );
@@ -244,7 +234,7 @@ export class DecoupledEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 			resolve(
 				editor.initPlugins()
 					.then( () => editor.ui.init() )
-					.then( () => editor.data.init( editor.config.get( 'initialData' )! ) )
+					.then( () => editor.data.init( editor.config.get( 'roots' )!.main.initialData! ) )
 					.then( () => editor.fire<EditorReadyEvent>( 'ready' ) )
 					.then( () => editor )
 			);
@@ -252,10 +242,6 @@ export class DecoupledEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	}
 }
 
-function getInitialData( sourceElementOrData: HTMLElement | string ): string {
-	return isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : sourceElementOrData;
-}
-
 function isElement( value: any ): value is Element {
 	return _isElement( value );
 }
diff --git a/packages/ckeditor5-editor-decoupled/src/decouplededitorui.ts b/packages/ckeditor5-editor-decoupled/src/decouplededitorui.ts
index dd54dc19e7d..2311c16d5a3 100644
--- a/packages/ckeditor5-editor-decoupled/src/decouplededitorui.ts
+++ b/packages/ckeditor5-editor-decoupled/src/decouplededitorui.ts
@@ -121,14 +121,10 @@ export class DecoupledEditorUI extends EditorUI {
 		const editor = this.editor;
 		const editingView = editor.editing.view;
 		const editingRoot = editingView.document.getRoot()!;
-		const placeholder = editor.config.get( 'placeholder' );
+		const placeholder = editor.config.get( 'roots' )![ editingRoot.rootName ].placeholder;
 
 		if ( placeholder ) {
-			const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[ editingRoot.rootName ];
-
-			if ( placeholderText ) {
-				editingRoot.placeholder = placeholderText;
-			}
+			editingRoot.placeholder = placeholder;
 		}
 
 		enableViewPlaceholder( {
diff --git a/packages/ckeditor5-editor-decoupled/tests/decouplededitor.js b/packages/ckeditor5-editor-decoupled/tests/decouplededitor.js
index 07cd0228aad..1bdd4eca9f7 100644
--- a/packages/ckeditor5-editor-decoupled/tests/decouplededitor.js
+++ b/packages/ckeditor5-editor-decoupled/tests/decouplededitor.js
@@ -208,14 +208,14 @@ describe( 'DecoupledEditor', () => {
 			} );
 		} );
 
-		describe( 'config.initialData', () => {
+		describe( 'config.roots.main.initialData', () => {
 			it( 'if not set, is set using DOM element data', async () => {
 				const editorElement = document.createElement( 'div' );
 				editorElement.innerHTML = '<p>Foo</p>';
 
 				const editor = new DecoupledEditor( editorElement );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Foo</p>' );
 
 				editor.fire( 'ready' );
 				await editor.destroy();
@@ -224,7 +224,7 @@ describe( 'DecoupledEditor', () => {
 			it( 'if not set, is set using data passed in constructor', async () => {
 				const editor = new DecoupledEditor( '<p>Foo</p>' );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Foo</p>' );
 
 				editor.fire( 'ready' );
 				await editor.destroy();
@@ -236,7 +236,7 @@ describe( 'DecoupledEditor', () => {
 
 				const editor = new DecoupledEditor( editorElement, { initialData: '<p>Bar</p>' } );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Bar</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Bar</p>' );
 
 				editor.fire( 'ready' );
 				await editor.destroy();
@@ -248,6 +248,59 @@ describe( 'DecoupledEditor', () => {
 					new DecoupledEditor( '<p>Foo</p>', { initialData: '<p>Bar</p>' } );
 				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
 			} );
+
+			it( 'it should throw if config.root.initialData is set and initial data is passed in constructor', () => {
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new DecoupledEditor( '<p>Foo</p>', { root: { initialData: '<p>Bar</p>' } } );
+				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
+			} );
+
+			it( 'it should throw if config.roots.main.initialData is set and initial data is passed in constructor', () => {
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new DecoupledEditor( '<p>Foo</p>', { roots: { main: { initialData: '<p>Bar</p>' } } } );
+				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
+			} );
+
+			it( 'it should throw if config.root and config.roots.main is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new DecoupledEditor( editorElement, {
+						root: { initialData: '<p>abc</p>' },
+						roots: { main: { initialData: '<p>Bar</p>' } }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
+
+			it( 'it should throw if config.initialData and config.root.initialData is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new DecoupledEditor( editorElement, {
+						initialData: '<p>abc</p>',
+						root: { initialData: '<p>abc</p>' }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
+
+			it( 'it should throw if config.initialData and config.roots.main.initialData is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new DecoupledEditor( editorElement, {
+						initialData: '<p>abc</p>',
+						roots: { main: { initialData: '<p>abc</p>' } }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
 		} );
 	} );
 
diff --git a/packages/ckeditor5-editor-decoupled/tests/decouplededitorui.js b/packages/ckeditor5-editor-decoupled/tests/decouplededitorui.js
index d411fe7e112..11a356bfbe8 100644
--- a/packages/ckeditor5-editor-decoupled/tests/decouplededitorui.js
+++ b/packages/ckeditor5-editor-decoupled/tests/decouplededitorui.js
@@ -17,6 +17,7 @@ import { testUtils } from '@ckeditor/ckeditor5-core/tests/_utils/utils.js';
 import { assertBinding } from '@ckeditor/ckeditor5-utils/tests/_utils/utils.js';
 import { isElement } from 'es-toolkit/compat';
 import { _setModelData } from '@ckeditor/ckeditor5-engine';
+import { normalizeRootsConfig } from '@ckeditor/ckeditor5-core';
 
 describe( 'DecoupledEditorUI', () => {
 	let editor, view, ui, viewElement;
@@ -87,7 +88,7 @@ describe( 'DecoupledEditorUI', () => {
 				return VirtualDecoupledTestEditor
 					.create( 'foo', {
 						extraPlugins: [ Paragraph ],
-						placeholder: 'placeholder-text'
+						root: { placeholder: 'placeholder-text' }
 					} )
 					.then( newEditor => {
 						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
@@ -97,12 +98,14 @@ describe( 'DecoupledEditorUI', () => {
 						return newEditor.destroy();
 					} );
 			} );
+		} );
 
-			it( 'sets placeholder from editor.config.placeholder - object', () => {
+		describe( 'placeholder - legacy config', () => {
+			it( 'sets placeholder from editor.config.placeholder - string', () => {
 				return VirtualDecoupledTestEditor
 					.create( 'foo', {
 						extraPlugins: [ Paragraph ],
-						placeholder: { main: 'placeholder-text' }
+						placeholder: 'placeholder-text'
 					} )
 					.then( newEditor => {
 						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
@@ -112,21 +115,6 @@ describe( 'DecoupledEditorUI', () => {
 						return newEditor.destroy();
 					} );
 			} );
-
-			it( 'sets placeholder from editor.config.placeholder - object (invalid root name)', () => {
-				return VirtualDecoupledTestEditor
-					.create( 'foo', {
-						extraPlugins: [ Paragraph ],
-						placeholder: { 'root-name-that-not-exists': 'placeholder-text' }
-					} )
-					.then( newEditor => {
-						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
-
-						expect( firstChild.hasAttribute( 'data-placeholder' ) ).to.equal( false );
-
-						return newEditor.destroy();
-					} );
-			} );
 		} );
 
 		describe( 'view.toolbar', () => {
@@ -426,6 +414,8 @@ class VirtualDecoupledTestEditor extends VirtualTestEditor {
 	constructor( sourceElementOrData, config ) {
 		super( config );
 
+		normalizeRootsConfig( sourceElementOrData, this.config );
+
 		if ( isElement( sourceElementOrData ) ) {
 			this.sourceElement = sourceElementOrData;
 		}
diff --git a/packages/ckeditor5-editor-inline/src/inlineeditor.ts b/packages/ckeditor5-editor-inline/src/inlineeditor.ts
index 80c4976b63b..87ceee2b616 100644
--- a/packages/ckeditor5-editor-inline/src/inlineeditor.ts
+++ b/packages/ckeditor5-editor-inline/src/inlineeditor.ts
@@ -12,10 +12,12 @@ import {
 	ElementApiMixin,
 	attachToForm,
 	secureSourceElement,
+	normalizeRootsConfig,
 	type EditorConfig,
 	type EditorReadyEvent
 } from '@ckeditor/ckeditor5-core';
-import { getDataFromElement, CKEditorError } from '@ckeditor/ckeditor5-utils';
+
+import { CKEditorError } from '@ckeditor/ckeditor5-utils';
 
 import { InlineEditorUI } from './inlineeditorui.js';
 import { InlineEditorUIView } from './inlineeditoruiview.js';
@@ -54,20 +56,11 @@ export class InlineEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * @param config The editor configuration.
 	 */
 	protected constructor( sourceElementOrData: HTMLElement | string, config: EditorConfig = {} ) {
-		// If both `config.initialData` and initial data parameter in `create()` are set, then throw.
-		if ( !isElement( sourceElementOrData ) && config.initialData !== undefined ) {
-			// Documented in core/editor/editorconfig.jsdoc.
-			// eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-			throw new CKEditorError( 'editor-create-initial-data', null );
-		}
-
 		super( config );
 
-		this.config.define( 'menuBar.isVisible', false );
+		normalizeRootsConfig( sourceElementOrData, this.config );
 
-		if ( this.config.get( 'initialData' ) === undefined ) {
-			this.config.set( 'initialData', getInitialData( sourceElementOrData ) );
-		}
+		this.config.define( 'menuBar.isVisible', false );
 
 		this.model.document.createRoot();
 
@@ -83,7 +76,7 @@ export class InlineEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 		const view = new InlineEditorUIView( this.locale, this.editing.view, this.sourceElement, {
 			shouldToolbarGroupWhenFull,
 			useMenuBar: menuBarConfig.isVisible,
-			label: this.config.get( 'label' )
+			label: this.config.get( 'roots' )!.main.label
 		} );
 		this.ui = new InlineEditorUI( this, view );
 
@@ -210,7 +203,7 @@ export class InlineEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 			resolve(
 				editor.initPlugins()
 					.then( () => editor.ui.init() )
-					.then( () => editor.data.init( editor.config.get( 'initialData' )! ) )
+					.then( () => editor.data.init( editor.config.get( 'roots' )!.main.initialData! ) )
 					.then( () => editor.fire<EditorReadyEvent>( 'ready' ) )
 					.then( () => editor )
 			);
@@ -218,10 +211,6 @@ export class InlineEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	}
 }
 
-function getInitialData( sourceElementOrData: HTMLElement | string ): string {
-	return isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : sourceElementOrData;
-}
-
 function isElement( value: any ): value is Element {
 	return _isElement( value );
 }
diff --git a/packages/ckeditor5-editor-inline/src/inlineeditorui.ts b/packages/ckeditor5-editor-inline/src/inlineeditorui.ts
index 00f2eea97e9..3082a7556ad 100644
--- a/packages/ckeditor5-editor-inline/src/inlineeditorui.ts
+++ b/packages/ckeditor5-editor-inline/src/inlineeditorui.ts
@@ -160,14 +160,10 @@ export class InlineEditorUI extends EditorUI {
 		const editor = this.editor;
 		const editingView = editor.editing.view;
 		const editingRoot = editingView.document.getRoot()!;
-		const placeholder = editor.config.get( 'placeholder' );
+		const placeholder = editor.config.get( 'roots' )![ editingRoot.rootName ].placeholder;
 
 		if ( placeholder ) {
-			const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[ editingRoot.rootName ];
-
-			if ( placeholderText ) {
-				editingRoot.placeholder = placeholderText;
-			}
+			editingRoot.placeholder = placeholder;
 		}
 
 		enableViewPlaceholder( {
diff --git a/packages/ckeditor5-editor-inline/tests/inlineeditor.js b/packages/ckeditor5-editor-inline/tests/inlineeditor.js
index f4d7441feb6..3e29eac7600 100644
--- a/packages/ckeditor5-editor-inline/tests/inlineeditor.js
+++ b/packages/ckeditor5-editor-inline/tests/inlineeditor.js
@@ -98,20 +98,20 @@ describe( 'InlineEditor', () => {
 				.catch( done );
 		} );
 
-		describe( 'config.initialData', () => {
+		describe( 'config.roots.main.initialData', () => {
 			it( 'if not set, is set using DOM element data', () => {
 				const editorElement = document.createElement( 'div' );
 				editorElement.innerHTML = '<p>Foo</p>';
 
 				const editor = new InlineEditor( editorElement );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Foo</p>' );
 			} );
 
 			it( 'if not set, is set using data passed in constructor', () => {
 				const editor = new InlineEditor( '<p>Foo</p>' );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Foo</p>' );
 			} );
 
 			it( 'if set, is not overwritten with DOM element data', () => {
@@ -120,7 +120,7 @@ describe( 'InlineEditor', () => {
 
 				const editor = new InlineEditor( editorElement, { initialData: '<p>Bar</p>' } );
 
-				expect( editor.config.get( 'initialData' ) ).to.equal( '<p>Bar</p>' );
+				expect( editor.config.get( 'roots.main.initialData' ) ).to.equal( '<p>Bar</p>' );
 			} );
 
 			it( 'it should throw if config.initialData is set and initial data is passed in constructor', () => {
@@ -129,6 +129,59 @@ describe( 'InlineEditor', () => {
 					new InlineEditor( '<p>Foo</p>', { initialData: '<p>Bar</p>' } );
 				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
 			} );
+
+			it( 'it should throw if config.root.initialData is set and initial data is passed in constructor', () => {
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new InlineEditor( '<p>Foo</p>', { root: { initialData: '<p>Bar</p>' } } );
+				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
+			} );
+
+			it( 'it should throw if config.roots.main.initialData is set and initial data is passed in constructor', () => {
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new InlineEditor( '<p>Foo</p>', { roots: { main: { initialData: '<p>Bar</p>' } } } );
+				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
+			} );
+
+			it( 'it should throw if config.root and config.roots.main is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new InlineEditor( editorElement, {
+						root: { initialData: '<p>abc</p>' },
+						roots: { main: { initialData: '<p>Bar</p>' } }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
+
+			it( 'it should throw if config.initialData and config.root.initialData is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new InlineEditor( editorElement, {
+						initialData: '<p>abc</p>',
+						root: { initialData: '<p>abc</p>' }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
+
+			it( 'it should throw if config.initialData and config.roots.main.initialData is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new InlineEditor( editorElement, {
+						initialData: '<p>abc</p>',
+						roots: { main: { initialData: '<p>abc</p>' } }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
 		} );
 	} );
 
diff --git a/packages/ckeditor5-editor-inline/tests/inlineeditorui.js b/packages/ckeditor5-editor-inline/tests/inlineeditorui.js
index ab31b7e4224..3884bf57de6 100644
--- a/packages/ckeditor5-editor-inline/tests/inlineeditorui.js
+++ b/packages/ckeditor5-editor-inline/tests/inlineeditorui.js
@@ -17,6 +17,7 @@ import { testUtils } from '@ckeditor/ckeditor5-core/tests/_utils/utils.js';
 import { assertBinding } from '@ckeditor/ckeditor5-utils/tests/_utils/utils.js';
 import { isElement } from 'es-toolkit/compat';
 import { _setModelData } from '@ckeditor/ckeditor5-engine';
+import { normalizeRootsConfig } from '@ckeditor/ckeditor5-core';
 
 describe( 'InlineEditorUI', () => {
 	let editor, view, ui, viewElement;
@@ -209,7 +210,7 @@ describe( 'InlineEditorUI', () => {
 				return VirtualInlineTestEditor
 					.create( 'foo', {
 						extraPlugins: [ Paragraph ],
-						placeholder: 'placeholder-text'
+						root: { placeholder: 'placeholder-text' }
 					} )
 					.then( newEditor => {
 						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
@@ -219,12 +220,14 @@ describe( 'InlineEditorUI', () => {
 						return newEditor.destroy();
 					} );
 			} );
+		} );
 
-			it( 'sets placeholder from editor.config.placeholder - object', () => {
+		describe( 'placeholder - legacy config', () => {
+			it( 'sets placeholder from editor.config.placeholder - string', () => {
 				return VirtualInlineTestEditor
 					.create( 'foo', {
 						extraPlugins: [ Paragraph ],
-						placeholder: { main: 'placeholder-text' }
+						placeholder: 'placeholder-text'
 					} )
 					.then( newEditor => {
 						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
@@ -234,21 +237,6 @@ describe( 'InlineEditorUI', () => {
 						return newEditor.destroy();
 					} );
 			} );
-
-			it( 'sets placeholder from editor.config.placeholder - object (invalid root name)', () => {
-				return VirtualInlineTestEditor
-					.create( 'foo', {
-						extraPlugins: [ Paragraph ],
-						placeholder: { 'root-name-that-not-exists': 'placeholder-text' }
-					} )
-					.then( newEditor => {
-						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
-
-						expect( firstChild.hasAttribute( 'data-placeholder' ) ).to.equal( false );
-
-						return newEditor.destroy();
-					} );
-			} );
 		} );
 
 		describe( 'view.toolbar#items', () => {
@@ -546,6 +534,8 @@ class VirtualInlineTestEditor extends VirtualTestEditor {
 	constructor( sourceElementOrData, config ) {
 		super( config );
 
+		normalizeRootsConfig( sourceElementOrData, this.config );
+
 		if ( isElement( sourceElementOrData ) ) {
 			this.sourceElement = sourceElementOrData;
 		}
diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
index 23005be5fbd..ab6b17b4c9a 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
@@ -10,13 +10,14 @@
 import {
 	Editor,
 	secureSourceElement,
+	normalizeRootsConfig,
 	type EditorConfig,
-	type EditorReadyEvent
+	type EditorReadyEvent,
+	type RootConfig
 } from '@ckeditor/ckeditor5-core';
 
 import {
 	CKEditorError,
-	getDataFromElement,
 	setDataInElement,
 	logWarning,
 	decodeLicenseKey,
@@ -91,16 +92,12 @@ export class MultiRootEditor extends Editor {
 	 * @param config The editor configuration.
 	 */
 	protected constructor( sourceElementsOrData: Record<string, HTMLElement> | Record<string, string>, config: EditorConfig = {} ) {
-		const rootNames = Object.keys( sourceElementsOrData );
-		const sourceIsData = rootNames.length === 0 || typeof sourceElementsOrData[ rootNames[ 0 ] ] === 'string';
+		super( config );
 
-		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 );
-		}
+		normalizeRootsConfig( sourceElementsOrData, this.config, false );
 
-		super( config );
+		const rootNames = Object.keys( this.config.get( 'roots' )! );
+		const sourceIsData = rootNames.length === 0 || typeof sourceElementsOrData[ rootNames[ 0 ] ] === 'string';
 
 		if ( !sourceIsData ) {
 			this.sourceElements = sourceElementsOrData as Record<string, HTMLElement>;
@@ -108,20 +105,11 @@ export class MultiRootEditor extends Editor {
 			this.sourceElements = {};
 		}
 
-		if ( this.config.get( 'initialData' ) === undefined ) {
-			// Create initial data object containing data from all roots.
-			const initialData: Record<string, string> = {};
-
-			for ( const rootName of rootNames ) {
-				initialData[ rootName ] = getInitialData( sourceElementsOrData[ rootName ] );
-			}
-
-			this.config.set( 'initialData', initialData );
-		}
-
 		if ( !sourceIsData ) {
 			for ( const rootName of rootNames ) {
-				secureSourceElement( this, sourceElementsOrData[ rootName ] as HTMLElement );
+				if ( sourceElementsOrData[ rootName ] ) {
+					secureSourceElement( this, sourceElementsOrData[ rootName ] as HTMLElement );
+				}
 			}
 		}
 
@@ -153,6 +141,9 @@ export class MultiRootEditor extends Editor {
 		}
 
 		if ( this.config.get( 'lazyRoots' ) ) {
+			// TODO throw an error as config.lazyRoots is no longer supported.
+			// TODO handle it from roots.<name>.lazyLoad instead.
+
 			for ( const rootName of this.config.get( 'lazyRoots' )! ) {
 				const root = this.model.document.createRoot( '$root', rootName );
 
@@ -161,6 +152,9 @@ export class MultiRootEditor extends Editor {
 		}
 
 		if ( this.config.get( 'rootsAttributes' ) ) {
+			// TODO throw an error as config.rootsAttributes is no longer supported.
+			// TODO handle it from roots.<name>.modelElement.attributes instead.
+
 			const rootsAttributes = this.config.get( 'rootsAttributes' )!;
 
 			for ( const [ rootName, attributes ] of Object.entries( rootsAttributes ) ) {
@@ -199,7 +193,7 @@ export class MultiRootEditor extends Editor {
 		const options = {
 			shouldToolbarGroupWhenFull: !this.config.get( 'toolbar.shouldNotGroupWhenFull' ),
 			editableElements: sourceIsData ? undefined : sourceElementsOrData as Record<string, HTMLElement>,
-			label: this.config.get( 'label' )
+			label: this.config.get( 'label' ) // TODO
 		};
 
 		const view = new MultiRootEditorUIView( this.locale, this.editing.view, rootNames, options );
@@ -911,11 +905,13 @@ export class MultiRootEditor extends Editor {
 				editor.initPlugins()
 					.then( () => editor.ui.init() )
 					.then( () => {
+						const initialData = collectInitialData( editor.config.get( 'roots' )! );
+
 						// This is checked directly before setting the initial data,
 						// as plugins may change `EditorConfig#initialData` value.
-						editor._verifyRootsWithInitialData();
+						editor._verifyRootsWithInitialData( initialData );
 
-						return editor.data.init( editor.config.get( 'initialData' )! );
+						return editor.data.init( initialData );
 					} )
 					.then( () => editor.fire<EditorReadyEvent>( 'ready' ) )
 					.then( () => editor )
@@ -926,9 +922,7 @@ export class MultiRootEditor extends Editor {
 	/**
 	 * @internal
 	 */
-	private _verifyRootsWithInitialData(): void {
-		const initialData = this.config.get( 'initialData' ) as Record<string, string>;
-
+	private _verifyRootsWithInitialData( initialData: Record<string, unknown> ): void {
 		// Roots that are not in the initial data.
 		for ( const rootName of this.model.document.getRootNames() ) {
 			if ( !( rootName in initialData ) ) {
@@ -961,8 +955,11 @@ export class MultiRootEditor extends Editor {
 	}
 }
 
-function getInitialData( sourceElementOrData: HTMLElement | string ): string {
-	return isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : sourceElementOrData;
+function collectInitialData( rootsConfig: Record<string, RootConfig> ): Record<string, string > {
+	return Object.fromEntries(
+		Object.entries( rootsConfig )
+			.map( ( [ rootName, { initialData } ] ) => [ rootName, initialData! ] )
+	);
 }
 
 function isElement( value: any ): value is Element {
diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditorui.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditorui.ts
index 1018566961a..320efd9a47a 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditorui.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditorui.ts
@@ -203,11 +203,7 @@ export class MultiRootEditorUI extends EditorUI {
 	 */
 	private _initPlaceholder( editable: InlineEditableUIView, placeholder?: string ): void {
 		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;
diff --git a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
index 48c785cfbb9..3935be8a557 100644
--- a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
+++ b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
@@ -103,13 +103,15 @@ describe( 'MultiRootEditor', () => {
 
 				const editor = new MultiRootEditor( { 'foo': fooEl, 'bar': barEl } );
 
-				expect( editor.config.get( 'initialData' ) ).to.deep.equal( { foo: '<p>Foo</p>', bar: '<p>Bar</p>' } );
+				expect( editor.config.get( 'roots' ).foo.initialData ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots' ).bar.initialData ).to.equal( '<p>Bar</p>' );
 			} );
 
 			it( 'if not set, is set using data passed in constructor', () => {
 				const editor = new MultiRootEditor( { foo: '<p>Foo</p>', bar: '<p>Bar</p>' } );
 
-				expect( editor.config.get( 'initialData' ) ).to.deep.equal( { foo: '<p>Foo</p>', bar: '<p>Bar</p>' } );
+				expect( editor.config.get( 'roots' ).foo.initialData ).to.equal( '<p>Foo</p>' );
+				expect( editor.config.get( 'roots' ).bar.initialData ).to.equal( '<p>Bar</p>' );
 			} );
 
 			it( 'if set, is not overwritten with DOM element data', () => {
@@ -136,6 +138,27 @@ describe( 'MultiRootEditor', () => {
 					);
 				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
 			} );
+
+			it( 'it should throw if config.roots.<name>.initialData is set and initial data is passed in constructor', () => {
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new MultiRootEditor( { foo: '<p>Foo</p>', bar: '<p>Bar</p>' },
+						{ roots: { foo: { initialData: '<p>Bar</p>' } }, bar: { initialData: '<p>Abc</p>' } }
+					);
+				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
+			} );
+
+			it( 'it should throw if config.root is set', () => {
+				const editorElement = document.createElement( 'div' );
+				editorElement.innerHTML = '<p>Foo</p>';
+
+				expect( () => {
+					// eslint-disable-next-line no-new
+					new MultiRootEditor( editorElement, {
+						root: { initialData: '<p>abc</p>' }
+					} );
+				} ).to.throw( CKEditorError, 'editor-create-roots-initial-data' );
+			} );
 		} );
 	} );
 

From 68561aa5b0fe04284c9b4fba5fef12a21125e3f6 Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Tue, 10 Mar 2026 18:42:21 +0100
Subject: [PATCH 02/22] Added support for multi-root dedicated config.

---
 .../ckeditor5-core/src/editor/editorconfig.ts |  18 +-
 .../src/editor/utils/normalizerootsconfig.ts  |  49 ++--
 packages/ckeditor5-core/src/index.ts          |   1 +
 .../tests/ballooneditorui.js                  |  28 +-
 .../src/augmentation.ts                       |  44 ++-
 .../src/multirooteditor.ts                    | 124 +++++----
 .../src/multirooteditorui.ts                  |   2 +-
 .../tests/multirooteditor.js                  | 257 +++++++++++++++---
 .../tests/multirooteditorui.js                |  13 +-
 9 files changed, 388 insertions(+), 148 deletions(-)

diff --git a/packages/ckeditor5-core/src/editor/editorconfig.ts b/packages/ckeditor5-core/src/editor/editorconfig.ts
index c708b6ae9c6..8b6db6abe78 100644
--- a/packages/ckeditor5-core/src/editor/editorconfig.ts
+++ b/packages/ckeditor5-core/src/editor/editorconfig.ts
@@ -912,7 +912,11 @@ export interface EditorConfig extends EngineConfig {
 }
 
 /**
- * TODO
+ * Configuration for a single editor root. It is used in {@link module:core/editor/editorconfig~EditorConfig#root `EditorConfig#root`} and
+ * {@link module:core/editor/editorconfig~EditorConfig#roots `EditorConfig#roots.<rootName>`}.
+ *
+ * **Note**: If your editor implementation uses only a single root, you can use `config.root` to set the root configuration instead of
+ * `config.roots.main`.
  */
 export interface RootConfig {
 
@@ -1101,6 +1105,18 @@ export interface RootConfig {
 	label?: string;
 }
 
+/**
+ * Configuration of a root element of the editor. It is used in {@link module:core/editor/editorconfig~EditorConfig#root `config.root`} and
+ * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>`} to specify details of the model root element.
+ */
+export interface RootModelElementConfig {
+
+	/**
+	 * TODO This will be used later to specify the name of the model element which will be used as a root. For now, it is always `'$root'`.
+	 */
+	name: string;
+}
+
 /**
  * The `config.initialData` option cannot be used together with the initial data passed as the first parameter of
  * {@link module:core/editor/editor~Editor.create `Editor.create()`}.
diff --git a/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts b/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
index c9b5e0dcf16..f9ca73d77b7 100644
--- a/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
+++ b/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
@@ -39,31 +39,29 @@ export function normalizeRootsConfig(
 
 	// Move `config.root` to `config.roots.main`.
 	// This makes access to root configuration more consistent as all roots will be defined in `config.roots`.
-	if ( defaultRootName ) {
+	if ( defaultRootName && !rootsConfig[ defaultRootName ] ) {
 		rootsConfig[ defaultRootName ] = mainRootConfig || {};
 	}
 
-	const sourceElementIsObject = isSourceElementOrDataPlainObject( sourceElementsOrData );
+	const sourceElementIsPlainObject = isPlainObject( sourceElementsOrData );
 
 	// Collect legacy configuration values for `initialData`, `placeholder`, and `label` from the config.
-	const legacyInitialData = getLegacyConfigValue( config, 'initialData', sourceElementIsObject, defaultRootName );
-	const legacyPlaceholder = getLegacyConfigValue( config, 'placeholder', sourceElementIsObject, defaultRootName );
-	const legacyLabel = getLegacyConfigValue( config, 'label', sourceElementIsObject, defaultRootName );
+	const legacyInitialData = getLegacyInitialData( config, sourceElementIsPlainObject, defaultRootName );
 
 	// Collect root names. This includes root names from the source element (if it's an object),
 	// from `config.roots`, and from legacy config. This ensures that all roots are processed in the next step.
 	const rootNames = Array.from( new Set( [
-		...sourceElementIsObject ? Object.keys( sourceElementsOrData ) : [],
+		...sourceElementIsPlainObject ? Object.keys( sourceElementsOrData ) : [],
 		...Object.keys( rootsConfig ),
 		...Object.keys( legacyInitialData )
 	] ) );
 
-	// TODO handle legacy data mismatch with source element keys.
+	// TODO should we throw when sourceElementsOrData keys mismatch with initialData keys?
 
 	// Ensure that all roots have `initialData` defined. If not, try to get it from the source element or data.
 	for ( const rootName of rootNames ) {
 		const rootConfig = rootsConfig[ rootName ] || {};
-		const sourceElementOrDataForRoot = sourceElementIsObject ? sourceElementsOrData[ rootName ] : sourceElementsOrData;
+		const sourceElementOrDataForRoot = sourceElementIsPlainObject ? sourceElementsOrData[ rootName ] : sourceElementsOrData;
 
 		// No dedicated initial data for the root.
 		if ( rootConfig.initialData === undefined ) {
@@ -96,8 +94,9 @@ export function normalizeRootsConfig(
 			throw new CKEditorError( 'editor-create-roots-initial-data' );
 		}
 
-		rootConfig.placeholder ??= legacyPlaceholder[ rootName ];
-		rootConfig.label ??= legacyLabel[ rootName ];
+		// Handle legacy `config.placeholder` and `config.label` for the root.
+		rootConfig.placeholder ??= getLegacyPlainConfigValue( config, 'placeholder', rootName );
+		rootConfig.label ??= getLegacyPlainConfigValue( config, 'label', rootName );
 
 		rootsConfig[ rootName ] = rootConfig;
 	}
@@ -106,9 +105,9 @@ export function normalizeRootsConfig(
 }
 
 /**
- * Type guard to check if the provided value is a plain object or plain value.
+ * Type guard to check if the provided value is a plain object.
  */
-function isSourceElementOrDataPlainObject(
+function isPlainObject(
 	sourceElementsOrData: HTMLElement | string | Record<string, HTMLElement> | Record<string, string>
 ): sourceElementsOrData is Record<string, HTMLElement> | Record<string, string> {
 	return (
@@ -127,22 +126,38 @@ function getInitialData( sourceElementOrData: HTMLElement | string ): string {
 }
 
 /**
- * Retrieve legacy configuration value for `initialData`, `placeholder`, or `label` from the config.
+ * Retrieve legacy configuration value for `initialData` from the config.
  * Normalize single-root config so returned value is always an object with root names as keys.
  */
-function getLegacyConfigValue(
+function getLegacyInitialData(
 	config: Config<EditorConfig>,
-	key: 'initialData' | 'placeholder' | 'label',
 	sourceElementIsObject: boolean,
 	defaultRootName: string | false
 ): Record<string, string | undefined> {
 	return (
 		sourceElementIsObject || !defaultRootName ?
-			config.get( key ) || {} :
-			{ [ defaultRootName ]: config.get( key ) }
+			config.get( 'initialData' ) || {} :
+			{
+				[ defaultRootName ]: config.get( 'initialData' )
+			}
 	) as Record<string, string | undefined>;
 }
 
+/**
+ * Retrieve legacy configuration value for `placeholder` or `label` from the config for a specific root.
+ */
+function getLegacyPlainConfigValue(
+	config: Config<EditorConfig>,
+	key: 'placeholder' | 'label',
+	rootName: string
+): string | undefined {
+	const legacyValue = config.get( key );
+
+	if ( legacyValue ) {
+		return typeof legacyValue == 'string' ? legacyValue : legacyValue[ rootName ];
+	}
+}
+
 /**
  * An alias for `isElement` from `es-toolkit/compat` with additional type guard.
  */
diff --git a/packages/ckeditor5-core/src/index.ts b/packages/ckeditor5-core/src/index.ts
index f31ab387640..17fe459cd40 100644
--- a/packages/ckeditor5-core/src/index.ts
+++ b/packages/ckeditor5-core/src/index.ts
@@ -40,6 +40,7 @@ export {
 export type {
 	EditorConfig,
 	RootConfig,
+	RootModelElementConfig,
 	LanguageConfig,
 	ToolbarConfig,
 	ToolbarConfigItem,
diff --git a/packages/ckeditor5-editor-balloon/tests/ballooneditorui.js b/packages/ckeditor5-editor-balloon/tests/ballooneditorui.js
index 6c041c6cf74..268fcb3b813 100644
--- a/packages/ckeditor5-editor-balloon/tests/ballooneditorui.js
+++ b/packages/ckeditor5-editor-balloon/tests/ballooneditorui.js
@@ -17,6 +17,7 @@ import { VirtualTestEditor } from '@ckeditor/ckeditor5-core/tests/_utils/virtual
 import { _setModelData } from '@ckeditor/ckeditor5-engine';
 import { assertBinding } from '@ckeditor/ckeditor5-utils/tests/_utils/utils.js';
 import { testUtils } from '@ckeditor/ckeditor5-core/tests/_utils/utils.js';
+import { normalizeRootsConfig } from '@ckeditor/ckeditor5-core';
 
 describe( 'BalloonEditorUI', () => {
 	let editor, view, ui, viewElement;
@@ -82,11 +83,11 @@ describe( 'BalloonEditorUI', () => {
 		} );
 
 		describe( 'placeholder', () => {
-			it( 'sets placeholder from editor.config.placeholder - string', () => {
+			it( 'sets placeholder from editor.config.root.placeholder - string', () => {
 				return VirtualBalloonTestEditor
 					.create( 'foo', {
 						extraPlugins: [ BalloonToolbar, Paragraph ],
-						placeholder: 'placeholder-text'
+						root: { placeholder: 'placeholder-text' }
 					} )
 					.then( newEditor => {
 						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
@@ -96,12 +97,14 @@ describe( 'BalloonEditorUI', () => {
 						return newEditor.destroy();
 					} );
 			} );
+		} );
 
-			it( 'sets placeholder from editor.config.placeholder - object', () => {
+		describe( 'placeholder - legacy config', () => {
+			it( 'sets placeholder from editor.config.placeholder - string', () => {
 				return VirtualBalloonTestEditor
 					.create( 'foo', {
 						extraPlugins: [ BalloonToolbar, Paragraph ],
-						placeholder: { main: 'placeholder-text' }
+						placeholder: 'placeholder-text'
 					} )
 					.then( newEditor => {
 						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
@@ -111,21 +114,6 @@ describe( 'BalloonEditorUI', () => {
 						return newEditor.destroy();
 					} );
 			} );
-
-			it( 'sets placeholder from editor.config.placeholder - object (invalid root name)', () => {
-				return VirtualBalloonTestEditor
-					.create( 'foo', {
-						extraPlugins: [ BalloonToolbar, Paragraph ],
-						placeholder: { 'root-name-that-not-exists': 'placeholder-text' }
-					} )
-					.then( newEditor => {
-						const firstChild = newEditor.editing.view.document.getRoot().getChild( 0 );
-
-						expect( firstChild.hasAttribute( 'data-placeholder' ) ).to.equal( false );
-
-						return newEditor.destroy();
-					} );
-			} );
 		} );
 	} );
 
@@ -358,6 +346,8 @@ class VirtualBalloonTestEditor extends VirtualTestEditor {
 	constructor( sourceElementOrData, config ) {
 		super( config );
 
+		normalizeRootsConfig( sourceElementOrData, this.config );
+
 		if ( isElement( sourceElementOrData ) ) {
 			this.sourceElement = sourceElementOrData;
 		}
diff --git a/packages/ckeditor5-editor-multi-root/src/augmentation.ts b/packages/ckeditor5-editor-multi-root/src/augmentation.ts
index 99f06be87fa..9274b6fb22b 100644
--- a/packages/ckeditor5-editor-multi-root/src/augmentation.ts
+++ b/packages/ckeditor5-editor-multi-root/src/augmentation.ts
@@ -6,10 +6,10 @@
 import { type RootAttributes } from './multirooteditor.js';
 
 declare module '@ckeditor/ckeditor5-core' {
-	interface EditorConfig {
+	interface RootModelElementConfig {
 
 		/**
-		 * Initial roots attributes for the document roots.
+		 * Initial root attributes for a single root.
 		 *
 		 * **Note: This configuration option is supported only by the
 		 * {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root} editor type.**
@@ -37,11 +37,27 @@ declare module '@ckeditor/ckeditor5-core' {
 		 * 	},
 		 * 	// Config:
 		 * 	{
-		 * 		rootsAttributes: {
-		 * 			uid1: { order: 20, isLocked: false }, // Third, unlocked.
-		 * 			uid2: { order: 10, isLocked: true }, // Second, locked.
-		 * 			uid3: { order: 30, isLocked: true }, // Fourth, locked.
-		 * 			uid4: { order: 0, isLocked: false } // First, unlocked.
+		 * 		roots: {
+		 * 			uid1: {
+		 * 				modelElement: {
+		 * 					attributes: { order: 20, isLocked: false } // Third, unlocked.
+		 * 				}
+		 * 			},
+		 * 			uid2: {
+		 * 				modelElement: {
+		 * 					attributes: { order: 10, isLocked: true } // Second, locked.
+		 * 				}
+		 * 			},
+		 * 			uid3: {
+		 * 				modelElement: {
+		 * 					attributes: { order: 30, isLocked: true } // Fourth, locked.
+		 * 				}
+		 * 			},
+		 * 			uid4: {
+		 * 				modelElement: {
+		 * 					attributes: { order: 0, isLocked: false } // First, unlocked.
+		 * 				}
+		 * 			}
 		 * 		}
 		 * 	}
 		 * )
@@ -78,10 +94,18 @@ declare module '@ckeditor/ckeditor5-core' {
 		 * } );
 		 * ```
 		 */
-		rootsAttributes?: Record<string, RootAttributes>;
+		attributes?: RootAttributes;
+	}
+
+	interface RootConfig {
+
+		/**
+		 * TODO
+		 */
+		modelElement?: RootModelElementConfig;
 
 		/**
-		 * A list of names of all the roots that exist in the document but are not initially loaded by the editor.
+		 * Flag for the root that exist in the document but is not initially loaded by the editor.
 		 *
 		 * **Important! Lazy roots loading is an experimental feature, and may become deprecated. Be advised of the following
 		 * known limitations:**
@@ -102,6 +126,6 @@ declare module '@ckeditor/ckeditor5-core' {
 		 * This is useful for handling big documents that contain hundreds of roots, or contain very large roots, which may have
 		 * impact editor performance if loaded all at once.
 		 */
-		lazyRoots?: Array<string>;
+		lazyLoad?: boolean;
 	}
 }
diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
index ab6b17b4c9a..876c57432c1 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
@@ -96,20 +96,14 @@ export class MultiRootEditor extends Editor {
 
 		normalizeRootsConfig( sourceElementsOrData, this.config, false );
 
-		const rootNames = Object.keys( this.config.get( 'roots' )! );
-		const sourceIsData = rootNames.length === 0 || typeof sourceElementsOrData[ rootNames[ 0 ] ] === 'string';
+		this.sourceElements = {};
 
-		if ( !sourceIsData ) {
-			this.sourceElements = sourceElementsOrData as Record<string, HTMLElement>;
-		} else {
-			this.sourceElements = {};
-		}
+		for ( const [ rootName, sourceElementOrData ] of Object.entries( sourceElementsOrData ) ) {
+			if ( isElement( sourceElementOrData ) ) {
+				const sourceElement = sourceElementOrData as HTMLElement;
 
-		if ( !sourceIsData ) {
-			for ( const rootName of rootNames ) {
-				if ( sourceElementsOrData[ rootName ] ) {
-					secureSourceElement( this, sourceElementsOrData[ rootName ] as HTMLElement );
-				}
+				this.sourceElements[ rootName ] = sourceElement;
+				secureSourceElement( this, sourceElement );
 			}
 		}
 
@@ -135,65 +129,78 @@ export class MultiRootEditor extends Editor {
 			} );
 		} );
 
-		for ( const rootName of rootNames ) {
-			// Create root and `UIView` element for each editable container.
-			this.model.document.createRoot( '$root', rootName );
+		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( 'lazyRoots' ) ) {
-			// TODO throw an error as config.lazyRoots is no longer supported.
-			// TODO handle it from roots.<name>.lazyLoad instead.
+		if ( this.config.get( 'rootsAttributes' ) ) {
+			/**
+			 * Using deprecated `config.rootsAttributes` configuration option.
+			 * Use `config.roots.<rootName>.modelElement.attributes` instead.
+			 *
+			 * @error multi-root-editor-root-deprecated-config-roots-attributes
+			 */
+			throw new CKEditorError( 'multi-root-editor-root-deprecated-config-roots-attributes', null );
+		}
 
-			for ( const rootName of this.config.get( 'lazyRoots' )! ) {
-				const root = this.model.document.createRoot( '$root', rootName );
+		const rootNames = Object.keys( this.config.get( 'roots' )! );
 
+		for ( const rootName of rootNames ) {
+			const rootConfig = this.config.get( 'roots' )![ rootName ];
+
+			// Create root and `UIView` element for each editable container.
+			const root = this.model.document.createRoot( '$root', rootName );
+
+			if ( rootConfig.lazyLoad ) {
+				// TODO do not load initialData for lazy roots.
 				root._isLoaded = false;
 			}
-		}
 
-		if ( this.config.get( 'rootsAttributes' ) ) {
-			// TODO throw an error as config.rootsAttributes is no longer supported.
-			// TODO handle it from roots.<name>.modelElement.attributes instead.
-
-			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 );
-				}
+			// TODO keep the documentation of removed error but move it to better place.
+			/**
+			 * 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
+			 */
+
+			const attributes = rootConfig.modelElement?.attributes;
 
+			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 )!;
+		this.data.on( 'init', () => {
+			this.model.enqueueChange( { isUndoable: false }, writer => {
+				for ( const rootName of rootNames ) {
+					const rootConfig = this.config.get( 'roots' )![ rootName ];
+					const attributes = rootConfig.modelElement?.attributes || {};
+					const root = this.model.document.getRoot( rootName )!;
 
-						for ( const [ key, value ] of Object.entries( attributes ) ) {
-							if ( value !== null ) {
-								writer.setAttribute( key, value, root! );
-							}
+					for ( const [ key, value ] of Object.entries( attributes ) ) {
+						if ( value !== null ) {
+							writer.setAttribute( key, value, root! );
 						}
 					}
-				} );
+				}
 			} );
-		}
+		} );
 
 		const options = {
 			shouldToolbarGroupWhenFull: !this.config.get( 'toolbar.shouldNotGroupWhenFull' ),
-			editableElements: sourceIsData ? undefined : sourceElementsOrData as Record<string, HTMLElement>,
-			label: this.config.get( 'label' ) // TODO
+			editableElements: this.sourceElements,
+			label: extractRootsConfigField( this.config.get( 'roots' )!, 'label' )
 		};
 
 		const view = new MultiRootEditorUIView( this.locale, this.editing.view, rootNames, options );
@@ -905,7 +912,7 @@ export class MultiRootEditor extends Editor {
 				editor.initPlugins()
 					.then( () => editor.ui.init() )
 					.then( () => {
-						const initialData = collectInitialData( editor.config.get( 'roots' )! );
+						const initialData = extractRootsConfigField( editor.config.get( 'roots' )!, 'initialData' );
 
 						// This is checked directly before setting the initial data,
 						// as plugins may change `EditorConfig#initialData` value.
@@ -955,10 +962,19 @@ export class MultiRootEditor extends Editor {
 	}
 }
 
-function collectInitialData( rootsConfig: Record<string, RootConfig> ): Record<string, string > {
+/**
+ * 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<K extends keyof RootConfig>(
+	rootsConfig: Record<string, RootConfig>,
+	key: K
+): Record<string, NonNullable<RootConfig[K]>> {
 	return Object.fromEntries(
 		Object.entries( rootsConfig )
-			.map( ( [ rootName, { initialData } ] ) => [ rootName, initialData! ] )
+			.map( ( [ rootName, config ] ) => [ rootName, config[ key ] ] )
+			.filter( ( [ , value ] ) => value !== undefined )
 	);
 }
 
diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditorui.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditorui.ts
index 320efd9a47a..c26e37aae38 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditorui.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditorui.ts
@@ -203,7 +203,7 @@ export class MultiRootEditorUI extends EditorUI {
 	 */
 	private _initPlaceholder( editable: InlineEditableUIView, placeholder?: string ): void {
 		if ( !placeholder ) {
-			placeholder = this.editor.config.get( 'roots' )![ editable.name! ].placeholder;
+			placeholder = this.editor.config.get( 'roots' )![ editable.name! ]?.placeholder;
 		}
 
 		const editingView = this.editor.editing.view;
diff --git a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
index 3935be8a557..d090e5d17c2 100644
--- a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
+++ b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
@@ -252,7 +252,9 @@ describe( 'MultiRootEditor', () => {
 				.catch( done );
 		} );
 
-		it( 'throws error when initial roots are different than initial data - missing root in initial roots', done => {
+		// This case should not throw as 'foo' and 'bar' roots are defined, but the DOM element for 'foo' is provided
+		// and the DOM element for 'bar' is created by the editor.
+		it.skip( 'throws error when initial roots are different than initial data - missing root in initial roots', done => {
 			MultiRootEditor.create( {
 				foo: document.createElement( 'div' )
 			}, {
@@ -277,6 +279,46 @@ describe( 'MultiRootEditor', () => {
 				} );
 		} );
 
+		it( 'throws error when initial roots are different than initial data - initialData new root injection', done => {
+			// Artificial fake plugin that simulates a change in initialData as the editor is initialized.
+			class ChangeInitialData {
+				constructor( editor ) {
+					this.editor = editor;
+				}
+
+				init() {
+					// Add initial data for some previously undefined root.
+					this.editor.config.set( 'roots', {
+						...this.editor.config.get( 'roots' ),
+						bar: { initialData: '<p>Bar</p>' }
+					} );
+				}
+			}
+
+			MultiRootEditor.create( {
+				foo: document.createElement( 'div' )
+			}, {
+				initialData: {
+					foo: '<p>Foo</p>'
+				},
+				extraPlugins: [ ChangeInitialData ]
+			} )
+				.then(
+					() => {
+						expect.fail( 'Multi-root editor should throw an error when initital roots and initial data are mismatched.' );
+					},
+					err => {
+						assertCKEditorError( err, 'multi-root-editor-root-initial-data-mismatch', null );
+					}
+				)
+				.then( done )
+				.catch( done )
+				.finally( () => {
+					// Cleanup. This is difficult as we don't have editor instance to destroy.
+					document.querySelector( '.ck-body-wrapper' ).remove();
+				} );
+		} );
+
 		it( 'throws error when initial roots are different than initial data - detached root', done => {
 			// Artificial fake plugin that simulates a root being removed as the editor is initialized.
 			class RemoveRoot {
@@ -317,7 +359,8 @@ describe( 'MultiRootEditor', () => {
 				} );
 		} );
 
-		it( 'throws error when initial roots are different than initial data - missing root in initial data', done => {
+		// This case should not throw as 'foo' and 'bar' roots are defined, but the initialData for 'bar' is extracted from the DOM element.
+		it.skip( 'throws error when initial roots are different than initial data - missing root in initial data', done => {
 			MultiRootEditor.create( {
 				foo: document.createElement( 'div' ),
 				bar: document.createElement( 'div' )
@@ -342,6 +385,51 @@ describe( 'MultiRootEditor', () => {
 				} );
 		} );
 
+		it( 'throws error when initial roots are different than initial data - initialData for root removed', done => {
+			// Artificial fake plugin that simulates a change in initialData as the editor is initialized.
+			class ChangeInitialData {
+				constructor( editor ) {
+					this.editor = editor;
+				}
+
+				init() {
+					// Remove initial data for some previously defined root.
+					this.editor.config.set( 'roots', {
+						...this.editor.config.get( 'roots' ),
+						bar: {
+							...this.editor.config.get( 'roots' ).bar,
+							initialData: undefined
+						}
+					} );
+				}
+			}
+
+			MultiRootEditor.create( {
+				foo: document.createElement( 'div' ),
+				bar: document.createElement( 'div' )
+			}, {
+				initialData: {
+					foo: '<p>Foo</p>',
+					bar: '<p>Bar</p>'
+				},
+				extraPlugins: [ ChangeInitialData ]
+			} )
+				.then(
+					() => {
+						expect.fail( 'Multi-root editor should throw an error when initital roots and initial data are mismatched.' );
+					},
+					err => {
+						assertCKEditorError( err, 'multi-root-editor-root-initial-data-mismatch', null );
+					}
+				)
+				.then( done )
+				.catch( done )
+				.finally( () => {
+					// Cleanup. This is difficult as we don't have editor instance to destroy.
+					document.querySelector( '.ck-body-wrapper' ).remove();
+				} );
+		} );
+
 		describe( 'configurable editor label (aria-label)', () => {
 			it( 'should be set to the defaut value if not configured', async () => {
 				const editor = await MultiRootEditor.create( {
@@ -764,11 +852,14 @@ describe( 'MultiRootEditor', () => {
 	} );
 
 	describe( 'loading roots', () => {
-		describe( 'config.lazyRoots', () => {
+		describe( 'lazyRoots', () => {
 			it( 'should create specified, non-loaded roots', async () => {
 				editor = await MultiRootEditor.create( { main: '<p>Main.</p>' }, {
 					plugins: [ Paragraph, Undo ],
-					lazyRoots: [ 'foo', 'bar' ]
+					roots: {
+						foo: { lazyLoad: true },
+						bar: { lazyLoad: true }
+					}
 				} );
 
 				const rootFoo = editor.model.document.getRoot( 'foo' );
@@ -792,7 +883,10 @@ describe( 'MultiRootEditor', () => {
 			it( 'should work correctly when there are no initial loaded roots', async () => {
 				editor = await MultiRootEditor.create( {}, {
 					plugins: [ Paragraph, Undo ],
-					lazyRoots: [ 'foo', 'bar' ]
+					roots: {
+						foo: { lazyLoad: true },
+						bar: { lazyLoad: true }
+					}
 				} );
 
 				expect( editor.model.document.getRootNames() ).to.deep.equal( [] );
@@ -807,7 +901,10 @@ describe( 'MultiRootEditor', () => {
 			beforeEach( async () => {
 				editor = await MultiRootEditor.create( {}, {
 					plugins: [ Paragraph, Undo ],
-					lazyRoots: [ 'foo', 'bar' ]
+					roots: {
+						foo: { lazyLoad: true },
+						bar: { lazyLoad: true }
+					}
 				} );
 
 				root = editor.model.document.getRoot( 'foo' );
@@ -1040,7 +1137,10 @@ describe( 'MultiRootEditor', () => {
 		beforeEach( async () => {
 			editor = await MultiRootEditor.create( { main: '<p>Main.</p>', old: '<p>Old.</p>' }, {
 				plugins: [ Paragraph, Undo ],
-				lazyRoots: [ 'abc', 'xyz' ]
+				roots: {
+					abc: { lazyLoad: true },
+					xyz: { lazyLoad: true }
+				}
 			} );
 		} );
 
@@ -1253,12 +1353,20 @@ describe( 'MultiRootEditor', () => {
 		} );
 	} );
 
-	describe( 'EditorConfig#rootsAttributes', () => {
+	describe( 'roots attributes', () => {
 		it( 'should load attributes from editor configuration', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					foo: { order: 10, isLocked: null },
-					bar: { order: null, isLocked: false }
+				roots: {
+					foo: {
+						modelElement: {
+							attributes: { order: 10, isLocked: null }
+						}
+					},
+					bar: {
+						modelElement: {
+							attributes: { order: null, isLocked: false }
+						}
+					}
 				}
 			} );
 
@@ -1276,9 +1384,17 @@ describe( 'MultiRootEditor', () => {
 
 		it( 'should register all root attributes passed in the config', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					foo: { order: 10 },
-					bar: { isLocked: false }
+				roots: {
+					foo: {
+						modelElement: {
+							attributes: { order: 10 }
+						}
+					},
+					bar: {
+						modelElement: {
+							attributes: { isLocked: false }
+						}
+					}
 				}
 			} );
 
@@ -1293,10 +1409,14 @@ describe( 'MultiRootEditor', () => {
 			await editor.destroy();
 		} );
 
-		it( 'should throw when trying to set an attribute on non-existing root', done => {
+		it.skip( 'should throw when trying to set an attribute on non-existing root', done => {
 			MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					abc: { order: 10, isLocked: null }
+				roots: {
+					abc: {
+						modelElement: {
+							attributes: { order: 10, isLocked: null }
+						}
+					}
 				}
 			} ).then(
 				() => {
@@ -1314,9 +1434,17 @@ describe( 'MultiRootEditor', () => {
 	describe( '#getRootAttributes()', () => {
 		it( 'should return current values of attributes of the given root', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					foo: { order: 10, isLocked: true },
-					bar: { order: 20, isLocked: false }
+				roots: {
+					foo: {
+						modelElement: {
+							attributes: { order: 10, isLocked: true }
+						}
+					},
+					bar: {
+						modelElement: {
+							attributes: { order: 20, isLocked: false }
+						}
+					}
 				}
 			} );
 
@@ -1340,9 +1468,17 @@ describe( 'MultiRootEditor', () => {
 
 		it( 'should return roots attributes that were registered', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					foo: { order: 10 },
-					bar: {}
+				roots: {
+					foo: {
+						modelElement: {
+							attributes: { order: 10 }
+						}
+					},
+					bar: {
+						modelElement: {
+							attributes: {}
+						}
+					}
 				}
 			} );
 
@@ -1367,9 +1503,17 @@ describe( 'MultiRootEditor', () => {
 
 		it( 'should not return roots attributes that were not registered', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					foo: { order: 10, isLocked: true },
-					bar: { order: 20, isLocked: false }
+				roots: {
+					foo: {
+						modelElement: {
+							attributes: { order: 10, isLocked: true }
+						}
+					},
+					bar: {
+						modelElement: {
+							attributes: { order: 20, isLocked: false }
+						}
+					}
 				}
 			} );
 
@@ -1393,9 +1537,17 @@ describe( 'MultiRootEditor', () => {
 
 		it( 'should properly handle null values', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					foo: { order: 10, isLocked: null },
-					bar: { order: null, isLocked: false }
+				roots: {
+					foo: {
+						modelElement: {
+							attributes: { order: 10, isLocked: null }
+						}
+					},
+					bar: {
+						modelElement: {
+							attributes: { order: null, isLocked: false }
+						}
+					}
 				}
 			} );
 
@@ -1444,9 +1596,17 @@ describe( 'MultiRootEditor', () => {
 	describe( '#getRootsAttributes()', () => {
 		it( 'should return current values of roots attributes', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					foo: { order: 10, isLocked: true },
-					bar: { order: 20, isLocked: false }
+				roots: {
+					foo: {
+						modelElement: {
+							attributes: { order: 10, isLocked: true }
+						}
+					},
+					bar: {
+						modelElement: {
+							attributes: { order: 20, isLocked: false }
+						}
+					}
 				}
 			} );
 
@@ -1476,9 +1636,17 @@ describe( 'MultiRootEditor', () => {
 
 		it( 'should return all and only roots attributes that were registered', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					foo: { order: 10 },
-					bar: {}
+				roots: {
+					foo: {
+						modelElement: {
+							attributes: { order: 10 }
+						}
+					},
+					bar: {
+						modelElement: {
+							attributes: {}
+						}
+					}
 				}
 			} );
 
@@ -1508,11 +1676,20 @@ describe( 'MultiRootEditor', () => {
 
 		it( 'should return attributes for all and only currently attached roots', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
-				rootsAttributes: {
-					foo: { order: 10, isLocked: true },
-					bar: { order: 20, isLocked: false }
-				},
-				lazyRoots: [ 'xxx', 'yyy' ]
+				roots: {
+					foo: {
+						modelElement: {
+							attributes: { order: 10, isLocked: true }
+						}
+					},
+					bar: {
+						modelElement: {
+							attributes: { order: 20, isLocked: false }
+						}
+					},
+					xxx: { lazyLoad: true },
+					yyy: { lazyLoad: true }
+				}
 			} );
 
 			editor.detachRoot( 'bar' );
diff --git a/packages/ckeditor5-editor-multi-root/tests/multirooteditorui.js b/packages/ckeditor5-editor-multi-root/tests/multirooteditorui.js
index 88cf1817ca2..6ddaeb72b4a 100644
--- a/packages/ckeditor5-editor-multi-root/tests/multirooteditorui.js
+++ b/packages/ckeditor5-editor-multi-root/tests/multirooteditorui.js
@@ -163,6 +163,8 @@ describe( 'MultiRootEditorUI', () => {
 		} );
 
 		describe( 'placeholder', () => {
+			// TODO add tests with editor.config.roots.<name>.placeholder.
+
 			it( 'sets placeholder from editor.config.placeholder - string', () => {
 				return MultiRootEditor
 					.create( { foo: '', bar: '' }, {
@@ -185,11 +187,11 @@ describe( 'MultiRootEditorUI', () => {
 						newEditor.model.change( writer => {
 							writer.addRoot( 'new' );
 							const editable = view.createEditable( 'new' );
-							ui.addEditable( editable );
+							ui.addEditable( editable, 'Added later' );
 						} );
 
 						const newP = newEditor.editing.view.document.getRoot( 'new' ).getChild( 0 );
-						expect( newP.getAttribute( 'data-placeholder' ) ).to.equal( 'Type here...' );
+						expect( newP.getAttribute( 'data-placeholder' ) ).to.equal( 'Added later' );
 
 						return newEditor.destroy();
 					} );
@@ -221,17 +223,16 @@ describe( 'MultiRootEditorUI', () => {
 						expect( bazP.hasAttribute( 'data-placeholder' ) ).to.be.false;
 
 						// New editable:
-						// Placeholder as it was defined in the config objects.
 						newEditor.model.change( writer => {
 							writer.addRoot( 'abc' );
 							const editable = view.createEditable( 'abc' );
-							ui.addEditable( editable );
+							ui.addEditable( editable, 'Added later' );
 						} );
 
 						const abcP = newEditor.editing.view.document.getRoot( 'abc' ).getChild( 0 );
-						expect( abcP.getAttribute( 'data-placeholder' ) ).to.equal( 'Type abc...' );
+						expect( abcP.getAttribute( 'data-placeholder' ) ).to.equal( 'Added later' );
 
-						// Placeholder not set as it was not defined in the config object.
+						// Placeholder not set as it was not provided to `ui.addEditable()`.
 						newEditor.model.change( writer => {
 							writer.addRoot( 'new' );
 							const editable = view.createEditable( 'new' );

From 50d9a1a8d93aa1ae328e17862b166c12dad6665a Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Tue, 10 Mar 2026 19:08:56 +0100
Subject: [PATCH 03/22] Some API docs cleaning.

---
 packages/ckeditor5-core/src/editor/editorconfig.ts  |  2 --
 .../src/editor/utils/normalizerootsconfig.ts        |  9 ++++++++-
 .../ckeditor5-editor-multi-root/src/augmentation.ts | 13 ++++++++++++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/ckeditor5-core/src/editor/editorconfig.ts b/packages/ckeditor5-core/src/editor/editorconfig.ts
index 8b6db6abe78..e2bde634980 100644
--- a/packages/ckeditor5-core/src/editor/editorconfig.ts
+++ b/packages/ckeditor5-core/src/editor/editorconfig.ts
@@ -970,8 +970,6 @@ export interface RootConfig {
 	 * .then( ... )
 	 * .catch( ... );
 	 * ```
-	 * TODO link to root and roots config docs
-	 *
 	 * See also {@link module:core/editor/editor~Editor.create Editor.create()} documentation for the editor implementation which you use.
 	 *
 	 * **Note:** If initial data is passed to `Editor.create()` in the first parameter (instead of a DOM element), and,
diff --git a/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts b/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
index f9ca73d77b7..3315ebe7eb6 100644
--- a/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
+++ b/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
@@ -18,7 +18,14 @@ import {
 import { isElement as _isElement } from 'es-toolkit/compat';
 
 /**
- * TODO
+ * Normalizes the editor roots configuration. It ensures that all root configurations are defined in `config.roots`
+ * and that they have `initialData` defined.
+ *
+ * It normalizes a single-root configuration (where `config.root` is used) to a multi-root configuration
+ * (where all roots are defined in `config.roots`). This is considered a standard configuration format,
+ * so the editor features can always expect roots to be defined in `config.roots`.
+ *
+ * It also handles legacy configuration options, such as `config.initialData`, `config.placeholder`, and `config.label`.
  *
  * @internal
  */
diff --git a/packages/ckeditor5-editor-multi-root/src/augmentation.ts b/packages/ckeditor5-editor-multi-root/src/augmentation.ts
index 9274b6fb22b..80206fc65be 100644
--- a/packages/ckeditor5-editor-multi-root/src/augmentation.ts
+++ b/packages/ckeditor5-editor-multi-root/src/augmentation.ts
@@ -100,7 +100,11 @@ declare module '@ckeditor/ckeditor5-core' {
 	interface RootConfig {
 
 		/**
-		 * TODO
+		 * Configuration for the root model element of the root.
+		 * This is a configuration object for the model element that will be created for the root in the editor's model.
+		 *
+		 * **Note: This configuration option is supported only by the
+		 * {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root} editor type.**
 		 */
 		modelElement?: RootModelElementConfig;
 
@@ -125,6 +129,13 @@ declare module '@ckeditor/ckeditor5-core' {
 		 *
 		 * This is useful for handling big documents that contain hundreds of roots, or contain very large roots, which may have
 		 * impact editor performance if loaded all at once.
+		 *
+		 * **Note: This configuration option is supported only by the
+		 * {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root} editor type.**
+		 *
+		 * **Note: This property has been deprecated and will be removed in the future versions of CKEditor.**
+		 *
+		 * @deprecated
 		 */
 		lazyLoad?: boolean;
 	}

From c938e549c62fb756b46af519683160d2f49c8348 Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Tue, 10 Mar 2026 19:47:53 +0100
Subject: [PATCH 04/22] Add tests for normalizeRootsConfig util.

---
 .../editor/utils/normalizerootsconfig.js      | 352 ++++++++++++++++++
 1 file changed, 352 insertions(+)
 create mode 100644 packages/ckeditor5-core/tests/editor/utils/normalizerootsconfig.js

diff --git a/packages/ckeditor5-core/tests/editor/utils/normalizerootsconfig.js b/packages/ckeditor5-core/tests/editor/utils/normalizerootsconfig.js
new file mode 100644
index 00000000000..0855d0afb27
--- /dev/null
+++ b/packages/ckeditor5-core/tests/editor/utils/normalizerootsconfig.js
@@ -0,0 +1,352 @@
+/**
+ * @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 { normalizeRootsConfig } from '../../../src/index.ts';
+import { Config } from '@ckeditor/ckeditor5-utils';
+import { expectToThrowCKEditorError } from '@ckeditor/ckeditor5-utils/tests/_utils/utils.js';
+
+describe( 'normalizeRootsConfig()', () => {
+	let config;
+
+	beforeEach( () => {
+		config = new Config();
+	} );
+
+	describe( 'single-root (string source data)', () => {
+		it( 'should set initialData from source data string', () => {
+			normalizeRootsConfig( '<p>foo</p>', config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.initialData ).to.equal( '<p>foo</p>' );
+		} );
+
+		it( 'should set initialData from an empty string', () => {
+			normalizeRootsConfig( '', config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.initialData ).to.equal( '' );
+		} );
+
+		it( 'should use custom default root name', () => {
+			normalizeRootsConfig( '<p>foo</p>', config, 'content' );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.content.initialData ).to.equal( '<p>foo</p>' );
+			expect( roots.main ).to.be.undefined;
+		} );
+
+		it( 'should use initialData from config.root if set', () => {
+			config.set( 'root', { initialData: '<p>bar</p>' } );
+
+			normalizeRootsConfig( '', config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.initialData ).to.equal( '<p>bar</p>' );
+		} );
+
+		it( 'should use initialData from legacy config.initialData', () => {
+			config.set( 'initialData', '<p>legacy</p>' );
+
+			const sourceElement = document.createElement( 'div' );
+
+			normalizeRootsConfig( sourceElement, config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.initialData ).to.equal( '<p>legacy</p>' );
+		} );
+
+		it( 'should throw when both config.root and config.roots.main are set', () => {
+			config.set( 'root', { initialData: '<p>from root</p>' } );
+			config.set( 'roots', { main: { initialData: '<p>from roots</p>' } } );
+
+			expectToThrowCKEditorError( () => {
+				normalizeRootsConfig( '', config );
+			}, /^editor-create-roots-initial-data/ );
+		} );
+
+		it( 'should throw when both source data string and config.initialData are set', () => {
+			config.set( 'initialData', '<p>legacy</p>' );
+
+			expectToThrowCKEditorError( () => {
+				normalizeRootsConfig( '<p>source</p>', config );
+			}, /^editor-create-initial-data/ );
+		} );
+
+		it( 'should throw when both rootConfig.initialData and source data string are set', () => {
+			config.set( 'roots', { main: { initialData: '<p>from roots</p>' } } );
+
+			expectToThrowCKEditorError( () => {
+				normalizeRootsConfig( '<p>source</p>', config );
+			}, /^editor-create-initial-data/ );
+		} );
+
+		it( 'should throw when both rootConfig.initialData and legacy config.initialData are set', () => {
+			config.set( 'roots', { main: { initialData: '<p>from roots</p>' } } );
+			config.set( 'initialData', '<p>legacy</p>' );
+
+			expectToThrowCKEditorError( () => {
+				normalizeRootsConfig( document.createElement( 'div' ), config );
+			}, /^editor-create-roots-initial-data/ );
+		} );
+	} );
+
+	describe( 'single-root (source element)', () => {
+		let sourceElement;
+
+		beforeEach( () => {
+			sourceElement = document.createElement( 'div' );
+			sourceElement.innerHTML = '<p>element data</p>';
+		} );
+
+		it( 'should extract initialData from source element', () => {
+			normalizeRootsConfig( sourceElement, config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.initialData ).to.equal( '<p>element data</p>' );
+		} );
+
+		it( 'should prefer legacy config.initialData over source element', () => {
+			config.set( 'initialData', '<p>legacy</p>' );
+
+			normalizeRootsConfig( sourceElement, config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.initialData ).to.equal( '<p>legacy</p>' );
+		} );
+	} );
+
+	describe( 'multi-root (object source data)', () => {
+		it( 'should set initialData from source data object', () => {
+			normalizeRootsConfig( {
+				header: '<p>header</p>',
+				content: '<p>content</p>'
+			}, config, false );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.header.initialData ).to.equal( '<p>header</p>' );
+			expect( roots.content.initialData ).to.equal( '<p>content</p>' );
+		} );
+
+		it( 'should merge source data with existing roots config', () => {
+			config.set( 'roots', {
+				header: { placeholder: 'Type header...' }
+			} );
+
+			normalizeRootsConfig( {
+				header: '<p>header</p>',
+				content: '<p>content</p>'
+			}, config, false );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.header.initialData ).to.equal( '<p>header</p>' );
+			expect( roots.header.placeholder ).to.equal( 'Type header...' );
+			expect( roots.content.initialData ).to.equal( '<p>content</p>' );
+		} );
+
+		it( 'should use initialData from roots config over source data elements', () => {
+			config.set( 'roots', {
+				header: { initialData: '<p>from config</p>' }
+			} );
+
+			const headerEl = document.createElement( 'div' );
+			headerEl.innerHTML = '<p>from element</p>';
+
+			normalizeRootsConfig( {
+				header: headerEl
+			}, config, false );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.header.initialData ).to.equal( '<p>from config</p>' );
+		} );
+
+		it( 'should throw when both source data string and rootConfig.initialData are set for a root', () => {
+			config.set( 'roots', {
+				header: { initialData: '<p>from config</p>' }
+			} );
+
+			expectToThrowCKEditorError( () => {
+				normalizeRootsConfig( {
+					header: '<p>from source</p>'
+				}, config, false );
+			}, /^editor-create-initial-data/ );
+		} );
+
+		it( 'should use legacy config.initialData as object', () => {
+			config.set( 'initialData', {
+				header: '<p>legacy header</p>',
+				content: '<p>legacy content</p>'
+			} );
+
+			normalizeRootsConfig( {}, config, false );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.header.initialData ).to.equal( '<p>legacy header</p>' );
+			expect( roots.content.initialData ).to.equal( '<p>legacy content</p>' );
+		} );
+
+		it( 'should collect root names from all sources', () => {
+			config.set( 'roots', {
+				fromRoots: { initialData: '<p>a</p>' }
+			} );
+			config.set( 'initialData', {
+				fromLegacy: '<p>b</p>'
+			} );
+
+			normalizeRootsConfig( {
+				fromSource: '<p>c</p>'
+			}, config, false );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.fromRoots ).to.not.be.undefined;
+			expect( roots.fromLegacy ).to.not.be.undefined;
+			expect( roots.fromSource ).to.not.be.undefined;
+		} );
+	} );
+
+	describe( 'defaultRootName parameter', () => {
+		it( 'should default to "main"', () => {
+			normalizeRootsConfig( '<p>foo</p>', config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main ).to.not.be.undefined;
+		} );
+
+		it( 'should not create a default root when set to false', () => {
+			normalizeRootsConfig( {}, config, false );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main ).to.be.undefined;
+		} );
+
+		it( 'should throw when config.root is set and defaultRootName is false', () => {
+			config.set( 'root', { initialData: '<p>data</p>' } );
+
+			expectToThrowCKEditorError( () => {
+				normalizeRootsConfig( {}, config, false );
+			}, /^editor-create-roots-initial-data/ );
+		} );
+	} );
+
+	describe( 'legacy placeholder and label', () => {
+		it( 'should set placeholder from legacy config.placeholder string', () => {
+			config.set( 'placeholder', 'Type here...' );
+
+			normalizeRootsConfig( '<p>foo</p>', config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.placeholder ).to.equal( 'Type here...' );
+		} );
+
+		it( 'should set placeholder from legacy config.placeholder object', () => {
+			config.set( 'placeholder', {
+				header: 'Type header...',
+				content: 'Type content...'
+			} );
+			config.set( 'roots', {
+				header: { initialData: '' },
+				content: { initialData: '' }
+			} );
+
+			normalizeRootsConfig( document.createElement( 'div' ), config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.header.placeholder ).to.equal( 'Type header...' );
+			expect( roots.content.placeholder ).to.equal( 'Type content...' );
+		} );
+
+		it( 'should set label from legacy config.label string', () => {
+			config.set( 'label', 'Editor' );
+
+			normalizeRootsConfig( '<p>foo</p>', config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.label ).to.equal( 'Editor' );
+		} );
+
+		it( 'should set label from legacy config.label object', () => {
+			config.set( 'label', {
+				header: 'Header editor',
+				content: 'Content editor'
+			} );
+			config.set( 'roots', {
+				header: { initialData: '' },
+				content: { initialData: '' }
+			} );
+
+			normalizeRootsConfig( document.createElement( 'div' ), config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.header.label ).to.equal( 'Header editor' );
+			expect( roots.content.label ).to.equal( 'Content editor' );
+		} );
+
+		it( 'should not override placeholder already set in root config', () => {
+			config.set( 'placeholder', 'Legacy placeholder' );
+			config.set( 'roots', {
+				main: { initialData: '', placeholder: 'Root placeholder' }
+			} );
+
+			normalizeRootsConfig( document.createElement( 'div' ), config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.placeholder ).to.equal( 'Root placeholder' );
+		} );
+
+		it( 'should not override label already set in root config', () => {
+			config.set( 'label', 'Legacy label' );
+			config.set( 'roots', {
+				main: { initialData: '', label: 'Root label' }
+			} );
+
+			normalizeRootsConfig( document.createElement( 'div' ), config );
+
+			const roots = config.get( 'roots' );
+
+			expect( roots.main.label ).to.equal( 'Root label' );
+		} );
+	} );
+
+	describe( 'config.roots is set after normalization', () => {
+		it( 'should always set config.roots', () => {
+			normalizeRootsConfig( '<p>foo</p>', config );
+
+			expect( config.get( 'roots' ) ).to.be.an( 'object' );
+		} );
+
+		it( 'should update config.roots with all processed roots', () => {
+			config.set( 'roots', {
+				header: { initialData: '<p>h</p>' },
+				content: { initialData: '<p>c</p>' }
+			} );
+
+			normalizeRootsConfig( document.createElement( 'div' ), config );
+
+			const roots = config.get( 'roots' );
+
+			expect( Object.keys( roots ) ).to.include( 'main' );
+			expect( Object.keys( roots ) ).to.include( 'header' );
+			expect( Object.keys( roots ) ).to.include( 'content' );
+		} );
+	} );
+} );

From 6b2965b3469f1469d4cc751b23ad1cc5a301e093 Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Wed, 11 Mar 2026 13:54:02 +0100
Subject: [PATCH 05/22] Avoid prototype pollution.

---
 .../src/editor/utils/normalizerootsconfig.ts              | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts b/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
index 3315ebe7eb6..7ae5fa12b34 100644
--- a/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
+++ b/packages/ckeditor5-core/src/editor/utils/normalizerootsconfig.ts
@@ -35,7 +35,7 @@ export function normalizeRootsConfig(
 	defaultRootName: string | false = 'main'
 ): void {
 	const mainRootConfig = config.get( 'root' );
-	const rootsConfig = config.get( 'roots' ) || {};
+	const rootsConfig = config.get( 'roots' ) || Object.create( null );
 
 	// Avoid mixing `config.root` and `config.roots.main`.
 	if ( mainRootConfig && ( !defaultRootName || defaultRootName in rootsConfig ) ) {
@@ -47,7 +47,7 @@ export function normalizeRootsConfig(
 	// Move `config.root` to `config.roots.main`.
 	// This makes access to root configuration more consistent as all roots will be defined in `config.roots`.
 	if ( defaultRootName && !rootsConfig[ defaultRootName ] ) {
-		rootsConfig[ defaultRootName ] = mainRootConfig || {};
+		rootsConfig[ defaultRootName ] = mainRootConfig || Object.create( null );
 	}
 
 	const sourceElementIsPlainObject = isPlainObject( sourceElementsOrData );
@@ -67,7 +67,7 @@ export function normalizeRootsConfig(
 
 	// Ensure that all roots have `initialData` defined. If not, try to get it from the source element or data.
 	for ( const rootName of rootNames ) {
-		const rootConfig = rootsConfig[ rootName ] || {};
+		const rootConfig = rootsConfig[ rootName ] || Object.create( null );
 		const sourceElementOrDataForRoot = sourceElementIsPlainObject ? sourceElementsOrData[ rootName ] : sourceElementsOrData;
 
 		// No dedicated initial data for the root.
@@ -143,7 +143,7 @@ function getLegacyInitialData(
 ): Record<string, string | undefined> {
 	return (
 		sourceElementIsObject || !defaultRootName ?
-			config.get( 'initialData' ) || {} :
+			config.get( 'initialData' ) || Object.create( null ) :
 			{
 				[ defaultRootName ]: config.get( 'initialData' )
 			}

From 03695672e698d218d37f5670422eafff90afc6bc Mon Sep 17 00:00:00 2001
From: Mateusz Baginski <cziken58@gmail.com>
Date: Wed, 11 Mar 2026 15:17:58 +0100
Subject: [PATCH 06/22] Update guide

---
 docs/getting-started/setup/getting-and-setting-data.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/getting-started/setup/getting-and-setting-data.md b/docs/getting-started/setup/getting-and-setting-data.md
index 51e5cb49da2..6ee43403801 100644
--- a/docs/getting-started/setup/getting-and-setting-data.md
+++ b/docs/getting-started/setup/getting-and-setting-data.md
@@ -34,13 +34,15 @@ ClassicEditor
 		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
 		plugins: [ /* ... */ ],
 		toolbar: [ /* ... */ ],
-		initialData: '<p>Hello, world!</p>'
+		root: {
+			initialData: '<p>Hello, world!</p>'
+		}
 	} )
 	.then( /* ... */ )
 	.catch( /* ... */ );
 ```
 
-The {@link module:core/editor/editorconfig~EditorConfig.initialData `initialData`} property will initialize the editor with the provided data, overriding the content provided at the HTML level.
+The {@link module:core/editor/editorconfig~EditorConfig.root.initialData `initialData`} property will initialize the editor with the provided data, overriding the content provided at the HTML level.
 
 If you are setting up the editor with integrations like {@link getting-started/integrations/react-default-npm React}, consult the documentation for additional properties provided to initialize the data.
 

From d0229cc34ed0ca86b3d6f9f6ce9835146735639c Mon Sep 17 00:00:00 2001
From: Mateusz Baginski <cziken58@gmail.com>
Date: Wed, 11 Mar 2026 15:56:19 +0100
Subject: [PATCH 07/22] Update more docs.

---
 docs/getting-started/integrations/next-js.md  |  4 +++-
 .../integrations/react-default-npm.md         |  8 +++++--
 .../integrations/sharepoint.md                | 12 +++++-----
 docs/updating/migration-to-cdn/react.md       |  8 +++++--
 packages/ckeditor5-autosave/tests/autosave.js |  8 +++++--
 .../src/ballooneditor.ts                      |  4 +++-
 .../src/classiceditor.ts                      |  4 +++-
 .../src/decouplededitor.ts                    |  4 +++-
 .../src/inlineeditor.ts                       |  4 +++-
 .../src/multirooteditor.ts                    | 22 ++++++++++++++-----
 10 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/docs/getting-started/integrations/next-js.md b/docs/getting-started/integrations/next-js.md
index 4ab70400462..8a7070e276e 100644
--- a/docs/getting-started/integrations/next-js.md
+++ b/docs/getting-started/integrations/next-js.md
@@ -72,7 +72,9 @@ function CustomEditor() {
 				licenseKey: '<YOUR_LICENSE_KEY>',
 				plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
 				toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ],
-				initialData: '<p>Hello from CKEditor 5 in React!</p>'
+				root: {
+					initialData: '<p>Hello from CKEditor 5 in React!</p>'
+				}
 			} }
 		/>
 	);
diff --git a/docs/getting-started/integrations/react-default-npm.md b/docs/getting-started/integrations/react-default-npm.md
index 72be4a8b208..bdb71c753bd 100644
--- a/docs/getting-started/integrations/react-default-npm.md
+++ b/docs/getting-started/integrations/react-default-npm.md
@@ -60,7 +60,9 @@ function App() {
 				licenseKey: '<YOUR_LICENSE_KEY>',
 				plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
 				toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ],
-				initialData: '<p>Hello from CKEditor 5 in React!</p>',
+				root: {
+					initialData: '<p>Hello from CKEditor 5 in React!</p>'
+				},
 			} }
 		/>
 	);
@@ -248,7 +250,9 @@ function App() {
 			config={ {
 				// ... Other configuration options ...
 				translations: [ coreTranslations, premiumFeaturesTranslations ],
-				initialData: '<p>Hola desde CKEditor 5 en React!</p>'
+				root: {
+					initialData: '<p>Hola desde CKEditor 5 en React!</p>'
+				}
 			} }
 		/>
 	);
diff --git a/docs/getting-started/integrations/sharepoint.md b/docs/getting-started/integrations/sharepoint.md
index 4a3b027ee72..13227ddacc9 100644
--- a/docs/getting-started/integrations/sharepoint.md
+++ b/docs/getting-started/integrations/sharepoint.md
@@ -142,7 +142,9 @@ export default class RichTextEditor extends React.Component<IRichTextEditorProps
 									'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor', '|',
 									'formatPainter', 'insertTable', 'bulletedList', 'numberedList'
 								],
-								initialData: '<p>Hello from CKEditor 5 in SPFX React app!</p>',
+								root: {
+									initialData: '<p>Hello from CKEditor 5 in SPFX React app!</p>'
+								},
 								table: {
 									contentToolbar: [
 										'tableColumn', 'tableRow', 'mergeTableCells',
@@ -244,9 +246,9 @@ const ForceTableBorderImportant = ( editor: Editor ) => {
 	*/
 	const enforceBorderStyles = ( domElement: HTMLElement, defaults: { width: string, style: string, color: string } ) => {
 	// Skip layout tables (used for positioning, not data)
-	if ( 
-		domElement.closest('figure')?.classList.contains( 'layout-table' ) || 
-		domElement.classList.contains( 'layout-table' ) 
+	if (
+		domElement.closest('figure')?.classList.contains( 'layout-table' ) ||
+		domElement.classList.contains( 'layout-table' )
 	) {
 		return;
 	}
@@ -302,7 +304,7 @@ const ForceTableBorderImportant = ( editor: Editor ) => {
 
 <info-box important>
 	The internal `StylesMap` utility used by the editor's conversion system does not natively support the `!important` flag during style normalization.
-	
+
 	The provided workaround, therefore, performs low-level DOM manipulation during the render cycle instead of relying solely on `StylesMap`. By applying these styles directly to the DOM elements after they are mapped, we ensure the priority flag remains intact and is correctly interpreted by the browser.
 </info-box>
 
diff --git a/docs/updating/migration-to-cdn/react.md b/docs/updating/migration-to-cdn/react.md
index d7b7c407cf2..c5f97c50449 100644
--- a/docs/updating/migration-to-cdn/react.md
+++ b/docs/updating/migration-to-cdn/react.md
@@ -64,7 +64,9 @@ function App() {
 				mention: {
 					// Mention configuration
 				},
-				initialData: '<p>Hello from CKEditor 5 in React!</p>',
+				root: {
+					initialData: '<p>Hello from CKEditor 5 in React!</p>'
+				}
 			} }
 		/>
 	);
@@ -122,7 +124,9 @@ function App() {
 					Undo
 				],
 				licenseKey: '<YOUR_LICENSE_KEY>',
-				initialData: '<p>Hello from CKEditor 5 in React!</p>',
+				root: {
+					initialData: '<p>Hello from CKEditor 5 in React!</p>'
+				}
 			} }
 		/>
 	);
diff --git a/packages/ckeditor5-autosave/tests/autosave.js b/packages/ckeditor5-autosave/tests/autosave.js
index 2c5bc35240f..54ea21e464d 100644
--- a/packages/ckeditor5-autosave/tests/autosave.js
+++ b/packages/ckeditor5-autosave/tests/autosave.js
@@ -90,7 +90,9 @@ describe( 'Autosave', () => {
 					autosave: {
 						save: spy
 					},
-					initialData: '<p>Foo</p>'
+					root: {
+						initialData: '<p>Foo</p>'
+					}
 				} )
 				.then( _editor => {
 					editor = _editor;
@@ -716,7 +718,9 @@ describe( 'Autosave', () => {
 							spy();
 						}
 					},
-					initialData: '<p>Foo</p>'
+					root: {
+						initialData: '<p>Foo</p>'
+					}
 				} )
 				.then( _editor => {
 					editor = _editor;
diff --git a/packages/ckeditor5-editor-balloon/src/ballooneditor.ts b/packages/ckeditor5-editor-balloon/src/ballooneditor.ts
index 489f39eb8ce..091af3165c7 100644
--- a/packages/ckeditor5-editor-balloon/src/ballooneditor.ts
+++ b/packages/ckeditor5-editor-balloon/src/ballooneditor.ts
@@ -155,7 +155,9 @@ export class BalloonEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * ```ts
 	 * BalloonEditor
 	 * 	.create( document.querySelector( '#editor' ), {
-	 * 		initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	 * 		root: {
+	 * 			initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	 * 		}
 	 * 	} )
 	 * 	.then( editor => {
 	 * 		console.log( 'Editor was initialized', editor );
diff --git a/packages/ckeditor5-editor-classic/src/classiceditor.ts b/packages/ckeditor5-editor-classic/src/classiceditor.ts
index 27ac3f47b28..8b66650d968 100644
--- a/packages/ckeditor5-editor-classic/src/classiceditor.ts
+++ b/packages/ckeditor5-editor-classic/src/classiceditor.ts
@@ -148,7 +148,9 @@ export class ClassicEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * ```ts
 	 * ClassicEditor
 	 * 	.create( document.querySelector( '#editor' ), {
-	 * 		initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	 * 		root: {
+	 * 			initialData: '<p>Hello world!</p>'
+	 * 		}
 	 * 	} )
 	 * 	.then( editor => {
 	 * 		console.log( 'Editor was initialized', editor );
diff --git a/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts b/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts
index c51a20d62da..3694c0bb165 100644
--- a/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts
+++ b/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts
@@ -183,7 +183,9 @@ export class DecoupledEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * ```ts
 	 * DecoupledEditor
 	 * 	.create( document.querySelector( '#editor' ), {
-	 * 		initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	 * 		root: {
+	 * 			initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	 * 		}
 	 * 	} )
 	 * 	.then( editor => {
 	 * 		console.log( 'Editor was initialized', editor );
diff --git a/packages/ckeditor5-editor-inline/src/inlineeditor.ts b/packages/ckeditor5-editor-inline/src/inlineeditor.ts
index 87ceee2b616..89a432bdff8 100644
--- a/packages/ckeditor5-editor-inline/src/inlineeditor.ts
+++ b/packages/ckeditor5-editor-inline/src/inlineeditor.ts
@@ -156,7 +156,9 @@ export class InlineEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * ```ts
 	 * InlineEditor
 	 * 	.create( document.querySelector( '#editor' ), {
-	 * 		initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	 * 		root: {
+	 * 			initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+	 * 		}
 	 * 	} )
 	 * 	.then( editor => {
 	 * 		console.log( 'Editor was initialized', editor );
diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
index 876c57432c1..0fb1f42bb3d 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
@@ -849,12 +849,22 @@ export class MultiRootEditor extends Editor {
 	 * 	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>'
+	 * 	roots: {
+	 * 		intro: {
+	 * 			initialData: '<p><strong>Exciting</strong> intro text to an article.</p>'
+	 * 		},
+	 * 		content: {
+	 * 			initialData: '<p>Lorem ipsum dolor sit amet.</p>'
+	 * 		},
+	 * 		sidePanelLeft: {
+	 * 			initialData: '<blockquote>Strong quotation from article.</blockquote>'
+	 * 		},
+	 * 		sidePanelRight: {
+	 * 			initialData: '<p>List of similar articles...</p>'
+	 * 		},
+	 * 		outro: {
+	 * 			initialData: '<p>Closing text.</p>'
+	 * 		}
 	 * 	}
 	 * } )
 	 * .then( editor => {

From d9a53ed62195dbf2ac9c3b0ce061a9f73b97a323 Mon Sep 17 00:00:00 2001
From: Mateusz Baginski <cziken58@gmail.com>
Date: Wed, 11 Mar 2026 16:01:01 +0100
Subject: [PATCH 08/22] Adjust paths.

---
 packages/ckeditor5-editor-balloon/src/ballooneditor.ts      | 2 +-
 packages/ckeditor5-editor-decoupled/src/decouplededitor.ts  | 2 +-
 packages/ckeditor5-editor-inline/src/inlineeditor.ts        | 2 +-
 packages/ckeditor5-editor-multi-root/src/multirooteditor.ts | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ckeditor5-editor-balloon/src/ballooneditor.ts b/packages/ckeditor5-editor-balloon/src/ballooneditor.ts
index 091af3165c7..76649b895a4 100644
--- a/packages/ckeditor5-editor-balloon/src/ballooneditor.ts
+++ b/packages/ckeditor5-editor-balloon/src/ballooneditor.ts
@@ -148,7 +148,7 @@ export class BalloonEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * 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`)
+	 * # Using an existing DOM element (and data provided in `config.root.initialData`)
 	 *
 	 * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
 	 *
diff --git a/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts b/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts
index 3694c0bb165..5714fb15303 100644
--- a/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts
+++ b/packages/ckeditor5-editor-decoupled/src/decouplededitor.ts
@@ -176,7 +176,7 @@ export class DecoupledEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * 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`)
+	 * # Using an existing DOM element (and data provided in `config.root.initialData`)
 	 *
 	 * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
 	 *
diff --git a/packages/ckeditor5-editor-inline/src/inlineeditor.ts b/packages/ckeditor5-editor-inline/src/inlineeditor.ts
index 89a432bdff8..13e3ae1abae 100644
--- a/packages/ckeditor5-editor-inline/src/inlineeditor.ts
+++ b/packages/ckeditor5-editor-inline/src/inlineeditor.ts
@@ -149,7 +149,7 @@ export class InlineEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * 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`)
+	 * # Using an existing DOM element (and data provided in `config.root.initialData`)
 	 *
 	 * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
 	 *
diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
index 0fb1f42bb3d..6414cce4a56 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
@@ -837,7 +837,7 @@ export class MultiRootEditor extends Editor {
 	 * 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`)
+	 * # Using an existing DOM element (and data provided in `config.root.initialData`)
 	 *
 	 * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
 	 *

From eb4cb4d50afa0cd8ec2f4e5d348eb78784a0ccd0 Mon Sep 17 00:00:00 2001
From: Mateusz Baginski <cziken58@gmail.com>
Date: Wed, 11 Mar 2026 16:04:52 +0100
Subject: [PATCH 09/22] Fix path typo.

---
 packages/ckeditor5-editor-multi-root/src/multirooteditor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
index 6414cce4a56..90b839d788a 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
@@ -837,7 +837,7 @@ export class MultiRootEditor extends Editor {
 	 * 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.root.initialData`)
+	 * # Using an existing DOM element (and data provided in `config.roots.<root name>.initialData`)
 	 *
 	 * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
 	 *

From 0f57ed972bf85978cad512813808c39cb1a1764b Mon Sep 17 00:00:00 2001
From: Mateusz Baginski <cziken58@gmail.com>
Date: Wed, 11 Mar 2026 16:10:29 +0100
Subject: [PATCH 10/22] Fix few api docs.

---
 packages/ckeditor5-editor-classic/src/classiceditor.ts | 2 +-
 packages/ckeditor5-heading/src/title.ts                | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ckeditor5-editor-classic/src/classiceditor.ts b/packages/ckeditor5-editor-classic/src/classiceditor.ts
index 8b66650d968..43e6735f6a8 100644
--- a/packages/ckeditor5-editor-classic/src/classiceditor.ts
+++ b/packages/ckeditor5-editor-classic/src/classiceditor.ts
@@ -141,7 +141,7 @@ export class ClassicEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 	 * 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.
 	 *
-	 * # Replacing a DOM element (and data provided in `config.initialData`)
+	 * # Replacing a DOM element (and data provided in `config.root.initialData`)
 	 *
 	 * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
 	 *
diff --git a/packages/ckeditor5-heading/src/title.ts b/packages/ckeditor5-heading/src/title.ts
index 6c47bf0021d..2161a8b3282 100644
--- a/packages/ckeditor5-heading/src/title.ts
+++ b/packages/ckeditor5-heading/src/title.ts
@@ -607,7 +607,9 @@ function shouldRemoveLastParagraph( placeholder: ModelElement, root: ModelRootEl
  *     title: {
  *       placeholder: 'My custom placeholder for the title'
  *     },
- *     placeholder: 'My custom placeholder for the body'
+ *     root: {
+ *       placeholder: 'My custom placeholder for the body'
+ *     }
  *   } )
  *   .then( ... )
  *   .catch( ... );

From 8296538412315466f5e2f949d913dfa57321678a Mon Sep 17 00:00:00 2001
From: Mateusz Baginski <cziken58@gmail.com>
Date: Wed, 11 Mar 2026 16:36:12 +0100
Subject: [PATCH 11/22] Move snippets changes to different branch.

---
 docs/getting-started/integrations/next-js.md         |  4 +---
 .../integrations/react-default-npm.md                |  8 ++------
 docs/getting-started/integrations/sharepoint.md      | 12 +++++-------
 .../setup/getting-and-setting-data.md                |  6 ++----
 docs/updating/migration-to-cdn/react.md              |  8 ++------
 packages/ckeditor5-autosave/tests/autosave.js        |  8 ++------
 6 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/docs/getting-started/integrations/next-js.md b/docs/getting-started/integrations/next-js.md
index 8a7070e276e..4ab70400462 100644
--- a/docs/getting-started/integrations/next-js.md
+++ b/docs/getting-started/integrations/next-js.md
@@ -72,9 +72,7 @@ function CustomEditor() {
 				licenseKey: '<YOUR_LICENSE_KEY>',
 				plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
 				toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ],
-				root: {
-					initialData: '<p>Hello from CKEditor 5 in React!</p>'
-				}
+				initialData: '<p>Hello from CKEditor 5 in React!</p>'
 			} }
 		/>
 	);
diff --git a/docs/getting-started/integrations/react-default-npm.md b/docs/getting-started/integrations/react-default-npm.md
index bdb71c753bd..72be4a8b208 100644
--- a/docs/getting-started/integrations/react-default-npm.md
+++ b/docs/getting-started/integrations/react-default-npm.md
@@ -60,9 +60,7 @@ function App() {
 				licenseKey: '<YOUR_LICENSE_KEY>',
 				plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
 				toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ],
-				root: {
-					initialData: '<p>Hello from CKEditor 5 in React!</p>'
-				},
+				initialData: '<p>Hello from CKEditor 5 in React!</p>',
 			} }
 		/>
 	);
@@ -250,9 +248,7 @@ function App() {
 			config={ {
 				// ... Other configuration options ...
 				translations: [ coreTranslations, premiumFeaturesTranslations ],
-				root: {
-					initialData: '<p>Hola desde CKEditor 5 en React!</p>'
-				}
+				initialData: '<p>Hola desde CKEditor 5 en React!</p>'
 			} }
 		/>
 	);
diff --git a/docs/getting-started/integrations/sharepoint.md b/docs/getting-started/integrations/sharepoint.md
index 13227ddacc9..4a3b027ee72 100644
--- a/docs/getting-started/integrations/sharepoint.md
+++ b/docs/getting-started/integrations/sharepoint.md
@@ -142,9 +142,7 @@ export default class RichTextEditor extends React.Component<IRichTextEditorProps
 									'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor', '|',
 									'formatPainter', 'insertTable', 'bulletedList', 'numberedList'
 								],
-								root: {
-									initialData: '<p>Hello from CKEditor 5 in SPFX React app!</p>'
-								},
+								initialData: '<p>Hello from CKEditor 5 in SPFX React app!</p>',
 								table: {
 									contentToolbar: [
 										'tableColumn', 'tableRow', 'mergeTableCells',
@@ -246,9 +244,9 @@ const ForceTableBorderImportant = ( editor: Editor ) => {
 	*/
 	const enforceBorderStyles = ( domElement: HTMLElement, defaults: { width: string, style: string, color: string } ) => {
 	// Skip layout tables (used for positioning, not data)
-	if (
-		domElement.closest('figure')?.classList.contains( 'layout-table' ) ||
-		domElement.classList.contains( 'layout-table' )
+	if ( 
+		domElement.closest('figure')?.classList.contains( 'layout-table' ) || 
+		domElement.classList.contains( 'layout-table' ) 
 	) {
 		return;
 	}
@@ -304,7 +302,7 @@ const ForceTableBorderImportant = ( editor: Editor ) => {
 
 <info-box important>
 	The internal `StylesMap` utility used by the editor's conversion system does not natively support the `!important` flag during style normalization.
-
+	
 	The provided workaround, therefore, performs low-level DOM manipulation during the render cycle instead of relying solely on `StylesMap`. By applying these styles directly to the DOM elements after they are mapped, we ensure the priority flag remains intact and is correctly interpreted by the browser.
 </info-box>
 
diff --git a/docs/getting-started/setup/getting-and-setting-data.md b/docs/getting-started/setup/getting-and-setting-data.md
index 6ee43403801..51e5cb49da2 100644
--- a/docs/getting-started/setup/getting-and-setting-data.md
+++ b/docs/getting-started/setup/getting-and-setting-data.md
@@ -34,15 +34,13 @@ ClassicEditor
 		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
 		plugins: [ /* ... */ ],
 		toolbar: [ /* ... */ ],
-		root: {
-			initialData: '<p>Hello, world!</p>'
-		}
+		initialData: '<p>Hello, world!</p>'
 	} )
 	.then( /* ... */ )
 	.catch( /* ... */ );
 ```
 
-The {@link module:core/editor/editorconfig~EditorConfig.root.initialData `initialData`} property will initialize the editor with the provided data, overriding the content provided at the HTML level.
+The {@link module:core/editor/editorconfig~EditorConfig.initialData `initialData`} property will initialize the editor with the provided data, overriding the content provided at the HTML level.
 
 If you are setting up the editor with integrations like {@link getting-started/integrations/react-default-npm React}, consult the documentation for additional properties provided to initialize the data.
 
diff --git a/docs/updating/migration-to-cdn/react.md b/docs/updating/migration-to-cdn/react.md
index c5f97c50449..d7b7c407cf2 100644
--- a/docs/updating/migration-to-cdn/react.md
+++ b/docs/updating/migration-to-cdn/react.md
@@ -64,9 +64,7 @@ function App() {
 				mention: {
 					// Mention configuration
 				},
-				root: {
-					initialData: '<p>Hello from CKEditor 5 in React!</p>'
-				}
+				initialData: '<p>Hello from CKEditor 5 in React!</p>',
 			} }
 		/>
 	);
@@ -124,9 +122,7 @@ function App() {
 					Undo
 				],
 				licenseKey: '<YOUR_LICENSE_KEY>',
-				root: {
-					initialData: '<p>Hello from CKEditor 5 in React!</p>'
-				}
+				initialData: '<p>Hello from CKEditor 5 in React!</p>',
 			} }
 		/>
 	);
diff --git a/packages/ckeditor5-autosave/tests/autosave.js b/packages/ckeditor5-autosave/tests/autosave.js
index 54ea21e464d..2c5bc35240f 100644
--- a/packages/ckeditor5-autosave/tests/autosave.js
+++ b/packages/ckeditor5-autosave/tests/autosave.js
@@ -90,9 +90,7 @@ describe( 'Autosave', () => {
 					autosave: {
 						save: spy
 					},
-					root: {
-						initialData: '<p>Foo</p>'
-					}
+					initialData: '<p>Foo</p>'
 				} )
 				.then( _editor => {
 					editor = _editor;
@@ -718,9 +716,7 @@ describe( 'Autosave', () => {
 							spy();
 						}
 					},
-					root: {
-						initialData: '<p>Foo</p>'
-					}
+					initialData: '<p>Foo</p>'
 				} )
 				.then( _editor => {
 					editor = _editor;

From 631c6f45cc1bb1e068f0e48ed6caf452c4881a48 Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Wed, 11 Mar 2026 22:15:29 +0100
Subject: [PATCH 12/22] Fixed issues with watchdog and multi root editor.

---
 .../src/multirooteditor.ts                    |  22 +--
 .../ckeditor5-watchdog/src/editorwatchdog.ts  | 125 +++++++++++-------
 .../tests/editorwatchdog.js                   |  43 ++++--
 .../tests/manual/watchdog-data.html           |  25 ++++
 .../tests/manual/watchdog-data.js             | 108 +++++++++++++++
 .../tests/manual/watchdog-data.md             |  11 ++
 .../tests/manual/watchdog-multi-root-data.js  |   5 +-
 .../manual/watchdog-multi-root-elements.js    |   5 +-
 8 files changed, 274 insertions(+), 70 deletions(-)
 create mode 100644 packages/ckeditor5-watchdog/tests/manual/watchdog-data.html
 create mode 100644 packages/ckeditor5-watchdog/tests/manual/watchdog-data.js
 create mode 100644 packages/ckeditor5-watchdog/tests/manual/watchdog-data.md

diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
index 90b839d788a..2d51917c502 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
@@ -149,16 +149,13 @@ export class MultiRootEditor extends Editor {
 			throw new CKEditorError( 'multi-root-editor-root-deprecated-config-roots-attributes', null );
 		}
 
-		const rootNames = Object.keys( this.config.get( 'roots' )! );
-
-		for ( const rootName of rootNames ) {
-			const rootConfig = this.config.get( 'roots' )![ rootName ];
+		const rootsConfig = Object.entries( this.config.get( 'roots' )! );
 
+		for ( const [ rootName, rootConfig ] of rootsConfig ) {
 			// Create root and `UIView` element for each editable container.
 			const root = this.model.document.createRoot( '$root', rootName );
 
 			if ( rootConfig.lazyLoad ) {
-				// TODO do not load initialData for lazy roots.
 				root._isLoaded = false;
 			}
 
@@ -172,6 +169,7 @@ export class MultiRootEditor extends Editor {
 			 * @error multi-root-editor-root-attributes-no-root
 			 */
 
+			// TODO is this correct for lazy root?
 			const attributes = rootConfig.modelElement?.attributes;
 
 			if ( attributes ) {
@@ -183,8 +181,8 @@ export class MultiRootEditor extends Editor {
 
 		this.data.on( 'init', () => {
 			this.model.enqueueChange( { isUndoable: false }, writer => {
-				for ( const rootName of rootNames ) {
-					const rootConfig = this.config.get( 'roots' )![ rootName ];
+				for ( const [ rootName, rootConfig ] of rootsConfig ) {
+					// TODO check if should set on non loaded root.
 					const attributes = rootConfig.modelElement?.attributes || {};
 					const root = this.model.document.getRoot( rootName )!;
 
@@ -203,7 +201,12 @@ export class MultiRootEditor extends Editor {
 			label: extractRootsConfigField( this.config.get( 'roots' )!, 'label' )
 		};
 
-		const view = new MultiRootEditorUIView( this.locale, this.editing.view, rootNames, options );
+		// TODO make it nicer
+		const rootsNames = rootsConfig
+			.filter( ( [ , { lazyLoad } ] ) => !lazyLoad )
+			.map( ( [ rootName ] ) => rootName );
+
+		const view = new MultiRootEditorUIView( this.locale, this.editing.view, rootsNames, options );
 
 		this.ui = new MultiRootEditorUI( this, view );
 
@@ -515,7 +518,7 @@ export class MultiRootEditor extends Editor {
 	 * @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.
 	 */
-	public createEditable( root: ModelRootElement, placeholder?: string, label?: string ): HTMLElement {
+	public createEditable( root: ModelRootElement, placeholder?: string, label?: string ): HTMLElement { // TODO
 		const editable = this.ui.view.createEditable( root.rootName, undefined, label );
 
 		this.ui.addEditable( editable, placeholder );
@@ -983,6 +986,7 @@ function extractRootsConfigField<K extends keyof RootConfig>(
 ): Record<string, NonNullable<RootConfig[K]>> {
 	return Object.fromEntries(
 		Object.entries( rootsConfig )
+			.filter( ( [ , config ] ) => !config.lazyLoad )
 			.map( ( [ rootName, config ] ) => [ rootName, config[ key ] ] )
 			.filter( ( [ , value ] ) => value !== undefined )
 	);
diff --git a/packages/ckeditor5-watchdog/src/editorwatchdog.ts b/packages/ckeditor5-watchdog/src/editorwatchdog.ts
index 480778aadf8..9a39c2cd8a3 100644
--- a/packages/ckeditor5-watchdog/src/editorwatchdog.ts
+++ b/packages/ckeditor5-watchdog/src/editorwatchdog.ts
@@ -7,13 +7,19 @@
  * @module watchdog/editorwatchdog
  */
 
-import { throttle, cloneDeepWith, isElement, type DebouncedFunc } from 'es-toolkit/compat';
+import { throttle, cloneDeepWith, isElement as _isElement, type DebouncedFunc } from 'es-toolkit/compat';
 import { areConnectedThroughProperties } from './utils/areconnectedthroughproperties.js';
 import { Watchdog, type WatchdogConfig } from './watchdog.js';
-import type { CKEditorError } from '@ckeditor/ckeditor5-utils';
+import { type CKEditorError, Config } from '@ckeditor/ckeditor5-utils';
 import type { ModelNode, ModelText, ModelElement, ModelWriter } from '@ckeditor/ckeditor5-engine';
-import type { Editor, EditorConfig, Context, EditorReadyEvent } from '@ckeditor/ckeditor5-core';
-import type { RootAttributes } from '@ckeditor/ckeditor5-editor-multi-root';
+import {
+	type Editor,
+	type EditorConfig,
+	type Context,
+	type EditorReadyEvent,
+	type RootConfig,
+	normalizeRootsConfig
+} from '@ckeditor/ckeditor5-core';
 
 /**
  * A watchdog for CKEditor 5 editors.
@@ -56,10 +62,21 @@ export class EditorWatchdog<TEditor extends Editor = Editor> extends Watchdog {
 	 */
 	private _elementOrData?: HTMLElement | string | Record<string, string> | Record<string, HTMLElement>;
 
+	/**
+	 * TODO
+	 */
+	private _editorAttachTo: HTMLElement | null = null;
+
+	/**
+	 * TODO
+	 */
+	private _isSingleRootEditor: boolean = true;
+
 	/**
 	 * Specifies whether the editor was initialized using document data (`true`) or HTML elements (`false`).
 	 */
-	private _initUsingData = true;
+	// TODO clean it
+	// private _initUsingData = true;
 
 	/**
 	 * The latest record of the editor editable elements. Used to restart the editor.
@@ -179,55 +196,58 @@ export class EditorWatchdog<TEditor extends Editor = Editor> extends Watchdog {
 				// We are not interested in any data set in config or in `.create()` first parameter. It will be replaced anyway.
 				// But we need to set them correctly to make sure that proper roots are created.
 				//
-				// Since a different set of roots will be created, `lazyRoots` and `rootsAttributes` properties must be managed too.
-
-				// Keys are root names, values are ''. Used when the editor was initialized by setting the first parameter to document data.
-				const existingRoots: Record<string, string> = {};
-				// Keeps lazy roots. They may be different when compared to initial config if some of the roots were loaded.
-				const lazyRoots: Array<string> = [];
-				// Roots attributes from the old config. Will be referred when setting new attributes.
-				const oldRootsAttributes: Record<string, RootAttributes> = this._config!.rootsAttributes || {};
-				// New attributes to be set. Is filled only for roots that still exist in the document.
-				const rootsAttributes: Record<string, RootAttributes> = {};
-
-				// Traverse through the roots saved when the editor crashed and set up the discussed values.
-				for ( const [ rootName, rootData ] of Object.entries( this._data!.roots ) ) {
-					if ( rootData.isLoaded ) {
-						existingRoots[ rootName ] = '';
-						rootsAttributes[ rootName ] = oldRootsAttributes[ rootName ] || {};
-					} else {
-						lazyRoots.push( rootName );
-					}
-				}
+				// Since a different set of roots will be created, lazy-roots and roots-attributes must be managed too.
+
+				const elementOrData = this._isSingleRootEditor ?
+					this._editorAttachTo || '' :
+					this._editables;
+
+				// Normalize the roots configuration based on the editor source element or data and the editor configuration.
+				const config = new Config<EditorConfig>( this._config! );
+
+				normalizeRootsConfig( elementOrData, config, this._isSingleRootEditor ? 'main' : false );
 
 				const updatedConfig: EditorConfig = {
 					...this._config,
+					roots: config.get( 'roots' ),
 					extraPlugins: this._config!.extraPlugins || [],
-					lazyRoots,
-					rootsAttributes,
 					_watchdogInitialData: this._data
 				};
 
-				// Delete `initialData` as it is not needed. Data will be set by the watchdog based on `_watchdogInitialData`.
-				// First parameter of the editor `.create()` will be used to set up initial roots.
-				delete updatedConfig.initialData;
+				// Add content loading plugin to the editor configuration.
+				// This plugin will be responsible for loading the editor data into the editor after it is restarted.
+				updatedConfig.extraPlugins!.push( EditorWatchdogInitPlugin );
 
-				updatedConfig.extraPlugins!.push( EditorWatchdogInitPlugin as any );
-
-				if ( this._initUsingData ) {
-					return this.create( existingRoots, updatedConfig, updatedConfig.context );
-				} else {
-					// Set correct editables to make sure that proper roots are created and linked with DOM elements.
-					// No need to set initial data, as it would be discarded anyway.
-					//
-					// If one element was initially set in `elementOrData`, then use that original element to restart the editor.
-					// This is for compatibility purposes with single-root editor types.
-					if ( isElement( this._elementOrData ) ) {
-						return this.create( this._elementOrData, updatedConfig, updatedConfig.context );
+				// Collect existing roots configuration and update it. This will ensure that the same set of roots
+				// will be created after the restart, and they will have correct lazy loading and attributes configuration.
+				const updatedRootsConfig: Record<string, RootConfig> = {};
+
+				for ( const [ rootName, rootData ] of Object.entries( this._data!.roots ) ) {
+					const rootConfig = updatedConfig.roots![ rootName ] || Object.create( null );
+
+					// TODO update comment: Delete `initialData` as it is not needed. Data will be set by the watchdog
+					//  based on `_watchdogInitialData`.
+					rootConfig.initialData = '';
+
+					if ( rootData.isLoaded ) {
+						rootConfig.lazyLoad = false;
 					} else {
-						return this.create( this._editables, updatedConfig, updatedConfig.context );
+						delete rootConfig.modelElement?.attributes;
 					}
+
+					updatedRootsConfig[ rootName ] = rootConfig;
 				}
+
+				updatedConfig.roots = updatedRootsConfig;
+
+				// Delete `initialData` as it is not needed. Data will be set by the watchdog based on `_watchdogInitialData`.
+				// First parameter of the editor `.create()` will be used to set up initial roots.
+				delete updatedConfig.initialData;
+
+				// Also alias for main root should not provide initial data.
+				delete updatedConfig.root?.initialData;
+
+				return this.create( elementOrData, updatedConfig, updatedConfig.context );
 			} )
 			.then( () => {
 				this._fire( 'restart' );
@@ -252,10 +272,10 @@ export class EditorWatchdog<TEditor extends Editor = Editor> extends Watchdog {
 
 				this._elementOrData = elementOrData;
 
-				// Use document data in the first parameter of the editor `.create()` call only if it was used like this originally.
-				// Use document data if a string or object with strings was passed.
-				this._initUsingData = typeof elementOrData == 'string' ||
-					( Object.keys( elementOrData ).length > 0 && typeof Object.values( elementOrData )[ 0 ] == 'string' );
+				// Store the original DOM element for single-root editors. We can't use editable elements as ClassicEditor
+				// expects the attachment element.
+				this._editorAttachTo = isElement( elementOrData ) ? elementOrData : null;
+				this._isSingleRootEditor = isElement( elementOrData ) || typeof elementOrData == 'string';
 
 				// Clone configuration because it might be shared within multiple watchdog instances. Otherwise,
 				// when an error occurs in one of these editors, the watchdog will restart all of them.
@@ -273,7 +293,7 @@ export class EditorWatchdog<TEditor extends Editor = Editor> extends Watchdog {
 				this._lastDocumentVersion = editor.model.document.version;
 				this._data = this._getData();
 
-				if ( !this._initUsingData ) {
+				if ( !this._editorAttachTo ) {
 					this._editables = this._getEditables();
 				}
 
@@ -337,7 +357,7 @@ export class EditorWatchdog<TEditor extends Editor = Editor> extends Watchdog {
 		try {
 			this._data = this._getData();
 
-			if ( !this._initUsingData ) {
+			if ( !this._editorAttachTo ) {
 				this._editables = this._getEditables();
 			}
 
@@ -628,3 +648,10 @@ export type EditorWatchdogCreatorFunction<TEditor = Editor> = (
 	elementOrData: HTMLElement | string | Record<string, string> | Record<string, HTMLElement>,
 	config: EditorConfig
 ) => Promise<TEditor>;
+
+/**
+ * An alias for `isElement` from `es-toolkit/compat` with additional type guard.
+ */
+function isElement( value: any ): value is Element {
+	return _isElement( value );
+}
diff --git a/packages/ckeditor5-watchdog/tests/editorwatchdog.js b/packages/ckeditor5-watchdog/tests/editorwatchdog.js
index 31a335963b1..6c7c13c0fac 100644
--- a/packages/ckeditor5-watchdog/tests/editorwatchdog.js
+++ b/packages/ckeditor5-watchdog/tests/editorwatchdog.js
@@ -1602,15 +1602,24 @@ describe( 'EditorWatchdog', () => {
 					content: '<p>Bar</p>'
 				}, {
 					plugins: [ Paragraph ],
-					rootsAttributes: {
+					roots: {
 						header: {
-							order: 1
+							modelElement: {
+								attributes: { order: 1 }
+							}
 						},
 						content: {
-							order: 2
+							modelElement: {
+								attributes: { order: 2 }
+							}
+						},
+						lazyOne: {
+							lazyLoad: true
+						},
+						lazyTwo: {
+							lazyLoad: true
 						}
-					},
-					lazyRoots: [ 'lazyOne', 'lazyTwo' ]
+					}
 				} );
 
 				watchdog.on( 'restart', restartSpy );
@@ -1640,6 +1649,7 @@ describe( 'EditorWatchdog', () => {
 				watchdog.editor.detachRoot( 'content' );
 				watchdog.editor.addRoot( 'new', { data: '<p>New</p>', attributes: { order: 3 } } );
 
+				// Wait for throttled save.
 				clock.tick( 6000 );
 				clock.restore();
 
@@ -1732,15 +1742,28 @@ describe( 'EditorWatchdog', () => {
 						content: '<p>Bar</p>'
 					},
 					plugins: [ Paragraph, MultiRootEditorIntegration ],
-					rootsAttributes: {
+					roots: {
 						header: {
-							order: 1
+							modelElement: {
+								attributes: {
+									order: 1
+								}
+							}
 						},
 						content: {
-							order: 2
+							modelElement: {
+								attributes: {
+									order: 2
+								}
+							}
+						},
+						lazyOne: {
+							lazyLoad: true
+						},
+						lazyTwo: {
+							lazyLoad: true
 						}
-					},
-					lazyRoots: [ 'lazyOne', 'lazyTwo' ]
+					}
 				} );
 
 				watchdog.on( 'restart', restartSpy );
diff --git a/packages/ckeditor5-watchdog/tests/manual/watchdog-data.html b/packages/ckeditor5-watchdog/tests/manual/watchdog-data.html
new file mode 100644
index 00000000000..3e8270a627b
--- /dev/null
+++ b/packages/ckeditor5-watchdog/tests/manual/watchdog-data.html
@@ -0,0 +1,25 @@
+<button id="random-error">Simulate a random `Error`</button>
+
+<div class="editor">
+	<div>First editor state: <span id='editor-1-state'></span></div>
+
+	<div id="editor-1">
+		<h2>Heading 1</h2>
+		<p>Paragraph</p>
+	</div>
+</div>
+
+<div class="editor">
+	<div>Second editor state: <span id='editor-2-state'></span></div>
+
+	<div id="editor-2">
+		<h2>Heading 1</h2>
+		<p>Paragraph</p>
+	</div>
+</div>
+
+<style>
+.editor {
+	margin-top: 20px;
+}
+</style>
diff --git a/packages/ckeditor5-watchdog/tests/manual/watchdog-data.js b/packages/ckeditor5-watchdog/tests/manual/watchdog-data.js
new file mode 100644
index 00000000000..510a1a9a3ed
--- /dev/null
+++ b/packages/ckeditor5-watchdog/tests/manual/watchdog-data.js
@@ -0,0 +1,108 @@
+/**
+ * @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 { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { ArticlePluginSet } from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset.js';
+
+import { EditorWatchdog } from '../../src/editorwatchdog.js';
+
+class TypingError {
+	constructor( editor ) {
+		this.editor = editor;
+	}
+
+	init() {
+		const inputCommand = this.editor.commands.get( 'input' );
+
+		inputCommand.on( 'execute', ( evt, data ) => {
+			const commandArgs = data[ 0 ];
+
+			if ( commandArgs.text === '1' ) {
+				// Simulate error.
+				this.editor.foo.bar = 'bom';
+			}
+		} );
+	}
+}
+
+const editorConfig = {
+	image: { toolbar: [ 'toggleImageCaption', 'imageTextAlternative' ] },
+	plugins: [
+		ArticlePluginSet, TypingError
+	],
+	toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote',
+		'insertTable', 'mediaEmbed', 'undo', 'redo' ],
+	table: {
+		contentToolbar: [
+			'tableColumn',
+			'tableRow',
+			'mergeTableCells'
+		]
+	}
+};
+
+const watchdog1 = createWatchdog(
+	document.getElementById( 'editor-1' ),
+	document.getElementById( 'editor-1-state' ),
+	'First'
+);
+
+const watchdog2 = createWatchdog(
+	document.getElementById( 'editor-2' ),
+	document.getElementById( 'editor-2-state' ),
+	'Second'
+);
+
+Object.assign( window, { watchdog1, watchdog2 } );
+
+document.getElementById( 'random-error' ).addEventListener( 'click', () => {
+	throw new Error( 'foo' );
+} );
+
+function createWatchdog( editorElement, stateElement, name ) {
+	const watchdog = new EditorWatchdog( ClassicEditor );
+
+	watchdog.setCreator( ( elementsOrData, config ) => {
+		return ClassicEditor.create( elementsOrData, config ).then( editor => {
+			console.log( `${ name } editor created (from creator).` );
+
+			editorElement.innerHTML = '';
+			editorElement.appendChild( editor.ui.element );
+
+			return editor;
+		} );
+	} );
+
+	watchdog.setDestructor( editor => {
+		console.log( `${ name } editor destroy (from destructor).` );
+		editorElement.innerHTML = '';
+
+		return editor.destroy();
+	} );
+
+	watchdog.create( editorElement.innerHTML, editorConfig );
+
+	watchdog.on( 'error', () => {
+		console.log( `${ name } editor crashed!` );
+	} );
+
+	watchdog.on( 'restart', () => {
+		console.log( `${ name } editor restarted.` );
+	} );
+
+	watchdog.on( 'stateChange', () => {
+		console.log( `${ name } watchdog state changed to '${ watchdog.state }'` );
+
+		stateElement.innerText = watchdog.state;
+
+		if ( watchdog.state === 'crashedPermanently' ) {
+			watchdog.editor.enableReadOnlyMode( 'manual-test' );
+		}
+	} );
+
+	stateElement.innerText = watchdog.state;
+
+	return watchdog;
+}
diff --git a/packages/ckeditor5-watchdog/tests/manual/watchdog-data.md b/packages/ckeditor5-watchdog/tests/manual/watchdog-data.md
new file mode 100644
index 00000000000..8c9ca580bb8
--- /dev/null
+++ b/packages/ckeditor5-watchdog/tests/manual/watchdog-data.md
@@ -0,0 +1,11 @@
+**Important:** Be sure to run manual test with the `--debug false` flag. Otherwise errors won't be rethrown by the `CKEditorError.rethrowUnexpectedError()` method.
+
+1. Type `1` in the first editor. Only the first editor should crash and be restarted. The error should be logged in the console.
+
+1. Type `1` in the second editor. Only the second editor should crash and be restarted. The error should be logged in the console.
+
+1. Click `Simulate a random error` No editor should be restarted.
+
+1. Refresh page and quickly type `1` in the first editor 4 times. After the last error the editor should be crashed and it should not restart.
+
+1. Refresh page and slowly (slower than 1 per 5 seconds) type `1` in the first editor 4 times. After the last error the editor should be restarted and it should still work.
diff --git a/packages/ckeditor5-watchdog/tests/manual/watchdog-multi-root-data.js b/packages/ckeditor5-watchdog/tests/manual/watchdog-multi-root-data.js
index 06a05285d55..2a84ce5d8e5 100644
--- a/packages/ckeditor5-watchdog/tests/manual/watchdog-multi-root-data.js
+++ b/packages/ckeditor5-watchdog/tests/manual/watchdog-multi-root-data.js
@@ -79,7 +79,10 @@ const editorConfig = {
 			'mergeTableCells'
 		]
 	},
-	lazyRoots
+	roots: {
+		lazyFoo: { lazyLoad: true },
+		lazyBar: { lazyLoad: true }
+	}
 };
 
 const watchdog = createWatchdog( document.getElementById( 'editor-state' ) );
diff --git a/packages/ckeditor5-watchdog/tests/manual/watchdog-multi-root-elements.js b/packages/ckeditor5-watchdog/tests/manual/watchdog-multi-root-elements.js
index 1517f7855eb..f39a8d4dd90 100644
--- a/packages/ckeditor5-watchdog/tests/manual/watchdog-multi-root-elements.js
+++ b/packages/ckeditor5-watchdog/tests/manual/watchdog-multi-root-elements.js
@@ -67,7 +67,10 @@ const editorConfig = {
 			'mergeTableCells'
 		]
 	},
-	lazyRoots
+	roots: {
+		lazyFoo: { lazyLoad: true },
+		lazyBar: { lazyLoad: true }
+	}
 };
 
 const watchdog = createWatchdog( document.getElementById( 'editor-state' ) );

From 3b1880abbe2a6156281af9b7f28d741b90e0f9ae Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Thu, 12 Mar 2026 11:54:20 +0100
Subject: [PATCH 13/22] Adjusted the Title plugin to the normalized editor
 config.

---
 .../tests/_utils/classictesteditor.js            |  3 +++
 packages/ckeditor5-heading/src/title.ts          | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/ckeditor5-core/tests/_utils/classictesteditor.js b/packages/ckeditor5-core/tests/_utils/classictesteditor.js
index ad690f65ea4..cf2fc7f5330 100644
--- a/packages/ckeditor5-core/tests/_utils/classictesteditor.js
+++ b/packages/ckeditor5-core/tests/_utils/classictesteditor.js
@@ -5,6 +5,7 @@
 
 import { Editor } from '../../src/editor/editor.js';
 import { ElementApiMixin } from '../../src/editor/utils/elementapimixin.js';
+import { normalizeRootsConfig } from '../../src/editor/utils/normalizerootsconfig.js';
 import { EditorUI, BoxedEditorUIView, InlineEditableUIView } from '@ckeditor/ckeditor5-ui';
 import { ElementReplacer, getDataFromElement, CKEditorError } from '@ckeditor/ckeditor5-utils';
 import { isElement } from 'es-toolkit/compat';
@@ -22,6 +23,8 @@ export class ClassicTestEditor extends ElementApiMixin( Editor ) {
 	constructor( sourceElementOrData, config ) {
 		super( config );
 
+		normalizeRootsConfig( sourceElementOrData, this.config );
+
 		if ( isElement( sourceElementOrData ) ) {
 			this.sourceElement = sourceElementOrData;
 		}
diff --git a/packages/ckeditor5-heading/src/title.ts b/packages/ckeditor5-heading/src/title.ts
index 2161a8b3282..0bda434f6b7 100644
--- a/packages/ckeditor5-heading/src/title.ts
+++ b/packages/ckeditor5-heading/src/title.ts
@@ -355,9 +355,6 @@ export class Title extends Plugin {
 		const sourceElement = editor.sourceElement;
 
 		const titlePlaceholder = editor.config.get( 'title.placeholder' ) || t( 'Type your title' );
-		const bodyPlaceholder = editor.config.get( 'placeholder' ) ||
-			sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.getAttribute( 'placeholder' ) ||
-			t( 'Type or paste your content here.' );
 
 		// Attach placeholder to the view title element.
 		editor.editing.downcastDispatcher.on<DowncastInsertEvent<ModelElement>>( 'insert:title-content', ( evt, data, conversionApi ) => {
@@ -397,6 +394,10 @@ export class Title extends Plugin {
 						writer.removeAttribute( 'data-placeholder', oldBody );
 					}
 
+					const bodyPlaceholder = editor.config.get( 'roots' )![ viewRoot.rootName ]?.placeholder ||
+						isTextArea( sourceElement ) && sourceElement.getAttribute( 'placeholder' ) ||
+						t( 'Type or paste your content here.' );
+
 					writer.setAttribute( 'data-placeholder', bodyPlaceholder, body );
 					bodyViewElements.set( viewRoot.rootName, body );
 
@@ -624,5 +625,12 @@ export interface HeadingTitleConfig {
 	 *
 	 * Read more in {@link module:heading/title~HeadingTitleConfig}.
 	 */
-	placeholder?: string;
+	placeholder?: string; // TODO
+}
+
+/**
+ * Returns true when given element is a DOM textarea.
+ */
+function isTextArea( sourceElement: HTMLElement | undefined ): sourceElement is HTMLTextAreaElement {
+	return !!sourceElement && sourceElement.tagName.toLowerCase() === 'textarea';
 }

From 02b7720312b7512451461d7af9ba471d7d77f3a1 Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Thu, 12 Mar 2026 13:10:05 +0100
Subject: [PATCH 14/22] Removed imports from core in watchdog.

---
 .../ckeditor5-watchdog/src/editorwatchdog.ts  |  41 ++++--
 .../src/utils/normalizerootsconfig.ts         | 130 ++++++++++++++++++
 .../tests/editorwatchdog.js                   |  91 ++++++++++++
 3 files changed, 248 insertions(+), 14 deletions(-)
 create mode 100644 packages/ckeditor5-watchdog/src/utils/normalizerootsconfig.ts

diff --git a/packages/ckeditor5-watchdog/src/editorwatchdog.ts b/packages/ckeditor5-watchdog/src/editorwatchdog.ts
index 9a39c2cd8a3..d299b5871f5 100644
--- a/packages/ckeditor5-watchdog/src/editorwatchdog.ts
+++ b/packages/ckeditor5-watchdog/src/editorwatchdog.ts
@@ -7,20 +7,36 @@
  * @module watchdog/editorwatchdog
  */
 
-import { throttle, cloneDeepWith, isElement as _isElement, type DebouncedFunc } from 'es-toolkit/compat';
 import { areConnectedThroughProperties } from './utils/areconnectedthroughproperties.js';
+import { normalizeRootsConfig } from './utils/normalizerootsconfig.js';
 import { Watchdog, type WatchdogConfig } from './watchdog.js';
-import { type CKEditorError, Config } from '@ckeditor/ckeditor5-utils';
-import type { ModelNode, ModelText, ModelElement, ModelWriter } from '@ckeditor/ckeditor5-engine';
-import {
-	type Editor,
-	type EditorConfig,
-	type Context,
-	type EditorReadyEvent,
-	type RootConfig,
-	normalizeRootsConfig
+
+import type {
+	CKEditorError
+} from '@ckeditor/ckeditor5-utils';
+
+import type {
+	ModelNode,
+	ModelText,
+	ModelElement,
+	ModelWriter
+} from '@ckeditor/ckeditor5-engine';
+
+import type {
+	Editor,
+	EditorConfig,
+	Context,
+	EditorReadyEvent,
+	RootConfig
 } from '@ckeditor/ckeditor5-core';
 
+import {
+	throttle,
+	cloneDeepWith,
+	isElement as _isElement,
+	type DebouncedFunc
+} from 'es-toolkit/compat';
+
 /**
  * A watchdog for CKEditor 5 editors.
  *
@@ -203,13 +219,10 @@ export class EditorWatchdog<TEditor extends Editor = Editor> extends Watchdog {
 					this._editables;
 
 				// Normalize the roots configuration based on the editor source element or data and the editor configuration.
-				const config = new Config<EditorConfig>( this._config! );
-
-				normalizeRootsConfig( elementOrData, config, this._isSingleRootEditor ? 'main' : false );
+				normalizeRootsConfig( elementOrData, this._config!, this._isSingleRootEditor ? 'main' : false );
 
 				const updatedConfig: EditorConfig = {
 					...this._config,
-					roots: config.get( 'roots' ),
 					extraPlugins: this._config!.extraPlugins || [],
 					_watchdogInitialData: this._data
 				};
diff --git a/packages/ckeditor5-watchdog/src/utils/normalizerootsconfig.ts b/packages/ckeditor5-watchdog/src/utils/normalizerootsconfig.ts
new file mode 100644
index 00000000000..65f342844e9
--- /dev/null
+++ b/packages/ckeditor5-watchdog/src/utils/normalizerootsconfig.ts
@@ -0,0 +1,130 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/**
+ * @module core/editor/utils/normalizerootsconfig
+ */
+
+import { isElement as _isElement } from 'es-toolkit/compat';
+import type { EditorConfig } from '@ckeditor/ckeditor5-core';
+
+// Note: This file is a copy of core/editor/utils/normalizerootsconfig with some adjustments.
+// The main difference is that it does not use the `Config` class from `@ckeditor/ckeditor5-utils` and instead works
+// with a plain `EditorConfig` object. It also does not throw `CKEditorError` but a generic `Error` with a specific message.
+// It resolves root configuration for the editor, but does not care about real data in initialData as the watchdog does not need it.
+// It just needs to ensure that initialData is defined for all roots, so the editor features can work with it without additional checks.
+// Note that this helper modifies the provided config object.
+
+/**
+ * Normalizes the editor roots configuration. It ensures that all root configurations are defined in `config.roots`
+ * and that they have `initialData` defined.
+ *
+ * It normalizes a single-root configuration (where `config.root` is used) to a multi-root configuration
+ * (where all roots are defined in `config.roots`). This is considered a standard configuration format,
+ * so the editor features can always expect roots to be defined in `config.roots`.
+ *
+ * It also handles legacy configuration options, such as `config.initialData`, `config.placeholder`, and `config.label`.
+ *
+ * @internal
+ */
+export function normalizeRootsConfig(
+	sourceElementsOrData: HTMLElement | string | Record<string, HTMLElement> | Record<string, string>,
+	config: EditorConfig,
+	defaultRootName: string | false
+): void {
+	const mainRootConfig = config.root;
+	const rootsConfig = config.roots || Object.create( null );
+
+	// Move `config.root` to `config.roots.main`.
+	// This makes access to root configuration more consistent as all roots will be defined in `config.roots`.
+	if ( defaultRootName && !rootsConfig[ defaultRootName ] ) {
+		rootsConfig[ defaultRootName ] = mainRootConfig || Object.create( null );
+	}
+
+	const sourceElementIsPlainObject = isPlainObject( sourceElementsOrData );
+
+	// Collect legacy configuration values for `initialData`, `placeholder`, and `label` from the config.
+	const legacyInitialData = getLegacyInitialData( config, sourceElementIsPlainObject, defaultRootName );
+
+	// Collect root names. This includes root names from the source element (if it's an object),
+	// from `config.roots`, and from legacy config. This ensures that all roots are processed in the next step.
+	const rootNames = Array.from( new Set( [
+		...sourceElementIsPlainObject ? Object.keys( sourceElementsOrData ) : [],
+		...Object.keys( rootsConfig ),
+		...Object.keys( legacyInitialData )
+	] ) );
+
+	// Ensure that all roots have `initialData` defined. If not, try to get it from the source element or data.
+	for ( const rootName of rootNames ) {
+		const rootConfig = rootsConfig[ rootName ] || Object.create( null );
+
+		// Watchdog does not need HTML, it uses dedicated plugin for restoring the model.
+		// As watchdog uses only DOM element or map of DOM elements for sourceElementsOrData,
+		// it can not use string as initial data, so it can be safely set to an empty string.
+		rootConfig.initialData = '';
+
+		// Handle legacy `config.placeholder` and `config.label` for the root.
+		rootConfig.placeholder ??= getLegacyPlainConfigValue( config, 'placeholder', rootName );
+		rootConfig.label ??= getLegacyPlainConfigValue( config, 'label', rootName );
+
+		rootsConfig[ rootName ] = rootConfig;
+	}
+
+	config.roots = rootsConfig;
+}
+
+/**
+ * Type guard to check if the provided value is a plain object.
+ */
+function isPlainObject(
+	sourceElementsOrData: HTMLElement | string | Record<string, HTMLElement> | Record<string, string>
+): sourceElementsOrData is Record<string, HTMLElement> | Record<string, string> {
+	return (
+		!!sourceElementsOrData &&
+		typeof sourceElementsOrData == 'object' &&
+		!Array.isArray( sourceElementsOrData ) &&
+		!isElement( sourceElementsOrData )
+	);
+}
+
+/**
+ * Retrieve legacy configuration value for `initialData` from the config.
+ * Normalize single-root config so returned value is always an object with root names as keys.
+ */
+function getLegacyInitialData(
+	config: EditorConfig,
+	sourceElementIsObject: boolean,
+	defaultRootName: string | false
+): Record<string, string | undefined> {
+	return (
+		sourceElementIsObject || !defaultRootName ?
+			config.initialData || Object.create( null ) :
+			{
+				[ defaultRootName ]: config.initialData
+			}
+	) as Record<string, string | undefined>;
+}
+
+/**
+ * Retrieve legacy configuration value for `placeholder` or `label` from the config for a specific root.
+ */
+function getLegacyPlainConfigValue(
+	config: EditorConfig,
+	key: 'placeholder' | 'label',
+	rootName: string
+): string | undefined {
+	const legacyValue = config[ key ];
+
+	if ( legacyValue ) {
+		return typeof legacyValue == 'string' ? legacyValue : legacyValue[ rootName ];
+	}
+}
+
+/**
+ * An alias for `isElement` from `es-toolkit/compat` with additional type guard.
+ */
+function isElement( value: any ): value is Element {
+	return _isElement( value );
+}
diff --git a/packages/ckeditor5-watchdog/tests/editorwatchdog.js b/packages/ckeditor5-watchdog/tests/editorwatchdog.js
index 6c7c13c0fac..f906298df91 100644
--- a/packages/ckeditor5-watchdog/tests/editorwatchdog.js
+++ b/packages/ckeditor5-watchdog/tests/editorwatchdog.js
@@ -1836,6 +1836,97 @@ describe( 'EditorWatchdog', () => {
 				} );
 			} );
 		} );
+
+		it( 'should recover original legacy placeholders after restart', async () => {
+			await watchdog.create( {}, {
+				plugins: [ Paragraph ],
+				roots: {
+					header: {
+						initialData: '<p>Foo</p>',
+						modelElement: {
+							attributes: { order: 1 }
+						}
+					},
+					content: {
+						initialData: '<p>Bar</p>',
+						modelElement: {
+							attributes: { order: 2 }
+						}
+					}
+				},
+				placeholder: {
+					header: 'Type in header',
+					content: 'Type in content'
+				}
+			} );
+
+			watchdog.on( 'restart', restartSpy );
+
+			setTimeout( () => throwCKEditorError( 'foo', watchdog.editor ) );
+
+			await waitCycle();
+
+			sinon.assert.calledOnce( restartSpy );
+
+			expect( watchdog.editor.getFullData() ).to.deep.equal( {
+				header: '<p>Foo</p>',
+				content: '<p>Bar</p>'
+			} );
+
+			expect( watchdog.editor.getRootsAttributes() ).to.deep.equal( {
+				header: { order: 1 },
+				content: { order: 2 }
+			} );
+
+			const editables = watchdog.editor.ui.view.editables;
+
+			expect( editables.header.element.children[ 0 ].dataset.placeholder ).to.equal( 'Type in header' );
+			expect( editables.content.element.children[ 0 ].dataset.placeholder ).to.equal( 'Type in content' );
+		} );
+
+		it( 'should recover original legacy placeholder after restart', async () => {
+			await watchdog.create( {}, {
+				plugins: [ Paragraph ],
+				roots: {
+					header: {
+						initialData: '<p>Foo</p>',
+						modelElement: {
+							attributes: { order: 1 }
+						}
+					},
+					content: {
+						initialData: '<p>Bar</p>',
+						modelElement: {
+							attributes: { order: 2 }
+						}
+					}
+				},
+				placeholder: 'Type in some content'
+			} );
+
+			watchdog.on( 'restart', restartSpy );
+
+			setTimeout( () => throwCKEditorError( 'foo', watchdog.editor ) );
+
+			await waitCycle();
+
+			sinon.assert.calledOnce( restartSpy );
+
+			expect( watchdog.editor.getFullData() ).to.deep.equal( {
+				header: '<p>Foo</p>',
+				content: '<p>Bar</p>'
+			} );
+
+			expect( watchdog.editor.getRootsAttributes() ).to.deep.equal( {
+				header: { order: 1 },
+				content: { order: 2 }
+			} );
+
+			const editables = watchdog.editor.ui.view.editables;
+
+			expect( editables.header.element.children[ 0 ].dataset.placeholder ).to.equal( 'Type in some content' );
+			expect( editables.content.element.children[ 0 ].dataset.placeholder ).to.equal( 'Type in some content' );
+		} );
 	} );
 } );
 

From a65ae7546eeefca31adeb1ba30cfd0c22542844b Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Thu, 12 Mar 2026 13:43:39 +0100
Subject: [PATCH 15/22] Added tests for code coverage.

---
 .../tests/multirooteditor.js                  | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
index d090e5d17c2..c12dbf4ca1a 100644
--- a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
+++ b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
@@ -252,6 +252,38 @@ describe( 'MultiRootEditor', () => {
 				.catch( done );
 		} );
 
+		it( 'throws error when deprecated config.lazyRoots is used', done => {
+			MultiRootEditor.create( editorData, {
+				lazyRoots: [ 'baz' ]
+			} )
+				.then(
+					() => {
+						expect.fail( 'Multi-root editor should throw an error when deprecated lazyRoots config is used.' );
+					},
+					err => {
+						assertCKEditorError( err, 'multi-root-editor-root-deprecated-config-lazy-roots', null );
+					}
+				)
+				.then( done )
+				.catch( done );
+		} );
+
+		it( 'throws error when deprecated config.rootsAttributes is used', done => {
+			MultiRootEditor.create( editorData, {
+				rootsAttributes: { foo: { order: 1 }, bar: { order: 2 } }
+			} )
+				.then(
+					() => {
+						expect.fail( 'Multi-root editor should throw an error when deprecated rootsAttributes config is used.' );
+					},
+					err => {
+						assertCKEditorError( err, 'multi-root-editor-root-deprecated-config-roots-attributes', null );
+					}
+				)
+				.then( done )
+				.catch( done );
+		} );
+
 		// This case should not throw as 'foo' and 'bar' roots are defined, but the DOM element for 'foo' is provided
 		// and the DOM element for 'bar' is created by the editor.
 		it.skip( 'throws error when initial roots are different than initial data - missing root in initial roots', done => {

From 978692a986948093d6be05c2ef57e4a853e16e6b Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Thu, 12 Mar 2026 15:23:55 +0100
Subject: [PATCH 16/22] Fixed dependencies.

---
 packages/ckeditor5-watchdog/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-watchdog/package.json b/packages/ckeditor5-watchdog/package.json
index 997c58c93f3..43c3a59e7ee 100644
--- a/packages/ckeditor5-watchdog/package.json
+++ b/packages/ckeditor5-watchdog/package.json
@@ -35,7 +35,6 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-core": "workspace:*",
-    "@ckeditor/ckeditor5-editor-multi-root": "workspace:*",
     "@ckeditor/ckeditor5-engine": "workspace:*",
     "@ckeditor/ckeditor5-utils": "workspace:*",
     "es-toolkit": "1.39.5"
@@ -44,6 +43,7 @@
     "@ckeditor/ckeditor5-basic-styles": "workspace:*",
     "@ckeditor/ckeditor5-clipboard": "workspace:*",
     "@ckeditor/ckeditor5-editor-classic": "workspace:*",
+    "@ckeditor/ckeditor5-editor-multi-root": "workspace:*",
     "@ckeditor/ckeditor5-heading": "workspace:*",
     "@ckeditor/ckeditor5-paragraph": "workspace:*"
   },

From 4777f9b7a8e17a9a1a4af0b9298e55dbd491f788 Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Thu, 12 Mar 2026 21:16:54 +0100
Subject: [PATCH 17/22] Marked optional config option as optional.

---
 packages/ckeditor5-core/src/editor/editorconfig.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-core/src/editor/editorconfig.ts b/packages/ckeditor5-core/src/editor/editorconfig.ts
index e2bde634980..1e2ba0fefb7 100644
--- a/packages/ckeditor5-core/src/editor/editorconfig.ts
+++ b/packages/ckeditor5-core/src/editor/editorconfig.ts
@@ -1112,7 +1112,7 @@ export interface RootModelElementConfig {
 	/**
 	 * TODO This will be used later to specify the name of the model element which will be used as a root. For now, it is always `'$root'`.
 	 */
-	name: string;
+	name?: string;
 }
 
 /**

From 8190f4c11b497287a74b8b2efacb5d5c2f350c65 Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Thu, 12 Mar 2026 21:23:06 +0100
Subject: [PATCH 18/22] Fixed invalid test.

---
 .../ckeditor5-editor-multi-root/tests/multirooteditor.js     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
index c12dbf4ca1a..e644bdb9eb2 100644
--- a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
+++ b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
@@ -142,8 +142,9 @@ describe( 'MultiRootEditor', () => {
 			it( 'it should throw if config.roots.<name>.initialData is set and initial data is passed in constructor', () => {
 				expect( () => {
 					// eslint-disable-next-line no-new
-					new MultiRootEditor( { foo: '<p>Foo</p>', bar: '<p>Bar</p>' },
-						{ roots: { foo: { initialData: '<p>Bar</p>' } }, bar: { initialData: '<p>Abc</p>' } }
+					new MultiRootEditor(
+						{ foo: '<p>Foo</p>', bar: '<p>Bar</p>' },
+						{ roots: { foo: { initialData: '<p>Bar</p>' }, bar: { initialData: '<p>Abc</p>' } } }
 					);
 				} ).to.throw( CKEditorError, 'editor-create-initial-data' );
 			} );

From b891e6d22487519f79e1becfdfa26d523e26aa9f Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Thu, 12 Mar 2026 21:33:12 +0100
Subject: [PATCH 19/22] Updated pnpm-lock files.

---
 pnpm-lock.yaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b32323eb1c..461bf943513 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3609,9 +3609,6 @@ importers:
       '@ckeditor/ckeditor5-core':
         specifier: workspace:*
         version: link:../ckeditor5-core
-      '@ckeditor/ckeditor5-editor-multi-root':
-        specifier: workspace:*
-        version: link:../ckeditor5-editor-multi-root
       '@ckeditor/ckeditor5-engine':
         specifier: workspace:*
         version: link:../ckeditor5-engine
@@ -3631,6 +3628,9 @@ importers:
       '@ckeditor/ckeditor5-editor-classic':
         specifier: workspace:*
         version: link:../ckeditor5-editor-classic
+      '@ckeditor/ckeditor5-editor-multi-root':
+        specifier: workspace:*
+        version: link:../ckeditor5-editor-multi-root
       '@ckeditor/ckeditor5-heading':
         specifier: workspace:*
         version: link:../ckeditor5-heading

From f82c56f0f13c191f3fec03d4dce30e782ad3d1cf Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Sat, 14 Mar 2026 10:40:27 +0100
Subject: [PATCH 20/22] Changed modelElement.attributes to modelAttributes root
 config.

---
 .../ckeditor5-core/src/editor/editorconfig.ts | 12 ---
 packages/ckeditor5-core/src/index.ts          |  1 -
 .../src/augmentation.ts                       | 32 ++------
 .../src/multirooteditor.ts                    |  6 +-
 .../tests/multirooteditor.js                  | 76 +++++--------------
 .../ckeditor5-watchdog/src/editorwatchdog.ts  |  2 +-
 .../tests/editorwatchdog.js                   | 36 +++------
 7 files changed, 39 insertions(+), 126 deletions(-)

diff --git a/packages/ckeditor5-core/src/editor/editorconfig.ts b/packages/ckeditor5-core/src/editor/editorconfig.ts
index 1e2ba0fefb7..78d29cfcc1f 100644
--- a/packages/ckeditor5-core/src/editor/editorconfig.ts
+++ b/packages/ckeditor5-core/src/editor/editorconfig.ts
@@ -1103,18 +1103,6 @@ export interface RootConfig {
 	label?: string;
 }
 
-/**
- * Configuration of a root element of the editor. It is used in {@link module:core/editor/editorconfig~EditorConfig#root `config.root`} and
- * {@link module:core/editor/editorconfig~EditorConfig#roots `config.roots.<rootName>`} to specify details of the model root element.
- */
-export interface RootModelElementConfig {
-
-	/**
-	 * TODO This will be used later to specify the name of the model element which will be used as a root. For now, it is always `'$root'`.
-	 */
-	name?: string;
-}
-
 /**
  * The `config.initialData` option cannot be used together with the initial data passed as the first parameter of
  * {@link module:core/editor/editor~Editor.create `Editor.create()`}.
diff --git a/packages/ckeditor5-core/src/index.ts b/packages/ckeditor5-core/src/index.ts
index 17fe459cd40..f31ab387640 100644
--- a/packages/ckeditor5-core/src/index.ts
+++ b/packages/ckeditor5-core/src/index.ts
@@ -40,7 +40,6 @@ export {
 export type {
 	EditorConfig,
 	RootConfig,
-	RootModelElementConfig,
 	LanguageConfig,
 	ToolbarConfig,
 	ToolbarConfigItem,
diff --git a/packages/ckeditor5-editor-multi-root/src/augmentation.ts b/packages/ckeditor5-editor-multi-root/src/augmentation.ts
index 80206fc65be..f8ebf3f1cbb 100644
--- a/packages/ckeditor5-editor-multi-root/src/augmentation.ts
+++ b/packages/ckeditor5-editor-multi-root/src/augmentation.ts
@@ -6,7 +6,7 @@
 import { type RootAttributes } from './multirooteditor.js';
 
 declare module '@ckeditor/ckeditor5-core' {
-	interface RootModelElementConfig {
+	interface RootConfig {
 
 		/**
 		 * Initial root attributes for a single root.
@@ -39,24 +39,16 @@ declare module '@ckeditor/ckeditor5-core' {
 		 * 	{
 		 * 		roots: {
 		 * 			uid1: {
-		 * 				modelElement: {
-		 * 					attributes: { order: 20, isLocked: false } // Third, unlocked.
-		 * 				}
+		 * 				modelAttributes: { order: 20, isLocked: false } // Third, unlocked.
 		 * 			},
 		 * 			uid2: {
-		 * 				modelElement: {
-		 * 					attributes: { order: 10, isLocked: true } // Second, locked.
-		 * 				}
+		 * 				modelAttributes: { order: 10, isLocked: true } // Second, locked.
 		 * 			},
 		 * 			uid3: {
-		 * 				modelElement: {
-		 * 					attributes: { order: 30, isLocked: true } // Fourth, locked.
-		 * 				}
+		 * 				modelAttributes: { order: 30, isLocked: true } // Fourth, locked.
 		 * 			},
 		 * 			uid4: {
-		 * 				modelElement: {
-		 * 					attributes: { order: 0, isLocked: false } // First, unlocked.
-		 * 				}
+		 * 				modelAttributes: { order: 0, isLocked: false } // First, unlocked.
 		 * 			}
 		 * 		}
 		 * 	}
@@ -94,19 +86,7 @@ declare module '@ckeditor/ckeditor5-core' {
 		 * } );
 		 * ```
 		 */
-		attributes?: RootAttributes;
-	}
-
-	interface RootConfig {
-
-		/**
-		 * Configuration for the root model element of the root.
-		 * This is a configuration object for the model element that will be created for the root in the editor's model.
-		 *
-		 * **Note: This configuration option is supported only by the
-		 * {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root} editor type.**
-		 */
-		modelElement?: RootModelElementConfig;
+		modelAttributes?: RootAttributes;
 
 		/**
 		 * Flag for the root that exist in the document but is not initially loaded by the editor.
diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
index 2d51917c502..ca93c7ad345 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
@@ -142,7 +142,7 @@ export class MultiRootEditor extends Editor {
 		if ( this.config.get( 'rootsAttributes' ) ) {
 			/**
 			 * Using deprecated `config.rootsAttributes` configuration option.
-			 * Use `config.roots.<rootName>.modelElement.attributes` instead.
+			 * Use `config.roots.<rootName>.modelAttributes` instead.
 			 *
 			 * @error multi-root-editor-root-deprecated-config-roots-attributes
 			 */
@@ -170,7 +170,7 @@ export class MultiRootEditor extends Editor {
 			 */
 
 			// TODO is this correct for lazy root?
-			const attributes = rootConfig.modelElement?.attributes;
+			const attributes = rootConfig.modelAttributes;
 
 			if ( attributes ) {
 				for ( const key of Object.keys( attributes ) ) {
@@ -183,7 +183,7 @@ export class MultiRootEditor extends Editor {
 			this.model.enqueueChange( { isUndoable: false }, writer => {
 				for ( const [ rootName, rootConfig ] of rootsConfig ) {
 					// TODO check if should set on non loaded root.
-					const attributes = rootConfig.modelElement?.attributes || {};
+					const attributes = rootConfig.modelAttributes || {};
 					const root = this.model.document.getRoot( rootName )!;
 
 					for ( const [ key, value ] of Object.entries( attributes ) ) {
diff --git a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
index e644bdb9eb2..e6e547a6bc7 100644
--- a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
+++ b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
@@ -1391,14 +1391,10 @@ describe( 'MultiRootEditor', () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					foo: {
-						modelElement: {
-							attributes: { order: 10, isLocked: null }
-						}
+						modelAttributes: { order: 10, isLocked: null }
 					},
 					bar: {
-						modelElement: {
-							attributes: { order: null, isLocked: false }
-						}
+						modelAttributes: { order: null, isLocked: false }
 					}
 				}
 			} );
@@ -1419,14 +1415,10 @@ describe( 'MultiRootEditor', () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					foo: {
-						modelElement: {
-							attributes: { order: 10 }
-						}
+						modelAttributes: { order: 10 }
 					},
 					bar: {
-						modelElement: {
-							attributes: { isLocked: false }
-						}
+						modelAttributes: { isLocked: false }
 					}
 				}
 			} );
@@ -1446,9 +1438,7 @@ describe( 'MultiRootEditor', () => {
 			MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					abc: {
-						modelElement: {
-							attributes: { order: 10, isLocked: null }
-						}
+						modelAttributes: { order: 10, isLocked: null }
 					}
 				}
 			} ).then(
@@ -1469,14 +1459,10 @@ describe( 'MultiRootEditor', () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					foo: {
-						modelElement: {
-							attributes: { order: 10, isLocked: true }
-						}
+						modelAttributes: { order: 10, isLocked: true }
 					},
 					bar: {
-						modelElement: {
-							attributes: { order: 20, isLocked: false }
-						}
+						modelAttributes: { order: 20, isLocked: false }
 					}
 				}
 			} );
@@ -1503,14 +1489,10 @@ describe( 'MultiRootEditor', () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					foo: {
-						modelElement: {
-							attributes: { order: 10 }
-						}
+						modelAttributes: { order: 10 }
 					},
 					bar: {
-						modelElement: {
-							attributes: {}
-						}
+						modelAttributes: {}
 					}
 				}
 			} );
@@ -1538,14 +1520,10 @@ describe( 'MultiRootEditor', () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					foo: {
-						modelElement: {
-							attributes: { order: 10, isLocked: true }
-						}
+						modelAttributes: { order: 10, isLocked: true }
 					},
 					bar: {
-						modelElement: {
-							attributes: { order: 20, isLocked: false }
-						}
+						modelAttributes: { order: 20, isLocked: false }
 					}
 				}
 			} );
@@ -1572,14 +1550,10 @@ describe( 'MultiRootEditor', () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					foo: {
-						modelElement: {
-							attributes: { order: 10, isLocked: null }
-						}
+						modelAttributes: { order: 10, isLocked: null }
 					},
 					bar: {
-						modelElement: {
-							attributes: { order: null, isLocked: false }
-						}
+						modelAttributes: { order: null, isLocked: false }
 					}
 				}
 			} );
@@ -1631,14 +1605,10 @@ describe( 'MultiRootEditor', () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					foo: {
-						modelElement: {
-							attributes: { order: 10, isLocked: true }
-						}
+						modelAttributes: { order: 10, isLocked: true }
 					},
 					bar: {
-						modelElement: {
-							attributes: { order: 20, isLocked: false }
-						}
+						modelAttributes: { order: 20, isLocked: false }
 					}
 				}
 			} );
@@ -1671,14 +1641,10 @@ describe( 'MultiRootEditor', () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					foo: {
-						modelElement: {
-							attributes: { order: 10 }
-						}
+						modelAttributes: { order: 10 }
 					},
 					bar: {
-						modelElement: {
-							attributes: {}
-						}
+						modelAttributes: {}
 					}
 				}
 			} );
@@ -1711,14 +1677,10 @@ describe( 'MultiRootEditor', () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
 					foo: {
-						modelElement: {
-							attributes: { order: 10, isLocked: true }
-						}
+						modelAttributes: { order: 10, isLocked: true }
 					},
 					bar: {
-						modelElement: {
-							attributes: { order: 20, isLocked: false }
-						}
+						modelAttributes: { order: 20, isLocked: false }
 					},
 					xxx: { lazyLoad: true },
 					yyy: { lazyLoad: true }
diff --git a/packages/ckeditor5-watchdog/src/editorwatchdog.ts b/packages/ckeditor5-watchdog/src/editorwatchdog.ts
index d299b5871f5..e15697b2afe 100644
--- a/packages/ckeditor5-watchdog/src/editorwatchdog.ts
+++ b/packages/ckeditor5-watchdog/src/editorwatchdog.ts
@@ -245,7 +245,7 @@ export class EditorWatchdog<TEditor extends Editor = Editor> extends Watchdog {
 					if ( rootData.isLoaded ) {
 						rootConfig.lazyLoad = false;
 					} else {
-						delete rootConfig.modelElement?.attributes;
+						delete rootConfig.modelAttributes;
 					}
 
 					updatedRootsConfig[ rootName ] = rootConfig;
diff --git a/packages/ckeditor5-watchdog/tests/editorwatchdog.js b/packages/ckeditor5-watchdog/tests/editorwatchdog.js
index f906298df91..0a192e7ac8d 100644
--- a/packages/ckeditor5-watchdog/tests/editorwatchdog.js
+++ b/packages/ckeditor5-watchdog/tests/editorwatchdog.js
@@ -1604,14 +1604,10 @@ describe( 'EditorWatchdog', () => {
 					plugins: [ Paragraph ],
 					roots: {
 						header: {
-							modelElement: {
-								attributes: { order: 1 }
-							}
+							modelAttributes: { order: 1 }
 						},
 						content: {
-							modelElement: {
-								attributes: { order: 2 }
-							}
+							modelAttributes: { order: 2 }
 						},
 						lazyOne: {
 							lazyLoad: true
@@ -1744,17 +1740,13 @@ describe( 'EditorWatchdog', () => {
 					plugins: [ Paragraph, MultiRootEditorIntegration ],
 					roots: {
 						header: {
-							modelElement: {
-								attributes: {
-									order: 1
-								}
+							modelAttributes: {
+								order: 1
 							}
 						},
 						content: {
-							modelElement: {
-								attributes: {
-									order: 2
-								}
+							modelAttributes: {
+								order: 2
 							}
 						},
 						lazyOne: {
@@ -1843,15 +1835,11 @@ describe( 'EditorWatchdog', () => {
 				roots: {
 					header: {
 						initialData: '<p>Foo</p>',
-						modelElement: {
-							attributes: { order: 1 }
-						}
+						modelAttributes: { order: 1 }
 					},
 					content: {
 						initialData: '<p>Bar</p>',
-						modelElement: {
-							attributes: { order: 2 }
-						}
+						modelAttributes: { order: 2 }
 					}
 				},
 				placeholder: {
@@ -1890,15 +1878,11 @@ describe( 'EditorWatchdog', () => {
 				roots: {
 					header: {
 						initialData: '<p>Foo</p>',
-						modelElement: {
-							attributes: { order: 1 }
-						}
+						modelAttributes: { order: 1 }
 					},
 					content: {
 						initialData: '<p>Bar</p>',
-						modelElement: {
-							attributes: { order: 2 }
-						}
+						modelAttributes: { order: 2 }
 					}
 				},
 				placeholder: 'Type in some content'

From f1984397a422903c207995fc42e946d9155d8141 Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Sat, 14 Mar 2026 13:36:18 +0100
Subject: [PATCH 21/22] Editable options stored as root attributes to propagate
 in RTC and RH.

---
 .../src/multirooteditor.ts                    | 142 +++++++++++++++---
 .../tests/multirooteditor.js                  |   2 +-
 2 files changed, 123 insertions(+), 21 deletions(-)

diff --git a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
index ca93c7ad345..dfe10ae537b 100644
--- a/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
+++ b/packages/ckeditor5-editor-multi-root/src/multirooteditor.ts
@@ -169,7 +169,6 @@ export class MultiRootEditor extends Editor {
 			 * @error multi-root-editor-root-attributes-no-root
 			 */
 
-			// TODO is this correct for lazy root?
 			const attributes = rootConfig.modelAttributes;
 
 			if ( attributes ) {
@@ -179,18 +178,31 @@ export class MultiRootEditor extends Editor {
 			}
 		}
 
+		// 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 ) {
-					// TODO check if should set on non loaded root.
-					const attributes = rootConfig.modelAttributes || {};
 					const root = this.model.document.getRoot( rootName )!;
 
-					for ( const [ key, value ] of Object.entries( attributes ) ) {
+					for ( const [ key, value ] of Object.entries( rootConfig.modelAttributes || {} ) ) {
 						if ( value !== null ) {
-							writer.setAttribute( key, value, root! );
+							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: RootEditableOptions = {
+						...rootConfig.placeholder && { placeholder: rootConfig.placeholder },
+						...rootConfig.label && { label: rootConfig.label }
+					};
+
+					writer.setAttribute( '$rootEditableOptions', rootEditableOptions, root );
 				}
 			} );
 		} );
@@ -351,8 +363,10 @@ export class MultiRootEditor extends Editor {
 	/**
 	 * Adds a new root to the editor.
 	 *
+	 * TODO check if this description requires an update.
+	 *
 	 * ```ts
-	 * editor.addRoot( 'myRoot', { data: '<p>Initial root data.</p>' } );
+	 * editor.addRoot( 'myRoot', { initialData: '<p>Initial root data.</p>' } );
 	 * ```
 	 *
 	 * After a root is added, you will be able to modify and retrieve its data.
@@ -393,7 +407,7 @@ export class MultiRootEditor extends Editor {
 	 * ```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 } } );
+	 * editor.addRoot( 'myRoot', { modelAttributes: { isCollapsed: true, index: 4 } } );
 	 * ```
 	 *
 	 * Note that attributes added together with a root are automatically registered.
@@ -421,24 +435,52 @@ export class MultiRootEditor extends Editor {
 	 * @param rootName Name of the root to add.
 	 * @param options Additional options for the added root.
 	 */
-	public addRoot(
-		rootName: string,
-		{ data = '', attributes = {}, elementName = '$root', isUndoable = false }: AddRootOptions = {}
-	): void {
+	public addRoot( rootName: string, options?: RootConfig & AddRootUndoable ): void;
+
+	/**
+	 * Adds a new root to the editor.
+	 *
+	 * ```ts
+	 * editor.addRoot( 'myRoot', { data: '<p>Initial root data.</p>' } );
+	 * ```
+	 *
+	 * TODO link to other signature for more details
+	 *
+	 * @deprecated
+	 *
+	 * @param rootName Name of the root to add.
+	 * @param options Additional options for the added root.
+	 */
+	// eslint-disable-next-line @typescript-eslint/unified-signatures
+	public addRoot( rootName: string, options?: AddRootOptions ): void;
+
+	public addRoot( rootName: string, options: AddRootOptions & RootConfig & AddRootUndoable = {} ): void {
+		const initialData: string = options.initialData || options.data || '';
+		const modelAttributes: RootAttributes = options.modelAttributes || options.attributes || {};
+		const modelElement: string = options.elementName || '$root';
+
 		const _addRoot = ( writer: ModelWriter ) => {
-			const root = writer.addRoot( rootName, elementName );
+			const root = writer.addRoot( rootName, modelElement );
 
-			if ( data ) {
-				writer.insert( this.data.parse( data, root ), root, 0 );
+			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: 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( { isUndoable: false }, _addRoot );
@@ -513,15 +555,45 @@ export class MultiRootEditor extends Editor {
 	 * 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 options.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 options.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.
+	 */
+	public createEditable( root: ModelRootElement, options?: RootEditableOptions ): HTMLElement;
+
+	/**
+	 * 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.
+	 *
+	 * **Note**: this method signature is deprecated and will be removed in one of the next releases.
+	 * Use the signature with options object instead.
+	 *
+	 * @deprecated
+	 *
+	 * @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.
 	 */
-	public createEditable( root: ModelRootElement, placeholder?: string, label?: string ): HTMLElement { // TODO
-		const editable = this.ui.view.createEditable( root.rootName, undefined, label );
+	public createEditable( root: ModelRootElement, placeholder?: string, label?: string ): HTMLElement;
 
-		this.ui.addEditable( editable, placeholder );
+	public createEditable( root: ModelRootElement, optionsOrPlaceholder?: RootEditableOptions | string, label?: string ): HTMLElement {
+		let placeholder: string | undefined;
+
+		if ( !optionsOrPlaceholder || typeof optionsOrPlaceholder === 'string' ) {
+			placeholder = optionsOrPlaceholder;
+		} else {
+			placeholder = optionsOrPlaceholder?.placeholder;
+			label = optionsOrPlaceholder?.label;
+		}
+
+		const rootEditableConfig: RootEditableOptions = 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();
 
@@ -1043,6 +1115,8 @@ export type LoadRootEvent = DecoratedMethodEvent<MultiRootEditor, 'loadRoot'>;
 
 /**
  * Additional options available when adding a root.
+ *
+ * @deprecated
  */
 export type AddRootOptions = {
 
@@ -1067,6 +1141,17 @@ export type AddRootOptions = {
 	isUndoable?: boolean;
 };
 
+/**
+ * Declares an additional options available when adding a root.
+ */
+export type AddRootUndoable = {
+
+	/**
+	 * Whether creating the root can be undone (using the undo feature) or not.
+	 */
+	isUndoable?: boolean;
+};
+
 /**
  * Additional options available when loading a root.
  */
@@ -1076,3 +1161,20 @@ export type LoadRootOptions = Omit<AddRootOptions, 'elementName' | 'isUndoable'>
  * Attributes set on a model root element.
  */
 export type RootAttributes = Record<string, unknown>;
+
+/**
+ * Additional options for the created editable element.
+ */
+export interface RootEditableOptions {
+
+	/**
+	 * 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). TODO link
+	 */
+	placeholder?: string;
+
+	/**
+	 * The accessible label text describing the editable to the assistive technologies.
+	 */
+	label?: string;
+}
diff --git a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
index e6e547a6bc7..1cd012f0899 100644
--- a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
+++ b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
@@ -1268,7 +1268,7 @@ describe( 'MultiRootEditor', () => {
 			expect( editableElement.children[ 0 ].dataset.placeholder ).to.equal( 'new' );
 		} );
 
-		it( 'should alow for setting a custom label to the editable', () => {
+		it( 'should allow for setting a custom label to the editable', () => {
 			editor.addRoot( 'new' );
 
 			editor.createEditable( editor.model.document.getRoot( 'new' ), undefined, 'Custom label' );

From cf2fb2982d909515160516fd8d5ba0aaeb8074c5 Mon Sep 17 00:00:00 2001
From: Kuba Niegowski <j.niegowski@cksource.com>
Date: Sat, 14 Mar 2026 14:07:43 +0100
Subject: [PATCH 22/22] Added tests.

---
 .../tests/multirooteditor.js                  | 149 ++++++++++++++++++
 1 file changed, 149 insertions(+)

diff --git a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
index 1cd012f0899..4efa103cbb0 100644
--- a/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
+++ b/packages/ckeditor5-editor-multi-root/tests/multirooteditor.js
@@ -830,6 +830,67 @@ describe( 'MultiRootEditor', () => {
 			expect( root ).not.to.be.null;
 			expect( root.isAttached() ).to.be.false;
 		} );
+
+		it( 'should init the root with given initialData', () => {
+			editor.addRoot( 'bar', { initialData: '<p>Foo.</p>' } );
+
+			expect( editor.getData( { rootName: 'bar' } ) ).to.equal( '<p>Foo.</p>' );
+		} );
+
+		it( 'should add a model root with given modelAttributes', () => {
+			sinon.spy( editor, 'registerRootAttribute' );
+
+			editor.addRoot( 'bar', { modelAttributes: { order: 20, isLocked: true } } );
+
+			const root = editor.model.document.getRoot( 'bar' );
+
+			expect( root.getAttribute( 'order' ) ).to.equal( 20 );
+			expect( root.getAttribute( 'isLocked' ) ).to.be.true;
+
+			expect( editor.registerRootAttribute.calledWithExactly( 'order' ) );
+			expect( editor.registerRootAttribute.calledWithExactly( 'isLocked' ) );
+		} );
+
+		it( 'should set placeholder as root editable option', () => {
+			editor.addRoot( 'bar', { placeholder: 'Type here...' } );
+
+			const root = editor.model.document.getRoot( 'bar' );
+
+			expect( root.getAttribute( '$rootEditableOptions' ) ).to.deep.equal( { placeholder: 'Type here...' } );
+		} );
+
+		it( 'should set label as root editable option', () => {
+			editor.addRoot( 'bar', { label: 'My label' } );
+
+			const root = editor.model.document.getRoot( 'bar' );
+
+			expect( root.getAttribute( '$rootEditableOptions' ) ).to.deep.equal( { label: 'My label' } );
+		} );
+
+		it( 'should set both placeholder and label as root editable options', () => {
+			editor.addRoot( 'bar', { placeholder: 'Type here...', label: 'My label' } );
+
+			const root = editor.model.document.getRoot( 'bar' );
+
+			expect( root.getAttribute( '$rootEditableOptions' ) ).to.deep.equal( {
+				placeholder: 'Type here...',
+				label: 'My label'
+			} );
+		} );
+
+		it( 'should prefer initialData over data', () => {
+			editor.addRoot( 'bar', { initialData: '<p>New.</p>', data: '<p>Old.</p>' } );
+
+			expect( editor.getData( { rootName: 'bar' } ) ).to.equal( '<p>New.</p>' );
+		} );
+
+		it( 'should prefer modelAttributes over attributes', () => {
+			editor.addRoot( 'bar', { modelAttributes: { order: 10 }, attributes: { order: 20 } } );
+
+			const root = editor.model.document.getRoot( 'bar' );
+
+			expect( root.getAttribute( 'order' ) ).to.equal( 10 );
+		} );
 	} );
 
 	describe( 'detachRoot()', () => {
@@ -1277,6 +1338,40 @@ describe( 'MultiRootEditor', () => {
 
 			expect( editableElement.getAttribute( 'aria-label' ) ).to.equal( 'Custom label' );
 		} );
+
+		it( 'should accept options object with placeholder and label', () => {
+			editor.addRoot( 'new' );
+
+			editor.createEditable( editor.model.document.getRoot( 'new' ), { placeholder: 'Type...', label: 'My label' } );
+
+			const editableElement = editor.ui.view.editables.new.element;
+
+			expect( editableElement.children[ 0 ].dataset.placeholder ).to.equal( 'Type...' );
+			expect( editableElement.getAttribute( 'aria-label' ) ).to.equal( 'My label' );
+		} );
+
+		it( 'should use $rootEditableOptions from root attribute as fallback for placeholder and label', () => {
+			editor.addRoot( 'new', { placeholder: 'Root placeholder', label: 'Root label' } );
+
+			editor.createEditable( editor.model.document.getRoot( 'new' ) );
+
+			const editableElement = editor.ui.view.editables.new.element;
+
+			expect( editableElement.children[ 0 ].dataset.placeholder ).to.equal( 'Root placeholder' );
+			expect( editableElement.getAttribute( 'aria-label' ) ).to.equal( 'Root label' );
+		} );
+
+		it( 'should work when root has no $rootEditableOptions attribute', () => {
+			editor.model.change( writer => {
+				writer.addRoot( 'new' );
+			} );
+
+			editor.createEditable( editor.model.document.getRoot( 'new' ) );
+
+			const editableElement = editor.ui.view.editables.new.element;
+
+			expect( editableElement ).to.be.instanceOf( HTMLElement );
+		} );
 	} );
 
 	describe( 'detachEditable()', () => {
@@ -1387,6 +1482,22 @@ describe( 'MultiRootEditor', () => {
 	} );
 
 	describe( 'roots attributes', () => {
+		it( 'should store placeholder from roots config as $rootEditableOptions attribute', async () => {
+			editor = await MultiRootEditor.create( { foo: '' }, {
+				roots: {
+					foo: {
+						placeholder: 'Type here...'
+					}
+				}
+			} );
+
+			const fooRoot = editor.model.document.getRoot( 'foo' );
+
+			expect( fooRoot.getAttribute( '$rootEditableOptions' ) ).to.deep.equal( { placeholder: 'Type here...' } );
+
+			await editor.destroy();
+		} );
+
 		it( 'should load attributes from editor configuration', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
 				roots: {
@@ -1575,6 +1686,22 @@ describe( 'MultiRootEditor', () => {
 			await editor.destroy();
 		} );
 
+		it( 'should not include $rootEditableOptions', async () => {
+			editor = await MultiRootEditor.create( { foo: '' }, {
+				roots: {
+					foo: {
+						modelAttributes: { order: 10 },
+						placeholder: 'Type here...',
+						label: 'My label'
+					}
+				}
+			} );
+
+			expect( editor.getRootAttributes( 'foo' ) ).to.deep.equal( { order: 10 } );
+
+			await editor.destroy();
+		} );
+
 		it( 'should return attributes added while adding roots', async () => {
 			// Empty multi-root, no roots, no roots attributes.
 			editor = await MultiRootEditor.create( {} );
@@ -1708,6 +1835,28 @@ describe( 'MultiRootEditor', () => {
 
 			await editor.destroy();
 		} );
+
+		it( 'should not include $rootEditableOptions', async () => {
+			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {
+				roots: {
+					foo: {
+						modelAttributes: { order: 10 },
+						placeholder: 'Foo placeholder',
+						label: 'Foo label'
+					},
+					bar: {
+						modelAttributes: { order: 20 }
+					}
+				}
+			} );
+
+			expect( editor.getRootsAttributes() ).to.deep.equal( {
+				foo: { order: 10 },
+				bar: { order: 20 }
+			} );
+
+			await editor.destroy();
+		} );
 	} );
 
 	describe( 'destroy', () => {