Problem/Motivation
In Drupal 10.4.x using CKEditor 5, when applying a border to a table with the following settings:
Color: red (using HSL, e.g., hsl(0, 75%, 60%)),
Style: solid, and Width: 1px,
the visual editor displays the border correctly. However, when switching to source editing,
the generated HTML for the table (and its cells) omits the border-width
property.
This causes the published content to not render the expected border.
The generated HTML looks similar to the following:
<table style="border-color:hsl(0, 75%, 60%);border-style:solid;width:100%;">
<tbody>
<tr>
<td style="border-color:hsl(0, 75%, 60%);width:33%;">a</td>
<td style="border-color:hsl(0, 75%, 60%);width:33%;">b</td>
<td style="border-color:hsl(0, 75%, 60%);width:33%;">c</td>
</tr>
<tr>
<td style="border-color:hsl(0, 75%, 60%);width:33%;">d</td>
<td style="border-color:hsl(0, 75%, 60%);width:33%;">e</td>
<td style="border-color:hsl(0, 75%, 60%);width:33%;">f</td>
</tr>
</tbody>
</table>
It can be seen that the border-width: 1px;
property is missing, even though it is explicitly set in the visual editor.
This issue does not occur when using other border styles (e.g., "dotted"), which suggests a specific behavior or bug in the handling of a solid border with a width of 1px in CKEditor 5 integrated in Drupal 10.4.x.
Steps to Reproduce
- Install Drupal 10.4.x with CKEditor 5 enabled.
- Create or edit content that contains a table.
- Use the visual editor to apply the following border settings to the table (and its cells):
- Color: red (via HSL, e.g., hsl(0, 75%, 60%))
- Style: solid
- Width: 1px
- Save the content and switch to source editing to inspect the generated HTML.
- Notice that the
style
attribute on the table and its cells does not include border-width:1px;
.
- As a result, the published content does not render the border as expected.
Remaining Tasks
- Investigate the CKEditor 5 table plugin code within Drupal 10.4.x to identify the logic that omits
border-width
.
- Develop and test a patch that resolves this behavior.
- Verify the solution across different text formats (e.g., Full HTML, Basic HTML) to ensure consistency.
- Update any relevant documentation if necessary.
User Interface Changes
No direct changes have been detected in the user interface; the issue only affects the generated HTML and the rendering of the published content.
Introduced Terminology
No new terminology has been introduced in this issue.
API Changes
No API changes are required. The adjustment is limited to the internal processing of inline styles within the CKEditor 5 table plugin.
Data Model Changes
No changes have been reported in Drupal's data model.
Additional Information
Screenshots:
Before update (Drupal 10.3.9):
Screenshot_1.jpg
After update (Drupal 10.4.x):
Screenshot_2.jpg