Contrib.social

Scrollable table markup duplicated

Open on Drupal.org →
Created on 3 April 2024, 8 months ago
Updated 31 May 2024, 6 months ago

Problem/Motivation

Currently when using the "Scrollable" table option provided by "USWDS Table Toolbar Items" plugin setting it duplicates the outer div wrapper (<div class="usa-table-container--scrollable">) after altering and saving the table.

Steps to reproduce

  1. Install a fresh Drupal 10 site, download and enable this module, and login as admin
  2. Alter the "Full HTML" text format and enabled the "Use USWDS table content items in toolbar." setting in the "USWDS Table Toolbar Items" plugin. Save the changes to the text editor. Note: I also checked "Use USWDS classes for tables." under the "USWDS Overrides" plugin settings. I'm unsure if this actually affects things. I don't believe it does.
  3. Now go create a basic page, change the filter to "Full HTML" and insert a table and adjust it to be "Scrollable" with the USWDS CKEditor plugin options

    You can view the source and see the expected markup as well

  4. Save the node and go back to edit screen and view source. You'll see that while in the editor it looks the same the wrapper markup has been duplicated.

    If you save the node this appears to be now stuck this way. However, it does not seem to add any more duplicate wrappers simply by saving and editing the node again. Note: You can get additional wrappers to appear by altering the table in anyway (adding new columns, rows, adjusting table options, etc.) then saving and editing the node again. Here I add a new column, saved and then edited the node again and you'll see a new wrapper is added

    After save:

I'll also add a caveat to this that I am unable to reproduce this exactly with the formatter that this module provides ("USWDS Ck5"). Following the same steps above, but using the formatter provided with the module does not duplicate wrapper div, but does create empty divs that wrap the table. Presumably this is related?

Proposed resolution

I'm not very well versed in CKEditor 5's API, but from what I understand I believe this issue is coming from the UswdsTableContentItemsEditing plugin during the downcast conversion process as it seems to always be creating new div element and inserting in front of the table (see here). It seems like this is where the bug lies as we probably should check for the existence of the parent element before inserting a new one.

Remaining tasks

Validate this is the correct place to make the code change and if there are any ramifications elsewhere that need to be addressed.

🐛 Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

🇺🇸United States carsoncho Kansas City, MO

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024