Merge pull request #13265 from ckeditor/ck/13164-fix-plaintableoutput…

…-and-tablecolumn-resize-compatibility

Fix (table): The editor should not crash on `getData()` call if the `PlainTableOutput` is used with the `TableColumnResize` feature. Closes #13164.

packages/ckeditor5-table/src/tablecolumnresize/converters.js

@@ -68,9 +68,11 @@ export function downcastTableColumnWidthsAttribute() {
 	return dispatcher => dispatcher.on( 'attribute:columnWidths:table', ( evt, data, conversionApi ) => {
 		const viewWriter = conversionApi.writer;
 		const modelTable = data.item;
+		const viewElement = conversionApi.mapper.toViewElement( modelTable );
 
-		const viewTable = [ ...conversionApi.mapper.toViewElement( modelTable ).getChildren() ]
-			.find( viewChild => viewChild.is( 'element', 'table' ) );
+		const viewTable = viewElement.is( 'element', 'table' ) ?
+			viewElement :
+			Array.from( viewElement.getChildren() ).find( viewChild => viewChild.is( 'element', 'table' ) );
 
 		if ( data.attributeNewValue ) {
 			// If new value is the same as the old, the operation is not applied (see the `writer.setAttributeOnItem()`).

packages/ckeditor5-table/tests/tablecolumnresize/tablecolumnresizeediting.js

@@ -11,6 +11,7 @@ import TableCaption from '../../src/tablecaption';
 import TableToolbar from '../../src/tabletoolbar';
 import Table from '../../src/table';
 import TableProperties from '../../src/tableproperties';
+import PlainTableOutput from '../../src/plaintableoutput';
 
 // ClassicTestEditor can't be used, as it doesn't handle the focus, which is needed to test resizer visual cues.
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
@@ -2558,6 +2559,53 @@ describe( 'TableColumnResizeEditing', () => {
 				expect( initialViewColumnWidthsPx ).to.deep.equal( finalViewColumnWidthsPx );
 			} );
 		} );
+
+		describe( 'PlainTableOutput', () => {
+			let ptoEditor;
+
+			beforeEach( async () => {
+				ptoEditor = await createEditor( {
+					plugins: [ Table, TableColumnResize, Paragraph, PlainTableOutput ]
+				} );
+			} );
+
+			afterEach( async () => {
+				await ptoEditor.destroy();
+			} );
+
+			it( 'should not crash', () => {
+				const table = modelTable(
+					[ [ 'Some', 'Data' ] ],
+					{ columnWidths: '80%,20%', tableWidth: '100%' }
+				);
+				setModelData( ptoEditor.model, table );
+
+				expect( () => ptoEditor.getData() ).to.not.throw();
+			} );
+
+			it( 'should produce table not wrapped in <figure>', () => {
+				const table = modelTable(
+					[ [ 'Some', 'Data' ] ],
+					{ columnWidths: '80%,20%', tableWidth: '100%' }
+				);
+				setModelData( ptoEditor.model, table );
+
+				expect( ptoEditor.getData() ).to.equal(
+					'<table class="ck-table-resized" style="width:100%;">' +
+						'<colgroup>' +
+							'<col style="width:80%;">' +
+							'<col style="width:20%;">' +
+						'</colgroup>' +
+						'<tbody>' +
+							'<tr>' +
+								'<td>Some</td>' +
+								'<td>Data</td>' +
+							'</tr>' +
+						'</tbody>' +
+					'</table>'
+				);
+			} );
+		} );
 	} );
 
 	async function createEditor( configCustomization, additionalPlugins ) {