@ckeditor/ckeditor5-export-inline-styles/dist/exportinlinestyles.d.ts

The export with inline styles feature for CKEditor 5.

/**
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* @module export-inline-styles/exportinlinestyles
* @publicApi
*/
import type { StylesMap } from "@ckeditor/ckeditor5-engine";
import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
import { ExportInlineStylesEditing } from "./exportinlinestylesediting.js";
/**
* The plugin responsible for converting external CSS styles to inline styles.
*/
export declare class ExportInlineStyles extends Plugin {
	/**
	* @inheritDoc
	*/
	static get pluginName(): "ExportInlineStyles";
	/**
	* @inheritDoc
	*/
	static override get isOfficialPlugin(): true;
	/**
	* @inheritDoc
	*/
	static override get isPremiumPlugin(): true;
	/**
	* @inheritDoc
	*/
	static get requires(): PluginDependenciesOf<[ExportInlineStylesEditing]>;
	/**
	* @inheritDoc
	*/
	init(): void;
	/**
	* @inheritDoc
	*/
	override destroy(): void;
}
/**
* The configuration of the export inline styles feature. It is used by the `@ckeditor/ckeditor5-export-inline-styles` package.
*
* ```ts
* ClassicEditor
* 	.create( {
* 		exportInlineStyles: ... // Export inline styles feature options.
* 	} )
* 	.then( ... )
* 	.catch( ... );
*/
export interface ExportInlineStylesConfig {
	/**
	* Paths to the `.css` files containing styling that should be converted to inline styles (**the order of provided items matters**).
	*
	* ```ts
	* const exportInlineStylesConfig = {
	* 	stylesheets: [ './path/to/custom-style.css' ]
	* }
	* ```
	*
	* **NOTE:** If `stylesheets` are not provided, the plugin will process only
	* {@glink getting-started/setup/css the default editor content styles}.
	*
	* **Default editor's content styles**:
	* {@glink getting-started/setup/css The default editor content styles}
	* are processed thanks to the `'EDITOR_STYLES'` token, which is provided to the `stylesheets` by default.
	* If you don't want them to be processed, you have to omit the token:
	*
	* **NOTE:** The `'EDITOR_STYLES'` string is only supported in legacy custom builds with webpack or DLLs.
	* In other setups you always need to pass the stylesheets.
	*
	* ```ts
	* const exportInlineStylesConfig = {
	* 	stylesheets: [ './path/to/custom-editor-styles.css' ]
	* }
	* ```
	*
	* **Multiple stylesheets:** You can provide multiple stylesheets that will be processed in order:
	*
	* ```ts
	* const exportInlineStylesConfig = {
	* 	stylesheets: [
	* 		'./path/to/base-styles.css',
	* 		'./path/to/theme-styles.css',
	* 		'./path/to/custom-styles.css'
	* 	]
	* 	]
	* }
	* ```
	*
	* @default [ 'EDITOR_STYLES' ]
	*/
	stylesheets?: Array<string>;
	/**
	* Internal CSS styles that will be processed after the external stylesheets.
	* The styles should be provided as a regular CSS string.
	*
	* ```ts
	* const exportInlineStylesConfig = {
	* 	inlineCss: `
	* 		.my-class {
	* 			color: red;
	* 			font-weight: bold;
	* 		}
	*
	* 		.other-class {
	* 			margin: 10px;
	* 			padding: 5px;
	* 		}
	* 	`
	* }
	* ```
	*
	* **NOTE:** These styles are processed after the external stylesheets, so they can override styles from external files.
	*
	* @default ''
	*/
	inlineCss?: string;
	/**
	* When enabled, CSS classes will be removed from DOM elements after the inline styles
	* have been applied. This ensures that the exported content does not depend on external
	* CSS classes while preserving the visual styling through inline styles.
	*
	* ```ts
	* const exportInlineStylesConfig = {
	* 	stripCssClasses: true
	* }
	* ```
	*
	* @default false
	*/
	stripCssClasses?: boolean;
	/**
	* A list of transformation callbacks applied to HTML elements before assigning inlined styles to them and
	* processing the children. It allows you to modify the elements based on the applied styles.
	*
	* Note that the wrapping element with class `ck-content` is transformed first. Setting inline styles on this element
	* will cause those styles to be inherited by all its child elements.
	*
	* ```ts
	* const exportInlineStylesConfig = {
	*		transformations: [
	*			( element, stylesMap ) => {
	*				if ( element.tagName.toLowerCase() === 'p' && stylesMap.get( 'text-align' ) === 'center' ) {
	*					element.setAttribute( 'data-aligned', 'center' );
	*					stylesMap.remove( 'text-align' );
	*				}
	*
	*				// Example of setting a font on the root `ck-content` element.
	*				// This will cause all child elements to inherit the font and color.
	*				if ( element.classList.contains( 'ck-content' ) ) {
	*					stylesMap.set( 'font-family', 'Arial, sans-serif' );
	*					stylesMap.set( 'color', '#333' );
	*				}
	*			},
	*			// ...
	*		]
	* }
	* ```
	*
	* @default []
	*/
	transformations?: Array<ExportInlineStylesTransformation>;
}
/**
* A "runner" function that allows controlling the execution of logic after an element's children have been processed.
* * It is passed as an argument to the transformation callback, enabling additional operations
* on the element after its descendants have had their styles inlined.
*
* @param runner The function that executes the post-transformation logic.
*/
export type ExportInlineStylesPostTransformationRunner = (runner: VoidFunction) => void;
/**
* An object containing helper functions to control the transformation flow during the inline styles conversion.
*/
export type ExportInlineStylesTransformationAttrs = {
	/**
	* A function used to register a callback to be executed after the entire document has been processed.
	*
	* It is particularly useful when you want to modify or replace the HTML structure of the document
	* (e.g., replacing a `figure` with a `section`) without breaking the CSS selector matching for inline styles.
	* By deferring structural changes to this callback, elements will still receive inline styles based on
	* their original DOM structure (e.g., a `div` will still get styles from a `figure > div` selector before
	* the parent `figure` is turned into a `section`).
	*/
	runAfterDocumentTransformation: ExportInlineStylesPostTransformationRunner;
	/**
	* A function used to register a callback to be executed after the current element's children
	* have been processed.
	*
	* This allows for modifications based on the final state of the descendants.
	*/
	runAfterChildrenTransformation: ExportInlineStylesPostTransformationRunner;
};
/**
* The callback function that is called for each element being processed during the inline styles conversion.
*
* @param element The DOM element being processed.
* @param stylesMap The map of styles to be applied to the element. This map can be modified
* (adding, removing, or updating styles) before they are inlined.
* @param attrs Helpers to control the transformation flow.
* @returns The new element that will be used instead of the original one, or `undefined` to
* keep the original element. It may be used when a transformer replaces one element with
* another (e.g., converting a `figure` to a `div`).
*/
export type ExportInlineStylesTransformation = (element: HTMLElement, stylesMap: StylesMap, attrs: ExportInlineStylesTransformationAttrs) => HTMLElement | undefined | void;