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.
ckeditor · Jan 13, 2023 · 97377f5 · 97377f5
2 parents e2cf011 + 512f13a
commit 97377f5
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/packages/ckeditor5-table/src/tablecolumnresize/converters.js b/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()`).

diff --git a/packages/ckeditor5-table/tests/tablecolumnresize/tablecolumnresizeediting.js b/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 ) {