Add long form names in formatting dropdown menu

[ryanfeeley]

The abreevs are cool in the label, but once expanded, we should show the full name. Take care localizing as I'm imaging the width will vary greatly. Also rename a few things, and more logically ordered the items too.

Note that Aa should appear when paragraphs are selected or when nothing is selected. This may be a change in behaviour, albeit just a label change.

[Natim]

I did an attempt on this one, I have the following:

I wanted to do something like this, but it doesn't seems to work just yet.

const headingDropdown = document.querySelector('.ck-heading-dropdown > .ck-button__label');
headingDropdown.addEventListener('DOMSubtreeModified', () => {
 const value = headingDropdown.innerHTML;
 console.log(value);
 if (value == browser.i18n.getMessage('title1')) {
    headingDropdown.innerHTML = "H1";
  } else if (value == browser.i18n.getMessage('title2')) {
    headingDropdown.innerHTML = "H2";
  } else if (value == browser.i18n.getMessage('title3')) {
    headingDropdown.innerHTML = "H3";
  } else if (value == browser.i18n.getMessage('paragraph')) {
    headingDropdown.innerHTML = "P";
  }
});

[Natim]

@Reinmar have you got anyidea of how I can monitor the heading dropdown button label value change to update it like that? Or at least always have its content to be: Aa

[Reinmar]

I assume that you can't use config.heading.options (the title properties there) because you want different titles in the dropdown's panel and in the button?

IMO, you should define your own dropdown. Instead of hacking the current one just define a new one which will work the way you want it.

The code which creates the current dropdown is here:

https://github.com/ckeditor/ckeditor5-heading/blob/614987b8120d02a2035fdf37c8c5c1fdf1f4a54c/src/heading.js#L54-L115

I think that customization needs to go here: https://github.com/ckeditor/ckeditor5-heading/blob/614987b8120d02a2035fdf37c8c5c1fdf1f4a54c/src/heading.js#L92 but @jodator will need to confirm.

[Natim]

@Reinmar Are you interested to get a pull-request to ckeditor5-heading?

[Natim]

Completely missed that we were already using https://github.com/ckeditor/ckeditor5-heading/compare/master...vladikoff:short-heading?expand=1 somehow.

[Reinmar]

The behaviour of our dropdown is different than what you want to achieve and we'd rather stay with the current solution. We even discussed recently whether this dropdown should be proposed in such a shape but we found simplifying it tricky and usually introducing UX issues. We could discuss it in a ticket in https://github.com/ckeditor/ckeditor5-heading if you have some ideas how this dropdown could be improved, but it will be easier and faster for you to just introduce your own dropdown which matches your requirements better than the default one.

BTW, one of the design decisions that we made was not to overcomplicate existing features with too many options and too much generality. Instead, we'll encourage developers to implement their own modifications because that gives them far more flexibility and prevents us from bloating the source code (which was often a case in CKEditor 4).

[Natim]

Makes sense, thank you for your feedback.