@ckeditor/ckeditor5-table 35.0.1 → 35.2.0

package/src/tablecolumnresize/converters.js

@@ -7,35 +7,34 @@
  * @module table/tablecolumnresize/converters
  */
 
-/* istanbul ignore file */
-
-import { getNumberOfColumn } from './utils';
+import { normalizeColumnWidths } from './utils';
 
 /**
  * Returns a helper for converting a view `<colgroup>` and `<col>` elements to the model table `columnWidths` attribute.
  *
  * Only the inline width, provided as a percentage value, in the `<col>` element is taken into account. If there are not enough `<col>`
- * elements matching this condition, the special value 'auto' is returned. It indicates that the width of a column will be automatically
+ * elements matching this condition, the special value `auto` is returned. It indicates that the width of a column will be automatically
  * calculated in the
- * {@link module:table/tablecolumnresize/tablecolumnresizeediting~TableColumnResizeEditing#_setupPostFixer post-fixer}, depending
+ * {@link module:table/tablecolumnresize/tablecolumnresizeediting~TableColumnResizeEditing#_registerPostFixer post-fixer}, depending
  * on the available table space.
  *
- * @param {module:core/editor/editor~Editor} editor The editor instance.
+ * @param {module:core/plugin~Plugin} tableUtilsPlugin The {@link module:table/tableutils~TableUtils} plugin instance.
  * @returns {Function} Conversion helper.
  */
-export function upcastColgroupElement( editor ) {
+export function upcastColgroupElement( tableUtilsPlugin ) {
 	return dispatcher => dispatcher.on( 'element:colgroup', ( evt, data, conversionApi ) => {
-		const modelTable = data.modelCursor.findAncestor( 'table' );
+		const viewColgroupElement = data.viewItem;
 
-		if ( !modelTable ) {
+		if ( !conversionApi.consumable.test( viewColgroupElement, { name: true } ) ) {
 			return;
 		}
 
-		const modelWriter = conversionApi.writer;
-		const viewColgroupElement = data.viewItem;
-		const numberOfColumns = getNumberOfColumn( modelTable, editor );
+		conversionApi.consumable.consume( viewColgroupElement, { name: true } );
 
-		const columnWidthsAttribute = [ ...Array( numberOfColumns ).keys() ]
+		const modelTable = data.modelCursor.findAncestor( 'table' );
+		const numberOfColumns = tableUtilsPlugin.getColumns( modelTable );
+
+		let columnWidths = [ ...Array( numberOfColumns ).keys() ]
 			.map( columnIndex => {
 				const viewChild = viewColgroupElement.getChild( columnIndex );
 
@@ -50,10 +49,13 @@ export function upcastColgroupElement( editor ) {
 				}
 
 				return viewColWidth;
-			} )
-			.join( ',' );
+			} );
+
+		if ( columnWidths.includes( 'auto' ) ) {
+			columnWidths = normalizeColumnWidths( columnWidths ).map( width => width + '%' );
+		}
 
-		modelWriter.setAttribute( 'columnWidths', columnWidthsAttribute, modelTable );
+		conversionApi.writer.setAttribute( 'columnWidths', columnWidths.join( ',' ), modelTable );
 	} );
 }
 
@@ -71,11 +73,14 @@ export function downcastTableColumnWidthsAttribute() {
 			.find( viewChild => viewChild.is( 'element', 'table' ) );
 
 		if ( data.attributeNewValue ) {
-			if ( data.attributeNewValue !== data.attributeOldValue ) {
-				insertColgroupElement( viewWriter, viewTable, data.attributeNewValue );
-			}
+			// If new value is the same as the old, the operation is not applied (see the `writer.setAttributeOnItem()`).
+			// OTOH the model element has the attribute already applied, so we can't compare the values.
+			// Hence we need to just recreate the <colgroup> element every time.
+			insertColgroupElement( viewWriter, viewTable, data.attributeNewValue );
+			viewWriter.addClass( 'ck-table-resized', viewTable );
 		} else {
 			removeColgroupElement( viewWriter, viewTable );
+			viewWriter.removeClass( 'ck-table-resized', viewTable );
 		}
 	} );
 }
@@ -86,7 +91,7 @@ export function downcastTableColumnWidthsAttribute() {
 // @private
 // @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter View writer instance.
 // @param {module:engine/view/element~Element} viewTable View table.
-// @param {String} columnWidthsAttribute Column width attribute from model table.
+// @param {String} columnWidthsAttribute Column widths attribute from model table.
 function insertColgroupElement( viewWriter, viewTable, columnWidthsAttribute ) {
 	const columnWidths = columnWidthsAttribute.split( ',' );
 
@@ -94,10 +99,10 @@ function insertColgroupElement( viewWriter, viewTable, columnWidthsAttribute ) {
 
 	if ( !viewColgroupElement ) {
 		viewColgroupElement = viewWriter.createContainerElement( 'colgroup' );
-	}
-
-	for ( const viewChild of [ ...viewColgroupElement.getChildren() ] ) {
-		viewWriter.remove( viewChild );
+	} else {
+		for ( const viewChild of [ ...viewColgroupElement.getChildren() ] ) {
+			viewWriter.remove( viewChild );
+		}
 	}
 
 	for ( const columnIndex of Array( columnWidths.length ).keys() ) {
@@ -118,9 +123,5 @@ function insertColgroupElement( viewWriter, viewTable, columnWidthsAttribute ) {
 function removeColgroupElement( viewWriter, viewTable ) {
 	const viewColgroupElement = [ ...viewTable.getChildren() ].find( viewElement => viewElement.is( 'element', 'colgroup' ) );
 
-	if ( !viewColgroupElement ) {
-		return;
-	}
-
 	viewWriter.remove( viewColgroupElement );
 }