Add EmptyBlock plugin that prevents adding   in exported data.

packages/ckeditor5-engine/src/view/domconverter.ts

@@ -725,6 +725,11 @@ export default class DomConverter {
 		// Whitespace cleaning.
 		this._processDomInlineNodes( null, inlineNodes, options );
 
+		// This was a single block filler so just remove it.
+		if ( this.blockFillerMode == 'br' && isViewBrFiller( node ) ) {
+			return null;
+		}
+
 		// Text not got trimmed to an empty string so there is no result node.
 		if ( node.is( '$text' ) && node.data.length == 0 ) {
 			return null;
@@ -770,7 +775,10 @@ export default class DomConverter {
 					this._processDomInlineNodes( domElement, inlineNodes, options );
 				}
 
-				yield viewChild;
+				// Yield only if this is not a block filler.
+				if ( !( this.blockFillerMode == 'br' && isViewBrFiller( viewChild ) ) ) {
+					yield viewChild;
+				}
 
 				// Trigger children handling.
 				generator.next();
@@ -1184,12 +1192,9 @@ export default class DomConverter {
 			return domNode.isEqualNode( BR_FILLER_REF );
 		}
 
-		// Special case for <p><br></p> in which <br> should be treated as filler even when we are not in the 'br' mode. See ckeditor5#5564.
-		if (
-			( domNode as DomElement ).tagName === 'BR' &&
-			hasBlockParent( domNode, this.blockElements ) &&
-			( domNode as DomElement ).parentNode!.childNodes.length === 1
-		) {
+		// Special case for <p><br></p> in which <br> should be treated as filler even when we are not in the 'br' mode.
+		// See https://github.com/ckeditor/ckeditor5/issues/5564.
+		if ( isOnlyBrInBlock( domNode as DomElement, this.blockElements ) ) {
 			return true;
 		}
 
@@ -1373,7 +1378,9 @@ export default class DomConverter {
 		},
 		inlineNodes: Array<ViewNode>
 	): IterableIterator<ViewNode | ViewDocumentFragment | null> {
-		if ( this.isBlockFiller( domNode ) ) {
+		// Special case for <p><br></p> in which <br> should be treated as filler even when we are not in the 'br' mode.
+		// See https://github.com/ckeditor/ckeditor5/issues/5564.
+		if ( this.blockFillerMode != 'br' && isOnlyBrInBlock( domNode as DomElement, this.blockElements ) ) {
 			return null;
 		}
 
@@ -1557,6 +1564,23 @@ export default class DomConverter {
 				// the inline filler is removed only after the data is initially processed (by the `.replace` above). See ckeditor5#692.
 				data = getDataWithoutFiller( data );
 
+				// Block filler handling.
+				if ( this.blockFillerMode != 'br' && node.parent ) {
+					if ( isViewMarkedNbspFiller( node.parent, data ) ) {
+						data = '';
+
+						// Mark block element as it has a block filler and remove the `<span data-cke-filler="true">` element.
+						if ( node.parent.parent ) {
+							node.parent.parent._setCustomProperty( '$hasBlockFiller', true );
+							node.parent._remove();
+						}
+					}
+					else if ( isViewNbspFiller( node.parent, data, this.blockElements ) ) {
+						data = '';
+						node.parent._setCustomProperty( '$hasBlockFiller', true );
+					}
+				}
+
 				// At this point we should have removed all whitespaces from DOM text data.
 				//
 				// Now, We will reverse the process that happens in `_processDataFromViewText`.
@@ -1856,7 +1880,7 @@ function forEachDomElementAncestor( element: DomElement, callback: ( node: DomEl
 }
 
 /**
- * Checks if given node is a nbsp block filler.
+ * Checks if given DOM node is a nbsp block filler.
  *
  * A &nbsp; is a block filler only if it is a single child of a block element.
  *
@@ -1879,6 +1903,60 @@ function hasBlockParent( domNode: DomNode, blockElements: ReadonlyArray<string>
 	return !!parent && !!( parent as DomElement ).tagName && blockElements.includes( ( parent as DomElement ).tagName.toLowerCase() );
 }
 
+/**
+ * Checks if given view node is a nbsp block filler.
+ *
+ * A &nbsp; is a block filler only if it is a single child of a block element.
+ */
+function isViewNbspFiller( parent: ViewNode | ViewDocumentFragment, data: string, blockElements: Array<string> ): boolean {
+	return (
+		data == '\u00A0' &&
+		parent &&
+		parent.is( 'element' ) &&
+		parent.childCount == 1 &&
+		blockElements.includes( parent.name )
+	);
+}
+
+/**
+ * Checks if given view node is a marked-nbsp block filler.
+ *
+ * A &nbsp; is a block filler only if it is wrapped in `<span data-cke-filler="true">` element.
+ */
+function isViewMarkedNbspFiller( parent: ViewNode | ViewDocumentFragment, data: string ): boolean {
+	return (
+		data == '\u00A0' &&
+		parent &&
+		parent.is( 'element', 'span' ) &&
+		parent.childCount == 1 &&
+		parent.hasAttribute( 'data-cke-filler' )
+	);
+}
+
+/**
+ * Checks if given view node is a br block filler.
+ *
+ * A <br> is a block filler only if it has data-cke-filler attribute set.
+ */
+function isViewBrFiller( node: ViewNode ): boolean {
+	return (
+		node.is( 'element', 'br' ) &&
+		node.hasAttribute( 'data-cke-filler' )
+	);
+}
+
+/**
+ * Special case for `<p><br></p>` in which `<br>` should be treated as filler even when we are not in the 'br' mode.
+ */
+function isOnlyBrInBlock( domNode: DomElement, blockElements: Array<string> ): boolean {
+	// See https://github.com/ckeditor/ckeditor5/issues/5564.
+	return (
+		domNode.tagName === 'BR' &&
+		hasBlockParent( domNode, blockElements ) &&
+		domNode.parentNode!.childNodes.length === 1
+	);
+}
+
 /**
  * Log to console the information about element that was replaced.
  * Check UNSAFE_ELEMENTS for all recognized unsafe elements.

packages/ckeditor5-engine/tests/view/domconverter/dom-to-view.js

@@ -171,6 +171,16 @@ describe( 'DomConverter', () => {
 			expect( converter.domToView( domFiller ) ).to.be.null;
 		} );
 
+		it( 'should ignore a block filler inside a paragraph', () => {
+			// eslint-disable-next-line new-cap
+			const domFiller = BR_FILLER( document );
+			const domP = createElement( document, 'p', undefined, [ domFiller ] );
+
+			const viewP = converter.domToView( domP );
+			expect( viewP.is( 'element', 'p' ) ).to.be.true;
+			expect( viewP.childCount ).to.equal( 0 );
+		} );
+
 		it( 'should return null for empty text node', () => {
 			const textNode = document.createTextNode( '' );
 

packages/ckeditor5-engine/tests/view/domconverter/whitespace-handling-integration.js

@@ -3,12 +3,16 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+/* globals document */
+
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor.js';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
 import ImageInlineEditing from '@ckeditor/ckeditor5-image/src/image/imageinlineediting.js';
 import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter.js';
+import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement.js';
 
 import { getData } from '../../../src/dev-utils/model.js';
+import { getFillerOffset } from '../../../src/index.js';
 
 // NOTE:
 // dev utils' setData() loses white spaces so don't use it for tests here!!!
@@ -193,13 +197,60 @@ describe( 'DomConverter – whitespace handling – integration', () => {
 			expect( editor.getData() ).to.equal( '<p>&nbsp;foo&nbsp;</p>' );
 		} );
 
-		it( 'single nbsp inside blocks are ignored', () => {
+		it( 'single nbsp inside blocks is ignored (NBSP block filler)', () => {
 			editor.setData( '<p>&nbsp;</p>' );
 
 			expect( getData( editor.model, { withoutSelection: true } ) )
 				.to.equal( '<paragraph></paragraph>' );
 
 			expect( editor.getData() ).to.equal( '' ); // trimmed
+			expect( editor.getData( { trim: false } ) ).to.equal( '<p>&nbsp;</p>' );
+		} );
+
+		it( 'nbsp with spaces inside blocks is ignored (NBSP block filler)', () => {
+			editor.setData( '<p>\n    &nbsp;\n  </p>' );
+
+			expect( getData( editor.model, { withoutSelection: true } ) )
+				.to.equal( '<paragraph></paragraph>' );
+
+			expect( editor.getData() ).to.equal( '' ); // trimmed
+			expect( editor.getData( { trim: false } ) ).to.equal( '<p>&nbsp;</p>' );
+		} );
+
+		it( 'single nbsp inside blocks is ignored (marked NBSP block filler)', () => {
+			editor.data.processor.useFillerType( 'marked' );
+
+			editor.conversion.for( 'upcast' ).add( dispatcher => {
+				dispatcher.on( 'element', ( evt, data ) => {
+					expect( data.viewItem.name ).to.not.equal( 'span' );
+				} );
+			} );
+
+			editor.setData( '<p><span data-cke-filler="true">&nbsp;</span></p>' );
+
+			expect( getData( editor.model, { withoutSelection: true } ) )
+				.to.equal( '<paragraph></paragraph>' );
+
+			expect( editor.getData() ).to.equal( '' ); // trimmed
+			expect( editor.getData( { trim: false } ) ).to.equal( '<p><span data-cke-filler="true">&nbsp;</span></p>' );
+		} );
+
+		it( 'nbsp with spaces inside blocks are ignored (marked NBSP block filler)', () => {
+			editor.data.processor.useFillerType( 'marked' );
+
+			editor.conversion.for( 'upcast' ).add( dispatcher => {
+				dispatcher.on( 'element', ( evt, data ) => {
+					expect( data.viewItem.name ).to.not.equal( 'span' );
+				} );
+			} );
+
+			editor.setData( '<p>\n    <span data-cke-filler="true">&nbsp;</span>\n  </p>' );
+
+			expect( getData( editor.model, { withoutSelection: true } ) )
+				.to.equal( '<paragraph></paragraph>' );
+
+			expect( editor.getData() ).to.equal( '' ); // trimmed
+			expect( editor.getData( { trim: false } ) ).to.equal( '<p><span data-cke-filler="true">&nbsp;</span></p>' );
 		} );
 
 		it( 'all whitespaces together are ignored', () => {
@@ -878,6 +929,114 @@ describe( 'DomConverter – whitespace handling – integration', () => {
 				'</ul>'
 			);
 		} );
+
+		describe( 'text nodes parse and stringify', () => {
+			function testTexts( inputTexts, processedText, outputText ) {
+				if ( typeof inputTexts == 'string' ) {
+					inputTexts = [ inputTexts ];
+				}
+
+				outputText = outputText !== undefined ? outputText : inputTexts.join( '' );
+
+				it( `spaces in a text node: "${ inputTexts.join( '|' ) }" -> "${ processedText }" -> "${ outputText }"`, () => {
+					const domElement = createElement( document, 'p', {}, [] );
+
+					for ( const text of inputTexts ) {
+						domElement.appendChild( document.createTextNode( text.replace( /_/g, '\u00A0' ) ) );
+					}
+
+					const viewElement = editor.data.processor.domConverter.domToView( domElement );
+					let viewData = '';
+
+					viewElement.getFillerOffset = getFillerOffset;
+
+					for ( const child of viewElement.getChildren() ) {
+						viewData += child.data.replace( /\u00A0/g, '_' );
+					}
+
+					expect( viewData, 'processed' ).to.equal( processedText );
+
+					const outputDomElement = editor.data.processor.domConverter.viewToDom( viewElement );
+
+					expect( outputDomElement.innerHTML.replace( /&nbsp;/g, '_' ), 'output' ).to.equal( outputText );
+				} );
+			}
+
+			// Block filler.
+			testTexts( '_', '', '_' );
+			testTexts( ' _ ', '', '_' );
+			testTexts( '  _  ', '', '_' );
+
+			// At the beginning.
+			testTexts( '_x', ' x' );
+			testTexts( '_ x', '  x' );
+			testTexts( '_ _x', '   x' );
+			testTexts( '_ _ x', '    x' );
+
+			// At the end.
+			testTexts( 'x_', 'x ' );
+			testTexts( 'x _', 'x  ' );
+			testTexts( 'x __', 'x   ' );
+			testTexts( 'x _ _', 'x    ' );
+
+			// In the middle.
+			testTexts( 'x x', 'x x' );
+			testTexts( 'x _x', 'x  x' );
+			testTexts( 'x _ x', 'x   x' );
+			testTexts( 'x _ _x', 'x    x' );
+
+			// Complex.
+			testTexts( '_x_', ' x ' );
+			testTexts( '_ x _x _', '  x  x  ' );
+			testTexts( '_ _x x _', '   x x  ' );
+			testTexts( '_ _x x __', '   x x   ' );
+			testTexts( '_ _x _ _x_', '   x    x ' );
+
+			// With hard &nbsp;
+			testTexts( '_x', ' x' );
+			testTexts( '__x', ' _x' );
+			testTexts( '___x', ' __x' );
+			testTexts( '__ x', ' _ x' );
+
+			testTexts( 'x_', 'x ' );
+			testTexts( 'x__', 'x_ ' );
+			testTexts( 'x___', 'x__ ' );
+
+			testTexts( 'x_x', 'x_x' );
+			testTexts( 'x___x', 'x___x' );
+			testTexts( 'x____x', 'x____x' );
+			testTexts( 'x__ x', 'x__ x' );
+			testTexts( 'x___ x', 'x___ x' );
+			testTexts( 'x_ _x', 'x_  x' );
+			testTexts( 'x __x', 'x  _x' );
+			testTexts( 'x _ x', 'x   x' );
+			testTexts( 'x __ _x', 'x  _  x' );
+
+			// Two text nodes.
+			testTexts( [ 'x', 'y' ], 'xy' );
+			testTexts( [ 'x ', 'y' ], 'x y' );
+			testTexts( [ 'x _', 'y' ], 'x  y' );
+			testTexts( [ 'x __', 'y' ], 'x   y' );
+			testTexts( [ 'x _  _', 'y' ], 'x    y', 'x _ _y' );
+
+			testTexts( [ 'x', ' y' ], 'x y' );
+			testTexts( [ 'x_', ' y' ], 'x  y' );
+			testTexts( [ 'x _', ' y' ], 'x   y' );
+			testTexts( [ 'x __', ' y' ], 'x    y' );
+			testTexts( [ 'x _ _', ' y' ], 'x     y' );
+
+			testTexts( [ 'x', ' _y' ], 'x  y' );
+			testTexts( [ 'x_', ' _y' ], 'x   y' );
+			testTexts( [ 'x _', ' _y' ], 'x    y' );
+			testTexts( [ 'x __', ' _y' ], 'x     y' );
+			testTexts( [ 'x _ _', ' _y' ], 'x      y' );
+
+			// Some tests with hard &nbsp;
+			testTexts( [ 'x', '_y' ], 'x_y' );
+			testTexts( [ 'x_', 'y' ], 'x_y' );
+			testTexts( [ 'x__', ' y' ], 'x_  y' );
+			testTexts( [ 'x_ _', ' y' ], 'x_   y' );
+		} );
 	} );
 
 	// https://github.com/ckeditor/ckeditor5/issues/1024

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

@@ -19,7 +19,8 @@ import type {
 	StyleElementSupport,
 	TableElementSupport,
 	HtmlComment,
-	FullPage
+	FullPage,
+	EmptyBlock
 } from './index.js';
 
 declare module '@ckeditor/ckeditor5-core' {
@@ -50,5 +51,6 @@ declare module '@ckeditor/ckeditor5-core' {
 		[ TableElementSupport.pluginName ]: TableElementSupport;
 		[ HtmlComment.pluginName ]: HtmlComment;
 		[ FullPage.pluginName ]: FullPage;
+		[ EmptyBlock.pluginName ]: EmptyBlock;
 	}
 }