Can't set the style on <div> using Styles dropdown

[Mgsy]

📝 Provide detailed reproduction steps (if any)

• Add GHS configuration:

htmlSupport: {
                allow: [
                    {
                        name: /.*/,
                        attributes: true,
                        classes: true,
                        styles: true
                    }
                ] 
 }

• Add Styles configuration:

style: {
   definitions: [
      { name: 'Message: Success', element: 'div', classes: ['alert', 'alert-success'] },
      { name: 'Message: Info', element: 'div', classes: ['info-boxalert', 'alert-info'] }
   ]
}

• Call editor.setData( '<div>Test</div>' ) and put the selection inside of it.
• Try to apply defined styles.

✔️ Expected result

It's possible to apply styles to the element.

❌ Actual result

It's impossible to apply styles to the element.

📃 Other details

Might be related - #12625.

The same scenario works fine for the example <section> element.

---

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

[JTubex]

Possibly related to #11577

[Witoso]

Confirming as per #13763.
On div's it works partially.
Works:

<div>
    <p>
        Hello, world!
    </p>
</div>

Doesn't work:

<div>
  Hello, world!
</div>

[jameswilson]

This is a fairly significant regression for several folks trying to upgrade CKEditor 4 to CKEditor 5 on Drupal 9 and losing what were previously working block styles.

https://www.drupal.org/project/drupal/issues/3326261#comment-15031422 (33 followers on the issue)

[Witoso]

Thanks for raising this @jameswilson, we are going to ship a few updates and fixes of the Style dropdown in the next release. This is not part of it unfortunately but we will discuss it internally.

[jameswilson]

@wimleers requested I upload some screenshots from Drupal 9 + CKEditor 4 config vs. same config in CKE5 to demonstrate the basics of the issue. (We have plugins to make adding style dropdowns easier than writing the JS demonstrated in previous comments of this issue).

I should note that the issue here isn't limited to DIV, but pretty much any block-level element appearing in the styles dropdown, like UL, OL, DL, TABLE, H1, H2, etc. I havent done extensive testing on which block level items are affected.

I’ve explicitly allowed the <div> tag in the "manually editable tags" settings as well, but they’re still disabled in the dropdown even when cursor placed inside an empty <div> manually added in Source mode.

CKE4:

CKE5:

I should note that one can still manually switch to Source mode, and enter the HTML code manually and it works. Eg <div class="alert success"> </div>

CKE5, with manual edits via src mode:

[Witoso]

There's one important difference between CKE4 and CKEdi5 that needs mentioning, that relates to your case @jameswilson as well.

Style dropdown in CKE5 will not add the div when you select the style. I noticed it was possible in CKE4. The style in CKE5 is only applicable to the element that is already in the editor and matches the element criteria. The addition of a new div element would need to be entered with the Source editing which is not the best content creation experience. I'm afraid we also need to consider how the divs should be added (or an element that resembles their purpose) or we should allow the style dropdown to create such elements. WDYT @Reinmar?

@wimleers FYI we need to think a bit on this, so it may take time.

[Witoso]

1. First action on our side could be enabling the styling on "paragraph like" <div>s (model's htmlDivParagraph). To unblock this on Drupal's side and the current CKEditor 4 content.
2. Second step is to refine and figure out from the UX side how to add the divs (containers vs blocks).

Thoughts:

• container divs are similar in behavior to the blockquote feature.
• blocks divs are similar in behavior to the paragraph/headings features.

[Witoso]

Inserting elements by Style dropdown will be tracked in the #14372

Scope:
Enable the possibility of styling and removing the style of already present div's. (htmlDivParagraph)

[wimleers]

👍 Captured and shared with the Drupal community at https://www.drupal.org/project/drupal/issues/3326261#comment-15107914 😊

[wimleers]

🥳