ckeditor · pszczesniak · Feb 11, 2025 · Feb 4, 2025 · Feb 4, 2025 · Feb 5, 2025
diff --git a/packages/ckeditor5-html-support/src/fullpage.ts b/packages/ckeditor5-html-support/src/fullpage.ts
@@ -7,14 +7,21 @@
  * @module html-support/fullpage
  */
 
-import { type Editor, Plugin } from 'ckeditor5/src/core.js';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import { logWarning, global } from 'ckeditor5/src/utils.js';
 import { UpcastWriter, type DataControllerToModelEvent, type DataControllerToViewEvent } from 'ckeditor5/src/engine.js';
+
 import HtmlPageDataProcessor from './htmlpagedataprocessor.js';
 
 /**
  * The full page editing feature. It preserves the whole HTML page in the editor data.
  */
 export default class FullPage extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	public htmlDataProcessor: HtmlPageDataProcessor;
+
 	/**
 	 * @inheritDoc
 	 */
@@ -35,7 +42,29 @@ export default class FullPage extends Plugin {
 	constructor( editor: Editor ) {
 		super( editor );
 
-		editor.data.processor = new HtmlPageDataProcessor( editor.data.viewDocument );
+		editor.config.define( 'htmlSupport.fullPage', {
+			allowRenderStylesFromHead: false,
+			sanitizeCss: rawCss => {
+				/**
+				 * When using the Full page with the `config.htmlSupport.fullPage.allowRenderStylesFromHead` set to `true`,
+				 * it is strongly recommended to define a sanitize function that will clean up the CSS
+				 * which is present in the `<head>` in editors content in order to avoid XSS vulnerability.
+				 *
+				 * For a detailed overview, check the {@glink TODO} documentation.
+				 *
+				 * @error html-embed-provide-sanitize-function
+				 */
+				logWarning( 'css-full-page-provide-sanitize-function' );
+
+				return {
+					css: rawCss,
+					hasChanged: false
+				};
+			}
+		} );
+
+		this.htmlDataProcessor = new HtmlPageDataProcessor( editor.data.viewDocument );
+		editor.data.processor = this.htmlDataProcessor;
 	}
 
 	/**
@@ -62,6 +91,10 @@ export default class FullPage extends Plugin {
 					}
 				}
 			} );
+
+			if ( isAllowedRenderStylesFromHead( editor ) ) {
+				this._renderStylesFromHead();
+			}
 		}, { priority: 'low' } );
 
 		// Apply root attributes to the view document fragment.
@@ -110,4 +143,77 @@ export default class FullPage extends Plugin {
 			args[ 0 ].trim = false;
 		}, { priority: 'high' } );
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public override destroy(): void {
+		super.destroy();
+
+		if ( isAllowedRenderStylesFromHead( this.editor ) ) {
+			this._removeStyleElementsFromDom();
+		}
+	}
+
+	/**
+	 * Checks if in the document exists any `<style>` elements injected by the plugin and removes them,
+	 * so these could be re-rendered later.
+	 * There is used `data-full-page-style-id` attribute to recognize styles injected by the feature.
+	 */
+	private _removeStyleElementsFromDom(): void {
+		const existingStyleElements = Array.from(
+			global.document.querySelectorAll( `[data-full-page-style-id="${ this.editor.id }"]` )
+		);
+
+		for ( const style of existingStyleElements ) {
+			style.remove();
+		}
+	}
+
+	/**
+	 * Extracts `<style>` elements from the full page data and renders them in the main document `<head>`.
+	 * CSS content is sanitized before rendering.
+	 */
+	private _renderStyleElementsInDom(): void {
+		const editor = this.editor;
+		const parsedDocument = this.htmlDataProcessor.parsedDocument;
+
+		if ( !parsedDocument ) {
+			return;
+		}
+
+		const sanitizeCss = editor.config.get( 'htmlSupport.fullPage.sanitizeCss' )!;
+
+		// Extract `<style>` elements from the `<head>` from the full page data.
+		const styleElements: Array<HTMLStyleElement> = Array.from( parsedDocument.querySelectorAll( 'head style' ) );
+
+		// Add `data-full-page-style-id` attribute to the `<style>` element and render it in `<head>` in the main document.
+		for ( const style of styleElements ) {
+			style.setAttribute( 'data-full-page-style-id', editor.id );
+
+			// Sanitize the CSS content before rendering it in the editor.
+			const sanitizedCss = sanitizeCss( style.innerText );
+
+			if ( sanitizedCss.hasChanged ) {
+				style.innerText = sanitizedCss.css;
+			}
+
+			global.document.head.append( style );
+		}
+	}
+
+	/**
+	 * Removes existing `<style>` elements injected by the plugin and renders new ones from the full page data.
+	 */
+	private _renderStylesFromHead() {
+		this._removeStyleElementsFromDom();
+		this._renderStyleElementsInDom();
+	}
+}
+
+/**
+ * Normalize the Full page configuration option `allowRenderStylesFromHead`.
+ */
+function isAllowedRenderStylesFromHead( editor: Editor ): boolean {
+	return editor.config.get( 'htmlSupport.fullPage.allowRenderStylesFromHead' )!;
 }
diff --git a/packages/ckeditor5-html-support/src/generalhtmlsupportconfig.ts b/packages/ckeditor5-html-support/src/generalhtmlsupportconfig.ts
@@ -93,4 +93,97 @@ export interface GeneralHtmlSupportConfig {
 	 * @default false
 	 */
 	preserveEmptyBlocksInEditingView?: boolean;
+
+	/**
+	 * The configuration of the Full page editing feature.
+	 * The option is used by the {@link module:html-support/fullpage~FullPage} feature.
+	 *
+	 * ```ts
+	 * ClassicEditor
+	 * 	.create( {
+	 * 		htmlSupport: {
+	 * 			fullPage: ... // Full page feature config.
+	 * 		}
+	 * 	} )
+	 * 	.then( ... )
+	 * 	.catch( ... );
+	 * ```
+	 */
+	fullPage?: FullPageConfig;
+}
+
+/**
+ * The configuration of the Full page editing feature.
+ */
+export interface FullPageConfig {
+
+	/**
+	 * Whether the feature should allow the editor to render styles from the `<head>` section of editor data content.
+	 *
+	 * When set to `true`, the editor will render styles from the `<head>` section of editor data content.
+	 *
+	 * ```ts
+	 * ClassicEditor
+	 * 	.create( {
+	 * 		htmlSupport: {
+	 * 			fullPage: {
+	 * 				allowRenderStylesFromHead: true
+	 * 			}
+	 * 		}
+	 * 	} )
+	 * 	.then( ... )
+	 * 	.catch( ... );
+	 * ```
+	 *
+	 * @default false
+	 */
+	allowRenderStylesFromHead?: boolean;
+
+	/**
+	 * Callback used to sanitize the CSS provided by the user in editor content
+	 * when option `htmlSupport.fullPage.allowRenderStylesFromHead` is set to `true`.
+	 *
+	 * We strongly recommend overwriting the default function to avoid XSS vulnerabilities.
+	 *
+	 * The function receives the CSS (as a string), and should return an object
+	 * that matches the {@link module:html-support/generalhtmlsupportconfig~CssSanitizeOutput} interface.
+	 *
+	 * ```ts
+	 * ClassicEditor
+	 * 	.create( editorElement, {
+	 * 		htmlSupport: {
+	 * 			fullPage: {
+	 * 				allowRenderStylesFromHead: true,
+	 *
+	 * 				sanitizeCss( CssString ) {
+	 * 					const sanitizedCss = sanitize( CssString );
+	 *
+	 * 					return {
+	 * 						css: sanitizedCss,
+	 * 						// true or false depending on whether the sanitizer stripped anything.
+	 * 						hasChanged: ...
+	 * 					};
+	 * 				}
+	 * 			}
+	 * 		}
+	 * 	} )
+	 * 	.then( ... )
+	 * 	.catch( ... );
+	 * ```
+	 *
+	 */
+	sanitizeCss?: ( css: string ) => CssSanitizeOutput;
+}
+
+export interface CssSanitizeOutput {
+
+	/**
+	 * An output (safe) CSS that will be inserted into the document.
+	 */
+	css: string;
+
+	/**
+	 * A flag that indicates whether the output CSS is different than the input value.
+	 */
+	hasChanged: boolean;
 }
diff --git a/packages/ckeditor5-html-support/src/htmlpagedataprocessor.ts b/packages/ckeditor5-html-support/src/htmlpagedataprocessor.ts
@@ -14,6 +14,11 @@ import { HtmlDataProcessor, UpcastWriter, type ViewDocumentFragment } from 'cked
  * This data processor implementation uses HTML as input and output data.
  */
 export default class HtmlPageDataProcessor extends HtmlDataProcessor {
+	/**
+	 * Contains the `documentElement` property of the `Document` interface.
+	 */
+	public parsedDocument: HTMLElement | null = null;
+
 	/**
 	 * @inheritDoc
 	 */
@@ -53,6 +58,8 @@ export default class HtmlPageDataProcessor extends HtmlDataProcessor {
 		// Using the DOM document with body content extracted as a skeleton of the page.
 		writer.setCustomProperty( '$fullPageDocument', domFragment.ownerDocument.documentElement.outerHTML, viewFragment );
 
+		this.parsedDocument = domFragment.ownerDocument.documentElement;
+
 		if ( docType ) {
 			writer.setCustomProperty( '$fullPageDocType', docType, viewFragment );
 		}