CKEditor 5 - Style definition for UL

[mhirdes]

📝 Provide detailed reproduction steps (if any)

1. Configure a style definition for an UL element
2. Select the list in the editor.
3. You can't select the style because it is disabled. May only the LI is selected.

✔️ Expected result

The style should be selectable as it was in CKEditor 4.

❌ Actual result

I can't select the style and also the already added classes were removed.

❓ Possible solution

Show the selected element below and may switch there the ul.

📃 Other details

• Browser: Chrome 113
• OS: Windows 11
• First affected CKEditor version: 5
• Installed CKEditor plugins: default

Also described here

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Witoso]

This was fixed in today's release v38.0.0, and #11590.

[mhirdes]

Sry, but also with version 38 the problem still exists

[mhirdes]

Or do I miss sth?

[mhirdes]

I can't reopen this issue

[Witoso]

What is your lists configuration? We only implemented this change for the DocumentList plugin. It will not work for the standard List. List implements basic behaviors and more advanced ones are handled by the DocumentList.

[bmoex]

The feature should be also fixed in standard List as this is for the feature Style applied to block styles. For me as a confused user right now, it make no sense to only fix it in the DocumentList plugin as you might not use the fancy DocumentList.

For our usecase we use the regular bulletedList toolbar item in combination with the style plugin:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Style, /* ... */ ],
        toolbar: {
            items: [
                'style',
                // More toolbar items.
                // ...
            ],
        },
        style: {
             definitions: [
                {
                    name: '✓ Checkmarks',
                    element: 'ul',
                    classes: [ 'list-unordered-checkmarks' ]
                },
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

based on https://ckeditor.com/docs/ckeditor5/latest/features/style.html

[Witoso]

@bmoex thanks for the feedback. The decision to only support it in one version was made in connection to the project we are just starting. We will replace the List implementation with the Document List (supporting simple markup as well). More info will follow soon.

[jsfgreen]

Just to support @mhirdes request, we also need the same functionality of adding styles to a <ul> or <ol> for that matter. Thanks!