@bembelimen Does this also solve the other issue #29031 ?

I have tested this item ✅ successfully on 1ac6f1c

I can confirm that with this PR, the editor.css of the Cassiopeia template is loaded and e.g. the Cassiopeia font family and so on are applied.

Not sure about this. The system editor.css seems to be loaded with or without the patch. There is no editor.css in Cassiopeia - am I supposed to create one?

@ceford This PR here creates that file templates/cassiopeia/scss/editor.scss. You need to run npm run build:cssto compile it. Or you need to test with the installation or update packages build by drone for this PR.

@bembelimen Does this also solve the other issue #29031 ?

Could be

Please reopen #27475 as it is not related to this PR at all

I have tested this item ✅ successfully on 1ac6f1c

Not sure what I did wrong before. But I note that reverting the patch and running npm again does not remove the editor.css file.

RTC

No padding

Tiny broken?

Some predefined style should be removed

and css variables are not defined like --cassiopeia-font-family-body

As @HLeithner has correctly pointed out this PR is not correct - I cant see how anyone can have claimed to have tested it.

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

It really only needs to have the aspects of the css file that are related to text.

There should be one system wide editor.css located in the system template (or wherever Dmitiris has moved it) which is simple and then any additional classes or changes required for the cassiopeia template in this editor.css

I cant see how anyone can have claimed to have tested it.

Well, I've followed the testing instructions ... seems they were not complete.

Back to pending.

Actual result BEFORE applying this Pull Request

No editor.css loaded

I assume that you meant no cassiopeia editor.css was loaded because there is a system editor.css loaded

Just a reminder for myself (or if anyone is willing to help improving this PR): https://www.tiny.cloud/docs/plugins/opensource/importcss/

Instead of adding too many lines to editor.css (eg @import "../../../media/vendor/bootstrap/scss/reboot"; 480 lines before minimization), you might want to think about another way to make visual changes to the editor.
I couldn't find a native method, so I added in: /media/vendor/tinymce/skins/ui/oxide/content.min.css line: @import url("https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"); (I should have added fontawesome, but the lack of it doesn't bother me that much.)

As I think about it now, the best solution would be an editor plugin that would insert css from the current template. In addition, it could, depending on the skin configuration, set the content width to that configured on the page.

The idea is that the content did not occupy the entire width of the editor, but has width from the site.

Personally, I often use the card's, but adding them to editor.css it is pointless, because editor deal with them poorly.

And my proposition extra content in editor.scss:

.text-nowrap {
    white-space: nowrap !important;
}
/* or `pull` - I don't remember which is bootstrap and my nested */
.float-left { float: left !important; }
.float-right { float: right !important; }

table {
  &.table, &.table-striped, &.table-hover {
    width:100%;
  }
  &.table-sm {
    width:100%;
    th,
    td {
      padding: $table-cell-padding-sm;
    }
  }
  &.table-bordered {
    border: $table-border-width solid $table-border-color;
    th,
    td {
      border: $table-border-width solid $table-border-color;
    }

  }
}
/* My next attempt to cope with adding these classes. 
Unfortunately, the editor cannot cope with them. 
It only displays that it has been applied.  
(and this was before puting `bootstrap.css` in `content.min.css`*/
tr.thead-dark {
  width:100%;
  th {
    color: $table-dark-color;
    background-color: $table-dark-bg;
    border-color: $table-dark-border-color;
  }
}

tr.thead-light {
  width:100%;
  th {
    color: $table-head-color;
    background-color: $table-head-bg;
    border-color: $table-border-color;
  }
}

//edit

I assume that you meant no cassiopeia editor.css was loaded because there is a system editor.css loaded

Not always. Behaviour is in: https://github.com/joomla/joomla-cms/blob/4.0-dev/plugins/editors/tinymce/tinymce.php#L308-L339 ($content_css_custom -> site template -> system template -> warming)

I've been looking into this one and from what I am able to tell there is no way to generate the cassiopeia editor.css file automatically in the way this PR works that only contains the required css. As far as I can tell the only way is to manually create an editor.css file.

Thanks for the tests and the feedback.