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

The export with inline styles feature for CKEditor 5.

/**
 * @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
 */
/**
 * @module export-inline-styles/exportinlinestyles
 * @publicApi
 */
import type { StylesMap } from 'ckeditor5/src/engine.js';
import { Plugin } from 'ckeditor5/src/core.js';
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 get isOfficialPlugin(): true;
    /**
     * @inheritDoc
     */
    static get isPremiumPlugin(): true;
    /**
     * @inheritDoc
     */
    static get requires(): readonly [typeof ExportInlineStylesEditing];
    /**
     * @inheritDoc
     */
    init(): void;
    /**
     * @inheritDoc
     */
    destroy(): void;
}
/**
 * The configuration of the export inline styles feature. It is used by the `@ckeditor/ckeditor5-export-inline-styles` package.
 *
 * ```ts
 * ClassicEditor
 * 	.create( editorElement, {
 * 		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>;
}
/**
 * The callback function that is called for each element being processed.
 *
 * @param element The DOM element being processed.
 * @param stylesMap The map of styles to be applied to the element.
 */
export type ExportInlineStylesTransformation = (element: HTMLElement, stylesMap: StylesMap) => void;