[2.1]: Themes can't customize the CSS for SCEditor, take two

[James-Gryphon]

Basic Information

When using a custom theme, the jquery.sceditor.css file is loaded from the default theme even when the custom theme has its own file.

Steps to reproduce

1. Make a custom theme. Make sure it has a jquery.sceditor.css file in its css directory.
2. Go to the post screen, and, using a modern high-end browser's developer tools, see which file is being loaded.

Expected result

The theme should load its own jquery.sceditor.css file.

Actual result

It loads from the default theme (Curve2).

Version/Git revision

2.1.4

Database Engine

All

Database Version

No response

PHP Version

8.1.27

Logs

No response

Additional Information

This is similar to issue #5601, which concerned jquery.sceditor.default.css, and I expect it should have a similar fix.

[live627]

ref #6837

This seems to be by design, albeit a weird one

SMF/Sources/Subs-Editor.php

Lines 1524 to 1533 in 9ebd5b0

	// This really has some WYSIWYG stuff.
	loadCSSFile('jquery.sceditor.css', array('default_theme' => true, 'validate' => true), 'smf_jquery_sceditor');
	loadTemplate('GenericControls');
	/*
	* THEME AUTHORS:
	If you want to change or tweak the CSS for the editor,
	include a file named 'jquery.sceditor.theme.css' in your theme.
	*/
	loadCSSFile('jquery.sceditor.theme.css', array('force_current' => true, 'validate' => true,), 'smf_jquery_sceditor_theme');

[James-Gryphon]

I appreciate the checking into it. The logic makes sense; the intended mitigation apparently just didn't turn out to be easy and obvious enough. ;-)

The only idea I have to help with that, past putting in more red text somewhere that people are going to ignore, is that perhaps there could be a dummy jquery.sceditor.theme.css file bundled with Curve2. I use dev tools extensively, and if it called that file in the list, there's a fair chance I would have seen it and the explanation inside of it. As it is, I assumed this was a bug, but didn't investigate deeper than the surface behaviour.

Of course, while this throws devs a bone, it's at the cost of 1k bandwidth for the initial load, multiplied over millions of uses. If you decided it isn't worth the tradeoff, I definitely understand. My issue seems resolved now, anyway.

[sbulen]

The naming of the files is weird, they don't do what you think they should be doing by their names...

It could definitely use some cleaning/clearing up. But you can do everything you want to do today...

From the forum: https://www.simplemachines.org/community/index.php?msg=4157739

Actually, a few clarifications. Been a while since I looked into this... The fog is slowly lifting...

• jquery.sceditor.theme.css covers the appearance of the sceditor area. From the rows of formatting buttons to the bottom of the textarea.
• jquery.sceditor.default.css covers the textarea ONLY, in WYSIWYG mode ONLY.

So if you want a unique appearance of the editor, e.g., buttons & toolbars, etc., update jquery.sceditor.theme.css in your theme folder. It may help to start with a copy of jquery.sceditor.css from the default theme.

If you want to control WYSIWYG appearance within the editor textarea, update jquery.sceditor.default.css in your theme folder. It may help to start with a copy of jquery.sceditor.default.css from the default theme.

The editor is a 3rd party plugin we use. It accepts ONE custom css file as a parameter, specifically to support dynamic toggling of WYSIWYG mode.

That ONE file limitation for WYSIWYG mode makes certain tasks difficult, e.g., if you are trying to work on a theme with multiple color palette options such as light vs dark mode. If you need to do that, you need to do some work via code & css vars to work around those limitations (e.g., like I did with my themes).

So... Yes, it will always load jquery.sceditor.css. If you want to override that, you can put the overrides you want in jquery.sceditor.theme.css.

That's how it works today. I believe the idea was you only need to put .css in there for the parts you want to override.

Why the WYSIWIG file was named "default" is anyone's guess.

[DiegoAndresCortes]

I came up with this in my themes, for the dark mode and variants issue:
https://github.com/SMFTricks/NameX/blob/b6d1a123875c8edddddfbb27de909c13d8f39f8b/themecustoms/Color/DarkMode.php#L233-L239

[live627]

Why the WYSIWIG file was named "default" is anyone's guess.

Because in the upstream repo, it is default.css where multiple themes exist.

https://github.com/samclarke/SCEditor/tree/master/src/themes

[live627]

We really need to move this issue to the Discussions tab.