-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
styleconfig.ts
91 lines (87 loc) · 2.42 KB
/
styleconfig.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module style/styleconfig
*/
/**
* The configuration of the style feature.
*
* ```ts
* ClassicEditor
* .create( {
* style: ... // Style feature config.
* } )
* .then( ... )
* .catch( ... );
* ```
*
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
*/
export interface StyleConfig {
/**
* The available style definitions.
*
* Style definitions are displayed in the `'style'` UI dropdown and get applied by the
* {@link module:style/stylecommand~StyleCommand style command} to the content of the document.
*
* In the `'style'` UI dropdown, definitions are automatically grouped into two categories based on the of the `element` property:
*
* * **Block styles**: Can be applied to entire {@link module:html-support/dataschema~DataSchema#registerBlockElement block elements}
* only (e.g. headings, paragraphs, divs).
* * **Text styles**: Can by applied to any {@link module:html-support/dataschema~DataSchema#registerInlineElement text} in any element
* in the document.
*
* An example configuration:
*
* ```ts
* [
* // Definitions of block styles.
* {
* name: 'Red heading',
* element: 'h2',
* classes: [ 'red-heading' ]
* },
* {
* name: 'Vibrant code',
* element: 'pre',
* classes: [ 'vibrant-code' ]
* },
*
* // Definitions of text (inline) styles.
* {
* name: 'Marker',
* element: 'span',
* classes: [ 'marker' ]
* },
*
* // ...
* ]
* ```
*
* **Note**: Configuring style definitions will automatically configure the
* {@glink features/html/general-html-support General HTML Support feature}. **You do not need to repeat the configuration in
* {@link module:html-support/generalhtmlsupportconfig~GeneralHtmlSupportConfig}**.
*/
definitions?: Array<StyleDefinition>;
}
/**
* Style definition.
*
* An object describing a style definition. It contains the style `name`, `element` name and an array of CSS `classes`.
*
* ```ts
* // This style will create <h2 class="foo">...</h2> in the document data.
* {
* name: 'Example style',
* element: 'h2',
* classes: [ 'foo' ]
* }
* ```
*/
export interface StyleDefinition {
name: string;
element: string;
classes: Array<string>;
}