Introduce unique, toggleable styles in the Styles plugin

[mabryl]

📝 Provide a description of the new feature

The Styles feature currently works in such a way that a user can apply multiple classes/styles to an element, i.e. it's possible to add more that one style to a given piece of content.

A potential improvement would be to have a configuration option that would make it possible to toggle between the different styles. In other words, if a given piece of content has a certain style applied, and a different style is then chosen for this content, the first style would get removed and only the subsequent style would be applied to the content.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[paqu83]

+1 from me

[wimleers]

This was also requested at https://www.drupal.org/project/drupal/issues/3326261#comment-15187700

I think it'd be interesting to allow defining which subsets are supposed to be mutually exclusive versus combinable. But it'd also be incredibly hard to find the right balance in configuration complexity vs flexibility 😅

It'd be a lot simpler to introduce a single new configuration option: Only allow a single style to be applied per element. That'd mean that e.g. <div><h3>Title</h3><p>Interesting text here!</p></div> would allow a single class to be added via the Style plugin to either <div>, <h3> or <p>, but when the cursor is in the paragraph, it'd show the styles for both the <div> and <p> like it does today.

[sirsquall]

+1

[bkosborne]

In CKE4, only one style could be applied at once (for block styles), which was desireable for us. CKE5 allows multiple. I can see how that might be useful if you have complementary styles defined, but I think that's probably the minority use case.

Just throwing in my +1 for this.

There was also some chatter in the Drupal CKEditor slack channel about this pain point:

The biggest pain point that I am facing with the CKEditor5 upgrade (on 10.2.2) is the switch from styles drop-down with mutually exclusive options to the grid that is based on combinatorial classes. Content authors should never apply both a small and large class to a heading, for example. And annoyingly, the labels are required to be unique despite the fact that the same class is applied to different elements. Is there any way to handle this logic without writing a custom plugin? I hope I am expressing this clearly, I have not seen mention of it elsewhere. I am not sure whether this is a CKEditor issue or a Drupal integration issue. Examples in thread

[bkosborne]

btw, I also agree the simplest approach is to add a configuration option to that just toggles this behavior on or off!

[weseze]

+1 for the simple option to disallow selecting multiple styles!

We are in the process of analysing to migrate 100+ sites from cke4 to cke5 (Drupal) and this behaviour is a blocker for us.

Selecting multiple styles is a very cool feature, but in our experience 90% of what content editors want to do is select 1 style. For the remaining 10% we just created combined styles.

[nitsan-technologies]

+1

[kaystrobach]

+1 for the simple option to disallow selecting multiple styles!

We are in the process of analysing to migrate 100+ sites from cke4 to cke5 (Drupal) and this behaviour is a blocker for us.

Selecting multiple styles is a very cool feature, but in our experience 90% of what content editors want to do is select 1 style. For the remaining 10% we just created combined styles.

Exactly!

[ayacoo]

+1

[rintisch]

+1

[Megafry]

+1

[Megafry]

Two ideas on how to solve this issue:

1. Add a new option resetBeforeApply resetting all existing classes before applying the new ones.
2. Add a new option conflictClasses allowing multiple styles but preventing conflicting styles from being applied at the same time.

{
 name: 'Button Primary',
 element: 'a',
 classes: ['btn','btn-primary'],
 resetBeforeApply: true,
 conflictingClasses: ['btn-secondary','btn-success']
}