Merge pull request #16039 from not-paul-v/fix-template-get-data

Fix (engine): HTML Template elements are now properly handled in downcast and upcast conversion.
ckeditor · Apr 29, 2024 · ecaeaa9 · ecaeaa9
2 parents 12d0e5d + 54ebadd
commit ecaeaa9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/packages/ckeditor5-engine/src/view/domconverter.ts b/packages/ckeditor5-engine/src/view/domconverter.ts
@@ -460,7 +460,11 @@ export default class DomConverter {
 
 			if ( options.withChildren !== false ) {
 				for ( const child of this.viewChildrenToDom( viewElementOrFragment, options ) ) {
-					domElement.appendChild( child );
+					if ( domElement instanceof HTMLTemplateElement ) {
+						domElement.content.appendChild( child );
+					} else {
+						domElement.appendChild( child );
+					}
 				}
 			}
 
@@ -734,8 +738,17 @@ export default class DomConverter {
 		options: Parameters<DomConverter[ 'domToView' ]>[ 1 ] = {},
 		inlineNodes: Array<ViewNode> = []
 	): IterableIterator<ViewNode> {
-		for ( let i = 0; i < domElement.childNodes.length; i++ ) {
-			const domChild = domElement.childNodes[ i ];
+		// Get child nodes from content document fragment if element is template
+		let childNodes: Array<ChildNode> = [];
+
+		if ( domElement instanceof HTMLTemplateElement ) {
+			childNodes = [ ...domElement.content.childNodes ];
+		} else {
+			childNodes = [ ...domElement.childNodes ];
+		}
+
+		for ( let i = 0; i < childNodes.length; i++ ) {
+			const domChild = childNodes[ i ];
 			const generator = this._domToView( domChild, options, inlineNodes );
 
 			// Get the first yielded value or a returned value.

diff --git a/packages/ckeditor5-engine/tests/controller/datacontroller.js b/packages/ckeditor5-engine/tests/controller/datacontroller.js
@@ -134,6 +134,20 @@ describe( 'DataController', () => {
 
 			expect( stringify( output ) ).to.equal( 'foo' );
 		} );
+
+		it( 'should parse template with children', () => {
+			schema.register( 'container', { inheritAllFrom: '$block' } );
+			schema.register( 'paragraph', { inheritAllFrom: '$block' } );
+			schema.extend( 'paragraph', { allowIn: [ 'container' ] } );
+
+			upcastHelpers.elementToElement( { view: 'template', model: 'container' } );
+			upcastHelpers.elementToElement( { view: 'p', model: 'paragraph' } );
+
+			const output = data.parse( '<template><p>foo</p></template>' );
+
+			expect( output ).to.instanceof( ModelDocumentFragment );
+			expect( stringify( output ) ).to.equal( '<container><paragraph>foo</paragraph></container>' );
+		} );
 	} );
 
 	describe( 'toModel()', () => {
@@ -590,6 +604,19 @@ describe( 'DataController', () => {
 
 			console.warn.restore();
 		} );
+
+		it( 'should get template with children', () => {
+			schema.register( 'container', { inheritAllFrom: '$block' } );
+			schema.extend( 'paragraph', { allowIn: [ 'container' ] } );
+			setData( model, '<container><paragraph>foo</paragraph></container>' );
+
+			downcastHelpers.elementToElement( {
+				model: 'container',
+				view: 'template'
+			} );
+
+			expect( data.get() ).to.equal( '<template><p>foo</p></template>' );
+		} );
 	} );
 
 	describe( 'stringify()', () => {