Add table.TableColumnResize for formats with arbitrary HTML supported

This seems like a bug report.

Will have to check if there is an upstream issue for this yet…

I think we need to add this plugin.

table.TableColumnResize

Great, thanks!

Can you please check what markup this generated in CKEditor 4 vs 5? I bet that this functionality was only available in , because I bet it uses style="width:50px" etc.

Per https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/features..., the CKE5 plugin generates <colgroup> and <col style="width:*">, which would confirm that suspicion.

So I think that the attached patch should make it work for you, but only on . Apply it, clear caches, then test it in please 😊

If this lands, it will only land in 10.1, not 9.5.

IDK if we can even write tests for this — dragging and dropping handles is very tricky … 😅

I have tested the patch with Drupal 9.5. Here are the details.

The patch applies successfully to 9.5.6 and 9.5.7 but with 9.5.7 it is not working. Because of this downgrade. https://www.drupal.org/project/linkit/issues/3350252 📌 LinkIt requires new minor version for Drupal 10.1.x, since CKEditor 5 got a major version update (v35 → v36) Fixed .

With 9.5.6, initially, it was not working. After removing the plugin condition ckeditor5_arbitraryHtmlSupport from the patch, then it started working in the backend. So not sure why this condition is added.

But then in the backend, it was working fine, but on the frontend, every cell was of the same width. While I have changed the width of the columns in the backend.

And it was because the allowed tags for not added to the Limit allowed HTML tags and correct faulty HTML section of the editor settings.

As this field is a read-only field in the CKEditor 5, So I manually added these tags <col style> <colgroup> to the allowed html section in the exported configuration of the input format and import the configuration again.

After that, it worked fine on frontend as well.

So not sure, why these tags were not added to the allowed HTML tags with cache clear after applying the patch. While it is clearly stated that With CKEditor 5 this is a read-only field. The allowed HTML tags and attributes are determined by the CKEditor 5 configuration. Manually removing tags would break enabled functionality, and any manually added tags would be removed by CKEditor 5 on render.

And it was because the allowed tags were not added to the Limit allowed HTML tags and correct faulty HTML section of the input format settings.

That filter must be DISABLED for style attributes to work, which is why I said in #6 to test with . That's also why the ckeditor5_arbitraryHtmlSupport condition was present: to ensure that filter_html (or other HTML restricting filters) were disabled.

Can you please upload the complete config export of your text format & text editor? That'll help clear things up! 😊

Let me know if this seemed off

Tested on 10.1 with a standard install
On a basic page content type using Full HTML.
Table still inserts correctly with no issue

Resizing does seem to work but noticed something weird. Once I've clicked a column, even if I don't resize, the column widgets seem to be set. So if I add a new column the table doesn't grow and all the columns now seem squeezed together.

@smustgrave Can you also reproduce that at https://ckeditor.com/docs/ckeditor5/latest/features/tables/tables.html#demo? 🤔

Yup able to reproduce it.

Only moving to PNMI to know if that's default behavior.

I … don't know? 😅

I do not know every CKEditor 5 feature!

Basically: if it behaves the same way inside Drupal as it does outside Drupal, I'd say it works as intended.

However, perhaps you found a bug with this particular feature? Does anything of these issues sound like what you're referring to? https://github.com/search?q=repo%3Ackeditor%2Fckeditor5+TableColumnResiz...

Postponing on ✨ Support CKEditor 5's table properties and cell properties plugins in Full HTML Fixed .

✨ Support CKEditor 5's table properties and cell properties plugins in Full HTML Fixed landed, this is now unblocked.

Now that ✨ Support CKEditor 5's table properties and cell properties plugins in Full HTML Fixed is in, let's do this too! Rebased and tweaked to match what #3324225 did.

This works for me locally 😊

I had a node with a table in it already using Full HTML
Applied the patch
Cleared cache
But can't resize the columns

If I switch to Basic HTML and back to Full HTML, the table is now full width and I can resize.

That's really odd — it worked fine here 🤔 Any chance you hadn't cleared the browser cache? 😇

Sorry, but not working for me. I see an error in the browser console

Uncaught CKEditorError: t is undefined
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-t is undefined

and there no any "columns resizing" data, just "clear" table.

Steps to reproduce

• Apply #21 patch
• Open CKEditor 5 (configured as FULL etc.)
• Add a table and resize some column
• Try to save a node OR
• Try to clock "Source" in the editor
• ERROR: Uncaught CKEditorError: t is undefined ...

Could you please post the full stack trace for that Uncaught CKEditorError: t is undefined ... error? 🙏

Yes, sure! Will this "table resize" work on Drupal 9? :(

Uncaught CKEditorError: t is undefined
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-t is undefined
    un https://local.ddev.site/core/assets/vendor/ckeditor5/table/table.js?v=35.4.0:5
    un https://local.ddev.site/core/assets/vendor/ckeditor5/table/table.js?v=35.4.0:5
    fire https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    _testAndFire https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    _testAndFireAddAttributes https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    convertAttributes https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    elementToStructure https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    fire https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    _testAndFire https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    _convertInsert https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    convert https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    toView https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    stringify https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    get https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    decorate https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    fire https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    e https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    _showSourceEditing https://local.ddev.site/core/assets/vendor/ckeditor5/source-editing/source-editing.js?v=35.4.0:5
    init https://local.ddev.site/core/assets/vendor/ckeditor5/source-editing/source-editing.js?v=35.4.0:5
    fire https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    set https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    init https://local.ddev.site/core/assets/vendor/ckeditor5/source-editing/source-editing.js?v=35.4.0:5
    fire https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    click https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    s https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    fire https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    t https://local.ddev.site/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5

I wonder why the "Limit allowed HTML tags and correct faulty HTML" filter must be disabled and/or "Full HTML" allowed. Wouldn't it be sufficient if the "style" attribute was permitted for td/th ?

Looks like I managed to get it to work: TableColumnResize for CKEditor 5 on Drupal 9.5.10! Update CKEditor 5 to 36.0.1 (from default 35.4.0) was mandatory in my case.

Steps to apply:

1. Update CKEditor 5 to 36.0.1 > Patch from https://www.drupal.org/project/drupal/issues/3344083#comment-14982229 📌 Update CKEditor 5 to 36.0.1 Fixed
2. Support CKEditor 5's table properties and cell properties plugins in Full HTML > Patch from https://git.drupalcode.org/project/drupal/-/commit/93aa6832a5841aaed32d8...
3. Add table.TableColumnResize for formats with arbitrary HTML supported > Patch https://www.drupal.org/project/drupal/issues/3353010#comment-15144906 ✨ Add table.TableColumnResize for formats with arbitrary HTML supported RTBC
4. Disabled "Limit allowed HTML tags and correct faulty HTML" in `/admin/config/content/formats/manage/full_html` settings.

Many thanks to everyone who worked on this!

Ah … you were on an ancient version of Drupal core and CKEditor 5! I strongly recommend you to update to Drupal 10.1 😇😊

But … cool that you got it working there too! 👍

Per #23 and #28.

So I added the Table plugin to both Basic and Full HTML.
I can resize on Full but can't on Basic, and not sure why.

The issue I saw when switching back n forth seems to have been resolved though.

Glad to hear, that’s progress! 👍 Thanks for testing again!

See #6, #12, the issue linked in #20 and the title: it is intentional that this only works in Full HTML, because it requires style attributes, which are forbidden in every format that uses the filter_html filter 😊

In that case it was working fine for full_html

The last submitted patch, 21: 3353010-21.patch, failed testing. View results →

Unrelated random fail. Re-testing #21, back to RTBC.

The last submitted patch, 21: 3353010-21.patch, failed testing. View results →

Restarted test but believe to be random

The last submitted patch, 21: 3353010-21.patch, failed testing. View results →

Again random fail.

I'm triaging RTBC issues → . I read the IS and the comments. I didn't find any unanswered questions.

Leaving at RTBC.

The Needs Review Queue Bot → tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request → . Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

Will convert to MR…

Green. Back to RTBC.

(Was un-RTBC'd by @needs-review-queue-bot after having been RTBC for 1.5 month.)

I needed this functionality to work in combination with filter_html, so I came up with this sandbox here: https://www.drupal.org/sandbox/s_leu/3413350 → . Posting here before promoting it to a full project to ask if it makes more sense to turn it into a core patch rather than having it as contrib module? What do you think?

I went ahead and converted the sandbox into a new plugin within the ckeditor5 module. As outline above, the previous approach may not be sufficient for anyone that needs to have filter_html enabled.

The new plugin will allow table resizing without the need to disable filter_html. Instead of setting a the style attribute on the <col> and <table> elements, the plugin adds the width inside a data attribute which is whitelisted in the plugin definition, so the width passed through filter_html. A new filter filter_resize_tablecolumns (which needs to run after filter_html) then parses the width from the data attributes and adds them as style attributes.

The only issue I noticed so far is that tables don't really apply the widths if there's text content with long words without spaces inside the columns:

This could be fixed using a word-break: break-all; style on the <td> elements of the table. The width styles on the <col> elements of the table will then apply again:

Interesting that you went with data-resize-width instead of style=…, but that then indeed requires an additional filter plugin.

What you did is a fine approach, but to me the real question is: 🤓 In other words: we can do this for this one upstream/official CKEditor 5 plugin. But are we going to do this for every such plugin that uses a style attribute? With a corresponding filter plugin for each? 😬 That will quickly become unwieldy IMO!

Then I think https://www.drupal.org/project/extended_html_filter → is a more sustainable approach? It does require an additional contrib module though. Perhaps long-term we could work on moving this functionality into Drupal core? 🤔

Very curious to hear your thoughts! 😊

@Wim Leers: Well, to be fair though a similar approach is also already used for data-align, data-caption etc. Does it scale? Well, that's a very valid question you bring up. But you can see from these examples that it's not unheard of that simple isolated features bring in their own full-fledged text filter.

If we really want to make this more universal, then we'd probably have to create a general filter that turns all data-style-foo="bar" into style="foo:bar". We must make sure that there's a restricted list of "foo"'s this will work with of course - for security reasons. Other CKE plugins then might hook into this and just say hey, I've got a new attr=>style mapping here. Don't know if it isn't getting too complex though.

Unfortunately, "width: attr(data-width)" isn't yet allowed in CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/attr). This would make it possible to solve it in CSS alone without any text-filter.

The Needs Review Queue Bot → tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

So testing out the MR and something I noticed with both solutions is that it can't "push" other columns. Example I have 4 columns and I'm trying to expand column 2 but I have to expand 3 and 4 first. May be a follow up though.

It seems that #47 has sort of derailed this issue 😅 Rather than simply using the upstream plugin and requiring to NOT use filter_html, @s_leu has (impressively! 🤯) built something that DOES work with filter_html but requires an entirely new server-side filter plugin.

That is not the scope of this issue. That's a much bigger scope, a much bigger feature request. I estimate it has a <5% chance of ever landing in Drupal core, because it's such a niche need. That should be a contrib module IMHO 😇

@s_leu: What do you think? Why do you think this belongs in Drupal core? 😊

Oh, I missed #46:

I needed this functionality to work in combination with filter_html, so I came up with this sandbox here: https://www.drupal.org/sandbox/s_leu/3413350 → . Posting here before promoting it to a full project to ask if it makes more sense to turn it into a core patch rather than having it as contrib module? What do you think?

Let me translate #52 into a response to that:

• No, I don't think this makes sense for Drupal core.
• Yes, I do think that promoting that to a full project makes total sense! 👍

Patch #21 working fine for me with drupal 10.2.7

@s_leu +1 to promotion of https://www.drupal.org/sandbox/s_leu/3413350 → to a full project. I tested it and seems to work correctly for the filter_html use case.

I've tested with Drupal 10.3.2 which adds a feature to maintain table/cell properties ( https://www.drupal.org/project/drupal/issues/3324225 ✨ Support CKEditor 5's table properties and cell properties plugins in Full HTML Fixed ), using patch #21 as it seems to be enough to just enable the plugin.

Standalone features seem to be working properly, but I can see there is a conflict and UI glitch when trying to use TableProperties and TableColumnResize plugins together.

Here's what I've tried to do:

Create new table and use table/table cell properties to define fixed widths:
1. table width: 500px
2. first cell width: 250px
3. second cell width: 250px

And here's the HTML produced:

<table style="width:500px;" data-once="js-once-set-responsive-tables" class="no-th">
<tbody tabindex="0">
<tr data-once="js-once-check-th-position">
<td style="width:250px;">250px</td>
<td style="width:250px;">250px</td>
</tr>
</tbody>
</table>

Now edit content again, and use TableColumnResize feature to change width of cells using your mouse, this will result with following markup:

<table class="ck-table-resized no-th" style="width:61.9%;" data-once="js-once-set-responsive-tables">
<colgroup>
<col style="width:17.67%;">
<col style="width:82.33%;"></colgroup>
<tbody tabindex="0">
<tr data-once="js-once-check-th-position">
<td style="width:250px;">250px</td>
<td style="width:250px;">250px</td>
</tr>
</tbody>
</table>

Result:
- in the markup we can see the result of both plugins used
- <colgroup> will take higher priority , the style of <td> elements won't apply anymore, so all style attributes applied on <td> elements become useless
- The UI becomes confusing, there is no way to clean up or override done with TableColumnResize, aka there is no way to remove <colgroup> element. I can still drag columns to change their size, but using cell properties to change anything does take any effect.
- if within the editor I try to change cell properties, I can't see instant results as well ( which was totally fine before applying TableColumnResize change )

So maybe some extra logic would be needed to make both plugins work in parallel, for example:
- when using TableColumnResize plugin to resize columns, popupalate <colgroup>, but clean up styles from <td> elements
- when using TableProperties plugin, remove <colgroup> populated by TableColumnResize plugin to resolve conflict between both plugins?
- or maybe just allow to use one of those plugins at the same time?

Aha, I've just found that this behavior can be reproduced in CKEDitor demo:
https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-f...

and similar issue is reported in ckeditor issue queue: https://github.com/ckeditor/ckeditor5/issues/14236