/**
* @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 highlight/highlightconfig
*/
/**
* The highlight option descriptor. See {@link module:highlight/highlightconfig~HighlightConfig} to learn more.
*
* ```ts
* {
* 	model: 'pinkMarker',
* 	class: 'marker-pink',
* 	title: 'Pink Marker',
* 	color: 'var(--ck-content-highlight-marker-pink)',
* 	type: 'marker'
* }
* ```
*/
export interface HighlightOption {
	/**
	* The user-readable title of the option.
	*/
	title: string;
	/**
	* The unique attribute value in the model.
	*/
	model: string;
	/**
	* The CSS `var()` used for the highlighter. The color is used in the user interface to represent the highlighter.
	* There is a possibility to use the default color format like rgb, hex or hsl, but you need to care about the color of `<mark>`
	* by adding CSS classes definition.
	*/
	color: string;
	/**
	* The CSS class used on the `<mark>` element in the view. It should match the `color` setting.
	*/
	class: string;
	/**
	* The type of highlighter:
	*
	* * `'marker'` &ndash; Uses the `color` as the `background-color` style,
	* * `'pen'` &ndash; Uses the `color` as the font `color` style.
	*/
	type: "marker" | "pen";
}
/**
* The configuration of the {@link module:highlight/highlight~Highlight highlight feature}.
* ```ts
* ClassicEditor
* 	.create( {
* 		highlight:  ... // Highlight feature configuration.
* 	} )
* 	.then( ... )
* 	.catch( ... );
* ```
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
*/
export interface HighlightConfig {
	/**
	* The available highlight options. The default value is:
	* ```ts
	* options: [
	* 	{
	* 		model: 'yellowMarker',
	* 		class: 'marker-yellow',
	* 		title: 'Yellow marker',
	* 		color: 'var(--ck-content-highlight-marker-yellow)',
	* 		type: 'marker'
	* 	},
	* 	{
	* 		model: 'greenMarker',
	* 		class: 'marker-green',
	* 		title: 'Green marker',
	* 		color: 'var(--ck-content-highlight-marker-green)',
	* 		type: 'marker'
	* 	},
	* 	{
	* 		model: 'pinkMarker',
	* 		class: 'marker-pink',
	* 		title: 'Pink marker',
	* 		color: 'var(--ck-content-highlight-marker-pink)',
	* 		type: 'marker'
	* 	},
	* 	{
	* 		model: 'blueMarker',
	* 		class: 'marker-blue',
	* 		title: 'Blue marker',
	* 		color: 'var(--ck-content-highlight-marker-blue)',
	* 		type: 'marker'
	* 	},
	* 	{
	* 		model: 'redPen',
	* 		class: 'pen-red',
	* 		title: 'Red pen',
	* 		color: 'var(--ck-content-highlight-pen-red)',
	* 		type: 'pen'
	* 	},
	* 	{
	* 		model: 'greenPen',
	* 		class: 'pen-green',
	* 		title: 'Green pen',
	* 		color: 'var(--ck-content-highlight-pen-green)',
	* 		type: 'pen'
	* 	}
	* ]
	* ```
	*
	* There are two types of highlighters available:
	*
	* * `'marker'` &ndash; Rendered as a `<mark>` element, styled with the `background-color`.
	* * `'pen'` &ndash; Rendered as a `<mark>` element, styled with the font `color`.
	*
	* **Note**: The highlight feature provides a stylesheet with the CSS classes and corresponding colors defined
	* as CSS variables.
	*
	* ```css
	* :root {
	* 	--ck-content-highlight-marker-yellow: #fdfd77;
	* 	--ck-content-highlight-marker-green: #63f963;
	* 	--ck-content-highlight-marker-pink: #fc7999;
	* 	--ck-content-highlight-marker-blue: #72cdfd;
	* 	--ck-content-highlight-pen-red: #e91313;
	* 	--ck-content-highlight-pen-green: #118800;
	* }
	*
	* .marker-yellow { ... }
	* .marker-green { ... }
	* .marker-pink { ... }
	* .marker-blue { ... }
	* .pen-red { ... }
	* .pen-green { ... }
	* ```
	*
	* It is possible to define the `color` property directly as `rgba(R, G, B, A)`,
	* `#RRGGBB[AA]` or `hsla(H, S, L, A)`. In such situation, the color will **only** apply to the UI of
	* the editor and the `<mark>` elements in the content must be styled by custom classes provided by
	* a dedicated stylesheet.
	*
	* **Note**: It is recommended for the `color` property to correspond to the class in the content
	* stylesheet because it represents the highlighter in the user interface of the editor.
	*
	* ```ts
	* ClassicEditor
	* 	.create( {
	* 		highlight: {
	* 			options: [
	* 				{
	* 					model: 'pinkMarker',
	* 					class: 'marker-pink',
	* 					title: 'Pink Marker',
	* 					color: 'var(--ck-content-highlight-marker-pink)',
	* 					type: 'marker'
	* 				},
	* 				{
	* 					model: 'redPen',
	* 					class: 'pen-red',
	* 					title: 'Red Pen',
	* 					color: 'var(--ck-content-highlight-pen-red)',
	* 					type: 'pen'
	* 				},
	* 			]
	* 		}
	* } )
	* .then( ... )
	* .catch( ... );
	* ```
	*/
	options: Array<HighlightOption>;
}