Browse Source

Added: Heading columns calculation should consider `colspan` attribute.

Maciej Gołaszewski 7 years ago
parent
commit
9e1330d922

+ 7 - 2
packages/ckeditor5-table/src/converters.js

@@ -232,7 +232,13 @@ function _scanRow( tr, tableMeta, firstThead ) {
 
 	// Count starting adjacent <th> elements of a <tr>.
 	while ( index < childCount && tr.getChild( index ).name === 'th' ) {
-		headingCols++;
+		const td = tr.getChild( index );
+
+		// Adjust columns calculation by the number of extended columns.
+		const hasAttribute = td.hasAttribute( 'colspan' );
+		const tdSize = hasAttribute ? parseInt( td.getAttribute( 'colspan' ) ) : 1;
+
+		headingCols = headingCols + tdSize;
 		index++;
 	}
 
@@ -240,4 +246,3 @@ function _scanRow( tr, tableMeta, firstThead ) {
 		tableMeta.headingColumns = headingCols;
 	}
 }
-

+ 38 - 0
packages/ckeditor5-table/tests/converters.js

@@ -291,6 +291,44 @@ describe( 'Table converters', () => {
 					'</table>'
 				);
 			} );
+
+			it( 'should calculate heading columns of cells with colspan', () => {
+				editor.setData(
+					'<table>' +
+					'<tbody>' +
+					// This row has colspan of 3 so it should be the whole table should have 3 heading columns.
+					'<tr><th colspan="3">21</th><td>24</td></tr>' +
+					'<tr><th>31</th><th>32</th><td>33</td><td>34</td></tr>' +
+					'<tr><th colspan="2">41</th><th>43</th><td>44</td></tr>' +
+					'<tr><td>51</td><th>52</th><th>53</th><th>54</th></tr>' +
+					'</tbody>' +
+					'<thead>' +
+					// This row has 4 ths but it is a thead.
+					'<tr><th>11</th><th>12</th><th>13</th><th>14</th></tr>' +
+					'</thead>' +
+					'</table>'
+				);
+
+				expectModel(
+					'<table headingColumns="3" headingRows="1">' +
+					'<tableRow>' +
+					'<tableCell>11</tableCell><tableCell>12</tableCell><tableCell>13</tableCell><tableCell>14</tableCell>' +
+					'</tableRow>' +
+					'<tableRow>' +
+					'<tableCell colspan="3">21</tableCell><tableCell>24</tableCell>' +
+					'</tableRow>' +
+					'<tableRow>' +
+					'<tableCell>31</tableCell><tableCell>32</tableCell><tableCell>33</tableCell><tableCell>34</tableCell>' +
+					'</tableRow>' +
+					'<tableRow>' +
+					'<tableCell colspan="2">41</tableCell><tableCell>43</tableCell><tableCell>44</tableCell>' +
+					'</tableRow>' +
+					'<tableRow>' +
+					'<tableCell>51</tableCell><tableCell>52</tableCell><tableCell>53</tableCell><tableCell>54</tableCell>' +
+					'</tableRow>' +
+					'</table>'
+				);
+			} );
 		} );
 	} );