[Style] Style dropdown should insert (some) elements.

[Witoso]

The main difference between CKEditor 4 and 5 in styling is the ability to insert and rename elements. CKEditor 4 added the elements from the Styles list like containers or headings:

Screen.Recording.2023-06-12.at.11.57.40.mov

CKEditor 5 only allows styling when the cursor is in the element.

Screen.Recording.2023-06-12.at.14.05.49.mov

Potential improvements are that styling will allow to insert/rename of some elements to allow for example insertion of divs (rel: #13341).

[Kocal]

Hello, I'm coming from #15031 (which is not 100% related), I'm migrating from CKEditor 4 to 5 and I also found that we can't insert <div class="..."> anymore with style definitions, or headings (which are scoped to paragraph and <h...> elements IINW):

Enregistrement.de.l.ecran.2023-09-25.a.14.27.08.mov

What are the current workarounds if I want our users to still have the possibility to insert <div class="..."> before this issue is resolved/a new release is tagged?:

1. Create a custom plugin for inserting a single <div>, and tell them to stylise it after?
2. Re-create a custom Style plugin which will works like CKEditor 4 (at least for the "insert part" ?)
3. Tell them to switch to HTML mode, write themselves <div></div>, and switch to edition mode?
4. Try to patch the plugin myself + open a PR later ? (it would be the best solution if I am able too)
5. Or... maybe something else I didn't think about?

Thanks! :)

EDIT: Finally we kept the Styles dropdown but we changed the element: 'div' to element: 'p' in order to provide a good UX to our CMS users.
However we wrote something that transforms those <p> to <div> just before rendering the content to our final-users (because we really need to use <div> here).

[wimleers]

This keeps coming up as a question in the Drupal community. Latest occurrence: https://drupal.slack.com/archives/C01GWN3QYJD/p1696319376013359.

[wimleers]

Now tracking this explicitly in this Drupal.org issue: https://www.drupal.org/project/drupal/issues/3362451

[fiasco]

I'm trying to build components using ckeditor style and tailwind. In Drupal, I'm able to configure a style like div.p-4.border.border-navy-600.shadow and this would style an existing div like:

<div class="border border-navy-600 shadow"></div>

But I have two challenges:

1. How do I get the DIV into the editor without source editing? (I can use the div plugin via https://www.drupal.org/project/ckeditor_div but run into the second point)
2. How do I add other elements and style them inside the div?

Fixing this issue would mean I wouldn't have to use the div plugin but I think I'd still be stuck on how to build components like this:

<div class="border border-navy-600 shadow">
   <h4>Important</h4>
   <p>This is a status message</p>
</div>

As I can already insert a heading and a paragraph, I'd like to be able to select them and apply the div block style to wrap the div around them.

[Witoso]

Ad. 1 We don't have features yet for containers, see: #6462.

Ad. 2 Is related to the above, without the feature, the insertion via Style won't work. Another solution would be to write a specific feature for this via plugin development (something like callout as far as I can see).

[hekumar2]

Please provide a solution to this problem

[garvinhicking]

As witoso mentioned, coming from #16737 and I believe too, this could streamline some things!

[MatthieuScarset]

Can we have <p> converted to <div> automatically before the end of this decade please?

Thank you for your service.