@brianteeman Can it be that the before and after PR videos for the frontend are mixed up?

@brianteeman Can it be that the before and after PR videos for the frontend are mixed up?

they were indeed. I have corrected the posrt - thanks

Why is now ok to load 1000 lines of code into the editor.css?

because if you dont then you dont have a wyiwyg editor

Yes but what has changed between #31828 (comment) and now?

Your quote:

There is absolutely no way that an editor.css should be over 1000 lines!!

Because

1. I was wrong as I was saying it should be in a system editor.css and a small cassiopeia edirtor.css override. But now that we are being stricter about system/core markup not being bootstrap it is not possible.
2. That PR didnt implement the correct classes for the cassiopeia template - it was just native bootstrap
3. That PR had the problem of the dropdowns which I resolved here

Couple of things here:

• you could have an @import statement at the beginning of the file pointing to the template.css (so the editor has only the TinyMCE related code, easier to edit)
• This approach is not realistic EVEN for cassiopeia. Let me explain: Most templates (also Cassiopeia) use some of the params to customise some colours, fonts, etc. By adding a static file these params cannot be emulated correctly. The only way to do this correctly is to have PHP create the editor.css, similar to what I'm doing with https://github.com/dgrammatiko/wysiwyg-tinymce-j4.1
• Last comment, if the RL of 4.1 and later releases weren't against to my proposal for a similar patch to com_ajax as the one for plugins and modules the url could have been part of the Helper file but right now (unless someone is willing to fix that and PD accept it) only calling a normal route with a different php entry point (ie I 'm using editor.php) is possible.

In short, this is not a complete solution, and once again the claim WYSIWYG is by approximation...

Could you explain the first point please. My understanding is that if you simply import the entire template css then the editor has all the css. The intention here was to only include the minimum

My understanding is that if you simply import the entire template css then the editor has all the css.

Nope, that not what's happening in reality. You hard code:

• The fonts:

  joomla-cms/templates/cassiopeia/index.php

  Lines 48 to 65 in a8be6ef

  	if ($paramsFontScheme) {
  	if (stripos($paramsFontScheme, 'https://') === 0) {
  	$this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']);
  	$this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']);
  	$this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
  	$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']);
  	if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) {
  	$fontStyles = '--cassiopeia-font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;
  	--cassiopeia-font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;
  	--cassiopeia-font-weight-normal: 400;
  	--cassiopeia-font-weight-headings: 700;';
  	}
  	} else {
  	$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']);
  	$this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
  	}
  	}

• The inline color parts:

  joomla-cms/templates/cassiopeia/index.php

  Lines 72 to 80 in a8be6ef

  	->addInlineStyle(":root {
  	--hue: 214;
  	--template-bg-light: #f0f4fb;
  	--template-text-dark: #495057;
  	--template-text-light: #ffffff;
  	--template-link-color: #2a69b8;
  	--template-special-color: #001B4C;
  	$fontStyles
  	}");

• The extra color CSS:

  joomla-cms/templates/cassiopeia/index.php

  Lines 40 to 42 in a8be6ef

  	$paramsColorName = $this->params->get('colorName', 'colors_standard');
  	$assetColorName = 'theme.' . $paramsColorName;
  	$wa->registerAndUseStyle($assetColorName, 'media/templates/site/cassiopeia/css/global/' . $paramsColorName . '.css');

but then you are still importing hundreds of lines of css that are not relevant to the editor. That is what I was aiming to avoid

Am I being really daft or is the inline style for the color complletely wrong. There is no way in cassiopeia to set those colours. That is a functionality only present in Atum

Thanks to others for pointing out when those inline color styles are used ie when using the media manager in the frontend. So definitely not needed in the editor.css

Thanks to others for pointing out when those inline color styles are used ie when using the media manager in the frontend. So definitely not needed in the editor.css

Still, this approach is completely ignorant of the colours, fonts:

• The extra color CSS:

  joomla-cms/templates/cassiopeia/index.php

  Lines 40 to 42 in a8be6ef

  	$paramsColorName = $this->params->get('colorName', 'colors_standard');
  	$assetColorName = 'theme.' . $paramsColorName;
  	$wa->registerAndUseStyle($assetColorName, 'media/templates/site/cassiopeia/css/global/' . $paramsColorName . '.css');

But most importantly, for me, it's a monkey patch if you try to emulate the styles ignoring that almost every template out there has some params that control aspects of the styling and therefore can only be done using PHP.

This is only for cassiopeia not for any other template!