Styling customisation

Normally, customising TinyMCE's appearance means creating a new theme, compiled in LESS. For most cases that works (and is the recommended option, because it allows TinyMCE to support it), but for Deserted Chateau it isn't enough.

The problem - LESS requires us to have known values for each variable at compile time, and this conflicts with Deserted Chateau's theme functionality. Therefore we directly override various CSS values instead, and inject CSS stylesheets into the editor's iFrame to override the default styling as needed.

CSS Overrides

Overrides are applied in a few places:

• A modified version of default-tox.css is loaded, with variables needing overwriting using the !important keyword.
  
  
• The Deserted Chateau CSS stylesheets (for the user's theme) are injected into the head of the editor iFrame, in order to ensure it has access to the necessary CSS variables, as is the modified default-tox.css stylesheet.
  
  
• If the user changes theme on the page, the injected stylesheets are replaced with the stylesheets for the new theme.

The ugly "white flash"

Customising TinyMCE the normal way means it still retains the awkward "big white flash" on loading, due to a design consideration in TinyMCE from version 6 onwards. More info is here: https://github.com/tinymce/tinymce/issues/9190#issuecomment-1826989991