Add support for paragraph like editor.

.changelog/20260519132746_ck_9933.md

@@ -0,0 +1,5 @@
+---
+type: Feature
+---
+
+Added support for the `tagName` property in the CKEditor component, enabling the customization of the editor's host element tag.

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}
+			/>
 		);
 	}
 

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> ) => {

src/multiroot/EditorEditable.tsx

@@ -3,64 +3,77 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-import React, { forwardRef, useEffect, useRef, memo } from 'react';
+import React, { forwardRef, useEffect, useRef, memo, useMemo } from 'react';
 
 import { mergeRefs } from '../utils/mergeRefs.js';
+import type { MultiRootEditor } from 'ckeditor5';
+import {
+	EditorElement,
+	normalizeEditorElementDefinition,
+	type EditorElementDefinition
+} from '../EditorElement.js';
 
-import type { LifeCycleSemaphoreSyncRefResult } from '../lifecycle/useLifeCycleSemaphoreSyncRef.js';
-import type { EditorSemaphoreMountResult } from '../lifecycle/LifeCycleEditorSemaphore.js';
-import type { InlineEditableUIView, MultiRootEditor } from 'ckeditor5';
+export const ROOT_EDITABLE_OPTIONS_ATTRIBUTE = '$rootEditableOptions';
 
 /**
  * A React component that renders a single editable area (root) for the `MultiRootEditor`.
- * It handles the lifecycle of the editable element by attaching it to the editor
- * instance once mounted and safely detaching it during cleanup.
  */
-export const EditorEditable = memo( forwardRef<HTMLDivElement, Props>( ( { id, semaphore, rootName }, ref ) => {
-	const innerRef = useRef<HTMLDivElement>( null );
+export const EditorEditable = memo( forwardRef<HTMLElement, Props>( ( { id, editor, rootName }, ref ) => {
+	const innerRef = useRef<HTMLElement>( null );
 
-	useEffect( () => {
-		let editable: InlineEditableUIView | null;
-		let editor: MultiRootEditor | null;
+	const root = useMemo( () => editor?.model.document.getRoot( rootName ), [ editor, rootName ] );
+	const rootEditableOptions = useMemo( () => {
+		if ( !root ) {
+			return null;
+		}
 
-		semaphore.runAfterMount( ( { instance } ) => {
-			if ( !innerRef.current ) {
-				return;
-			}
+		const options = root.getAttribute( ROOT_EDITABLE_OPTIONS_ATTRIBUTE ) as RootEditableOptionsAttribute | undefined;
 
-			editor = instance;
+		return { ...options };
+	}, [ root ] );
 
-			const { ui, model } = editor;
-			const root = model.document.getRoot( rootName );
+	useEffect( () => {
+		if ( !editor || !root || !rootEditableOptions ) {
+			return;
+		}
 
-			if ( root && editor.ui.getEditableElement( rootName ) ) {
-				editor.detachEditable( root );
-			}
+		// Detach already attached editable if any.
+		if ( editor.ui.getEditableElement( rootName ) ) {
+			editor.detachEditable( root );
+		}
 
-			editable = ui.view.createEditable( rootName, innerRef.current );
-			ui.addEditable( editable );
+		const editable = editor.ui.view.createEditable( rootName, innerRef.current!, rootEditableOptions.label );
 
-			instance.editing.view.forceRender();
-		} );
+		editor.ui.addEditable( editable, rootEditableOptions.placeholder );
+		editor.editing.view.forceRender();
 
 		return () => {
 			/* istanbul ignore next -- @preserve: It depends on the version of the React and may not happen all of the times. */
-			if ( editor && editor.state !== 'destroyed' && innerRef.current ) {
-				const root = editor.model.document.getRoot( rootName );
+			if ( editor && editor.state !== 'destroyed' ) {
+				const currentRoot = editor.model.document.getRoot( rootName );
 
 				/* istanbul ignore else -- @preserve */
-				if ( root ) {
+				if ( currentRoot === root ) {
 					editor.detachEditable( root );
 				}
 			}
 		};
-	}, [ semaphore.revision ] );
+	}, [ editor, root, rootEditableOptions ] );
+
+	if ( !rootEditableOptions ) {
+		return null;
+	}
 
 	return (
-		<div
-			key={semaphore.revision}
-			id={id}
+		<EditorElement
+			key={editor?.id}
 			ref={ mergeRefs( ref, innerRef ) }
+			definition={{
+				id,
+				...normalizeEditorElementDefinition( rootEditableOptions?.element ?? {
+					name: 'div'
+				} )
+			}}
 		/>
 	);
 } ) );
@@ -70,5 +83,23 @@ EditorEditable.displayName = 'EditorEditable';
 type Props = {
 	id: string;
 	rootName: string;
-	semaphore: LifeCycleSemaphoreSyncRefResult<EditorSemaphoreMountResult<MultiRootEditor>>;
+	editor: MultiRootEditor | null;
+};
+
+export type RootEditableOptionsAttribute = {
+
+	/**
+	 * Placeholder for the editable element. If not set, placeholder value from the editor configuration will be used (if it was provided).
+	 */
+	placeholder?: string;
+
+	/**
+	 * The accessible label text describing the editable to the assistive technologies.
+	 */
+	label?: string;
+
+	/**
+	 * A description of the editable root element to create.
+	 */
+	element?: EditorElementDefinition;
 };