Initial PoC of inline roots in editor.

packages/ckeditor5-block-quote/src/blockquotecommand.ts

@@ -214,9 +214,17 @@ function getRangesOfBlockGroups( writer: ModelWriter, blocks: Array<ModelElement
  * Checks whether <bQ> can wrap the block.
  */
 function checkCanBeQuoted( schema: ModelSchema, block: ModelElement ): boolean {
-	// TMP will be replaced with schema.checkWrap().
-	const isBQAllowed = schema.checkChild( block.parent as ModelElement, 'blockQuote' );
-	const isBlockAllowedInBQ = schema.checkChild( [ '$root', 'blockQuote' ], block );
+	const parentContext = schema.createContext( block.parent as ModelElement );
 
-	return isBQAllowed && isBlockAllowedInBQ;
+	// Is block-quote allowed in parent of block.
+	if ( !schema.checkChild( parentContext, 'blockQuote' ) ) {
+		return false;
+	}
+
+	// Is block allowed inside block-quote.
+	if ( !schema.checkChild( parentContext.push( 'blockQuote' ), block ) ) {
+		return false;
+	}
+
+	return true;
 }

packages/ckeditor5-core/src/editor/editorconfig.ts

@@ -112,6 +112,16 @@ export interface EditorConfig extends EngineConfig {
 	 */
 	initialData?: string | Record<string, string>;
 
+	/**
+	 * TODO
+	 */
+	modelRootElementName?: string | Record<string, string>;
+
+	/**
+	 * TODO
+	 */
+	viewRootElementName?: string | Record<string, string>;
+
 	/**
 	 * The language of the editor UI and its content.
 	 *

packages/ckeditor5-editor-balloon/src/ballooneditor.ts

@@ -82,9 +82,14 @@ export class BalloonEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 
 		this.config.define( 'balloonToolbar', this.config.get( 'toolbar' ) );
 
-		this.model.document.createRoot();
-
-		const view = new BalloonEditorUIView( this.locale, this.editing.view, this.sourceElement, this.config.get( 'label' ) );
+		this.model.document.createRoot( this.config.get( 'modelRootElementName' ) as string || '$root' );
+
+		const view = new BalloonEditorUIView(
+			this.locale,
+			this.editing.view,
+			this.sourceElement || this.config.get( 'viewRootElementName' ) as string,
+			this.config.get( 'label' )
+		);
 		this.ui = new BalloonEditorUI( this, view );
 
 		attachToForm( this );

packages/ckeditor5-editor-balloon/src/ballooneditoruiview.ts

@@ -38,7 +38,7 @@ export class BalloonEditorUIView extends EditorUIView {
 	constructor(
 		locale: Locale,
 		editingView: EditingView,
-		editableElement?: HTMLElement,
+		editableElement?: HTMLElement | string, // TODO string => create DOM element name
 		label?: string | Record<string, string>
 	) {
 		super( locale );

packages/ckeditor5-editor-balloon/tests/manual/ballooneditor-inline-data.html

@@ -0,0 +1,12 @@
+<div class="container"></div>
+
+<style>
+	.container {
+		padding: 20px;
+		width: 500px;
+	}
+
+	.ck-content {
+		margin: 0;
+	}
+</style>

packages/ckeditor5-editor-balloon/tests/manual/ballooneditor-inline-data.js

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+import { BalloonEditor } from '../../src/ballooneditor.js';
+import { ArticlePluginSet } from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset.js';
+
+const container = document.querySelector( '.container' );
+
+BalloonEditor
+	.create( '<h2>Editor</h2><p>This is an editor instance.</p>', {
+		plugins: [ ArticlePluginSet ],
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		modelRootElementName: '$inlineRoot',
+		viewRootElementName: 'p'
+	} )
+	.then( editor => {
+		window.editor = editor;
+		container.appendChild( editor.ui.element );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-editor-balloon/tests/manual/ballooneditor-inline-data.md

@@ -0,0 +1,3 @@
+1. Click "Init editor".
+2. New editor instance should be appended to the document with initial data in it. You can create more than one editor.
+3. After clicking "Destroy editors" all editors should be removed from the document.

packages/ckeditor5-editor-balloon/tests/manual/ballooneditor-inline.html

@@ -0,0 +1,14 @@
+<div class="container">
+    <h2 id="editor">This is editor</h2>
+</div>
+
+<style>
+	.container {
+		padding: 20px;
+		width: 500px;
+	}
+
+	.ck-content {
+		margin: 0;
+	}
+</style>

packages/ckeditor5-editor-balloon/tests/manual/ballooneditor-inline.js

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+import { BalloonEditor } from '../../src/ballooneditor.js';
+import { ArticlePluginSet } from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset.js';
+
+BalloonEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet ],
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+		modelRootElementName: '$inlineRoot',
+		viewRootElementName: 'p' // TODO this is ignored as original element is reused
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-editor-balloon/tests/manual/ballooneditor-inline.md

@@ -0,0 +1,3 @@
+1. Click "Init editor".
+2. New editor instance should be appended to the document with initial data in it. You can create more than one editor.
+3. After clicking "Destroy editors" all editors should be removed from the document.

packages/ckeditor5-editor-classic/src/classiceditor.ts

@@ -72,14 +72,15 @@ export class ClassicEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 			this.sourceElement = sourceElementOrData;
 		}
 
-		this.model.document.createRoot();
+		this.model.document.createRoot( this.config.get( 'modelRootElementName' ) as string || '$root' );
 
 		const shouldToolbarGroupWhenFull = !this.config.get( 'toolbar.shouldNotGroupWhenFull' );
 
 		const menuBarConfig = this.config.get( 'menuBar' )!;
 
 		const view = new ClassicEditorUIView( this.locale, this.editing.view, {
 			shouldToolbarGroupWhenFull,
+			editableElementName: this.config.get( 'viewRootElementName' ) as string | undefined,
 			useMenuBar: menuBarConfig.isVisible,
 			label: this.config.get( 'label' )
 		} );

packages/ckeditor5-editor-classic/src/classiceditoruiview.ts

@@ -51,6 +51,7 @@ export class ClassicEditorUIView extends BoxedEditorUIView {
 		editingView: EditingView,
 		options: {
 			shouldToolbarGroupWhenFull?: boolean;
+			editableElementName?: string; // TODO docs
 			useMenuBar?: boolean;
 			label?: string | Record<string, string>;
 		} = {}
@@ -67,7 +68,7 @@ export class ClassicEditorUIView extends BoxedEditorUIView {
 			this.menuBarView = new MenuBarView( locale );
 		}
 
-		this.editable = new InlineEditableUIView( locale, editingView, undefined, {
+		this.editable = new InlineEditableUIView( locale, editingView, options.editableElementName, {
 			label: options.label
 		} );
 	}

packages/ckeditor5-editor-classic/tests/manual/classiceditor-inline-data.html

@@ -0,0 +1,12 @@
+<div class="container"></div>
+
+<style>
+	p.ck-content {
+		margin: 0;
+	}
+
+	.container {
+		padding: 20px;
+		width: 500px;
+	}
+</style>

packages/ckeditor5-editor-classic/tests/manual/classiceditor-inline-data.js

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2025, 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 '../../src/classiceditor.js';
+import { Enter } from '@ckeditor/ckeditor5-enter';
+import { Typing } from '@ckeditor/ckeditor5-typing';
+import { Heading } from '@ckeditor/ckeditor5-heading';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { Undo } from '@ckeditor/ckeditor5-undo';
+import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
+
+const container = document.querySelector( '.container' );
+
+ClassicEditor
+	.create( '<h2>Hello world!</h2><p>This is an editor instance.</p>', {
+		plugins: [ Enter, Typing, Paragraph, Undo, Heading, Bold, Italic ],
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'undo', 'redo' ],
+		modelRootElementName: '$inlineRoot',
+		viewRootElementName: 'p'
+	} )
+	.then( editor => {
+		window.editor = editor;
+		container.appendChild( editor.ui.element );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-editor-classic/tests/manual/classiceditor-inline-data.md

@@ -0,0 +1,3 @@
+1. Click "Init editor".
+2. New editor instance should be appended to the document with initial data in it. You can create more than one editor.
+3. After clicking "Destroy editor" all editors should be removed from the document.

packages/ckeditor5-editor-classic/tests/manual/classiceditor-inline.html

@@ -0,0 +1,17 @@
+<div id="editor">
+	<h2>Hello world!</h2>
+	<p>This is an editor instance.</p>
+</div>
+
+<style>
+	.ck-editor {
+		margin-top: 200px;
+		margin-left: 100px;
+		margin-bottom: 200px;
+		width: 450px;
+	}
+
+	.ck-content {
+		margin: 0;
+	}
+</style>

packages/ckeditor5-editor-classic/tests/manual/classiceditor-inline.js

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2003-2025, 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 '../../src/classiceditor.js';
+import { Enter } from '@ckeditor/ckeditor5-enter';
+import { Typing } from '@ckeditor/ckeditor5-typing';
+import { Heading } from '@ckeditor/ckeditor5-heading';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { Undo } from '@ckeditor/ckeditor5-undo';
+import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Enter, Typing, Paragraph, Undo, Heading, Bold, Italic ],
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'undo', 'redo' ],
+		menuBar: { isVisible: true },
+		modelRootElementName: '$inlineRoot',
+		viewRootElementName: 'h2'
+	} )
+	.then( newEditor => {
+		console.log( 'Editor was initialized', newEditor );
+		console.log( 'You can now play with it using global `editor` and `editable` variables.' );
+
+		window.editor = newEditor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-editor-classic/tests/manual/classiceditor-inline.md

@@ -0,0 +1,18 @@
+1. Click "Init editor".
+2. Expected:
+  * Framed editor should be created.
+  * Source element should disappear.
+  * There should be a toolbar with "Bold", "Italic", "Undo" and "Redo" buttons.
+3. Click "Destroy editor".
+4. Expected:
+  * Editor should be destroyed.
+  * Source element should be visible.
+  * The element should contain its data (updated).
+  * The 'ck-body region' should be removed.
+
+## Notes:
+
+* You can play with:
+  * `editable.isReadOnly`,
+* Changes to `editable.isFocused` should be logged to the console.
+* Features should work.

packages/ckeditor5-editor-decoupled/src/decouplededitor.ts

@@ -83,11 +83,11 @@ export class DecoupledEditor extends /* #__PURE__ */ ElementApiMixin( Editor ) {
 			secureSourceElement( this, sourceElementOrData );
 		}
 
-		this.model.document.createRoot();
+		this.model.document.createRoot( this.config.get( 'modelRootElementName' ) as string || '$root' );
 
 		const shouldToolbarGroupWhenFull = !this.config.get( 'toolbar.shouldNotGroupWhenFull' );
 		const view = new DecoupledEditorUIView( this.locale, this.editing.view, {
-			editableElement: this.sourceElement,
+			editableElement: this.sourceElement || this.config.get( 'viewRootElementName' ) as string,
 			shouldToolbarGroupWhenFull,
 			label: this.config.get( 'label' )
 		} );

packages/ckeditor5-editor-decoupled/src/decouplededitoruiview.ts

@@ -55,7 +55,7 @@ export class DecoupledEditorUIView extends EditorUIView {
 		locale: Locale,
 		editingView: EditingView,
 		options: {
-			editableElement?: HTMLElement;
+			editableElement?: HTMLElement | string; // TODO string => create DOM element name
 			shouldToolbarGroupWhenFull?: boolean;
 			label?: string | Record<string, string>;
 		} = {}

packages/ckeditor5-editor-decoupled/tests/manual/decouplededitor-editable-inline.html

@@ -0,0 +1,48 @@
+<h2>The toolbar</h2>
+<div class="toolbar-container"></div>
+
+<h2>The editable</h2>
+<div class="editable-container">
+	<blockquote class="editor__editable">
+		<h2>This element becomes the editable</h2>
+		<p>It has the initial editor data. It should keep it after the editor is destroyed too.</p>
+	</blockquote>
+</div>
+
+<style>
+	.editable-container,
+	.toolbar-container {
+		position: relative;
+		border: 1px solid red;
+	}
+
+	.editable-container::after,
+	.toolbar-container::after {
+		content: attr(class);
+		position: absolute;
+		background: red;
+		color: #fff;
+		top: 0;
+		right: 0;
+		font: 10px/2 monospace;
+		padding: .1em .3em;
+	}
+
+	.toolbar-container {
+		padding: 1em;
+	}
+
+	.editable-container {
+		padding: 3em;
+		overflow-y: scroll;
+		max-height: 300px;
+	}
+
+	.editable-container .ck-editor__editable {
+		padding: 2em;
+		border: 1px #D3D3D3 solid;
+		border-radius: var(--ck-border-radius);
+		background: white;
+		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+	}
+</style>