TinyMCE some custom text styles aren't selectable and some are

Question

EDIT: Repeatable Fiddle for review: https://fiddle.tiny.cloud/P2haab

I am having an issue where I created a custom styles formats configuration option and my text styles sometimes work and sometimes do not work. Below is my current style_formats for reference:

style_formats: [
    { title: 'Table Row or List Styles' },
    { title: 'Light Gray', selector: 'tr,ul,ol', classes: 'bg__ltgray' },
    { title: 'Light Blue', selector: 'tr,ul,ol', classes: 'bg__ltblue' },
    { title: 'Light Teal', selector: 'tr,ul,ol', classes: 'bg__ltteal' },
    { title: 'Light Purple', selector: 'tr,ul,ol', classes: 'bg__ltpurple' },
    { title: 'List Styles' },
    { title: 'Dark Teal Text', selector: 'ul,ol', classes: 'text__dkteal' },
    { title: 'Dark Purple Text', selector: 'ul,ol', classes: 'text__dkpurple' },
    { title: 'Dark Blue Text', selector: 'ul,ol', classes: 'text__dkblue' },
    { title: 'Text Styles' },
    { title: 'White Text', inline: 'span', classes: 'text__white' },
    { title: 'Dark Blue Text', inline: 'span', classes: 'text__dkblue' },
    { title: 'Medium Blue Text', inline: 'span', classes: 'text__medblue' },
    { title: 'Dark Green Text', inline: 'span', classes: 'text__dkgreen' },
    { title: 'Dark Teal Text', inline: 'span', classes: 'text__dkteal' },
    { title: 'Dark Purple Text', inline: 'span', classes: 'text__dkpurple' },
    { title: 'Dark Blue Gray Text', inline: 'span', classes: 'text__dkbluegray' },
    { title: 'Medium Blue Gray Text', inline: 'span', classes: 'text__medbluegray' },
    { title: 'Dark Gray Text', inline: 'span', classes: 'text__dkgray' },
    { title: 'Medium Gray Text', inline: 'span', classes: 'text__medgray' },
],
paste_block_drop: false,
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                    + '.bg__ltgray {background-color: #ededee;}.bg__dkgray {background-color: #a5a7a9;}.bg__dkblue {background-color: #1a315b;}.bg__ltblue {background-color: #cdd6df;}.bg__medblue {background-color: #33587d;}.bg__dkgreen {background-color: #0a492c;}.bg__ltteal {background-color: #ceebeb;}.bg__dkteal {background-color: #00b9ad;}.bg__ltpurple {background-color: #e0d4e1;}.bg__dkpurple {background-color: #652767;}.bg__dkbluegray {background-color: #4b6e8c;}.bg__ltbluegray {background-color: #dbe2e8;}.bg__medbluegray {background-color: #6e8aa3;}.bg__dkgray {background-color: #a5a7a9;}.bg__medgray {background-color: #b9b7bb;}'
                    + '.text__white {color: #ffffff;} .text__dkblue {color: #1a315b;} .text__medblue {color: #33587d;} .text__dkgreen {color: #0a492c;} .text__dkteal {color: #00b9ad;} '
                    + '.text__dkpurple { color: #652767;} .text__dkbluegray { color: #4b6e8c; } .text__medbluegray { color: #6e8aa3; } .text__dkgray { color: #a5a7a9; } '
                    + '.text__medgray { color: #b9b7bb; } '

As you can see, all of the text styles are exactly the same, however, the user is only able to select a couple options out of the list, the others will show an unavailable mouse cursor, similar to if you try to use a list or table style when there is not a table or list to apply the style to.

Specifically, these are the colors that are and are not selectable:

• Selectable:
  • White
  • Medium Blue
  • Dark Green
  • Dark Blue Gray
  • Medium Blue Gray
  • Dark Gray
  • Medium Gray
• Not Selectable:
  • Dark Blue
  • Dark Teal
  • Dark Purple

I cannot find any rhyme or reason why these other styles cannot be applied. I've included a screenshot showing the mouse cursor when I attempt to apply one of the styles that does not work. Am I missing something in the configuration that would specifically limit these colors/style selections?

Answer 1

It appears that the names of your styles must be globally unique and "Dark Blue Text" -- for example -- appears both in "List Styles" and "Text Styles." Changing one of the instances to be unique resolves the issue.

I would think that the name of the styles should only be unique in the section they appear, but this may just be a limitation with this version of TinyMCE.