@ckeditor/ckeditor5-table 32.0.0 → 34.1.0

package/src/converters/downcast.js

@@ -13,123 +13,57 @@ import { toWidget, toWidgetEditable } from 'ckeditor5/src/widget';
 /**
  * Model table element to view table element conversion helper.
  *
- * This conversion helper creates the whole table element with child elements.
- *
- * @param {Object} options
- * @param {Boolean} options.asWidget If set to `true`, the downcast conversion will produce a widget.
- * @returns {Function} Conversion helper.
+ * @param {module:table/tableutils~TableUtils} tableUtils The `TableUtils` plugin instance.
+ * @param {Object} [options]
+ * @param {Boolean} [options.asWidget] If set to `true`, the downcast conversion will produce a widget.
+ * @returns {Function} Element creator.
  */
-export function downcastInsertTable( options = {} ) {
-	return dispatcher => dispatcher.on( 'insert:table', ( evt, data, conversionApi ) => {
-		const table = data.item;
-
-		if ( !conversionApi.consumable.consume( table, 'insert' ) ) {
-			return;
+export function downcastTable( tableUtils, options = {} ) {
+	return ( table, { writer } ) => {
+		const headingRows = table.getAttribute( 'headingRows' ) || 0;
+		const tableSections = [];
+
+		// Table head slot.
+		if ( headingRows > 0 ) {
+			tableSections.push(
+				writer.createContainerElement( 'thead', null,
+					writer.createSlot( element => element.is( 'element', 'tableRow' ) && element.index < headingRows )
+				)
+			);
 		}
 
-		// Consume attributes if present to not fire attribute change downcast
-		conversionApi.consumable.consume( table, 'attribute:headingRows:table' );
-		conversionApi.consumable.consume( table, 'attribute:headingColumns:table' );
-
-		const asWidget = options && options.asWidget;
-
-		const figureElement = conversionApi.writer.createContainerElement( 'figure', { class: 'table' } );
-		const tableElement = conversionApi.writer.createContainerElement( 'table' );
-		conversionApi.writer.insert( conversionApi.writer.createPositionAt( figureElement, 0 ), tableElement );
-
-		let tableWidget;
-
-		if ( asWidget ) {
-			tableWidget = toTableWidget( figureElement, conversionApi.writer );
+		// Table body slot.
+		if ( headingRows < tableUtils.getRows( table ) ) {
+			tableSections.push(
+				writer.createContainerElement( 'tbody', null,
+					writer.createSlot( element => element.is( 'element', 'tableRow' ) && element.index >= headingRows )
+				)
+			);
 		}
 
-		const tableWalker = new TableWalker( table );
-
-		const tableAttributes = {
-			headingRows: table.getAttribute( 'headingRows' ) || 0,
-			headingColumns: table.getAttribute( 'headingColumns' ) || 0
-		};
-
-		// Cache for created table rows.
-		const viewRows = new Map();
+		const figureElement = writer.createContainerElement( 'figure', { class: 'table' }, [
+			// Table with proper sections (thead, tbody).
+			writer.createContainerElement( 'table', null, tableSections ),
 
-		for ( const tableSlot of tableWalker ) {
-			const { row, cell } = tableSlot;
-
-			const tableRow = table.getChild( row );
-			const trElement = viewRows.get( row ) || createTr( tableElement, tableRow, row, tableAttributes, conversionApi );
-			viewRows.set( row, trElement );
-
-			// Consume table cell - it will be always consumed as we convert whole table at once.
-			conversionApi.consumable.consume( cell, 'insert' );
+			// Slot for the rest (for example caption).
+			writer.createSlot( element => !element.is( 'element', 'tableRow' ) )
+		] );
 
-			const insertPosition = conversionApi.writer.createPositionAt( trElement, 'end' );
-
-			createViewTableCellElement( tableSlot, tableAttributes, insertPosition, conversionApi, options );
-		}
-
-		// Insert empty TR elements if there are any rows without anchored cells. Since the model is always normalized
-		// this can happen only in the document fragment that only part of the table is down-casted.
-		for ( const tableRow of table.getChildren() ) {
-			const rowIndex = tableRow.index;
-
-			// Make sure that this is a table row and not some other element (i.e., caption).
-			if ( tableRow.is( 'element', 'tableRow' ) && !viewRows.has( rowIndex ) ) {
-				viewRows.set( rowIndex, createTr( tableElement, tableRow, rowIndex, tableAttributes, conversionApi ) );
-			}
-		}
-
-		const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
-
-		conversionApi.mapper.bindElements( table, asWidget ? tableWidget : figureElement );
-		conversionApi.writer.insert( viewPosition, asWidget ? tableWidget : figureElement );
-	} );
+		return options.asWidget ? toTableWidget( figureElement, writer ) : figureElement;
+	};
 }
 
 /**
- * Model row element to view `<tr>` element conversion helper.
- *
- * This conversion helper creates the whole `<tr>` element with child elements.
+ * Model table row element to view `<tr>` element conversion helper.
  *
- * @returns {Function} Conversion helper.
+ * @returns {Function} Element creator.
  */
-export function downcastInsertRow() {
-	return dispatcher => dispatcher.on( 'insert:tableRow', ( evt, data, conversionApi ) => {
-		const tableRow = data.item;
-
-		if ( !conversionApi.consumable.consume( tableRow, 'insert' ) ) {
-			return;
-		}
-
-		const table = tableRow.parent;
-
-		const figureElement = conversionApi.mapper.toViewElement( table );
-		const tableElement = getViewTable( figureElement );
-
-		const row = table.getChildIndex( tableRow );
-
-		const tableWalker = new TableWalker( table, { row } );
-
-		const tableAttributes = {
-			headingRows: table.getAttribute( 'headingRows' ) || 0,
-			headingColumns: table.getAttribute( 'headingColumns' ) || 0
-		};
-
-		// Cache for created table rows.
-		const viewRows = new Map();
-
-		for ( const tableSlot of tableWalker ) {
-			const trElement = viewRows.get( row ) || createTr( tableElement, tableRow, row, tableAttributes, conversionApi );
-			viewRows.set( row, trElement );
-
-			// Consume table cell - it will be always consumed as we convert whole row at once.
-			conversionApi.consumable.consume( tableSlot.cell, 'insert' );
-
-			const insertPosition = conversionApi.writer.createPositionAt( trElement, 'end' );
-
-			createViewTableCellElement( tableSlot, tableAttributes, insertPosition, conversionApi, { asWidget: true } );
-		}
-	} );
+export function downcastRow() {
+	return ( tableRow, { writer } ) => {
+		return tableRow.isEmpty ?
+			writer.createEmptyElement( 'tr' ) :
+			writer.createContainerElement( 'tr' );
+	};
 }
 
 /**
@@ -138,129 +72,65 @@ export function downcastInsertRow() {
  * This conversion helper will create proper `<th>` elements for table cells that are in the heading section (heading row or column)
  * and `<td>` otherwise.
  *
- * @returns {Function} Conversion helper.
+ * @param {Object} [options]
+ * @param {Boolean} [options.asWidget] If set to `true`, the downcast conversion will produce a widget.
+ * @returns {Function} Element creator.
  */
-export function downcastInsertCell() {
-	return dispatcher => dispatcher.on( 'insert:tableCell', ( evt, data, conversionApi ) => {
-		const tableCell = data.item;
-
-		if ( !conversionApi.consumable.consume( tableCell, 'insert' ) ) {
-			return;
-		}
-
+export function downcastCell( options = {} ) {
+	return ( tableCell, { writer } ) => {
 		const tableRow = tableCell.parent;
 		const table = tableRow.parent;
 		const rowIndex = table.getChildIndex( tableRow );
 
 		const tableWalker = new TableWalker( table, { row: rowIndex } );
+		const headingRows = table.getAttribute( 'headingRows' ) || 0;
+		const headingColumns = table.getAttribute( 'headingColumns' ) || 0;
 
-		const tableAttributes = {
-			headingRows: table.getAttribute( 'headingRows' ) || 0,
-			headingColumns: table.getAttribute( 'headingColumns' ) || 0
-		};
-
-		// We need to iterate over a table in order to get proper row & column values from a walker
+		// We need to iterate over a table in order to get proper row & column values from a walker.
 		for ( const tableSlot of tableWalker ) {
-			if ( tableSlot.cell === tableCell ) {
-				const trElement = conversionApi.mapper.toViewElement( tableRow );
-				const insertPosition = conversionApi.writer.createPositionAt( trElement, tableRow.getChildIndex( tableCell ) );
+			if ( tableSlot.cell == tableCell ) {
+				const isHeading = tableSlot.row < headingRows || tableSlot.column < headingColumns;
+				const cellElementName = isHeading ? 'th' : 'td';
 
-				createViewTableCellElement( tableSlot, tableAttributes, insertPosition, conversionApi, { asWidget: true } );
-
-				// No need to iterate further.
-				return;
+				return options.asWidget ?
+					toWidgetEditable( writer.createEditableElement( cellElementName ), writer ) :
+					writer.createContainerElement( cellElementName );
 			}
 		}
-	} );
-}
-
-/**
- * Conversion helper that acts on heading column table attribute change.
- *
- * Depending on changed attributes this converter will rename `<td` to `<th>` elements or vice versa depending on the cell column index.
- *
- * @returns {Function} Conversion helper.
- */
-export function downcastTableHeadingColumnsChange() {
-	return dispatcher => dispatcher.on( 'attribute:headingColumns:table', ( evt, data, conversionApi ) => {
-		const table = data.item;
-
-		if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
-			return;
-		}
-
-		const tableAttributes = {
-			headingRows: table.getAttribute( 'headingRows' ) || 0,
-			headingColumns: table.getAttribute( 'headingColumns' ) || 0
-		};
-
-		const oldColumns = data.attributeOldValue;
-		const newColumns = data.attributeNewValue;
-
-		const lastColumnToCheck = ( oldColumns > newColumns ? oldColumns : newColumns ) - 1;
-
-		for ( const tableSlot of new TableWalker( table, { endColumn: lastColumnToCheck } ) ) {
-			renameViewTableCellIfRequired( tableSlot, tableAttributes, conversionApi );
-		}
-	} );
-}
-
-/**
- * Conversion helper that acts on a removed row.
- *
- * @returns {Function} Conversion helper.
- */
-export function downcastRemoveRow() {
-	return dispatcher => dispatcher.on( 'remove:tableRow', ( evt, data, conversionApi ) => {
-		// Prevent default remove converter.
-		evt.stop();
-		const viewWriter = conversionApi.writer;
-		const mapper = conversionApi.mapper;
-
-		const viewStart = mapper.toViewPosition( data.position ).getLastMatchingPosition( value => !value.item.is( 'element', 'tr' ) );
-		const viewItem = viewStart.nodeAfter;
-		const tableSection = viewItem.parent;
-		const viewTable = tableSection.parent;
-
-		// Remove associated <tr> from the view.
-		const removeRange = viewWriter.createRangeOn( viewItem );
-		const removed = viewWriter.remove( removeRange );
-
-		for ( const child of viewWriter.createRangeIn( removed ).getItems() ) {
-			mapper.unbindViewElement( child );
-		}
-
-		// Cleanup: Ensure that thead & tbody sections are removed if left empty after removing rows. See #6437, #6391.
-		removeTableSectionIfEmpty( 'thead', viewTable, conversionApi );
-		removeTableSectionIfEmpty( 'tbody', viewTable, conversionApi );
-	}, { priority: 'higher' } );
+	};
 }
 
 /**
  * Overrides paragraph inside table cell conversion.
  *
  * This converter:
- * * should be used to override default paragraph conversion in the editing view.
- * * It will only convert <paragraph> placed directly inside <tableCell>.
+ * * should be used to override default paragraph conversion.
+ * * It will only convert `<paragraph>` placed directly inside `<tableCell>`.
  * * For a single paragraph without attributes it returns `<span>` to simulate data table.
  * * For all other cases it returns `<p>` element.
  *
- * @param {module:engine/model/element~Element} modelElement
- * @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
- * @returns {module:engine/view/containerelement~ContainerElement|undefined}
+ * @param {Object} [options]
+ * @param {Boolean} [options.asWidget] If set to `true`, the downcast conversion will produce a widget.
+ * @returns {Function} Element creator.
  */
-export function convertParagraphInTableCell( modelElement, conversionApi ) {
-	const { writer } = conversionApi;
+export function convertParagraphInTableCell( options = {} ) {
+	return ( modelElement, { writer, consumable, mapper } ) => {
+		if ( !modelElement.parent.is( 'element', 'tableCell' ) ) {
+			return;
+		}
 
-	if ( !modelElement.parent.is( 'element', 'tableCell' ) ) {
-		return;
-	}
+		if ( !isSingleParagraphWithoutAttributes( modelElement ) ) {
+			return;
+		}
 
-	if ( isSingleParagraphWithoutAttributes( modelElement ) ) {
-		return writer.createContainerElement( 'span', { class: 'ck-table-bogus-paragraph' } );
-	} else {
-		return writer.createContainerElement( 'p' );
-	}
+		if ( options.asWidget ) {
+			return writer.createContainerElement( 'span', { class: 'ck-table-bogus-paragraph' } );
+		} else {
+			// Additional requirement for data pipeline to have backward compatible data tables.
+			consumable.consume( modelElement, 'insert' );
+			mapper.bindElements( modelElement, mapper.toViewElement( modelElement.parent ) );
+		}
+	};
 }
 
 /**
@@ -277,7 +147,7 @@ export function convertParagraphInTableCell( modelElement, conversionApi ) {
 export function isSingleParagraphWithoutAttributes( modelElement ) {
 	const tableCell = modelElement.parent;
 
-	const isSingleParagraph = tableCell.childCount === 1;
+	const isSingleParagraph = tableCell.childCount == 1;
 
 	return isSingleParagraph && !hasAnyAttribute( modelElement );
 }
@@ -296,207 +166,6 @@ function toTableWidget( viewElement, writer ) {
 	return toWidget( viewElement, writer, { hasSelectionHandle: true } );
 }
 
-// Renames an existing table cell in the view to a given element name.
-//
-// **Note** This method will not do anything if a view table cell has not been converted yet.
-//
-// @param {module:engine/model/element~Element} tableCell
-// @param {String} desiredCellElementName
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-function renameViewTableCell( tableCell, desiredCellElementName, conversionApi ) {
-	const viewWriter = conversionApi.writer;
-	const viewCell = conversionApi.mapper.toViewElement( tableCell );
-
-	const editable = viewWriter.createEditableElement( desiredCellElementName, viewCell.getAttributes() );
-	const renamedCell = toWidgetEditable( editable, viewWriter );
-
-	viewWriter.insert( viewWriter.createPositionAfter( viewCell ), renamedCell );
-	viewWriter.move( viewWriter.createRangeIn( viewCell ), viewWriter.createPositionAt( renamedCell, 0 ) );
-	viewWriter.remove( viewWriter.createRangeOn( viewCell ) );
-
-	conversionApi.mapper.unbindViewElement( viewCell );
-	conversionApi.mapper.bindElements( tableCell, renamedCell );
-}
-
-// Renames a table cell element in the view according to its location in the table.
-//
-// @param {module:table/tablewalker~TableSlot} tableSlot
-// @param {{headingColumns, headingRows}} tableAttributes
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-function renameViewTableCellIfRequired( tableSlot, tableAttributes, conversionApi ) {
-	const { cell } = tableSlot;
-
-	// Check whether current columnIndex is overlapped by table cells from previous rows.
-	const desiredCellElementName = getCellElementName( tableSlot, tableAttributes );
-
-	const viewCell = conversionApi.mapper.toViewElement( cell );
-
-	// If in single change we're converting attribute changes and inserting cell the table cell might not be inserted into view
-	// because of child conversion is done after parent.
-	if ( viewCell && viewCell.name !== desiredCellElementName ) {
-		renameViewTableCell( cell, desiredCellElementName, conversionApi );
-	}
-}
-
-// Creates a table cell element in the view.
-//
-// @param {module:table/tablewalker~TableSlot} tableSlot
-// @param {module:engine/view/position~Position} insertPosition
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-function createViewTableCellElement( tableSlot, tableAttributes, insertPosition, conversionApi, options ) {
-	const asWidget = options && options.asWidget;
-	const cellElementName = getCellElementName( tableSlot, tableAttributes );
-
-	const cellElement = asWidget ?
-		toWidgetEditable( conversionApi.writer.createEditableElement( cellElementName ), conversionApi.writer ) :
-		conversionApi.writer.createContainerElement( cellElementName );
-
-	const tableCell = tableSlot.cell;
-
-	const firstChild = tableCell.getChild( 0 );
-	const isSingleParagraph = tableCell.childCount === 1 && firstChild.name === 'paragraph';
-
-	conversionApi.writer.insert( insertPosition, cellElement );
-
-	conversionApi.mapper.bindElements( tableCell, cellElement );
-
-	// Additional requirement for data pipeline to have backward compatible data tables.
-	if ( !asWidget && isSingleParagraph && !hasAnyAttribute( firstChild ) ) {
-		const innerParagraph = tableCell.getChild( 0 );
-
-		conversionApi.consumable.consume( innerParagraph, 'insert' );
-
-		conversionApi.mapper.bindElements( innerParagraph, cellElement );
-	}
-}
-
-// Creates a `<tr>` view element.
-//
-// @param {module:engine/view/element~Element} tableElement
-// @param {module:engine/model/element~Element} tableRow
-// @param {Number} rowIndex
-// @param {{headingColumns, headingRows}} tableAttributes
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-// @returns {module:engine/view/element~Element}
-function createTr( tableElement, tableRow, rowIndex, tableAttributes, conversionApi ) {
-	// Will always consume since we're converting <tableRow> element from a parent <table>.
-	conversionApi.consumable.consume( tableRow, 'insert' );
-
-	const trElement = tableRow.isEmpty ?
-		conversionApi.writer.createEmptyElement( 'tr' ) :
-		conversionApi.writer.createContainerElement( 'tr' );
-
-	conversionApi.mapper.bindElements( tableRow, trElement );
-
-	const headingRows = tableAttributes.headingRows;
-	const tableSection = getOrCreateTableSection( getSectionName( rowIndex, tableAttributes ), tableElement, conversionApi );
-
-	const offset = headingRows > 0 && rowIndex >= headingRows ? rowIndex - headingRows : rowIndex;
-	const position = conversionApi.writer.createPositionAt( tableSection, offset );
-
-	conversionApi.writer.insert( position, trElement );
-
-	return trElement;
-}
-
-// Returns `th` for heading cells and `td` for other cells for the current table walker value.
-//
-// @param {module:table/tablewalker~TableSlot} tableSlot
-// @param {{headingColumns, headingRows}} tableAttributes
-// @returns {String}
-function getCellElementName( tableSlot, tableAttributes ) {
-	const { row, column } = tableSlot;
-	const { headingColumns, headingRows } = tableAttributes;
-
-	// Column heading are all tableCells in the first `columnHeading` rows.
-	const isColumnHeading = headingRows && headingRows > row;
-
-	// So a whole row gets <th> element.
-	if ( isColumnHeading ) {
-		return 'th';
-	}
-
-	// Row heading are tableCells which columnIndex is lower then headingColumns.
-	const isRowHeading = headingColumns && headingColumns > column;
-
-	return isRowHeading ? 'th' : 'td';
-}
-
-// Returns the table section name for the current table walker value.
-//
-// @param {Number} row
-// @param {{headingColumns, headingRows}} tableAttributes
-// @returns {String}
-function getSectionName( row, tableAttributes ) {
-	return row < tableAttributes.headingRows ? 'thead' : 'tbody';
-}
-
-// Creates or returns an existing `<tbody>` or `<thead>` element with caching.
-//
-// @param {String} sectionName
-// @param {module:engine/view/element~Element} viewTable
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-// @param {Object} cachedTableSection An object that stores cached elements.
-// @returns {module:engine/view/containerelement~ContainerElement}
-function getOrCreateTableSection( sectionName, viewTable, conversionApi ) {
-	const viewTableSection = getExistingTableSectionElement( sectionName, viewTable );
-
-	return viewTableSection ? viewTableSection : createTableSection( sectionName, viewTable, conversionApi );
-}
-
-// Finds an existing `<tbody>` or `<thead>` element or returns undefined.
-//
-// @param {String} sectionName
-// @param {module:engine/view/element~Element} tableElement
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-function getExistingTableSectionElement( sectionName, tableElement ) {
-	for ( const tableSection of tableElement.getChildren() ) {
-		if ( tableSection.name == sectionName ) {
-			return tableSection;
-		}
-	}
-}
-
-// Creates a table section at the end of the table.
-//
-// @param {String} sectionName
-// @param {module:engine/view/element~Element} tableElement
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-// @returns {module:engine/view/containerelement~ContainerElement}
-function createTableSection( sectionName, tableElement, conversionApi ) {
-	const tableChildElement = conversionApi.writer.createContainerElement( sectionName );
-
-	const insertPosition = conversionApi.writer.createPositionAt( tableElement, sectionName == 'tbody' ? 'end' : 0 );
-
-	conversionApi.writer.insert( insertPosition, tableChildElement );
-
-	return tableChildElement;
-}
-
-// Removes an existing `<tbody>` or `<thead>` element if it is empty.
-//
-// @param {String} sectionName
-// @param {module:engine/view/element~Element} tableElement
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-function removeTableSectionIfEmpty( sectionName, tableElement, conversionApi ) {
-	const tableSection = getExistingTableSectionElement( sectionName, tableElement );
-
-	if ( tableSection && tableSection.childCount === 0 ) {
-		conversionApi.writer.remove( conversionApi.writer.createRangeOn( tableSection ) );
-	}
-}
-
-// Finds a '<table>' element inside the `<figure>` widget.
-//
-// @param {module:engine/view/element~Element} viewFigure
-function getViewTable( viewFigure ) {
-	for ( const child of viewFigure.getChildren() ) {
-		if ( child.name === 'table' ) {
-			return child;
-		}
-	}
-}
-
 // Checks if an element has any attributes set.
 //
 // @param {module:engine/model/element~Element element

package/src/converters/{table-cell-refresh-post-fixer.js → table-cell-refresh-handler.js}

@@ -10,7 +10,7 @@
 import { isSingleParagraphWithoutAttributes } from './downcast';
 
 /**
- * Injects a table cell post-fixer into the model which marks the table cell in the differ to have it re-rendered.
+ * A table cell refresh handler which marks the table cell in the differ to have it re-rendered.
  *
  * Model `paragraph` inside a table cell can be rendered as `<span>` or `<p>`. It is rendered as `<span>` if this is the only block
  * element in that table cell and it does not have any attributes. It is rendered as `<p>` otherwise.
@@ -19,16 +19,12 @@ import { isSingleParagraphWithoutAttributes } from './downcast';
  * re-rendered so it changes from `<span>` to `<p>`. The easiest way to do it is to re-render the entire table cell.
  *
  * @param {module:engine/model/model~Model} model
- * @param {module:engine/conversion/mapper~Mapper} mapper
+ * @param {module:engine/controller/editingcontroller~EditingController} editing
  */
-export default function injectTableCellRefreshPostFixer( model, mapper ) {
-	model.document.registerPostFixer( () => tableCellRefreshPostFixer( model.document.differ, mapper ) );
-}
+export default function tableCellRefreshHandler( model, editing ) {
+	const differ = model.document.differ;
 
-function tableCellRefreshPostFixer( differ, mapper ) {
 	// Stores cells to be refreshed, so the table cell will be refreshed once for multiple changes.
-
-	// 1. Gather all changes inside table cell.
 	const cellsToCheck = new Set();
 
 	for ( const change of differ.getChanges() ) {
@@ -39,20 +35,13 @@ function tableCellRefreshPostFixer( differ, mapper ) {
 		}
 	}
 
-	// @if CK_DEBUG_TABLE // console.log( `Post-fixing table: Checking table cell to refresh (${ cellsToCheck.size }).` );
-	// @if CK_DEBUG_TABLE // let paragraphsRefreshed = 0;
-
 	for ( const tableCell of cellsToCheck.values() ) {
-		for ( const paragraph of [ ...tableCell.getChildren() ].filter( child => shouldRefresh( child, mapper ) ) ) {
-			// @if CK_DEBUG_TABLE // console.log( `Post-fixing table: refreshing paragraph in table cell (${++paragraphsRefreshed}).` );
-			differ.refreshItem( paragraph );
+		const paragraphsToRefresh = Array.from( tableCell.getChildren() ).filter( child => shouldRefresh( child, editing.mapper ) );
+
+		for ( const paragraph of paragraphsToRefresh ) {
+			editing.reconvertItem( paragraph );
 		}
 	}
-
-	// Always return false to prevent the refresh post-fixer from re-running on the same set of changes and going into an infinite loop.
-	// This "post-fixer" does not change the model structure so there shouldn't be need to run other post-fixers again.
-	// See https://github.com/ckeditor/ckeditor5/issues/1936 & https://github.com/ckeditor/ckeditor5/issues/8200.
-	return false;
 }
 
 // Check if given model element needs refreshing.

package/src/converters/table-headings-refresh-handler.js

@@ -0,0 +1,68 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/converters/table-heading-rows-refresh-post-fixer
+ */
+
+import TableWalker from '../tablewalker';
+
+/**
+ * A table headings refresh handler which marks the table cells or rows in the differ to have it re-rendered
+ * if the headings attribute changed.
+ *
+ * Table heading rows and heading columns are represented in the model by a `headingRows` and `headingColumns` attributes.
+ *
+ * When table headings attribute changes, all the cells/rows are marked to re-render to change between `<td>` and `<th>`.
+ *
+ * @param {module:engine/model/model~Model} model
+ * @param {module:engine/controller/editingcontroller~EditingController} editing
+ */
+export default function tableHeadingsRefreshHandler( model, editing ) {
+	const differ = model.document.differ;
+
+	for ( const change of differ.getChanges() ) {
+		let table;
+		let isRowChange = false;
+
+		if ( change.type == 'attribute' ) {
+			const element = change.range.start.nodeAfter;
+
+			if ( !element || !element.is( 'element', 'table' ) ) {
+				continue;
+			}
+
+			if ( change.attributeKey != 'headingRows' && change.attributeKey != 'headingColumns' ) {
+				continue;
+			}
+
+			table = element;
+			isRowChange = change.attributeKey == 'headingRows';
+		} else if ( change.name == 'tableRow' || change.name == 'tableCell' ) {
+			table = change.position.findAncestor( 'table' );
+			isRowChange = change.name == 'tableRow';
+		}
+
+		if ( !table ) {
+			continue;
+		}
+
+		const headingRows = table.getAttribute( 'headingRows' ) || 0;
+		const headingColumns = table.getAttribute( 'headingColumns' ) || 0;
+
+		const tableWalker = new TableWalker( table );
+
+		for ( const tableSlot of tableWalker ) {
+			const isHeading = tableSlot.row < headingRows || tableSlot.column < headingColumns;
+			const expectedElementName = isHeading ? 'th' : 'td';
+
+			const viewElement = editing.mapper.toViewElement( tableSlot.cell );
+
+			if ( viewElement && viewElement.is( 'element' ) && viewElement.name != expectedElementName ) {
+				editing.reconvertItem( isRowChange ? tableSlot.cell.parent : tableSlot.cell );
+			}
+		}
+	}
+}