Our configuration for TinyMCE supports the use of an editor.css file located in the template css folder. This allows for the heading levels etc to be displayed correctly in the wysiwyg editor.

It is not simply a case of including the entire template.css as the editor is then loading 13 thousand lines of css most of which is not needed and fills the tinymce toolbar dropdowns with lots and lots of useless fluff

With this latest version of TinyMCE it is possible to import the template.css file and then have a series of rules on what to include and exclude. This would be useful if there were seperate css files for layout and design etc but there aren't and I am of the opinion that this approach is far more work than is needed.

So I have taken the fallback editor.css from the system template and created a cassiopeia version with this PR.

It has to be an scss file for our build tools.

It can not include the fonts used in cassiopeia as they are defined in the template php and not the css.

To test this PR install the blog sample data and go to the typography content item

Apply the PR and run npm ci or npm run build:css and compare the typography content item again

Note while this editor.css file may not be absolutely required it serves as a good example to follow for template designers.

The only significant difference in the before and after images is the font size. Making it closer to a wysiwyg editor.

Before

After