Table column widths calculated incorrectly when a td class applies horizontal padding

[jeromegwilson]

Background

We're using TinyMCE v5.6.1 with @tinymce/tinymce-react v3.8.0 to implement rich text editing on a site that uses the UK goverment design system: https://design-system.service.gov.uk/

One aspect of the design system is that it requires almost all HTML elements to implement specific classes. For example, all TDs must have class="govuk-table__cell". This has meant that we've had to write code to watch for relevant content node insertions or modifications and "forcibly" ensure that classes are set according to the GDS specifications. Generally speaking this approach works well.

See our (not standalone) implementation here: https://gist.github.com/jeromegwilson/29c52a34d5fb3f641042c568b9e3dd58

We've also implemented our own word count, rather than using the plugin, as we need to be able to count words server-side as well, but that's another story.

The Problem

When table cells are given a class that implements horizontal padding TinyMCE calculates column widths such that the last column is squashed up very small.

editor.dom.setAttrib(editor.dom.select('td'), 'class', 'govuk-table__cell');

.govuk-table__cell {
    padding: 10px 20px 10px 0;
    border-bottom: 1px solid #b1b4b6;
    text-align: left;
    vertical-align: top;
}

Workaround

We can mitigate this by overriding the padding on the table cell: content_style: 'td.govuk-table__cell { padding-left: 0; padding-right: 0 }'

This results in correct column widths being calculated by TinyMCE at the expense of some difference between the table as rendered and how it looks in the editor.

Testing

This has been tested in the latest versions of Chrome and Firefox.

[lostkeys]

Hi @jeromegwilson! I'm sorry but I'm not able to replicate your issue. Can you recreate it in a TinyMCE fiddle for me?

[lostkeys]

Meanwhile, here is a "TinyMCE native" example setting classes on <td>: https://fiddle.tiny.cloud/Xvhaab

[jeromegwilson]

Big thanks for your quick response Fredrik! 😄 We found today that delaying setting the class on a TD until the next tick (after the triggering event) resolves the issue, presumably because the class is then applied after the column width calculation has happened.

setTimeout(() => editor.dom.setAttrib(editor.dom.select('td'), 'class', 'govuk-table__cell'), 0);

I'll take some time as soon as possible to create a stand-alone JsFiddle that demonstrates the issue (or possibly demonstrates that it's been user-error all along 😁).

[tiny-stale-bot]

This issue is stale because it has been open 365 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 30 days.

[tiny-stale-bot]

This issue was closed because it has been stalled for 30 days with no activity.