ckeditor · Mati365 · Mar 24, 2025 · Feb 3, 2025 · Feb 3, 2025 · Feb 3, 2025
diff --git a/docs/framework/architecture/plugins.md b/docs/framework/architecture/plugins.md
@@ -1,17 +1,12 @@
 ---
-# Scope:
-# * Introduction to plugins.
-# * Exemplify use cases.
-# * Point to resources to learn plugin development.
-
 category: framework-architecture
 menu-title: Plugins in CKEditor 5
 meta-title: Plugins in CKEditor 5 | CKEditor 5 Documentation
 toc-limit: 1
 order: 10
 ---
 
-# Plugins in CKEditor&nbsp;5
+# Plugins in CKEditor 5
 
 Features in CKEditor are introduced by plugins. In fact, without plugins, CKEditor&nbsp;5 is an empty API with no use. Plugins provided by the CKEditor core team are available in [npm](https://www.npmjs.com/search?q=ckeditor5) (and [GitHub](https://github.com/ckeditor?utf8=%E2%9C%93&q=ckeditor5&type=&language=), too) in the form of npm packages. A package may contain one or more plugins (for example, the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package contains {@link features/images-overview several granular plugins}).
 

diff --git a/docs/umberto.json b/docs/umberto.json
@@ -613,6 +613,11 @@
 						}
 					]
 				},
+				{
+					"name": "Email editing",
+					"id": "features-email",
+					"slug": "email-editing"
+				},
 				{
 					"name": "File management",
 					"id": "features-file-management",

diff --git a/packages/ckeditor5-html-support/docs/features/full-page-html.md b/packages/ckeditor5-html-support/docs/features/full-page-html.md
@@ -33,12 +33,68 @@ ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
 		plugins: [ FullPage, /* ... */ ],
+		htmlSupport: {
+			fullPage: {
+				// Configuration.
+			}
+		}
 	} )
 	.then( /* ... */ )
 	.catch( /* ... */ );
 ```
 </code-switcher>
 
+## Configuration
+
+### Render styles
+
+By default, the full page HTML feature does not render the CSS from `<style>` that may be located in the `<head>` section edited content. To enable that possibility, set the {@link module:html-support/generalhtmlsupportconfig~FullPageConfig#allowRenderStylesFromHead `config.htmlSupport.fullPage.allowRenderStylesFromHead`} option to `true`.
+
+Plugin extracts `<style>` elements from the edited content moves them to the main document `<head>`, and renders them. When CSS in `<style>` tag is changed using, for example, the {@link features/source-editing-enhanced Enhanced source code editing} feature, previously added `<style>` elements to the main document `<head>` will be replaced by the new ones.
+
+However, by enabling the ability to render CSS from `<style>` elements located in the `<head>` section of the edited content, you expose the users of your system to the **risk of executing malicious code inside the editor**. Therefore, we highly recommend sanitizing your CSS using some library that will strip the malicious code from the styles before rendering them. You can plug in the sanitizer by defining the {@link module:html-support/generalhtmlsupportconfig~FullPageConfig#sanitizeCss `config.htmlSupport.fullPage.sanitizeCss`} option.
+
+```js
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		// ... Other configuration options ...
+		htmlSupport: {
+			fullPage: {
+				allowRenderStylesFromHead: true,
+				// Strip unsafe properties and values, for example:
+				// values like url( ... ) that may execute malicious code
+				// from an unknown source.
+				sanitizeCss( CssString ) {
+					const sanitizedCss = sanitize( CssString );
+
+					return {
+						css: sanitizedCss,
+						// true or false depending on whether
+						// the sanitizer stripped anything.
+						hasChanged: true
+					};
+				}
+			}
+		}
+	} )
+	.then( /* ... */ )
+	.catch( /* ... */ );
+```
+
+### Security
+
+It is a plain security risk. The user may provide a CSS mistakenly copied from a malicious website. It could also end up in the user’s clipboard (as it would usually be copied and pasted) by any other means.
+
+You can instruct some advanced users to never paste CSS code from untrusted sources. However, in most cases, it is highly recommended to secure the system by configuring the Full page HTML feature to use a CSS sanitizer and, optionally, by setting strict Content Security Policy (CSP) rules.
+
+#### Sanitizer
+
+The {@link module:html-support/generalhtmlsupportconfig~FullPageConfig#sanitizeCss `config.htmlSupport.fullPage.sanitizeCss`} option allows plugging an external sanitizer.
+
+#### CSP
+
+In addition to using a sanitizer, you can use the built-in browser mechanism called [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). By using CSP, you can let the browser know the allowed sources that CSS can use.
+
 ## Additional feature information
 
 Here are some examples of the HTML elements you can enable with this plugin:

diff --git a/packages/ckeditor5-html-support/src/fullpage.ts b/packages/ckeditor5-html-support/src/fullpage.ts
@@ -7,8 +7,15 @@
  * @module html-support/fullpage
  */
 
-import { Plugin } from 'ckeditor5/src/core.js';
-import { UpcastWriter, type DataControllerToModelEvent, type DataControllerToViewEvent } from 'ckeditor5/src/engine.js';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import { logWarning, global } from 'ckeditor5/src/utils.js';
+import {
+	UpcastWriter,
+	type DataControllerToModelEvent,
+	type DataControllerToViewEvent,
+	type RootElement
+} from 'ckeditor5/src/engine.js';
+
 import HtmlPageDataProcessor from './htmlpagedataprocessor.js';
 
 /**
@@ -32,11 +39,39 @@ export default class FullPage extends Plugin {
 	/**
 	 * @inheritDoc
 	 */
-	public init(): void {
-		const editor = this.editor;
-		const properties = [ '$fullPageDocument', '$fullPageDocType', '$fullPageXmlDeclaration' ];
+	constructor( editor: Editor ) {
+		super( editor );
+
+		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 features/html/full-page-html Full page HTML feature} documentation.
+				 *
+				 * @error css-full-page-provide-sanitize-function
+				 */
+				logWarning( 'css-full-page-provide-sanitize-function' );
+
+				return {
+					css: rawCss,
+					hasChanged: false
+				};
+			}
+		} );
 
 		editor.data.processor = new HtmlPageDataProcessor( editor.data.viewDocument );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public init(): void {
+		const editor = this.editor;
+		const properties = [ '$fullPageDocument', '$fullPageDocType', '$fullPageXmlDeclaration', '$fullPageHeadStyles' ];
 
 		editor.model.schema.extend( '$root', {
 			allowAttributes: properties
@@ -55,6 +90,10 @@ export default class FullPage extends Plugin {
 					}
 				}
 			} );
+
+			if ( isAllowedRenderStylesFromHead( editor ) ) {
+				this._renderStylesFromHead( root );
+			}
 		}, { priority: 'low' } );
 
 		// Apply root attributes to the view document fragment.
@@ -103,4 +142,76 @@ 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( root: RootElement ): void {
+		const editor = this.editor;
+
+		// Get `<style>` elements list from the `<head>` from the full page data.
+		const styleElements = root.getAttribute( '$fullPageHeadStyles' ) as Array<HTMLStyleElement> | undefined;
+
+		if ( !styleElements ) {
+			return;
+		}
+
+		const sanitizeCss = editor.config.get( 'htmlSupport.fullPage.sanitizeCss' )!;
+
+		// 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( root: RootElement ): void {
+		this._removeStyleElementsFromDom();
+		this._renderStyleElementsInDom( root );
+	}
+}
+
+/**
+ * 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
@@ -53,6 +53,11 @@ 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 );
 
+		// List of `<style>` elements extracted from document's `<head>` element.
+		const headStylesElements = Array.from( domFragment.ownerDocument.querySelectorAll( 'head style' ) );
+
+		writer.setCustomProperty( '$fullPageHeadStyles', headStylesElements, viewFragment );
+
 		if ( docType ) {
 			writer.setCustomProperty( '$fullPageDocType', docType, viewFragment );
 		}

diff --git a/packages/ckeditor5-html-support/src/index.ts b/packages/ckeditor5-html-support/src/index.ts
@@ -8,7 +8,7 @@
  */
 
 export { default as GeneralHtmlSupport } from './generalhtmlsupport.js';
-export { default as DataFilter } from './datafilter.js';
+export { default as DataFilter, type DataFilterRegisterEvent } from './datafilter.js';
 export { default as DataSchema, type DataSchemaBlockElementDefinition } from './dataschema.js';
 export { default as HtmlComment } from './htmlcomment.js';
 export { default as FullPage } from './fullpage.js';