CKEditor doesn't allow Custom Headings

This is not a bug report but at best a feature request. You're altering code. Code that is NOT an API. 😅 (\Drupal\ckeditor5\Plugin\CKEditor5Plugin\Heading)

We have ✨ [upstream] [Style] Allow CKEditor 5 to *create* a directly (instead of first , then adding a class) Needs work for the <h2 class="fancy"> scenario. If you wish to do the customizations that you're doing here, you can do that but then it's up to you to maintain this forever in contrib.

If you really want to provide configuration UI support for this too, then you'll need to subclass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Heading and override some methods, because otherwise \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Heading::validChoices() will fail validation. Note that this class is marked @internal so it's NOT an API.

I personally would go for a much simpler approach, avoid all of the above, and create a custom module that literally only contains a *.info.yml file and a *.ckeditor5.yml file that looks like this:

MYMODULE_customHeadings:
  ckeditor5:
    plugins: []
    config:
      heading:
        options:
          - { model: 'custom_heading', title: 'Custom Heading', view: { model: 'div', class: 'custom-heading-class'}, 'ck-heading_custom-heading' }
  drupal:
    label: My Custom Headings
    elements:
      - <div class="custom-heading-class'">
    conditions:
      plugins:
        - ckeditor5_heading

👆 This would append that one additional option and have no UI at all.

Automatically closed - issue fixed for 2 weeks with no activity.

👆 This would append that one additional option and have no UI at all.

This part:
- { model: 'custom_heading', title: 'Custom Heading', view: { model: 'div', class: 'custom-heading-class'}, 'ck-heading_custom-heading' }
doesn't seem to work for me. It somehow breaks the CKEditor (toolbar is visible, but text editing part is not. JS console prints "CKEditorError: e is undefined")

I managed to fix it with:
- { model: 'custom_heading', title: 'Custom Heading', view: { name: 'div', classes: [ 'custom-heading-class' ] }, class: 'ck-heading_custom-heading' }

Also changed the
- <div class="custom-heading-class'">
to
- <div class="custom-heading-class">
(removed the ' character.)

So leaving this comment just in case someone else tries to use the example, because it's nice starting point.

From this thread I've created a module → that adds in the aside tag.
Just wanted to say thanks @Wim Leers and @Inaetaru and hope it helps someone else finding this searching as I did.

How can I configure a custom style created with the solution proposed at #3 to appear at the bottom of the list?

For example, the custom heading created with the CKEditor5 Aside → is the first in the list, and I would prefer it to be the last.