Add configuration for preserving block filler in editing view.

Author: Mati365

packages/ckeditor5-html-support/src/emptyblock.ts

@@ -72,8 +72,9 @@ export default class EmptyBlock extends Plugin {
 	 * @inheritDoc
 	 */
 	public afterInit(): void {
-		const { model, conversion, plugins } = this.editor;
+		const { model, conversion, plugins, config } = this.editor;
 		const schema = model.schema;
+		const preserveInEditingView = config.get( 'emptyBlock.preserveInEditingView' );
 
 		schema.extend( '$block', { allowAttributes: [ EMPTY_BLOCK_MODEL_ATTRIBUTE ] } );
 		schema.extend( '$container', { allowAttributes: [ EMPTY_BLOCK_MODEL_ATTRIBUTE ] } );
@@ -82,7 +83,12 @@ export default class EmptyBlock extends Plugin {
 			schema.extend( 'tableCell', { allowAttributes: [ EMPTY_BLOCK_MODEL_ATTRIBUTE ] } );
 		}
 
-		conversion.for( 'downcast' ).add( createEmptyBlockDowncastConverter() );
+		if ( preserveInEditingView ) {
+			conversion.for( 'downcast' ).add( createEmptyBlockDowncastConverter() );
+		} else {
+			conversion.for( 'dataDowncast' ).add( createEmptyBlockDowncastConverter() );
+		}
+
 		conversion.for( 'upcast' ).add( createEmptyBlockUpcastConverter( schema ) );
 
 		if ( plugins.has( 'ClipboardPipeline' ) ) {

packages/ckeditor5-html-support/src/emptyblockconfig.ts

@@ -0,0 +1,34 @@
+/**
+ * @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
+ */
+
+/**
+ * @module html-support/emptyblockconfig
+ */
+
+/**
+ * The configuration of the Empty Block feature.
+ * The option is used by the {@link module:html-support/emptyblock~EmptyBlock} feature.
+ *
+ * ```ts
+ * ClassicEditor
+ * 	.create( {
+ * 		emptyBlock: ... // Empty block feature config.
+ * 	} )
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ */
+export interface EmptyBlockConfig {
+
+    /**
+     * When set to `true`, empty blocks will be preserved in the editing view.
+     * When `false` (default), empty blocks are only preserved in the data output.
+     *
+     * @default false
+     */
+    preserveInEditingView?: boolean;
+}

packages/ckeditor5-html-support/tests/emptyblock.js

@@ -14,7 +14,6 @@ import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard.js';
 import GeneralHtmlSupport from '../src/generalhtmlsupport.js';
 import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model.js';
-import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view.js';
 import { INLINE_FILLER } from '@ckeditor/ckeditor5-engine/src/view/filler.js';
 
 import EmptyBlock from '../src/emptyblock.js';
@@ -327,23 +326,61 @@ describe( 'EmptyBlock', () => {
 		} );
 	} );
 
-	describe( 'editing pipeline', () => {
-		it( 'should preserve empty paragraph in editing view', () => {
-			setModelData( model,
-				'<paragraph htmlEmptyBlock="true"></paragraph>' +
-				'<paragraph></paragraph>'
+	describe( 'config.emptyBlock.preserveInEditingView', () => {
+		it( 'should preserve empty blocks in editing view when enabled', async () => {
+			await editor.destroy();
+
+			editor = await ClassicTestEditor.create( element, {
+				plugins: [ Paragraph, TableEditing, EmptyBlock, Heading, ListEditing, BlockQuote, Clipboard ],
+				emptyBlock: {
+					preserveInEditingView: true
+				}
+			} );
+
+			editor.setData( '<p></p><p>foo</p>' );
+
+			const domRoot = editor.editing.view.getDomRoot();
+
+			expect( domRoot.innerHTML ).to.equal(
+				'<p>' + INLINE_FILLER + '</p>' +
+                '<p>foo</p>'
 			);
+		} );
 
-			expect( getViewData( view ) ).to.equal(
-				'<p>[]</p>' +
-				'<p></p>'
+		it( 'should not preserve empty blocks in editing view when disabled', async () => {
+			await editor.destroy();
+
+			editor = await ClassicTestEditor.create( element, {
+				plugins: [ Paragraph, TableEditing, EmptyBlock, Heading, ListEditing, BlockQuote, Clipboard ],
+				emptyBlock: {
+					preserveInEditingView: false
+				}
+			} );
+
+			editor.setData( '<p></p><p>foo</p>' );
+
+			const domRoot = editor.editing.view.getDomRoot();
+
+			expect( domRoot.innerHTML ).to.equal(
+				'<p><br data-cke-filler="true"></p>' +
+                '<p>foo</p>'
 			);
+		} );
+
+		it( 'should not preserve empty blocks in editing view by default', async () => {
+			await editor.destroy();
+
+			editor = await ClassicTestEditor.create( element, {
+				plugins: [ Paragraph, TableEditing, EmptyBlock, Heading, ListEditing, BlockQuote, Clipboard ]
+			} );
+
+			editor.setData( '<p></p><p>foo</p>' );
 
 			const domRoot = editor.editing.view.getDomRoot();
 
 			expect( domRoot.innerHTML ).to.equal(
-				'<p>' + INLINE_FILLER + '</p>' +
-				'<p><br data-cke-filler="true"></p>'
+				'<p><br data-cke-filler="true"></p>' +
+                '<p>foo</p>'
 			);
 		} );
 	} );

packages/ckeditor5-html-support/tests/manual/emptyblock.html

@@ -23,9 +23,20 @@
 			background: #f0f0f0;
 			white-space: pre-wrap;
 		}
+
+		.controls {
+			margin-bottom: 20px;
+		}
 	</style>
 </head>
 
+<div class="controls">
+	<label>
+		<input type="checkbox" id="preserve-empty-blocks" checked>
+		Preserve empty blocks in editing view
+	</label>
+</div>
+
 <div class="editors-container">
 	<div class="editor-wrapper">
 		<h2>Editor 1 (with EmptyBlocks)</h2>
@@ -34,6 +45,11 @@ <h2>Editor 1 (with EmptyBlocks)</h2>
 			<p></p>
 			<p>&nbsp;</p>
 			<p>Some text</p>
+			<ul>
+				<li></li>
+				<li></li>
+				<li></li>
+			</ul>
 			<table>
 				<tr>
 					<td>Table cell 1</td>
@@ -59,6 +75,11 @@ <h2>Editor 2 (without EmptyBlocks)</h2>
 			<p></p>
 			<p>&nbsp;</p>
 			<p>Another text</p>
+			<ul>
+				<li></li>
+				<li></li>
+				<li></li>
+			</ul>
 			<table>
 				<tr>
 					<td>Table cell 1</td>

packages/ckeditor5-html-support/tests/manual/emptyblock.js

@@ -20,12 +20,24 @@ const config = {
 	toolbar: [ 'sourceEditing', '|', 'insertTable', 'bulletedList', 'numberedList', 'bold', 'italic', 'heading' ]
 };
 
-ClassicEditor
-	.create( document.getElementById( 'editor1' ), config )
-	.then( instance => {
-		window.editor1 = instance;
-		CKEditorInspector.attach( { 'With EmptyBlock plugin': instance } );
-	} );
+const preserveEmptyBlocksCheckbox = document.getElementById( 'preserve-empty-blocks' );
+
+function createEditor1( preserveInEditingView ) {
+	return ClassicEditor
+		.create( document.getElementById( 'editor1' ), {
+			...config,
+			emptyBlock: {
+				preserveInEditingView
+			}
+		} )
+		.then( instance => {
+			window.editor1 = instance;
+			CKEditorInspector.attach( { 'With EmptyBlock plugin': instance } );
+		} );
+}
+
+// Initial editor creation
+createEditor1( preserveEmptyBlocksCheckbox.checked );
 
 ClassicEditor
 	.create( document.getElementById( 'editor2' ), {
@@ -45,3 +57,16 @@ function handleClipboardEvent( evt ) {
 
 document.addEventListener( 'copy', handleClipboardEvent );
 document.addEventListener( 'cut', handleClipboardEvent );
+
+preserveEmptyBlocksCheckbox.addEventListener( 'change', async () => {
+	const editorElement = document.getElementById( 'editor1' );
+	const editorData = window.editor1.getData();
+
+	await window.editor1.destroy();
+
+	// Restore any content that was in the editor
+	editorElement.innerHTML = editorData;
+
+	// Create new editor instance with updated configuration
+	await createEditor1( preserveEmptyBlocksCheckbox.checked );
+} );