[upstream] [Table] CKEditor 5 editing table with rowspans removes header property

Created on 20 October 2023, about 1 year ago
Updated 1 July 2024, 6 months ago

Problem/Motivation

When you edit a saved CKEditor 5 table with multiple column headers, and at least one of those columns contains a merged cell, then the right most header column loses the header property.

Steps to reproduce

  1. Create a table using CKEditor 5 (see img 1)
  2. Merge two of the cells in the first column
  3. Highlight the first column and mark as a header
  4. Highlight the second column and mark as a header
  5. Save and view the page. See that the two header columns are properly marked up (see img 2)
  6. Edit the page, notice that the right header column is no longer marked as a header (see img 3)
🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
CKEditor 5 

Last updated 2 days ago

Created by

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

  • Issue created by @justmeplease
  • I've had a look through upstream issues and I think https://github.com/ckeditor/ckeditor5/issues/14826 might be the same problem?

    There's a pull request in there which is waiting for review, I'm not sure how well it would apply to Drupal though...

  • Status changed to Postponed: needs info about 1 year ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    https://github.com/ckeditor/ckeditor5/issues/14826 indeed seems right!

    Can you please provide sample markup of what you'd like CKEditor 5 be able to support? That way I could write test coverage to ensure that once this is fixed upstream, that we'd never regress against this in Drupal core 👍

  • Hey Wim,

    Sounds good, here's some markup for the 'Table 1' example above.
    <table><thead><tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr></thead><tbody><tr><th>Header</th><th>Header</th><td>Data</td><td>Data</td></tr><tr><th rowspan="2">Header</th><th>Header</th><td>Data</td><td>Data</td></tr><tr><th>Header</th><td>Data</td><td>Data</td></tr></tbody></table>

    It might be a little tricky to test since the problem only manifests when the editor is activated. Expected result is that opening the content in edit mode and saving immediately would result in the same HTML; instead the markup is changed to:
    <table><thead><tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr></thead><tbody><tr><th>Header</th><td>Header</td><td>Data</td><td>Data</td></tr><tr><th rowspan="2">Header</th><td>Header</td><td>Data</td><td>Data</td></tr><tr><td>Header</td><td>Data</td><td>Data</td></tr></tbody></table>
    (second column has been converted from th to td)

  • Status changed to Needs work about 1 year ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Thank you! That's all I need :) Don't know when I'll get to writing this test coverage, but I will eventually.

    (It actually won't be tricky; we have plenty of examples of FunctionalJavaScript tests for CKEditor 5 that perform the steps you describe. See CKEditor5Test for a bunch of examples — it could be a valuable learning experience for you on how to write a test like this: once you get the hang of it, it's a huge enabler! 😊)

  • Hello,

    I think I get the same issue with differents steps to reproduce.

    1. Create a 3x4 table
    2. Merge the 2 last rows in the 1st column

    3. Save the block, the layout is fine.

    4. Edit the table again, the option is "Column header" is off again in the tooltips but stays active in front.

    If I unmerge the last 2 rows from the 1st column, then the option keep is ON state in accordance to the front layout.

Production build 0.71.5 2024