Add support for paragraph like editor.

.changelog/20260522071212_ck_9933.md

@@ -0,0 +1,22 @@
+---
+type: Feature
+---
+
+The `useMultiRootEditor` hook now returns `addRoot` and `removeRoot` helpers directly. Previously, adding or removing a root required manually manipulating the `data` and `attributes` state outside the hook. You can now call them directly:
+
+```js
+const { addRoot, removeRoot } = useMultiRootEditor( props );
+
+await addRoot({
+  name: 'my-root',
+  data: '<p>Hello</p>',
+  attributes: { order: 10 },
+  editableOptions: {
+    element: 'section',
+    placeholder: 'Start typing...',
+    label: 'My section'
+  }
+});
+
+await removeRoot( 'my-root' );
+```

.changelog/20260522071658_ck_9933.md

@@ -0,0 +1,5 @@
+---
+type: Feature
+---
+
+The `<CKEditor>` component now supports paragraph-like editor configurations. When `config.root.element` (or `config.roots.main.element`) is provided, you can customize the tag name, CSS classes and inline styles of the editable element instead of relying on the default plain `<div>`.

.changelog/20260522071757_ck_9933.md

@@ -0,0 +1,5 @@
+---
+type: Feature
+---
+
+Each editable root in the multi-root editor can now be configured independently with its own HTML element type, placeholder text and accessible label. Pass an `editableOptions` object to `addRoot` to control the `element` (e.g. `'section'`, `'article'`), `placeholder` and assistive-technology `label` for that specific root.

demos/npm-multiroot-react/MultiRootEditorRichDemo.tsx

@@ -44,8 +44,10 @@ export default function MultiRootEditorRichDemo( props: EditorDemoProps ): JSX.E
 
 	const {
 		editor, editableElements, toolbarElement,
-		data, setData,
-		attributes, setAttributes
+		data,
+		attributes,
+		addRoot,
+		removeRoot
 	} = useMultiRootEditor( editorProps );
 
 	// The <select> element state, used to pick the root to remove.
@@ -95,32 +97,32 @@ export default function MultiRootEditorRichDemo( props: EditorDemoProps ): JSX.E
 		} );
 	};
 
-	const addRoot = ( newRootAttributes: Record<string, unknown>, rootId?: string ) => {
+	const onAddRoot = ( newRootAttributes: Record<string, unknown>, rootId?: string ) => {
 		const id = rootId || new Date().getTime();
 
 		for ( let i = 1; i <= numberOfRoots; i++ ) {
 			const rootName = `root-${ i }-${ id }`;
 
-			data[ rootName ] = '';
-
-			// Remove code related to rows if you don't need to handle multiple roots in one row.
-			attributes[ rootName ] = { ...newRootAttributes, order: i * 10, row: id };
+			addRoot( {
+				name: rootName,
+				attributes: {
+					...newRootAttributes,
+					order: i * 10, row: id
+				},
+				editableOptions: {
+					element: 'section',
+					placeholder: 'Test placeholder',
+					label: 'Test label'
+				}
+			} );
 		}
 
-		setData( { ...data } );
-		setAttributes( { ...attributes } );
 		// Reset the <input> element to the default value.
 		setNumberOfRoots( 1 );
 	};
 
-	const removeRoot = ( rootName: string ) => {
-		setData( previousData => {
-			// eslint-disable-next-line @typescript-eslint/no-unused-vars
-			const { [ rootName! ]: _, ...newData } = previousData;
-
-			return { ...newData };
-		} );
-
+	const onRemoveRoot = ( rootName: string ) => {
+		removeRoot( rootName );
 		setSelectedRoot( '' );
 	};
 
@@ -175,7 +177,7 @@ export default function MultiRootEditorRichDemo( props: EditorDemoProps ): JSX.E
 
 			<div className="buttons">
 				<button
-					onClick={ () => removeRoot( selectedRoot! ) }
+					onClick={ () => onRemoveRoot( selectedRoot! ) }
 					disabled={ !selectedRoot }
 				>
 					Remove root
@@ -194,7 +196,7 @@ export default function MultiRootEditorRichDemo( props: EditorDemoProps ): JSX.E
 
 			<div className="buttons">
 				<button
-					onClick={ () => addRoot( { row: 'section-1' } ) }
+					onClick={ () => onAddRoot( { row: 'section-1' } ) }
 				>
 					Add row with roots
 				</button>

src/EditorElement.tsx

@@ -0,0 +1,101 @@
+/**
+ * @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 React, { forwardRef, memo, type ElementType } from 'react';
+import { normalizeClassList } from './utils/normalizeClassList.js';
+
+/**
+ * Creates and renders a dynamic React element based on the element definition owned and provided by the editor.
+ *
+ * @param props The component properties.
+ */
+export const EditorElement = memo( forwardRef<HTMLElement, EditorElementProps>( ( { definition }, ref ) => {
+	const { id, name: Tag, classes, styles, attributes } = normalizeEditorElementDefinition( definition ?? {
+		name: 'div'
+	} );
+
+	return (
+		<Tag
+			ref={ref}
+			{...attributes}
+			id={id}
+			className={normalizeClassList( classes )}
+			style={styles}
+		/>
+	);
+} ) );
+
+EditorElement.displayName = 'EditorElement';
+
+/**
+ * Normalizes an editor element definition into a structured object.
+ *
+ * @param definition The definition to normalize.
+ * @returns A strictly typed object definition containing at least the element name.
+ */
+export function normalizeEditorElementDefinition( definition: EditorElementDefinition ): EditorElementObjectDefinition {
+	if ( typeof HTMLElement !== 'undefined' && definition instanceof HTMLElement ) {
+		throw new Error(
+			'An HTMLElement cannot be used as an editor element definition. ' +
+			'Please pass a string, a React component, or an object definition.'
+		);
+	}
+
+	if ( typeof definition !== 'object' || definition === null ) {
+		return {
+			name: definition
+		};
+	}
+
+	return definition as EditorElementObjectDefinition;
+}
+
+/**
+ * Defines an editor element. It can be a basic React element type or a detailed configuration object.
+ */
+export type EditorElementDefinition = ElementType | EditorElementObjectDefinition;
+
+/**
+ * An object-based definition for an editor element, allowing customization
+ * of classes, styles, and HTML attributes.
+ */
+export type EditorElementObjectDefinition = {
+
+	/**
+     * The DOM tag name or React component to use.
+     */
+	name: ElementType;
+
+	/**
+     * The unique identifier (ID) to apply to the editable element.
+     */
+	id?: string;
+
+	/**
+     * Class name or array of class names to apply to the editable element. Each name can be provided as a string.
+     */
+	classes?: string | Array<string>;
+
+	/**
+     * Inline styles to apply to the editable element as a record of style properties.
+     */
+	styles?: Record<string, string>;
+
+	/**
+     * Additional DOM attributes to apply to the editable element.
+     */
+	attributes?: Record<string, string>;
+};
+
+/**
+ * Properties for the {@link EditorElement} component.
+ */
+export type EditorElementProps = {
+
+	/**
+     * The definition of the element to be rendered. Defaults to a `div` element if not provided or null.
+     */
+	definition?: EditorElementDefinition | null;
+};

src/ckeditor.tsx

@@ -36,8 +36,10 @@ import {
 	assignElementToEditorConfig,
 	compareInstalledCKBaseVersion,
 	getInstalledCKBaseFeatures,
-	type EditorRelaxedConstructor
+	type EditorRelaxedConstructor,
+	type EditorRelaxedConfig
 } from '@ckeditor/ckeditor5-integrations-common';
+import { EditorElement, type EditorElementObjectDefinition } from './EditorElement.js';
 
 const REACT_INTEGRATION_READ_ONLY_LOCK_ID = 'Lock from React integration (@ckeditor/ckeditor5-react)';
 
@@ -209,8 +211,14 @@ export default class CKEditor<TEditor extends Editor> extends React.Component<Pr
 	 * Render a <div> element which will be replaced by CKEditor.
 	 */
 	public override render(): React.ReactNode {
+		const config = ( this.props.config ?? {} ) as EditorRelaxedConfig;
+		const definition = ( config.roots?.main?.element ?? config.root?.element ) as EditorElementObjectDefinition | undefined;
+
 		return (
-			<div ref={ this.domContainer }></div>
+			<EditorElement
+				ref={ this.domContainer }
+				definition={definition}
+			/>
 		);
 	}
 
@@ -466,7 +474,7 @@ export interface Props<TEditor extends Editor> {
 	disableWatchdog?: boolean;
 	onReady?: ( editor: TEditor ) => void;
 	onAfterDestroy?: ( editor: TEditor ) => void;
-	onError?: ( error: Error, details: ErrorDetails ) => void;
+	onError?: ( error: Error, details: EditorErrorDetails ) => void;
 	onChange?: ( event: EventInfo, editor: TEditor ) => void;
 	onFocus?: ( event: EventInfo, editor: TEditor ) => void;
 	onBlur?: ( event: EventInfo, editor: TEditor ) => void;
@@ -475,7 +483,10 @@ export interface Props<TEditor extends Editor> {
 	id?: any;
 }
 
-interface ErrorDetails {
+/**
+ * Error thrown by editor watchdog.
+ */
+export type EditorErrorDetails = {
 	phase: 'initialization' | 'runtime';
 	willEditorRestart?: boolean;
-}
+};

src/context/ckeditorcontext.tsx

@@ -218,7 +218,7 @@ export type ContextWatchdogValue<TContext extends Context = Context> =
 	}
 	| {
 		status: 'error';
-		error: ErrorDetails;
+		error: ContextErrorDetails;
 	};
 
 /**
@@ -248,10 +248,13 @@ export type Props<TContext extends Context> =
 		watchdogConfig?: WatchdogConfig;
 		config?: ContextConfig;
 		onReady?: ( context: TContext, watchdog: ContextWatchdog<TContext> ) => void;
-		onError?: ( error: Error, details: ErrorDetails ) => void;
+		onError?: ( error: Error, details: ContextErrorDetails ) => void;
 	};
 
-type ErrorDetails = {
+/**
+ * Error thrown by context watchdog.
+ */
+export type ContextErrorDetails = {
 	phase: 'initialization' | 'runtime';
 	willContextRestart: boolean;
 };

src/index.ts

@@ -3,9 +3,25 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-export { default as CKEditor } from './ckeditor.js';
-export { default as CKEditorContext } from './context/ckeditorcontext.js';
-export { useMultiRootEditor, type MultiRootHookProps, type MultiRootHookReturns } from './multiroot/useMultiRootEditor.js';
+export {
+	default as CKEditor,
+	type EditorErrorDetails
+} from './ckeditor.js';
+
+export {
+	default as CKEditorContext,
+	ContextWatchdogContext,
+	useCKEditorWatchdogContext,
+	type ContextErrorDetails,
+	type ContextWatchdogValue
+} from './context/ckeditorcontext.js';
+
+export {
+	useMultiRootEditor,
+	type MultiRootHookProps,
+	type MultiRootHookReturns,
+	type AddRootOptions
+} from './multiroot/useMultiRootEditor.js';
 
 export { default as useCKEditorCloud } from './cloud/useCKEditorCloud.js';
 export {

src/lifecycle/LifeCycleElementSemaphore.ts

@@ -119,6 +119,16 @@ export class LifeCycleElementSemaphore<R> {
 		return this._value;
 	}
 
+	/**
+	 * Returns a promise that resolves with the value of the semaphore when it is successfully mounted.
+	 * Useful for safely awaiting the editor initialization before performing direct API calls.
+	 */
+	public waitFor(): Promise<R> {
+		return new Promise<R>( resolve => {
+			this.runAfterMount( resolve );
+		} );
+	}
+
 	/**
 	 * Resets the semaphore to its initial state.
 	 */

src/lifecycle/useLifeCycleSemaphoreSyncRef.tsx

@@ -46,9 +46,7 @@ export const useLifeCycleSemaphoreSyncRef = <R extends object>(): LifeCycleSemap
 	};
 
 	const runAfterMount = ( callback: LifeCycleAfterMountCallback<R> ) => {
-		if ( semaphoreRef.current ) {
-			semaphoreRef.current.runAfterMount( callback );
-		}
+		semaphoreRef.current?.runAfterMount( callback );
 	};
 
 	const replace = ( newSemaphore: () => LifeCycleElementSemaphore<R> ) => {