Tinymce 6 custom style_formats not all formats working/showing up

[enemyss]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

11.0.0

Bug summary

Some custom styles tinymce set via "style_formats" in app settings are not picked up. Looks like "block" and "format" ones are picked up but "selector" aren't

Also, why these style_formats doesn't override default ones but just merges them?

I tried setting style_formats_merge: false, didn't help.

Specifics

For example

Doesn't work
{ "title": "Table row 1", "selector": "tr", "classes": "tablerow1" },
Works
{ "title": "Red header", "block": "h1", "styles": { "color": "#ff0000"} },
Doesn't work
{ "title": "Image Left", "selector": "img", "styles": { "float": "left", "margin": "0 10px 0 10px" } },
Works
{ "title": "Align center", "format": "aligncenter" },
Works
{ "title": "div", "block": "div" },

These examples are taken from https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/

Steps to reproduce

1. Add custom "style_formats" via appsettings.json, for example - [\r\n {\"title\":\"Rubriker\",\"items\":[\r\n { \"title\": \"Table row 1\", \"selector\": \"tr\", \"classes\": \"tablerow1\" }, { \"title\": \"Image Left\", \"selector\": \"img\", \"styles\": { \"float\": \"left\", \"margin\": \"0 10px 0 10px\" } },{ \"title\": \"Red header\", \"block\": \"h1\", \"styles\": { \"color\": \"#ff0000\"} },\r\n {\"title\":\"Header 3 (H3)\",\"block\":\"h3\"},\r\n {\"title\":\"Rubrik H2 orange\",\"block\":\"h2\", \"classes\": [\"is--orange\"]},\r\n {\"title\":\"Rubrik H3 orange\",\"block\":\"h3\", \"classes\": [\"is--orange\"]},\r\n\t{\r\n \"title\": \"V\u00E4nsterst\u00E4lld\",\r\n \"selector\": \"img\",\r\n \"classes\": [\"float--left\"]\r\n },\r\n {\r\n \"title\": \"H\u00F6gerst\u00E4lld\",\r\n \"selector\": \"img\",\r\n \"classes\": [\"float--right\"]\r\n }, {\r\n \"title\": \"Full bredd\",\r\n \"selector\": \"img\",\r\n \"classes\": [\"full--size\"]\r\n },\r\n\t{\"title\":\"Checklista\",\"selector\":\"ul\", \"classes\": [\"check-list\"]}\r\n ]}]
2. Launch site and check RTE formats in backoffice it will show only these:
   

Expected result / actual result

All custom "style_formats" should show up in RTE style list as they worked in Umbraco 8.

[kjac]

Hi @enemyss,

Thank you for reaching out 😄

On the subject of selectors... our TinyMCE configuration is set to hide un-applicable styles (style_formats_autohide = true). You should see the image specific styles when selecting an image.

On the subject of extending/merging the style set versus overwriting it completely, this seems to be a bug. I would expect to be able to remove the default styles explicitly by supplying my own style_formats - ideally we should support style_formats_merge too, but one thing at a time I guess.

I will get in touch with the team and see if we can't figure out a way to move forward with this.

[kjac]

Hi again @enemyss,

We talked this over internally and agreed to change things up a bit. A fix has been submitted - see #13582

[enemyss]

Hi @kjac,

On the subject of selectors... our TinyMCE configuration is set to hide un-applicable styles (style_formats_autohide = true). You should see the image specific styles when selecting an image.

Ah, makes sense now :D

We talked this over internally and agreed to change things up a bit. A fix has been submitted - see #13582

Thanks a lot!

[kjac]

@enemyss while we're at it, we've also reverted the style_formats_autohide config so we apply the default, which is false. This should probably lessen the confusion about missing styles for everyone 😄

[nikolajlauridsen]

I've just merged #13582, so I'll go ahead and close this one 😄