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>

package.json

@@ -28,7 +28,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-integrations-common": "^2.3.1"
+    "@ckeditor/ckeditor5-integrations-common": "^2.4.0"
   },
   "peerDependencies": {
     "ckeditor5": ">=46.0.0 || ^0.0.0-nightly || ^0.0.0-internal",

pnpm-workspace.yaml

@@ -19,3 +19,9 @@ minimumReleaseAgeExclude:
 shellEmulator: true
 shamefullyHoist: true
 preferFrozenLockfile: true
+allowBuilds:
+  edgedriver: true
+  esbuild: true
+  geckodriver: true
+  protobufjs: true
+  snyk: false

src/EditorElement.tsx

@@ -0,0 +1,47 @@
+/**
+ * @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 { normalizeStylesMap } from './utils/normalizeStylesMap.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 { name: Tag, classes, styles, attributes } = normalizeEditorElementDefinition( definition ?? {
+		name: 'div'
+	} );
+
+	return (
+		<Tag
+			ref={ref}
+			{...attributes}
+			style={normalizeStylesMap( styles ?? {} )}
+			className={normalizeClassList( classes )}
+		/>
+	);
+} ) );
+
+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;
+};