Add collectStylesheets that allows to pick stylesheets from provided urls.

Author: Mati365

packages/ckeditor5-utils/src/collectstylesheets.ts

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/**
+ * A helper function for getting concatenated CSS rules from external stylesheets.
+ *
+ * @param stylesheets An array of stylesheet paths delivered by the user through the plugin configuration.
+ */
+export default function collectStylesheets( stylesheets?: Array<string> ): Promise<string> {
+	if ( !stylesheets ) {
+		return new Promise( resolve => resolve( '' ) );
+	}
+
+	const styles = [];
+
+	for ( const stylesheet of stylesheets ) {
+		if ( stylesheet === 'EDITOR_STYLES' ) {
+			styles.push( getEditorStyles() );
+
+			continue;
+		}
+
+		styles.push( window.fetch( stylesheet ).then( response => response.text() ) );
+	}
+
+	return Promise.all( styles ).then( values => {
+		// We want to trim the returned value in case of `[ "", "", "", ... ]`.
+		return values.join( ' ' ).trim();
+	} );
+}
+
+/**
+ * A helper function for getting the basic editor content styles for the `.ck-content` class
+ * and all CSS variables defined in the document.
+ */
+function getEditorStyles(): string {
+	const editorStyles = [];
+	const editorCSSVariables = [];
+
+	for ( const styleSheet of Array.from( document.styleSheets ) ) {
+		const ownerNode = styleSheet.ownerNode as Element;
+
+		if ( ownerNode.hasAttribute( 'data-cke' ) ) {
+			for ( const rule of Array.from( styleSheet.cssRules ) ) {
+				if ( rule.cssText.indexOf( '.ck-content' ) !== -1 ) {
+					editorStyles.push( rule.cssText );
+				} else if ( rule.cssText.indexOf( ':root' ) !== -1 ) {
+					editorCSSVariables.push( rule.cssText );
+				}
+			}
+		}
+	}
+
+	if ( !editorStyles.length ) {
+		console.warn(
+			'The editor stylesheet could not be found in the document. ' +
+			'Check your webpack config – style-loader should use data-cke=true attribute for the editor stylesheet.'
+		);
+	}
+
+	// We want to trim the returned value in case of `[ "", "", ... ]`.
+	return [ ...editorCSSVariables, ...editorStyles ].join( ' ' ).trim();
+}

packages/ckeditor5-utils/src/index.ts

@@ -94,6 +94,7 @@ export { default as delay, type DelayedFunc } from './delay.js';
 export { default as wait } from './wait.js';
 export { default as parseBase64EncodedObject } from './parsebase64encodedobject.js';
 export { default as crc32, type CRCData } from './crc32.js';
+export { default as collectStylesheets } from './collectstylesheets.js';
 
 export * from './unicode.js';
 

packages/ckeditor5-utils/tests/collectstylesheets.js

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/* global document, window, console, Response */
+
+import collectStylesheets from '../src/collectstylesheets.js';
+
+describe( 'collectStylesheets', () => {
+	const dataCkeStylesheet = document.createElement( 'style' );
+	dataCkeStylesheet.setAttribute( 'data-cke', true );
+	dataCkeStylesheet.id = 'data-cke-stylesheet';
+	dataCkeStylesheet.append( `
+		:root {
+			--variable: white;
+		}
+		.ck-content { color: black }
+		.some-styles { color: red }
+	` );
+
+	const stylesheet = document.createElement( 'style' );
+	stylesheet.id = 'stylesheet';
+	stylesheet.append( 'h2 { color: black }' );
+
+	before( async () => {
+		for ( const style of document.styleSheets ) {
+			document.head.removeChild( style.ownerNode );
+		}
+	} );
+
+	beforeEach( async () => {
+		document.head.appendChild( dataCkeStylesheet );
+		document.head.appendChild( stylesheet );
+
+		sinon.stub( window, 'fetch' ).callsFake( () => {
+			const callback = res => res( new Response() );
+
+			return new Promise( callback );
+		} );
+	} );
+
+	afterEach( async () => {
+		sinon.restore();
+
+		dataCkeStylesheet.remove();
+		stylesheet.remove();
+	} );
+
+	it( 'should not return any styles if no paths to stylesheets provided', async () => {
+		expect( await collectStylesheets( undefined ) ).to.equal( '' );
+	} );
+
+	it( 'should log into the console when ".ck-content" styles are missing', async () => {
+		const dataCkeStylesheet = document.getElementById( 'data-cke-stylesheet' );
+
+		dataCkeStylesheet.remove();
+
+		const consoleSpy = sinon.stub( console, 'warn' );
+
+		await collectStylesheets( [ 'EDITOR_STYLES' ] );
+
+		sinon.assert.calledOnce( consoleSpy );
+	} );
+
+	it( 'should get ".ck-content" styles when "EDITOR_STYLES" token is provided', async () => {
+		const consoleSpy = sinon.stub( console, 'warn' );
+
+		const styles = await collectStylesheets( [ './foo.css', 'EDITOR_STYLES' ] );
+
+		sinon.assert.notCalled( consoleSpy );
+
+		expect( styles.length > 0 ).to.be.true;
+		expect( styles.indexOf( '.ck-content' ) !== -1 ).to.be.true;
+	} );
+} );