Change TinyMCEConfig from SS4 to SS5

Silverstripe Version:5.2

In SS4 I used to have the following code in my _config.php:

TinyMCEConfig::get('cms')
    ->addButtonsToLine(2, 'styleselect')
    ->setOption(
        'importcss_append', true
    );

In the theme.yaml pointing to my theme folder

SilverStripe\Forms\HTMLEditor\TinyMCEConfig:
  editor_css:
    - "themes/mytheme/css/editor.css"

and the outcome was:
image

a separate drop-down with only my custom styles added, so everything worked as expected.

Now with SS5 this drop-down is gone and reading the documentation of SS5 it seems I only had to change the “styleselect” to “styles”, but that doesn’t work: By default “Bold” gets selected and the additional drop-down gets named like it:

styles-problem-cms-editor

When clicking into the ‘Content’ area it changes to “paragraph”
image

A search for where this “styleselect” / “styles” is defined code-wise in SilverStripe or on tiny.cloud was unsuccessful.

The documentation adds to my confusion as well as the SS4 links to TinyMCE version7 whereas SS5 links to version 6.

All I want is to get a separate drop-down field named “Formats” or even customised if possible to add additional styles.

Could anyone please point me into the right direction to achieve this in SS5?

You should check out the upgrade guides from TinyMCE 4 to 5, and TinyMCE 5 to 6.

Links for those are in the Silverstripe CMS 5.0.0 changelog

This really is a TinyMCE question, not a Silverstripe CMS question.