silverstripe-framework: [BUG] TinyMCE text alignment and image floating relies on "simple" theme to work (both in CMS and User Frontend)

Affected Version

SS 4.3

Description

If simple theme is removed, the text alignment and image floating will not work on both CMS and user-frontend for HTMLText field (which is using TinyMCE).

The CSS that makes text alignment and image floating work is stored in themes/simple/css/typography.css.

Steps to Reproduce

Remove simple theme (from both file system and config)
Edit the HTML content of a page, try to use text align buttons to align text (e.g. right align), the text will not align properly (but the class has been added, this is different from SS 4.2.1 as the later add style directly instead of class) (notice: the class been added is text-right, which is not included in the simple theme too, so the TinyMCE alignment will not display the correct result even with simple theme installed)
Edit the HTML content of a page, try to insert an image and use right wrap, the image will not wrapped to the right
The page displays in user land will not work either.

My workaround

Add an CSS file like below and modify the config to make TinyMCE use that (modified from the simple theme)
Require this CSS file in the frontend page
In templates, add typography class in the container tag of corresponding content

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 4
Comments: 17 (12 by maintainers)

Most upvoted comments

I agree with @zzdjk6 that we shouldn’t ship a product with broken functionality by default. We’re in control and in charge of how the CMS transfers user actions into views it presents (e.g. right alignment). The developer is in charge on how that looks like on their own website. With that line of thinking, I’d recommend:

Add editor.css to core, include in CMS
Point to default editor.css everywhere that devs could look for this info: https://docs.silverstripe.org/en/4/developer_guides/customising_the_admin_interface/typography/, https://docs.silverstripe.org/en/4/developer_guides/templates/, https://docs.silverstripe.org/en/4/developer_guides/templates/themes/, https://docs.silverstripe.org/en/4/developer_guides/templates/requirements/, https://www.silverstripe.org/learn/lessons/v4/migrating-static-templates-into-your-theme-1

I don’t think we should include an editor.css by default on the frontend, and force devs to hunt down where to disable that. We’ll have to ensure that duplicate of editor.css doesn’t get out of sync with our default themes, but there seems to be little changes in those files.

chillu on Feb 6, 2019

I’m not sure that this is a bug, or even a missing feature. We purposely don’t provide styling for things like this out-the-box, otherwise developers have to override existing CSS or block core CSS files from loading. Anyone disagree with my assessment @silverstripe/core-team?

kinglozzer on Feb 5, 2019

So many participants here, agreement on the issue, and yet I don’t see a pull request for this relatively simple functional fix with some lightweight docs?

chillu on May 20, 2021

@robbieaverill fine. Then move the css then too. For now it’s in framework.

xini on Feb 13, 2019