Better detection of heading rows

[jodator]

Right now when upcasting table row it is assumed that headingRows attribute is calculated only from number of rows of first <thead> section (following <thead> sections are treated as normal rows).

The other case might be when a <table> element does not have <thead> nor <tbody> sections or a <tbody> section with "pseudo table head".

The "pseudo table head" is a row which contains only <th> elements.

We might detect such rows as heading rows because right now they will be counted as heading columns which will result in wrong table:

For instance such table:

<table>
	<tr>
		<th>a</th>
		<th>b</th>
	</tr>
	<tr>
		<th>c</th>
		<td>d</td>
	</tr>
</table>

will be converted to a model representation:

<table headingColumns="2">
    <tableRow>...</tableRow>
    <tableRow>...</tableRow>
</table>

but should be:

<table headingColumns="1" headingRows="1">
    <tableRow>...</tableRow>
    <tableRow>...</tableRow>
</table>

[Reinmar]

This will be important for pasting. And for handling some legacy data (although, of course, CKEditor 4 does produce <thead> element so I rather mean a content produced by other editors).

[jodator]

Another case - non-semantic heading section in <tbody>:

<table>
  <caption>Concerts</caption>
  <tbody>
  <tr>
    <th>Date</th>
    <th>Event</th>
    <th>Venue</th>
  </tr>
  <tr>
    <td>12 Feb</td>
    <td>Waltz with Strauss</td>
    <td>Main Hall</td>
  </tr>
  <tr>
    <td>24 Mar</td>
    <td>The Obelisks</td>
    <td>West Wing</td>
  </tr>
  <tr>
    <td>14 Apr</td>
    <td>The What</td>
    <td>Main Hall</td>
  </tr>
  </tbody>
</table>

Edit: reported also in ckeditor/ckeditor5-table#109.

[jodator]

@Reinmar We might consider a simple fix for this. A case when there is a row with only <th> elements in it looks like heading row and should not be taken into consideration when detecting number of heading columns.

It keeps coming back from time to time: ckeditor/ckeditor5-table#109, ckeditor/ckeditor5-table#140.

[Reinmar]

A case when there is a row with only <th> elements in it looks like heading row and should not be taken into consideration when detecting number of heading columns.

👍

In general, I think we need two separate mechanisms:

1. For detecting header rows. If thead is present, then the number of rowa in that thead. If not, then we should count all trs that have only th children.

2. For detecting header cols. That'd require checking how many ths are there at the beginning of each rows. The minimal number is the number of heading cols. For example:

   tr: th, th, td, td
   tr: th, td, th, th
   tr: th, th, td, td
   

   That'd be 1 because in the second row there's only one th at the beginning.

If you agree that this algorithm makes sense, then we could try to go this way. I don't mean that we have to rewrite what we have right now, but we should keep it in mind when making decisions about fixing some issues.

[jodator]

2\. For detecting header cols.

This is how this works now:
https://github.com/ckeditor/ckeditor5-table/blob/33d25d2f48f740c3d6cf2c83b7e1ba4a0fbdcbb2/src/converters/upcasttable.js#L226-L235

We only lacks the mechanism of not counting columns in heading row.

[mlewand]

Also got it reported from one of our users today.

[Reinmar]

FYI: https://ckeditor.github.io/editor-recommendations/features/table.html

[Reinmar]

Notes:

• Let's not break scenarios that work fine already.
• Let's support reasonable scenarios mentioned in this ticket and Standard cell td gets converted to header cell th when both are placed inside tbody tag #11536. The expected result is that header rows and columns are recognized in these scenarios and set in the model as headingRows and headingCols attributes. NOTE: That means that the exact input markup will still be reformatted a bit. Example below.

For this input:

<table>
	<tr>
		<th>a</th>
		<th>b</th>
	</tr>
	<tr>
		<th>c</th>
		<td>d</td>
	</tr>
</table>

This is the expected output:

<figure class=table>
	<table>
		<thead>
			<tr>
				<th>a</th>
				<th>b</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>c</th>
				<td>d</td>
			</tr>
		</tbody>
	</table>
</figure>