Previously-selected link styles do not persist on subsequent edit

Created on 1 December 2023, 7 months ago
Updated 16 May 2024, about 1 month ago

Problem/Motivation

When you select more than one link style, the classes are added/removed based on the selected switches the first time. But when you edit the entity again (after saving it first), the classes are still present on the link element, but all the switches are "off" when using more than one switch. Therefore, it is not clear what styles were previously selected or how to change them.

Steps to reproduce

  1. Use the Example configuration for Bootstrap buttons on the module page as configuration for the module.
  2. Add a link with the options "Button style: primary" and "Button size: small"
  3. Save the node/entity and then edit it again
  4. When editing the link again, all switches are "off". It's not possible anymore to remove the "btn-primary" class anymore, unless you start editing the source.

➡️ Update

After applying patch #8, you should once again be able to select multiple link styles and have them persist in subsequent edits—unless your styles contain a shared classname. The project page example configurations for Bootstrap buttons and Zurb buttons won't work as expected if editors select more than one style. See comments #7 and #9 for details.

This may be due to a regression/bug in ckeditor—see github issue #15908 for more on that.

Proposed resolution

TBD.

As far as I see, the plugin works correctly when using a single switch the first time. So it looks like the plugin checks if all classes are equal to one of the options.

Remaining tasks

Fix the issue.

🐛 Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

🇳🇱Netherlands Ewout Goosmann

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

Merge Requests

Comments & Activities

  • Issue created by @Ewout Goosmann
  • 🇺🇸United States slattery

    This patch shows changes required by the ck5 v29 1.0 Matcher pattern update

  • 🇳🇱Netherlands Ewout Goosmann

    @slattery Thank you for the patch. It applied successfully, but unfortunately it doesn't solve the problem I still don't see any enabled switches (read: default values) when I select more than one option the first time.

  • 🇺🇸United States slattery

    Sorry! I retraced my steps, and I can share a separate issue, which may not apply to your case. I should note that this patch doesn't solve a problem I have with compound class config lines - I will address these in another ticket if I get to it. In addition to the patch, I needed to separate my class toggles.

    If I have one toggle for 'a.btn|Button' and a separate config line for 'a.btn--small|Button Added Styling Small' these work with the patch, using d9.5.11/ckeditor_link_styles v1.0.1. Even as a single toggle, I could not get a configuration with 'a.btn.btn--small' on a single line to be recognized after saving a node.

  • First commit to issue fork.
  • Merge request !1Update LinkStyles.php → (Open) created by justcaldwell
  • Status changed to Needs review 4 months ago
  • 🇺🇸United States justcaldwell

    Looks like there are a couple things going on here. @slattery was on the right track with #2 to correct for the MatcherPattern change, we just need to also provide the $classes as an array now, rather than a string as there could be more than one. (This change will also fix 📌 Use `classes` matcher pattern option Active ).

    Even with that corrected, if your styles have "shared" classnames, like:

    .btn.btn--primary
    .btn.btn--secondary
    .btn.btn--small

    Where the `.btn` class is present in each style—only the first enabled style will "match" and thereby show the associated toggle as enabled. These should work, but just don't anymore. My best guess is that this is an upstream regression in ckeditor 5 (?).

    As @slattery suggests, the only solution I could find at the moment is to refactor your styles to remove the shared classname.

    This means that only one of the three example configs on the project page currently works as expected. The second example "Example configuration for Bootstrap links" works fine. The first and third examples have shared classnames (".btn" and ".button" respectively) so users will be able to set multiple styles, but they won't appear to be active on subsequent edit, which is obviously very confusing for users.

    In all cases, the actual classes do get set and remain in the content, unless the link is subsequently edited.

  • 🇺🇸United States justcaldwell

    Attaching a static patch based on the MR.

  • 🇺🇸United States justcaldwell

    The change in the MR (or patch #8) will allow the selection of multiple link styles to persist on subsequent edits as long as your styles do not contain any shared classnames.

    I was able to replicate "shared classnames" problem on a barebones, local install of ckeditor's 'Classic Editor' build, so it doesn't seem specific to Drupal or this module.

    I opened a new ticket in the ckeditor queue -- https://github.com/ckeditor/ckeditor5/issues/15908. Go give it a 👍 if you're interested in seeing it fixed!

    Until that upstream issue is resolved, seems like the only current solution is to refactor CSS to remove shared classnames in your link styles.

  • 🇺🇸United States justcaldwell

    Updating the title and issue summary.

  • 🇺🇸United States mark_fullmer Tucson

    Just confirming that I've observed this behavior as well and that the workaround for non-shared class names in #8 appears valid.

  • 🇭🇺Hungary nagy.balint

    #8 seems to be working here too.

  • 🇫🇷France PhilY 🇪🇺🇫🇷 Paris, France

    Patch #8 works for me using Drupal 10.2.6 with Bootstrap 5 classes (button colors and sizes).

Production build 0.69.0 2024