Add attribute to the <style> tag(s) with CKEditor content CSS styles

[wwalc]

Context: we soon may work on a feature, that in order to function properly, must be able to request from CKEditor 5 all CSS that its features defined for the content inside the editor (and pass it somewhere else). Something similar to https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html#the-full-list-of-content-styles but that can be done during runtime and that can be e.g. easily obtained also from builds made with the online builder.

There is a way to find CKEditor 5 styles inside the DOM already, but really hacky. Which is: find all <style> tags and use the content inside only if it contains .ck-content. This is due to the current webpack configuration that injects a <style> tag, which is hard to find in the DOM among other <style> tags.

test: /\.css$/,
use: [
	{
		loader: 'style-loader',
		options: {
			injectType: 'singletonStyleTag'
		}
	},

It would be easier to find this style tag if it was marked somehow (e.g. data-ck="true"). Webpack configuration allows for that: https://github.com/webpack-contrib/style-loader#attributes

So the final output with CKEditor 5 CSS could look:

<style data-ck="true">
...
</style>

[Reinmar]

👍 

I'm a bit unsure about the attribute name cause we have data-cke-filler and .ck-* prefix for classes. I'm leaning towards data-cke.

BTW, the problem here is that we need to update all our docs and  that people will have to update all of their integrations for this to start to work.

[Reinmar]

I think that you forgot about ckeditor5-dev. We need to have the same rules in all our envs, including manual tests and automated tests (if this loader is present there too).