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,45 @@
+/**
+ * @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 } from 'react';
+import { normalizeClassList } from './utils/normalizeClassList.js';
+import {
+	type EditorElementDefinition,
+	normalizeEditorElementDefinition
+} from './utils/normalizeEditorElementDefinition.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, Props>( ( { 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';
+
+/**
+ * Properties for the {@link EditorElement} component.
+ */
+type Props = {
+
+	/**
+     * 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,9 +36,13 @@ import {
 	assignElementToEditorConfig,
 	compareInstalledCKBaseVersion,
 	getInstalledCKBaseFeatures,
-	type EditorRelaxedConstructor
+	type EditorRelaxedConstructor,
+	type EditorRelaxedConfig
 } from '@ckeditor/ckeditor5-integrations-common';
 
+import { EditorElement } from './EditorElement.js';
+import type { EditorElementDefinition } from './utils/normalizeEditorElementDefinition.js';
+
 const REACT_INTEGRATION_READ_ONLY_LOCK_ID = 'Lock from React integration (@ckeditor/ckeditor5-react)';
 
 export default class CKEditor<TEditor extends Editor> extends React.Component<Props<TEditor>> {
@@ -209,8 +213,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 { editor: Editor, config = {} } = this.props;
+		const definition = getEditorElementDefinition( Editor, config );
+
 		return (
-			<div ref={ this.domContainer }></div>
+			<EditorElement
+				ref={ this.domContainer }
+				definition={definition}
+			/>
 		);
 	}
 
@@ -412,6 +422,17 @@ export default class CKEditor<TEditor extends Editor> extends React.Component<Pr
 	}
 }
 
+/**
+ * Get definition of the element used to create editor.
+ */
+function getEditorElementDefinition( editor: EditorRelaxedConstructor, config: EditorRelaxedConfig ): EditorElementDefinition {
+	if ( !editor.editorName || editor.editorName === 'ClassicEditor' ) {
+		return 'div';
+	}
+
+	return config.roots?.main?.element ?? config.root?.element ?? 'div';
+}
+
 /**
  * Returns true when the editor should be updated.
  *
@@ -466,7 +487,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 +496,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/useLifeCycleSemaphoreSyncRef.tsx

@@ -24,16 +24,21 @@ import type { LifeCycleElementSemaphore, LifeCycleAfterMountCallback } from './L
 export const useLifeCycleSemaphoreSyncRef = <R extends object>(): LifeCycleSemaphoreSyncRefResult<R> => {
 	const semaphoreRef = useRef<LifeCycleElementSemaphore<R> | null>( null );
 	const [ revision, setRevision ] = useState( () => Date.now() );
+	const pendingWaiters = useRef<Array<PendingWaiter<R>>>( [] );
 
 	const refresh = () => {
 		setRevision( Date.now() );
 	};
 
 	const release = ( rerender: boolean = true ) => {
-		if ( semaphoreRef.current ) {
-			semaphoreRef.current.release();
-			semaphoreRef.current = null;
-		}
+		semaphoreRef.current?.release();
+		semaphoreRef.current = null;
+
+		const waiters = pendingWaiters.current.splice( 0 );
+
+		waiters.forEach( ( { reject } ) => {
+			reject( new Error( 'CKEditor: editor was destroyed before initialization completed.' ) );
+		} );
 
 		if ( rerender ) {
 			setRevision( Date.now() );
@@ -42,23 +47,51 @@ export const useLifeCycleSemaphoreSyncRef = <R extends object>(): LifeCycleSemap
 
 	const unsafeSetValue = ( value: R ) => {
 		semaphoreRef.current?.unsafeSetValue( value );
+
+		const waiters = pendingWaiters.current.splice( 0 );
+
+		waiters.forEach( ( { resolve } ) => resolve( value ) );
+
 		refresh();
 	};
 
 	const runAfterMount = ( callback: LifeCycleAfterMountCallback<R> ) => {
-		if ( semaphoreRef.current ) {
-			semaphoreRef.current.runAfterMount( callback );
-		}
+		semaphoreRef.current?.runAfterMount( callback );
 	};
 
 	const replace = ( newSemaphore: () => LifeCycleElementSemaphore<R> ) => {
-		release( false );
+		semaphoreRef.current?.release();
 		semaphoreRef.current = newSemaphore();
+		semaphoreRef.current.runAfterMount( value => {
+			const waiters = pendingWaiters.current.splice( 0 );
+
+			waiters.forEach( ( { resolve } ) => resolve( value ) );
+		} );
 
 		refresh();
 		runAfterMount( refresh );
 	};
 
+	/**
+	 * Returns a Promise that resolves with the current semaphore value once the editor is ready.
+	 *
+	 * Unlike `semaphore.current.waitFor()`, this hook-level version survives semaphore replacements:
+	 * if the current semaphore is replaced before it mounts, the promise will wait for the next one
+	 * rather than hanging indefinitely. The promise is only rejected when the hook is fully torn down
+	 * via `release()`.
+	 */
+	const waitFor = (): Promise<R> => {
+		const currentValue = semaphoreRef.current?.value;
+
+		if ( currentValue ) {
+			return Promise.resolve( currentValue );
+		}
+
+		return new Promise<R>( ( resolve, reject ) => {
+			pendingWaiters.current.push( { resolve, reject } );
+		} );
+	};
+
 	const createAttributeRef = <K extends keyof R>( key: K ): RefObject<R[ K ]> => ( {
 		get current() {
 			if ( !semaphoreRef.current || !semaphoreRef.current.value ) {
@@ -78,15 +111,22 @@ export const useLifeCycleSemaphoreSyncRef = <R extends object>(): LifeCycleSemap
 		unsafeSetValue,
 		release,
 		replace,
-		runAfterMount
+		runAfterMount,
+		waitFor
 	};
 };
 
+type PendingWaiter<R> = {
+	resolve: ( value: R ) => void;
+	reject: ( reason: unknown ) => void;
+};
+
 export type LifeCycleSemaphoreSyncRefResult<R> = RefObject<LifeCycleElementSemaphore<R>> & {
 	revision: number;
 	unsafeSetValue: ( value: R ) => void;
 	runAfterMount: ( callback: LifeCycleAfterMountCallback<R> ) => void;
 	release: ( rerender?: boolean ) => void;
 	replace: ( newSemaphore: () => LifeCycleElementSemaphore<R> ) => void;
 	createAttributeRef: <K extends keyof R>( key: K ) => RefObject<R[ K ]>;
+	waitFor: () => Promise<R>;
 };