[upstream] [GHS] colgroup and col elements are removed from markup when included in "Manually editable HTML tags"

Created on 29 October 2023, 8 months ago
Updated 17 November 2023, 7 months ago

I am assuming this will need to be either a bug or feature request upstream in CKEditor - but reporting here first to get feedback / ideas.

Problem/Motivation

When using CKeditor4 we had a filter format using "Limit allowed HTML tags and correct faulty HTML" which allowed colgroup and col elements to be used with class attributes. This was primarily used for sizing but also for other formatting needs, such as alignment. We rely on either source editing or CKEditor templates to provide the initial markup contain the colgroup / col elements with classes already applied.

In CKEditor5 the colgroup and col elements are removed from the markup when editing - even when added to "Manually editable HTML tags" or when using Full HTML format.

Steps to reproduce

  1. Standard install
  2. Add <col class> <colgroup class> <th scope> to "Manually editable HTML tags"
  3. Create a node, switch to source editing and add the following content:
<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <thead>
  <tr>
    <td> </td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
  </tbody>
</table>
  1. Switch out of source editing and save the node.

Proposed resolution

I believe this is similar to 🐛 [upstream] [GHS] CKEditor 5 does not retain custom HTML tags that are not defined by CKEditor 5 plugins whenever /.*/ is not allowed (e.g. when filter_html is enabled) Postponed except I do not consider colgroup and col elements to be custom elements.

Add table.TableColumnResize for formats with arbitrary HTML supported RTBC will add support for the TableColumnResize plugin which does define the colgroup and col elements. This is in my view a different use case as to allow the colgroup and col elements you also need allow all HTML / attributes and the table resizing UI.

In short - I believe col and colgroup elements should be supported without requiring the TableColumnResize plugin / allowing full HTML. The practicalities of that approach I am unsure of.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Postponed

Version

11.0 🔥

Component
CKEditor 5 

Last updated about 16 hours ago

Created by

🇳🇿New Zealand ericgsmith

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ericgsmith
  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    I am assuming this will need to be either a bug or feature request upstream in CKEditor - but reporting here first to get feedback / ideas.

    +1 😅 Glad you thought of this already! 🙏

    In CKEditor5 the colgroup and col elements are removed from the markup when editing - even when added to "Manually editable HTML tags" or when using Full HTML format.

    This sounds like a bug in CKEditor 5's Table plugin's integration with their GeneralHtmlSupport plugin.

    Please repeat this bug report upstream, including your sample markup to reproduce it. 🙏

    In short - I believe col and colgroup elements should be supported without requiring the TableColumnResize plugin / allowing full HTML. The practicalities of that approach I am unsure of.

    It is not possible to support these additional elements automatically when the Table plugin/UI is enabled, because:

    		{
    			"name": "Table column resize",
    			"className": "TableColumnResize",
    			"description": "Adds support for table column resize, which allows to set the width of each column in a table using a resize handle.",
    			"docs": "features/tables/tables-resize.html",
    			"path": "src/tablecolumnresize.js",
    			"requires": [
    				"Table"
    			],
    			"htmlOutput": [
    				{
    					"elements": "colgroup"
    				},
    				{
    					"elements": "col",
    					"styles": "width"
    				}
    			]
    

    https://github.com/ckeditor/ckeditor5/blob/v39.0.0/packages/ckeditor5-ta...

    👆 only that additional CKEditor 5 plugin is able to create those elements. But you're right that it should be possible to support them manually through the use of GHS (which in Drupal indeed corresponds to configuring them as ).

  • 🇳🇿New Zealand ericgsmith

    Thanks Wim - appreciate the direction of where to look. I've opened upstream bug https://github.com/ckeditor/ckeditor5/issues/15368

  • Status changed to Postponed 8 months ago
  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    Note that actually just a few days ago I finished 📌 [Style] Warn the user about styles for unsupported elements Needs work , which would warn you immediately that this is not yet supported. That should mitigate the frustration, but it won't unblock you. So keeping this issue around … waiting for an upstream fix :)

  • 🇳🇿New Zealand ericgsmith

    Possibly because Add table.TableColumnResize for formats with arbitrary HTML supported RTBC isn't committed yet, I seem to be able to define these elements in a custom plugin without anything complaining that table resize already defines them.

    It might break when that issue lands but for now I'm working around using https://www.drupal.org/project/ckeditor5_colgroup which I've published if anybody else is in the same situation and needs a short term fix.

    Hopefully this gets traction upstream and I can abandoned that work around

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    📌 [Style] Warn the user about styles for unsupported elements Needs work just made this easier to discover 👍

Production build 0.69.0 2024