Mark each root editable with ".ck-content" class

[Reinmar]

As discussed here ckeditor/ckeditor5-image#74 (comment)

Perhaps a more meaningful class to be used in styles for the content would be better.

WDYT?

[oleq]

It's more or less about .ck-editor__editable vs. .ck-content.

1. The second one is shorter, which is an advantage for devs styling content inside the CKEditor.
2. OTOH, it's an additional class to be set for us and a little bit obsolete because of that. It will need to be inserted where .ck-editor__editable already does the job.
3. OTOH, it's a class about the content, while .ck-editor__editable is about the structure and architecture of the editor itself.

So maybe get rid of .ck-editor__editable and replace it with .ck-content?

[Reinmar]

So maybe get rid of .ck-editor__editable and replace it with .ck-content?

I think they have different use cases and can be used together. One is to mark the editable element for the editor UI styles. The other to mark content inside so it can be styled.

[oleq]

Yes, it makes sense. But OTOH one class cannot live without the other, so we could follow KISS here maybe?

[Reinmar]

It certainly can. If all styles for CKEditor content will use .ck-content it'd be a solution for issues like CKEditor5/ckeditor5.github.io#27. You can load that CSS before and add .ck-content class by default so the content is not restyled totally when the editor loads.

[oleq]

That's a good point, you know. Let's proceed with both .ck-editor__editable and .ck-content then.

[Reinmar]

@oleq, do you think that we could do this in iteration 14?

[oleq]

I think it's a small change so it's doable. It's more about semantics. OTOH, it does not solve our problems with content styles. Or does it?

Anyway, with this change, the widget plugin will add editor-specific styles under .ck-editor__editable (focus outlines, etc.), while the image feature will style the caption text and layout under .ck-content, right?

[Reinmar]

I think it's a small change so it's doable. It's more about semantics. OTOH, it does not solve our problems with content styles. Or does it?

No. It's about making it simpler for developers to style the content inside the editor.

Anyway, with this change, the widget plugin will add editor-specific styles under .ck-editor__editable (focus outlines, etc.), while the image feature will style the caption text and layout under .ck-content, right?

Yep.

[oleq]

What would developers do then to have their styles displayed correctly in the frontend? .ck-content will not be available there. Some PoC?

[Reinmar]

These are independent things. Styling the content in the frontend is covered by #773. Here, we discuss how to reliably and easily style the content inside the editor, both – by us and by other developers.