Contrib.social

[BUG] CKEditor 5 in Drupal 10.4.x does not include border-width for tables with a 1px solid border

Open on Drupal.org →
Created on 22 March 2025, 6 months ago

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

  1. Install Drupal 10.4.x with CKEditor 5 enabled.
  2. Create or edit content that contains a table.
  3. 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
  4. Save the content and switch to source editing to inspect the generated HTML.
  5. Notice that the style attribute on the table and its cells does not include border-width:1px;.
  6. 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

🐛 Bug report
Status

Active

Version

10.4 ✨

Component

ckeditor5.module

Created by

jeanbryanx

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

Comments & Activities

  • Issue created by @jeanbryanx
  • Comment 6 months ago →
    cilefen

    At a glance this seems to be how CKEditor does things, not Drupal. That is: if you pick "Solid" for the border style and "1px" for "Width, CKEditor does not create an attribute mentioning width. CKEditor will do so if you select some other options, like 2px and other styles. But it does so differently. Sometimes CKEditor adds a style for "border", and in other cases it uses the "border-width" style.

    It would be good to know:

    1. What difficulties or problems does this behavior cause?
    2. Is the behavior the same on the CKEditor demos? If that's the case this isn't to do with Drupal itself.

    I am updating some issue metadata according to the project guidelines.

  • Comment 4 months ago →
    gaddman

    On a fresh install of 10.4.7 I see the same behaviour.
    Some of the borders are still displayed, but it depends on the theme — with Claro a red outer border plus thin grey border between rows, and with Olivero just a red border in between rows. I gather that's due to an update to styles in #3021388 → , and doesn't seem possible to override while using CKEditor5.

  • Status changed to Postponed: needs info about 1 month ago
  • Comment about 1 month ago →
    🇵🇰Pakistan akhtardaha

    The issue arises from CKEditor's default 1px border-width. To allow users to apply default browser or theme typography borders, To address the issue with CKEditor's default border-width, consider these alternatives:

    1. Add theme CSS: Include table { border-width: 1px; } in your theme's style file. This sets a default border width, unaffected by user-applied borders.
    2. Use relative units: Replace 1px with 0.063rem (equivalent to 1px). This allows for more flexibility.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024