@ckeditor/ckeditor5-engine 40.0.0 → 40.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (243) hide show
  1. package/CHANGELOG.md +39 -39
  2. package/LICENSE.md +3 -3
  3. package/package.json +2 -2
  4. package/src/controller/datacontroller.d.ts +334 -334
  5. package/src/controller/datacontroller.js +481 -481
  6. package/src/controller/editingcontroller.d.ts +98 -98
  7. package/src/controller/editingcontroller.js +191 -191
  8. package/src/conversion/conversion.d.ts +478 -478
  9. package/src/conversion/conversion.js +601 -601
  10. package/src/conversion/conversionhelpers.d.ts +26 -26
  11. package/src/conversion/conversionhelpers.js +32 -32
  12. package/src/conversion/downcastdispatcher.d.ts +562 -562
  13. package/src/conversion/downcastdispatcher.js +548 -547
  14. package/src/conversion/downcasthelpers.d.ts +1226 -1226
  15. package/src/conversion/downcasthelpers.js +2178 -2183
  16. package/src/conversion/mapper.d.ts +503 -503
  17. package/src/conversion/mapper.js +536 -536
  18. package/src/conversion/modelconsumable.d.ts +201 -201
  19. package/src/conversion/modelconsumable.js +333 -333
  20. package/src/conversion/upcastdispatcher.d.ts +492 -492
  21. package/src/conversion/upcastdispatcher.js +460 -460
  22. package/src/conversion/upcasthelpers.d.ts +499 -499
  23. package/src/conversion/upcasthelpers.js +950 -950
  24. package/src/conversion/viewconsumable.d.ts +369 -369
  25. package/src/conversion/viewconsumable.js +536 -532
  26. package/src/dataprocessor/basichtmlwriter.d.ts +18 -18
  27. package/src/dataprocessor/basichtmlwriter.js +20 -19
  28. package/src/dataprocessor/dataprocessor.d.ts +61 -61
  29. package/src/dataprocessor/dataprocessor.js +5 -5
  30. package/src/dataprocessor/htmldataprocessor.d.ts +76 -76
  31. package/src/dataprocessor/htmldataprocessor.js +96 -96
  32. package/src/dataprocessor/htmlwriter.d.ts +16 -16
  33. package/src/dataprocessor/htmlwriter.js +5 -5
  34. package/src/dataprocessor/xmldataprocessor.d.ts +90 -90
  35. package/src/dataprocessor/xmldataprocessor.js +108 -108
  36. package/src/dev-utils/model.d.ts +124 -124
  37. package/src/dev-utils/model.js +395 -395
  38. package/src/dev-utils/operationreplayer.d.ts +51 -51
  39. package/src/dev-utils/operationreplayer.js +112 -112
  40. package/src/dev-utils/utils.d.ts +37 -37
  41. package/src/dev-utils/utils.js +73 -73
  42. package/src/dev-utils/view.d.ts +319 -319
  43. package/src/dev-utils/view.js +967 -967
  44. package/src/index.d.ts +114 -114
  45. package/src/index.js +78 -78
  46. package/src/model/batch.d.ts +106 -106
  47. package/src/model/batch.js +96 -96
  48. package/src/model/differ.d.ts +387 -387
  49. package/src/model/differ.js +1149 -1149
  50. package/src/model/document.d.ts +272 -272
  51. package/src/model/document.js +360 -361
  52. package/src/model/documentfragment.d.ts +200 -200
  53. package/src/model/documentfragment.js +306 -306
  54. package/src/model/documentselection.d.ts +420 -420
  55. package/src/model/documentselection.js +993 -993
  56. package/src/model/element.d.ts +165 -165
  57. package/src/model/element.js +281 -281
  58. package/src/model/history.d.ts +114 -114
  59. package/src/model/history.js +207 -207
  60. package/src/model/item.d.ts +14 -14
  61. package/src/model/item.js +5 -5
  62. package/src/model/liveposition.d.ts +77 -77
  63. package/src/model/liveposition.js +93 -93
  64. package/src/model/liverange.d.ts +102 -102
  65. package/src/model/liverange.js +120 -120
  66. package/src/model/markercollection.d.ts +335 -335
  67. package/src/model/markercollection.js +403 -403
  68. package/src/model/model.d.ts +919 -919
  69. package/src/model/model.js +842 -842
  70. package/src/model/node.d.ts +256 -256
  71. package/src/model/node.js +375 -375
  72. package/src/model/nodelist.d.ts +91 -91
  73. package/src/model/nodelist.js +163 -163
  74. package/src/model/operation/attributeoperation.d.ts +103 -103
  75. package/src/model/operation/attributeoperation.js +148 -148
  76. package/src/model/operation/detachoperation.d.ts +60 -60
  77. package/src/model/operation/detachoperation.js +77 -77
  78. package/src/model/operation/insertoperation.d.ts +90 -90
  79. package/src/model/operation/insertoperation.js +135 -135
  80. package/src/model/operation/markeroperation.d.ts +91 -91
  81. package/src/model/operation/markeroperation.js +107 -107
  82. package/src/model/operation/mergeoperation.d.ts +100 -100
  83. package/src/model/operation/mergeoperation.js +167 -167
  84. package/src/model/operation/moveoperation.d.ts +96 -96
  85. package/src/model/operation/moveoperation.js +164 -164
  86. package/src/model/operation/nooperation.d.ts +38 -38
  87. package/src/model/operation/nooperation.js +48 -48
  88. package/src/model/operation/operation.d.ts +96 -96
  89. package/src/model/operation/operation.js +59 -62
  90. package/src/model/operation/operationfactory.d.ts +18 -18
  91. package/src/model/operation/operationfactory.js +44 -44
  92. package/src/model/operation/renameoperation.d.ts +83 -83
  93. package/src/model/operation/renameoperation.js +115 -115
  94. package/src/model/operation/rootattributeoperation.d.ts +98 -98
  95. package/src/model/operation/rootattributeoperation.js +155 -155
  96. package/src/model/operation/rootoperation.d.ts +76 -76
  97. package/src/model/operation/rootoperation.js +90 -90
  98. package/src/model/operation/splitoperation.d.ts +109 -109
  99. package/src/model/operation/splitoperation.js +194 -194
  100. package/src/model/operation/transform.d.ts +100 -100
  101. package/src/model/operation/transform.js +1985 -1985
  102. package/src/model/operation/utils.d.ts +71 -71
  103. package/src/model/operation/utils.js +217 -213
  104. package/src/model/position.d.ts +539 -539
  105. package/src/model/position.js +979 -979
  106. package/src/model/range.d.ts +458 -458
  107. package/src/model/range.js +875 -875
  108. package/src/model/rootelement.d.ts +60 -60
  109. package/src/model/rootelement.js +74 -74
  110. package/src/model/schema.d.ts +1186 -1186
  111. package/src/model/schema.js +1242 -1242
  112. package/src/model/selection.d.ts +482 -482
  113. package/src/model/selection.js +789 -789
  114. package/src/model/text.d.ts +66 -66
  115. package/src/model/text.js +85 -85
  116. package/src/model/textproxy.d.ts +144 -144
  117. package/src/model/textproxy.js +189 -189
  118. package/src/model/treewalker.d.ts +186 -186
  119. package/src/model/treewalker.js +244 -244
  120. package/src/model/typecheckable.d.ts +285 -285
  121. package/src/model/typecheckable.js +16 -16
  122. package/src/model/utils/autoparagraphing.d.ts +37 -37
  123. package/src/model/utils/autoparagraphing.js +63 -63
  124. package/src/model/utils/deletecontent.d.ts +58 -58
  125. package/src/model/utils/deletecontent.js +488 -488
  126. package/src/model/utils/findoptimalinsertionrange.d.ts +32 -32
  127. package/src/model/utils/findoptimalinsertionrange.js +57 -57
  128. package/src/model/utils/getselectedcontent.d.ts +30 -30
  129. package/src/model/utils/getselectedcontent.js +125 -125
  130. package/src/model/utils/insertcontent.d.ts +46 -46
  131. package/src/model/utils/insertcontent.js +705 -705
  132. package/src/model/utils/insertobject.d.ts +44 -44
  133. package/src/model/utils/insertobject.js +139 -139
  134. package/src/model/utils/modifyselection.d.ts +48 -48
  135. package/src/model/utils/modifyselection.js +186 -186
  136. package/src/model/utils/selection-post-fixer.d.ts +74 -74
  137. package/src/model/utils/selection-post-fixer.js +260 -260
  138. package/src/model/writer.d.ts +851 -851
  139. package/src/model/writer.js +1306 -1306
  140. package/src/view/attributeelement.d.ts +108 -108
  141. package/src/view/attributeelement.js +184 -184
  142. package/src/view/containerelement.d.ts +49 -49
  143. package/src/view/containerelement.js +80 -80
  144. package/src/view/datatransfer.d.ts +79 -79
  145. package/src/view/datatransfer.js +98 -98
  146. package/src/view/document.d.ts +184 -184
  147. package/src/view/document.js +122 -120
  148. package/src/view/documentfragment.d.ts +153 -149
  149. package/src/view/documentfragment.js +234 -228
  150. package/src/view/documentselection.d.ts +306 -306
  151. package/src/view/documentselection.js +256 -256
  152. package/src/view/domconverter.d.ts +652 -640
  153. package/src/view/domconverter.js +1473 -1450
  154. package/src/view/downcastwriter.d.ts +996 -996
  155. package/src/view/downcastwriter.js +1696 -1696
  156. package/src/view/editableelement.d.ts +62 -62
  157. package/src/view/editableelement.js +62 -62
  158. package/src/view/element.d.ts +468 -468
  159. package/src/view/element.js +724 -724
  160. package/src/view/elementdefinition.d.ts +87 -87
  161. package/src/view/elementdefinition.js +5 -5
  162. package/src/view/emptyelement.d.ts +41 -41
  163. package/src/view/emptyelement.js +73 -73
  164. package/src/view/filler.d.ts +111 -111
  165. package/src/view/filler.js +150 -150
  166. package/src/view/item.d.ts +14 -14
  167. package/src/view/item.js +5 -5
  168. package/src/view/matcher.d.ts +486 -486
  169. package/src/view/matcher.js +507 -507
  170. package/src/view/node.d.ts +163 -163
  171. package/src/view/node.js +228 -228
  172. package/src/view/observer/arrowkeysobserver.d.ts +45 -45
  173. package/src/view/observer/arrowkeysobserver.js +40 -40
  174. package/src/view/observer/bubblingemittermixin.d.ts +166 -166
  175. package/src/view/observer/bubblingemittermixin.js +172 -172
  176. package/src/view/observer/bubblingeventinfo.d.ts +47 -47
  177. package/src/view/observer/bubblingeventinfo.js +37 -37
  178. package/src/view/observer/clickobserver.d.ts +43 -43
  179. package/src/view/observer/clickobserver.js +29 -29
  180. package/src/view/observer/compositionobserver.d.ts +82 -82
  181. package/src/view/observer/compositionobserver.js +60 -60
  182. package/src/view/observer/domeventdata.d.ts +50 -50
  183. package/src/view/observer/domeventdata.js +47 -47
  184. package/src/view/observer/domeventobserver.d.ts +73 -73
  185. package/src/view/observer/domeventobserver.js +79 -79
  186. package/src/view/observer/fakeselectionobserver.d.ts +47 -47
  187. package/src/view/observer/fakeselectionobserver.js +91 -91
  188. package/src/view/observer/focusobserver.d.ts +82 -82
  189. package/src/view/observer/focusobserver.js +86 -86
  190. package/src/view/observer/inputobserver.d.ts +86 -86
  191. package/src/view/observer/inputobserver.js +164 -164
  192. package/src/view/observer/keyobserver.d.ts +66 -66
  193. package/src/view/observer/keyobserver.js +39 -39
  194. package/src/view/observer/mouseobserver.d.ts +89 -89
  195. package/src/view/observer/mouseobserver.js +29 -29
  196. package/src/view/observer/mutationobserver.d.ts +86 -86
  197. package/src/view/observer/mutationobserver.js +206 -206
  198. package/src/view/observer/observer.d.ts +89 -89
  199. package/src/view/observer/observer.js +84 -84
  200. package/src/view/observer/selectionobserver.d.ts +148 -148
  201. package/src/view/observer/selectionobserver.js +202 -202
  202. package/src/view/observer/tabobserver.d.ts +46 -46
  203. package/src/view/observer/tabobserver.js +42 -42
  204. package/src/view/placeholder.d.ts +96 -96
  205. package/src/view/placeholder.js +267 -267
  206. package/src/view/position.d.ts +189 -189
  207. package/src/view/position.js +324 -324
  208. package/src/view/range.d.ts +279 -279
  209. package/src/view/range.js +430 -430
  210. package/src/view/rawelement.d.ts +73 -73
  211. package/src/view/rawelement.js +105 -105
  212. package/src/view/renderer.d.ts +265 -265
  213. package/src/view/renderer.js +1000 -999
  214. package/src/view/rooteditableelement.d.ts +41 -41
  215. package/src/view/rooteditableelement.js +69 -69
  216. package/src/view/selection.d.ts +375 -375
  217. package/src/view/selection.js +559 -559
  218. package/src/view/styles/background.d.ts +33 -33
  219. package/src/view/styles/background.js +74 -74
  220. package/src/view/styles/border.d.ts +43 -43
  221. package/src/view/styles/border.js +316 -316
  222. package/src/view/styles/margin.d.ts +29 -29
  223. package/src/view/styles/margin.js +34 -34
  224. package/src/view/styles/padding.d.ts +29 -29
  225. package/src/view/styles/padding.js +34 -34
  226. package/src/view/styles/utils.d.ts +93 -93
  227. package/src/view/styles/utils.js +219 -219
  228. package/src/view/stylesmap.d.ts +675 -675
  229. package/src/view/stylesmap.js +765 -766
  230. package/src/view/text.d.ts +74 -74
  231. package/src/view/text.js +93 -93
  232. package/src/view/textproxy.d.ts +97 -97
  233. package/src/view/textproxy.js +124 -124
  234. package/src/view/treewalker.d.ts +195 -195
  235. package/src/view/treewalker.js +327 -327
  236. package/src/view/typecheckable.d.ts +448 -448
  237. package/src/view/typecheckable.js +19 -19
  238. package/src/view/uielement.d.ts +96 -96
  239. package/src/view/uielement.js +183 -182
  240. package/src/view/upcastwriter.d.ts +417 -417
  241. package/src/view/upcastwriter.js +359 -359
  242. package/src/view/view.d.ts +487 -487
  243. package/src/view/view.js +546 -546
@@ -1,766 +1,765 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module engine/view/stylesmap
7
- */
8
- import { get, isObject, merge, set, unset } from 'lodash-es';
9
- /**
10
- * Styles map. Allows handling (adding, removing, retrieving) a set of style rules (usually, of an element).
11
- *
12
- * The styles map is capable of normalizing style names so e.g. the following operations are possible:
13
- */
14
- export default class StylesMap {
15
- /**
16
- * Creates Styles instance.
17
- */
18
- constructor(styleProcessor) {
19
- this._styles = {};
20
- this._styleProcessor = styleProcessor;
21
- }
22
- /**
23
- * Returns true if style map has no styles set.
24
- */
25
- get isEmpty() {
26
- const entries = Object.entries(this._styles);
27
- const from = Array.from(entries);
28
- return !from.length;
29
- }
30
- /**
31
- * Number of styles defined.
32
- */
33
- get size() {
34
- if (this.isEmpty) {
35
- return 0;
36
- }
37
- return this.getStyleNames().length;
38
- }
39
- /**
40
- * Set styles map to a new value.
41
- *
42
- * ```ts
43
- * styles.setTo( 'border:1px solid blue;margin-top:1px;' );
44
- * ```
45
- */
46
- setTo(inlineStyle) {
47
- this.clear();
48
- const parsedStyles = Array.from(parseInlineStyles(inlineStyle).entries());
49
- for (const [key, value] of parsedStyles) {
50
- this._styleProcessor.toNormalizedForm(key, value, this._styles);
51
- }
52
- }
53
- /**
54
- * Checks if a given style is set.
55
- *
56
- * ```ts
57
- * styles.setTo( 'margin-left:1px;' );
58
- *
59
- * styles.has( 'margin-left' ); // -> true
60
- * styles.has( 'padding' ); // -> false
61
- * ```
62
- *
63
- * **Note**: This check supports normalized style names.
64
- *
65
- * ```ts
66
- * // Enable 'margin' shorthand processing:
67
- * editor.data.addStyleProcessorRules( addMarginRules );
68
- *
69
- * styles.setTo( 'margin:2px;' );
70
- *
71
- * styles.has( 'margin' ); // -> true
72
- * styles.has( 'margin-top' ); // -> true
73
- * styles.has( 'margin-left' ); // -> true
74
- *
75
- * styles.remove( 'margin-top' );
76
- *
77
- * styles.has( 'margin' ); // -> false
78
- * styles.has( 'margin-top' ); // -> false
79
- * styles.has( 'margin-left' ); // -> true
80
- * ```
81
- *
82
- * @param name Style name.
83
- */
84
- has(name) {
85
- if (this.isEmpty) {
86
- return false;
87
- }
88
- const styles = this._styleProcessor.getReducedForm(name, this._styles);
89
- const propertyDescriptor = styles.find(([property]) => property === name);
90
- // Only return a value if it is set;
91
- return Array.isArray(propertyDescriptor);
92
- }
93
- set(nameOrObject, valueOrObject) {
94
- if (isObject(nameOrObject)) {
95
- for (const [key, value] of Object.entries(nameOrObject)) {
96
- this._styleProcessor.toNormalizedForm(key, value, this._styles);
97
- }
98
- }
99
- else {
100
- this._styleProcessor.toNormalizedForm(nameOrObject, valueOrObject, this._styles);
101
- }
102
- }
103
- /**
104
- * Removes given style.
105
- *
106
- * ```ts
107
- * styles.setTo( 'background:#f00;margin-right:2px;' );
108
- *
109
- * styles.remove( 'background' );
110
- *
111
- * styles.toString(); // -> 'margin-right:2px;'
112
- * ```
113
- *
114
- * ***Note**:* This method uses {@link module:engine/controller/datacontroller~DataController#addStyleProcessorRules
115
- * enabled style processor rules} to normalize passed values.
116
- *
117
- * ```ts
118
- * // Enable 'margin' shorthand processing:
119
- * editor.data.addStyleProcessorRules( addMarginRules );
120
- *
121
- * styles.setTo( 'margin:1px' );
122
- *
123
- * styles.remove( 'margin-top' );
124
- * styles.remove( 'margin-right' );
125
- *
126
- * styles.toString(); // -> 'margin-bottom:1px;margin-left:1px;'
127
- * ```
128
- *
129
- * @param name Style name.
130
- */
131
- remove(name) {
132
- const path = toPath(name);
133
- unset(this._styles, path);
134
- delete this._styles[name];
135
- this._cleanEmptyObjectsOnPath(path);
136
- }
137
- /**
138
- * Returns a normalized style object or a single value.
139
- *
140
- * ```ts
141
- * // Enable 'margin' shorthand processing:
142
- * editor.data.addStyleProcessorRules( addMarginRules );
143
- *
144
- * const styles = new Styles();
145
- * styles.setTo( 'margin:1px 2px 3em;' );
146
- *
147
- * styles.getNormalized( 'margin' );
148
- * // will log:
149
- * // {
150
- * // top: '1px',
151
- * // right: '2px',
152
- * // bottom: '3em',
153
- * // left: '2px' // normalized value from margin shorthand
154
- * // }
155
- *
156
- * styles.getNormalized( 'margin-left' ); // -> '2px'
157
- * ```
158
- *
159
- * **Note**: This method will only return normalized styles if a style processor was defined.
160
- *
161
- * @param name Style name.
162
- */
163
- getNormalized(name) {
164
- return this._styleProcessor.getNormalized(name, this._styles);
165
- }
166
- /**
167
- * Returns a normalized style string. Styles are sorted by name.
168
- *
169
- * ```ts
170
- * styles.set( 'margin' , '1px' );
171
- * styles.set( 'background', '#f00' );
172
- *
173
- * styles.toString(); // -> 'background:#f00;margin:1px;'
174
- * ```
175
- *
176
- * **Note**: This method supports normalized styles if defined.
177
- *
178
- * ```ts
179
- * // Enable 'margin' shorthand processing:
180
- * editor.data.addStyleProcessorRules( addMarginRules );
181
- *
182
- * styles.set( 'margin' , '1px' );
183
- * styles.set( 'background', '#f00' );
184
- * styles.remove( 'margin-top' );
185
- * styles.remove( 'margin-right' );
186
- *
187
- * styles.toString(); // -> 'background:#f00;margin-bottom:1px;margin-left:1px;'
188
- * ```
189
- */
190
- toString() {
191
- if (this.isEmpty) {
192
- return '';
193
- }
194
- return this._getStylesEntries()
195
- .map(arr => arr.join(':'))
196
- .sort()
197
- .join(';') + ';';
198
- }
199
- /**
200
- * Returns property as a value string or undefined if property is not set.
201
- *
202
- * ```ts
203
- * // Enable 'margin' shorthand processing:
204
- * editor.data.addStyleProcessorRules( addMarginRules );
205
- *
206
- * const styles = new Styles();
207
- * styles.setTo( 'margin:1px;' );
208
- * styles.set( 'margin-bottom', '3em' );
209
- *
210
- * styles.getAsString( 'margin' ); // -> 'margin: 1px 1px 3em;'
211
- * ```
212
- *
213
- * Note, however, that all sub-values must be set for the longhand property name to return a value:
214
- *
215
- * ```ts
216
- * const styles = new Styles();
217
- * styles.setTo( 'margin:1px;' );
218
- * styles.remove( 'margin-bottom' );
219
- *
220
- * styles.getAsString( 'margin' ); // -> undefined
221
- * ```
222
- *
223
- * In the above scenario, it is not possible to return a `margin` value, so `undefined` is returned.
224
- * Instead, you should use:
225
- *
226
- * ```ts
227
- * const styles = new Styles();
228
- * styles.setTo( 'margin:1px;' );
229
- * styles.remove( 'margin-bottom' );
230
- *
231
- * for ( const styleName of styles.getStyleNames() ) {
232
- * console.log( styleName, styles.getAsString( styleName ) );
233
- * }
234
- * // 'margin-top', '1px'
235
- * // 'margin-right', '1px'
236
- * // 'margin-left', '1px'
237
- * ```
238
- *
239
- * In general, it is recommend to iterate over style names like in the example above. This way, you will always get all
240
- * the currently set style values. So, if all the 4 margin values would be set
241
- * the for-of loop above would yield only `'margin'`, `'1px'`:
242
- *
243
- * ```ts
244
- * const styles = new Styles();
245
- * styles.setTo( 'margin:1px;' );
246
- *
247
- * for ( const styleName of styles.getStyleNames() ) {
248
- * console.log( styleName, styles.getAsString( styleName ) );
249
- * }
250
- * // 'margin', '1px'
251
- * ```
252
- *
253
- * **Note**: To get a normalized version of a longhand property use the {@link #getNormalized `#getNormalized()`} method.
254
- */
255
- getAsString(propertyName) {
256
- if (this.isEmpty) {
257
- return;
258
- }
259
- if (this._styles[propertyName] && !isObject(this._styles[propertyName])) {
260
- // Try return styles set directly - values that are not parsed.
261
- return this._styles[propertyName];
262
- }
263
- const styles = this._styleProcessor.getReducedForm(propertyName, this._styles);
264
- const propertyDescriptor = styles.find(([property]) => property === propertyName);
265
- // Only return a value if it is set;
266
- if (Array.isArray(propertyDescriptor)) {
267
- return propertyDescriptor[1];
268
- }
269
- }
270
- /**
271
- * Returns all style properties names as they would appear when using {@link #toString `#toString()`}.
272
- *
273
- * When `expand` is set to true and there's a shorthand style property set, it will also return all equivalent styles:
274
- *
275
- * ```ts
276
- * stylesMap.setTo( 'margin: 1em' )
277
- * ```
278
- *
279
- * will be expanded to:
280
- *
281
- * ```ts
282
- * [ 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ]
283
- * ```
284
- *
285
- * @param expand Expand shorthand style properties and all return equivalent style representations.
286
- */
287
- getStyleNames(expand = false) {
288
- if (this.isEmpty) {
289
- return [];
290
- }
291
- if (expand) {
292
- return this._styleProcessor.getStyleNames(this._styles);
293
- }
294
- const entries = this._getStylesEntries();
295
- return entries.map(([key]) => key);
296
- }
297
- /**
298
- * Removes all styles.
299
- */
300
- clear() {
301
- this._styles = {};
302
- }
303
- /**
304
- * Returns normalized styles entries for further processing.
305
- */
306
- _getStylesEntries() {
307
- const parsed = [];
308
- const keys = Object.keys(this._styles);
309
- for (const key of keys) {
310
- parsed.push(...this._styleProcessor.getReducedForm(key, this._styles));
311
- }
312
- return parsed;
313
- }
314
- /**
315
- * Removes empty objects upon removing an entry from internal object.
316
- */
317
- _cleanEmptyObjectsOnPath(path) {
318
- const pathParts = path.split('.');
319
- const isChildPath = pathParts.length > 1;
320
- if (!isChildPath) {
321
- return;
322
- }
323
- const parentPath = pathParts.splice(0, pathParts.length - 1).join('.');
324
- const parentObject = get(this._styles, parentPath);
325
- if (!parentObject) {
326
- return;
327
- }
328
- const isParentEmpty = !Array.from(Object.keys(parentObject)).length;
329
- if (isParentEmpty) {
330
- this.remove(parentPath);
331
- }
332
- }
333
- }
334
- /**
335
- * Style processor is responsible for writing and reading a normalized styles object.
336
- */
337
- export class StylesProcessor {
338
- /**
339
- * Creates StylesProcessor instance.
340
- *
341
- * @internal
342
- */
343
- constructor() {
344
- this._normalizers = new Map();
345
- this._extractors = new Map();
346
- this._reducers = new Map();
347
- this._consumables = new Map();
348
- }
349
- /**
350
- * Parse style string value to a normalized object and appends it to styles object.
351
- *
352
- * ```ts
353
- * const styles = {};
354
- *
355
- * stylesProcessor.toNormalizedForm( 'margin', '1px', styles );
356
- *
357
- * // styles will consist: { margin: { top: '1px', right: '1px', bottom: '1px', left: '1px; } }
358
- * ```
359
- *
360
- * **Note**: To define normalizer callbacks use {@link #setNormalizer}.
361
- *
362
- * @param name Name of style property.
363
- * @param propertyValue Value of style property.
364
- * @param styles Object holding normalized styles.
365
- */
366
- toNormalizedForm(name, propertyValue, styles) {
367
- if (isObject(propertyValue)) {
368
- appendStyleValue(styles, toPath(name), propertyValue);
369
- return;
370
- }
371
- if (this._normalizers.has(name)) {
372
- const normalizer = this._normalizers.get(name);
373
- const { path, value } = normalizer(propertyValue);
374
- appendStyleValue(styles, path, value);
375
- }
376
- else {
377
- appendStyleValue(styles, name, propertyValue);
378
- }
379
- }
380
- /**
381
- * Returns a normalized version of a style property.
382
- *
383
- * ```ts
384
- * const styles = {
385
- * margin: { top: '1px', right: '1px', bottom: '1px', left: '1px; },
386
- * background: { color: '#f00' }
387
- * };
388
- *
389
- * stylesProcessor.getNormalized( 'background' );
390
- * // will return: { color: '#f00' }
391
- *
392
- * stylesProcessor.getNormalized( 'margin-top' );
393
- * // will return: '1px'
394
- * ```
395
- *
396
- * **Note**: In some cases extracting single value requires defining an extractor callback {@link #setExtractor}.
397
- *
398
- * @param name Name of style property.
399
- * @param styles Object holding normalized styles.
400
- */
401
- getNormalized(name, styles) {
402
- if (!name) {
403
- return merge({}, styles);
404
- }
405
- // Might be empty string.
406
- if (styles[name] !== undefined) {
407
- return styles[name];
408
- }
409
- if (this._extractors.has(name)) {
410
- const extractor = this._extractors.get(name);
411
- if (typeof extractor === 'string') {
412
- return get(styles, extractor);
413
- }
414
- const value = extractor(name, styles);
415
- if (value) {
416
- return value;
417
- }
418
- }
419
- return get(styles, toPath(name));
420
- }
421
- /**
422
- * Returns a reduced form of style property form normalized object.
423
- *
424
- * For default margin reducer, the below code:
425
- *
426
- * ```ts
427
- * stylesProcessor.getReducedForm( 'margin', {
428
- * margin: { top: '1px', right: '1px', bottom: '2px', left: '1px; }
429
- * } );
430
- * ```
431
- *
432
- * will return:
433
- *
434
- * ```ts
435
- * [
436
- * [ 'margin', '1px 1px 2px' ]
437
- * ]
438
- * ```
439
- *
440
- * because it might be represented as a shorthand 'margin' value. However if one of margin long hand values is missing it should return:
441
- *
442
- * ```ts
443
- * [
444
- * [ 'margin-top', '1px' ],
445
- * [ 'margin-right', '1px' ],
446
- * [ 'margin-bottom', '2px' ]
447
- * // the 'left' value is missing - cannot use 'margin' shorthand.
448
- * ]
449
- * ```
450
- *
451
- * **Note**: To define reducer callbacks use {@link #setReducer}.
452
- *
453
- * @param name Name of style property.
454
- */
455
- getReducedForm(name, styles) {
456
- const normalizedValue = this.getNormalized(name, styles);
457
- // Might be empty string.
458
- if (normalizedValue === undefined) {
459
- return [];
460
- }
461
- if (this._reducers.has(name)) {
462
- const reducer = this._reducers.get(name);
463
- return reducer(normalizedValue);
464
- }
465
- return [[name, normalizedValue]];
466
- }
467
- /**
468
- * Return all style properties. Also expand shorthand properties (e.g. `margin`, `background`) if respective extractor is available.
469
- *
470
- * @param styles Object holding normalized styles.
471
- */
472
- getStyleNames(styles) {
473
- // Find all extractable styles that have a value.
474
- const expandedStyleNames = Array.from(this._consumables.keys()).filter(name => {
475
- const style = this.getNormalized(name, styles);
476
- if (style && typeof style == 'object') {
477
- return Object.keys(style).length;
478
- }
479
- return style;
480
- });
481
- // For simple styles (for example `color`) we don't have a map of those styles
482
- // but they are 1 to 1 with normalized object keys.
483
- const styleNamesKeysSet = new Set([
484
- ...expandedStyleNames,
485
- ...Object.keys(styles)
486
- ]);
487
- return Array.from(styleNamesKeysSet.values());
488
- }
489
- /**
490
- * Returns related style names.
491
- *
492
- * ```ts
493
- * stylesProcessor.getRelatedStyles( 'margin' );
494
- * // will return: [ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ];
495
- *
496
- * stylesProcessor.getRelatedStyles( 'margin-top' );
497
- * // will return: [ 'margin' ];
498
- * ```
499
- *
500
- * **Note**: To define new style relations load an existing style processor or use
501
- * {@link module:engine/view/stylesmap~StylesProcessor#setStyleRelation `StylesProcessor.setStyleRelation()`}.
502
- */
503
- getRelatedStyles(name) {
504
- return this._consumables.get(name) || [];
505
- }
506
- /**
507
- * Adds a normalizer method for a style property.
508
- *
509
- * A normalizer returns describing how the value should be normalized.
510
- *
511
- * For instance 'margin' style is a shorthand for four margin values:
512
- *
513
- * - 'margin-top'
514
- * - 'margin-right'
515
- * - 'margin-bottom'
516
- * - 'margin-left'
517
- *
518
- * and can be written in various ways if some values are equal to others. For instance `'margin: 1px 2em;'` is a shorthand for
519
- * `'margin-top: 1px;margin-right: 2em;margin-bottom: 1px;margin-left: 2em'`.
520
- *
521
- * A normalizer should parse various margin notations as a single object:
522
- *
523
- * ```ts
524
- * const styles = {
525
- * margin: {
526
- * top: '1px',
527
- * right: '2em',
528
- * bottom: '1px',
529
- * left: '2em'
530
- * }
531
- * };
532
- * ```
533
- *
534
- * Thus a normalizer for 'margin' style should return an object defining style path and value to store:
535
- *
536
- * ```ts
537
- * const returnValue = {
538
- * path: 'margin',
539
- * value: {
540
- * top: '1px',
541
- * right: '2em',
542
- * bottom: '1px',
543
- * left: '2em'
544
- * }
545
- * };
546
- * ```
547
- *
548
- * Additionally to fully support all margin notations there should be also defined 4 normalizers for longhand margin notations. Below
549
- * is an example for 'margin-top' style property normalizer:
550
- *
551
- * ```ts
552
- * stylesProcessor.setNormalizer( 'margin-top', valueString => {
553
- * return {
554
- * path: 'margin.top',
555
- * value: valueString
556
- * }
557
- * } );
558
- * ```
559
- */
560
- setNormalizer(name, callback) {
561
- this._normalizers.set(name, callback);
562
- }
563
- /**
564
- * Adds a extractor callback for a style property.
565
- *
566
- * Most normalized style values are stored as one level objects. It is assumed that `'margin-top'` style will be stored as:
567
- *
568
- * ```ts
569
- * const styles = {
570
- * margin: {
571
- * top: 'value'
572
- * }
573
- * }
574
- * ```
575
- *
576
- * However, some styles can have conflicting notations and thus it might be harder to extract a style value from shorthand. For instance
577
- * the 'border-top-style' can be defined using `'border-top:solid'`, `'border-style:solid none none none'` or by `'border:solid'`
578
- * shorthands. The default border styles processors stores styles as:
579
- *
580
- * ```ts
581
- * const styles = {
582
- * border: {
583
- * style: {
584
- * top: 'solid'
585
- * }
586
- * }
587
- * }
588
- * ```
589
- *
590
- * as it is better to modify border style independently from other values. On the other part the output of the border might be
591
- * desired as `border-top`, `border-left`, etc notation.
592
- *
593
- * In the above example an extractor should return a side border value that combines style, color and width:
594
- *
595
- * ```ts
596
- * styleProcessor.setExtractor( 'border-top', styles => {
597
- * return {
598
- * color: styles.border.color.top,
599
- * style: styles.border.style.top,
600
- * width: styles.border.width.top
601
- * }
602
- * } );
603
- * ```
604
- *
605
- * @param callbackOrPath Callback that return a requested value or path string for single values.
606
- */
607
- setExtractor(name, callbackOrPath) {
608
- this._extractors.set(name, callbackOrPath);
609
- }
610
- /**
611
- * Adds a reducer callback for a style property.
612
- *
613
- * Reducer returns a minimal notation for given style name. For longhand properties it is not required to write a reducer as
614
- * by default the direct value from style path is taken.
615
- *
616
- * For shorthand styles a reducer should return minimal style notation either by returning single name-value tuple or multiple tuples
617
- * if a shorthand cannot be used. For instance for a margin shorthand a reducer might return:
618
- *
619
- * ```ts
620
- * const marginShortHandTuple = [
621
- * [ 'margin', '1px 1px 2px' ]
622
- * ];
623
- * ```
624
- *
625
- * or a longhand tuples for defined values:
626
- *
627
- * ```ts
628
- * // Considering margin.bottom and margin.left are undefined.
629
- * const marginLonghandsTuples = [
630
- * [ 'margin-top', '1px' ],
631
- * [ 'margin-right', '1px' ]
632
- * ];
633
- * ```
634
- *
635
- * A reducer obtains a normalized style value:
636
- *
637
- * ```ts
638
- * // Simplified reducer that always outputs 4 values which are always present:
639
- * stylesProcessor.setReducer( 'margin', margin => {
640
- * return [
641
- * [ 'margin', `${ margin.top } ${ margin.right } ${ margin.bottom } ${ margin.left }` ]
642
- * ]
643
- * } );
644
- * ```
645
- */
646
- setReducer(name, callback) {
647
- this._reducers.set(name, callback);
648
- }
649
- /**
650
- * Defines a style shorthand relation to other style notations.
651
- *
652
- * ```ts
653
- * stylesProcessor.setStyleRelation( 'margin', [
654
- * 'margin-top',
655
- * 'margin-right',
656
- * 'margin-bottom',
657
- * 'margin-left'
658
- * ] );
659
- * ```
660
- *
661
- * This enables expanding of style names for shorthands. For instance, if defined,
662
- * {@link module:engine/conversion/viewconsumable~ViewConsumable view consumable} items are automatically created
663
- * for long-hand margin style notation alongside the `'margin'` item.
664
- *
665
- * This means that when an element being converted has a style `margin`, a converter for `margin-left` will work just
666
- * fine since the view consumable will contain a consumable `margin-left` item (thanks to the relation) and
667
- * `element.getStyle( 'margin-left' )` will work as well assuming that the style processor was correctly configured.
668
- * However, once `margin-left` is consumed, `margin` will not be consumable anymore.
669
- */
670
- setStyleRelation(shorthandName, styleNames) {
671
- this._mapStyleNames(shorthandName, styleNames);
672
- for (const alsoName of styleNames) {
673
- this._mapStyleNames(alsoName, [shorthandName]);
674
- }
675
- }
676
- /**
677
- * Set two-way binding of style names.
678
- */
679
- _mapStyleNames(name, styleNames) {
680
- if (!this._consumables.has(name)) {
681
- this._consumables.set(name, []);
682
- }
683
- this._consumables.get(name).push(...styleNames);
684
- }
685
- }
686
- /**
687
- * Parses inline styles and puts property - value pairs into styles map.
688
- *
689
- * @param stylesString Styles to parse.
690
- * @returns Map of parsed properties and values.
691
- */
692
- function parseInlineStyles(stylesString) {
693
- // `null` if no quote was found in input string or last found quote was a closing quote. See below.
694
- let quoteType = null;
695
- let propertyNameStart = 0;
696
- let propertyValueStart = 0;
697
- let propertyName = null;
698
- const stylesMap = new Map();
699
- // Do not set anything if input string is empty.
700
- if (stylesString === '') {
701
- return stylesMap;
702
- }
703
- // Fix inline styles that do not end with `;` so they are compatible with algorithm below.
704
- if (stylesString.charAt(stylesString.length - 1) != ';') {
705
- stylesString = stylesString + ';';
706
- }
707
- // Seek the whole string for "special characters".
708
- for (let i = 0; i < stylesString.length; i++) {
709
- const char = stylesString.charAt(i);
710
- if (quoteType === null) {
711
- // No quote found yet or last found quote was a closing quote.
712
- switch (char) {
713
- case ':':
714
- // Most of time colon means that property name just ended.
715
- // Sometimes however `:` is found inside property value (for example in background image url).
716
- if (!propertyName) {
717
- // Treat this as end of property only if property name is not already saved.
718
- // Save property name.
719
- propertyName = stylesString.substr(propertyNameStart, i - propertyNameStart);
720
- // Save this point as the start of property value.
721
- propertyValueStart = i + 1;
722
- }
723
- break;
724
- case '"':
725
- case '\'':
726
- // Opening quote found (this is an opening quote, because `quoteType` is `null`).
727
- quoteType = char;
728
- break;
729
- case ';': {
730
- // Property value just ended.
731
- // Use previously stored property value start to obtain property value.
732
- const propertyValue = stylesString.substr(propertyValueStart, i - propertyValueStart);
733
- if (propertyName) {
734
- // Save parsed part.
735
- stylesMap.set(propertyName.trim(), propertyValue.trim());
736
- }
737
- propertyName = null;
738
- // Save this point as property name start. Property name starts immediately after previous property value ends.
739
- propertyNameStart = i + 1;
740
- break;
741
- }
742
- }
743
- }
744
- else if (char === quoteType) {
745
- // If a quote char is found and it is a closing quote, mark this fact by `null`-ing `quoteType`.
746
- quoteType = null;
747
- }
748
- }
749
- return stylesMap;
750
- }
751
- /**
752
- * Return lodash compatible path from style name.
753
- */
754
- function toPath(name) {
755
- return name.replace('-', '.');
756
- }
757
- /**
758
- * Appends style definition to the styles object.
759
- */
760
- function appendStyleValue(stylesObject, nameOrPath, valueOrObject) {
761
- let valueToSet = valueOrObject;
762
- if (isObject(valueOrObject)) {
763
- valueToSet = merge({}, get(stylesObject, nameOrPath), valueOrObject);
764
- }
765
- set(stylesObject, nameOrPath, valueToSet);
766
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module engine/view/stylesmap
7
+ */
8
+ import { get, isObject, merge, set, unset } from 'lodash-es';
9
+ /**
10
+ * Styles map. Allows handling (adding, removing, retrieving) a set of style rules (usually, of an element).
11
+ *
12
+ * The styles map is capable of normalizing style names so e.g. the following operations are possible:
13
+ */
14
+ export default class StylesMap {
15
+ /**
16
+ * Creates Styles instance.
17
+ */
18
+ constructor(styleProcessor) {
19
+ this._styles = {};
20
+ this._styleProcessor = styleProcessor;
21
+ }
22
+ /**
23
+ * Returns true if style map has no styles set.
24
+ */
25
+ get isEmpty() {
26
+ const entries = Object.entries(this._styles);
27
+ return !entries.length;
28
+ }
29
+ /**
30
+ * Number of styles defined.
31
+ */
32
+ get size() {
33
+ if (this.isEmpty) {
34
+ return 0;
35
+ }
36
+ return this.getStyleNames().length;
37
+ }
38
+ /**
39
+ * Set styles map to a new value.
40
+ *
41
+ * ```ts
42
+ * styles.setTo( 'border:1px solid blue;margin-top:1px;' );
43
+ * ```
44
+ */
45
+ setTo(inlineStyle) {
46
+ this.clear();
47
+ const parsedStyles = parseInlineStyles(inlineStyle);
48
+ for (const [key, value] of parsedStyles) {
49
+ this._styleProcessor.toNormalizedForm(key, value, this._styles);
50
+ }
51
+ }
52
+ /**
53
+ * Checks if a given style is set.
54
+ *
55
+ * ```ts
56
+ * styles.setTo( 'margin-left:1px;' );
57
+ *
58
+ * styles.has( 'margin-left' ); // -> true
59
+ * styles.has( 'padding' ); // -> false
60
+ * ```
61
+ *
62
+ * **Note**: This check supports normalized style names.
63
+ *
64
+ * ```ts
65
+ * // Enable 'margin' shorthand processing:
66
+ * editor.data.addStyleProcessorRules( addMarginRules );
67
+ *
68
+ * styles.setTo( 'margin:2px;' );
69
+ *
70
+ * styles.has( 'margin' ); // -> true
71
+ * styles.has( 'margin-top' ); // -> true
72
+ * styles.has( 'margin-left' ); // -> true
73
+ *
74
+ * styles.remove( 'margin-top' );
75
+ *
76
+ * styles.has( 'margin' ); // -> false
77
+ * styles.has( 'margin-top' ); // -> false
78
+ * styles.has( 'margin-left' ); // -> true
79
+ * ```
80
+ *
81
+ * @param name Style name.
82
+ */
83
+ has(name) {
84
+ if (this.isEmpty) {
85
+ return false;
86
+ }
87
+ const styles = this._styleProcessor.getReducedForm(name, this._styles);
88
+ const propertyDescriptor = styles.find(([property]) => property === name);
89
+ // Only return a value if it is set;
90
+ return Array.isArray(propertyDescriptor);
91
+ }
92
+ set(nameOrObject, valueOrObject) {
93
+ if (isObject(nameOrObject)) {
94
+ for (const [key, value] of Object.entries(nameOrObject)) {
95
+ this._styleProcessor.toNormalizedForm(key, value, this._styles);
96
+ }
97
+ }
98
+ else {
99
+ this._styleProcessor.toNormalizedForm(nameOrObject, valueOrObject, this._styles);
100
+ }
101
+ }
102
+ /**
103
+ * Removes given style.
104
+ *
105
+ * ```ts
106
+ * styles.setTo( 'background:#f00;margin-right:2px;' );
107
+ *
108
+ * styles.remove( 'background' );
109
+ *
110
+ * styles.toString(); // -> 'margin-right:2px;'
111
+ * ```
112
+ *
113
+ * ***Note**:* This method uses {@link module:engine/controller/datacontroller~DataController#addStyleProcessorRules
114
+ * enabled style processor rules} to normalize passed values.
115
+ *
116
+ * ```ts
117
+ * // Enable 'margin' shorthand processing:
118
+ * editor.data.addStyleProcessorRules( addMarginRules );
119
+ *
120
+ * styles.setTo( 'margin:1px' );
121
+ *
122
+ * styles.remove( 'margin-top' );
123
+ * styles.remove( 'margin-right' );
124
+ *
125
+ * styles.toString(); // -> 'margin-bottom:1px;margin-left:1px;'
126
+ * ```
127
+ *
128
+ * @param name Style name.
129
+ */
130
+ remove(name) {
131
+ const path = toPath(name);
132
+ unset(this._styles, path);
133
+ delete this._styles[name];
134
+ this._cleanEmptyObjectsOnPath(path);
135
+ }
136
+ /**
137
+ * Returns a normalized style object or a single value.
138
+ *
139
+ * ```ts
140
+ * // Enable 'margin' shorthand processing:
141
+ * editor.data.addStyleProcessorRules( addMarginRules );
142
+ *
143
+ * const styles = new Styles();
144
+ * styles.setTo( 'margin:1px 2px 3em;' );
145
+ *
146
+ * styles.getNormalized( 'margin' );
147
+ * // will log:
148
+ * // {
149
+ * // top: '1px',
150
+ * // right: '2px',
151
+ * // bottom: '3em',
152
+ * // left: '2px' // normalized value from margin shorthand
153
+ * // }
154
+ *
155
+ * styles.getNormalized( 'margin-left' ); // -> '2px'
156
+ * ```
157
+ *
158
+ * **Note**: This method will only return normalized styles if a style processor was defined.
159
+ *
160
+ * @param name Style name.
161
+ */
162
+ getNormalized(name) {
163
+ return this._styleProcessor.getNormalized(name, this._styles);
164
+ }
165
+ /**
166
+ * Returns a normalized style string. Styles are sorted by name.
167
+ *
168
+ * ```ts
169
+ * styles.set( 'margin' , '1px' );
170
+ * styles.set( 'background', '#f00' );
171
+ *
172
+ * styles.toString(); // -> 'background:#f00;margin:1px;'
173
+ * ```
174
+ *
175
+ * **Note**: This method supports normalized styles if defined.
176
+ *
177
+ * ```ts
178
+ * // Enable 'margin' shorthand processing:
179
+ * editor.data.addStyleProcessorRules( addMarginRules );
180
+ *
181
+ * styles.set( 'margin' , '1px' );
182
+ * styles.set( 'background', '#f00' );
183
+ * styles.remove( 'margin-top' );
184
+ * styles.remove( 'margin-right' );
185
+ *
186
+ * styles.toString(); // -> 'background:#f00;margin-bottom:1px;margin-left:1px;'
187
+ * ```
188
+ */
189
+ toString() {
190
+ if (this.isEmpty) {
191
+ return '';
192
+ }
193
+ return this._getStylesEntries()
194
+ .map(arr => arr.join(':'))
195
+ .sort()
196
+ .join(';') + ';';
197
+ }
198
+ /**
199
+ * Returns property as a value string or undefined if property is not set.
200
+ *
201
+ * ```ts
202
+ * // Enable 'margin' shorthand processing:
203
+ * editor.data.addStyleProcessorRules( addMarginRules );
204
+ *
205
+ * const styles = new Styles();
206
+ * styles.setTo( 'margin:1px;' );
207
+ * styles.set( 'margin-bottom', '3em' );
208
+ *
209
+ * styles.getAsString( 'margin' ); // -> 'margin: 1px 1px 3em;'
210
+ * ```
211
+ *
212
+ * Note, however, that all sub-values must be set for the longhand property name to return a value:
213
+ *
214
+ * ```ts
215
+ * const styles = new Styles();
216
+ * styles.setTo( 'margin:1px;' );
217
+ * styles.remove( 'margin-bottom' );
218
+ *
219
+ * styles.getAsString( 'margin' ); // -> undefined
220
+ * ```
221
+ *
222
+ * In the above scenario, it is not possible to return a `margin` value, so `undefined` is returned.
223
+ * Instead, you should use:
224
+ *
225
+ * ```ts
226
+ * const styles = new Styles();
227
+ * styles.setTo( 'margin:1px;' );
228
+ * styles.remove( 'margin-bottom' );
229
+ *
230
+ * for ( const styleName of styles.getStyleNames() ) {
231
+ * console.log( styleName, styles.getAsString( styleName ) );
232
+ * }
233
+ * // 'margin-top', '1px'
234
+ * // 'margin-right', '1px'
235
+ * // 'margin-left', '1px'
236
+ * ```
237
+ *
238
+ * In general, it is recommend to iterate over style names like in the example above. This way, you will always get all
239
+ * the currently set style values. So, if all the 4 margin values would be set
240
+ * the for-of loop above would yield only `'margin'`, `'1px'`:
241
+ *
242
+ * ```ts
243
+ * const styles = new Styles();
244
+ * styles.setTo( 'margin:1px;' );
245
+ *
246
+ * for ( const styleName of styles.getStyleNames() ) {
247
+ * console.log( styleName, styles.getAsString( styleName ) );
248
+ * }
249
+ * // 'margin', '1px'
250
+ * ```
251
+ *
252
+ * **Note**: To get a normalized version of a longhand property use the {@link #getNormalized `#getNormalized()`} method.
253
+ */
254
+ getAsString(propertyName) {
255
+ if (this.isEmpty) {
256
+ return;
257
+ }
258
+ if (this._styles[propertyName] && !isObject(this._styles[propertyName])) {
259
+ // Try return styles set directly - values that are not parsed.
260
+ return this._styles[propertyName];
261
+ }
262
+ const styles = this._styleProcessor.getReducedForm(propertyName, this._styles);
263
+ const propertyDescriptor = styles.find(([property]) => property === propertyName);
264
+ // Only return a value if it is set;
265
+ if (Array.isArray(propertyDescriptor)) {
266
+ return propertyDescriptor[1];
267
+ }
268
+ }
269
+ /**
270
+ * Returns all style properties names as they would appear when using {@link #toString `#toString()`}.
271
+ *
272
+ * When `expand` is set to true and there's a shorthand style property set, it will also return all equivalent styles:
273
+ *
274
+ * ```ts
275
+ * stylesMap.setTo( 'margin: 1em' )
276
+ * ```
277
+ *
278
+ * will be expanded to:
279
+ *
280
+ * ```ts
281
+ * [ 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ]
282
+ * ```
283
+ *
284
+ * @param expand Expand shorthand style properties and all return equivalent style representations.
285
+ */
286
+ getStyleNames(expand = false) {
287
+ if (this.isEmpty) {
288
+ return [];
289
+ }
290
+ if (expand) {
291
+ return this._styleProcessor.getStyleNames(this._styles);
292
+ }
293
+ const entries = this._getStylesEntries();
294
+ return entries.map(([key]) => key);
295
+ }
296
+ /**
297
+ * Removes all styles.
298
+ */
299
+ clear() {
300
+ this._styles = {};
301
+ }
302
+ /**
303
+ * Returns normalized styles entries for further processing.
304
+ */
305
+ _getStylesEntries() {
306
+ const parsed = [];
307
+ const keys = Object.keys(this._styles);
308
+ for (const key of keys) {
309
+ parsed.push(...this._styleProcessor.getReducedForm(key, this._styles));
310
+ }
311
+ return parsed;
312
+ }
313
+ /**
314
+ * Removes empty objects upon removing an entry from internal object.
315
+ */
316
+ _cleanEmptyObjectsOnPath(path) {
317
+ const pathParts = path.split('.');
318
+ const isChildPath = pathParts.length > 1;
319
+ if (!isChildPath) {
320
+ return;
321
+ }
322
+ const parentPath = pathParts.splice(0, pathParts.length - 1).join('.');
323
+ const parentObject = get(this._styles, parentPath);
324
+ if (!parentObject) {
325
+ return;
326
+ }
327
+ const isParentEmpty = !Object.keys(parentObject).length;
328
+ if (isParentEmpty) {
329
+ this.remove(parentPath);
330
+ }
331
+ }
332
+ }
333
+ /**
334
+ * Style processor is responsible for writing and reading a normalized styles object.
335
+ */
336
+ export class StylesProcessor {
337
+ /**
338
+ * Creates StylesProcessor instance.
339
+ *
340
+ * @internal
341
+ */
342
+ constructor() {
343
+ this._normalizers = new Map();
344
+ this._extractors = new Map();
345
+ this._reducers = new Map();
346
+ this._consumables = new Map();
347
+ }
348
+ /**
349
+ * Parse style string value to a normalized object and appends it to styles object.
350
+ *
351
+ * ```ts
352
+ * const styles = {};
353
+ *
354
+ * stylesProcessor.toNormalizedForm( 'margin', '1px', styles );
355
+ *
356
+ * // styles will consist: { margin: { top: '1px', right: '1px', bottom: '1px', left: '1px; } }
357
+ * ```
358
+ *
359
+ * **Note**: To define normalizer callbacks use {@link #setNormalizer}.
360
+ *
361
+ * @param name Name of style property.
362
+ * @param propertyValue Value of style property.
363
+ * @param styles Object holding normalized styles.
364
+ */
365
+ toNormalizedForm(name, propertyValue, styles) {
366
+ if (isObject(propertyValue)) {
367
+ appendStyleValue(styles, toPath(name), propertyValue);
368
+ return;
369
+ }
370
+ if (this._normalizers.has(name)) {
371
+ const normalizer = this._normalizers.get(name);
372
+ const { path, value } = normalizer(propertyValue);
373
+ appendStyleValue(styles, path, value);
374
+ }
375
+ else {
376
+ appendStyleValue(styles, name, propertyValue);
377
+ }
378
+ }
379
+ /**
380
+ * Returns a normalized version of a style property.
381
+ *
382
+ * ```ts
383
+ * const styles = {
384
+ * margin: { top: '1px', right: '1px', bottom: '1px', left: '1px; },
385
+ * background: { color: '#f00' }
386
+ * };
387
+ *
388
+ * stylesProcessor.getNormalized( 'background' );
389
+ * // will return: { color: '#f00' }
390
+ *
391
+ * stylesProcessor.getNormalized( 'margin-top' );
392
+ * // will return: '1px'
393
+ * ```
394
+ *
395
+ * **Note**: In some cases extracting single value requires defining an extractor callback {@link #setExtractor}.
396
+ *
397
+ * @param name Name of style property.
398
+ * @param styles Object holding normalized styles.
399
+ */
400
+ getNormalized(name, styles) {
401
+ if (!name) {
402
+ return merge({}, styles);
403
+ }
404
+ // Might be empty string.
405
+ if (styles[name] !== undefined) {
406
+ return styles[name];
407
+ }
408
+ if (this._extractors.has(name)) {
409
+ const extractor = this._extractors.get(name);
410
+ if (typeof extractor === 'string') {
411
+ return get(styles, extractor);
412
+ }
413
+ const value = extractor(name, styles);
414
+ if (value) {
415
+ return value;
416
+ }
417
+ }
418
+ return get(styles, toPath(name));
419
+ }
420
+ /**
421
+ * Returns a reduced form of style property form normalized object.
422
+ *
423
+ * For default margin reducer, the below code:
424
+ *
425
+ * ```ts
426
+ * stylesProcessor.getReducedForm( 'margin', {
427
+ * margin: { top: '1px', right: '1px', bottom: '2px', left: '1px; }
428
+ * } );
429
+ * ```
430
+ *
431
+ * will return:
432
+ *
433
+ * ```ts
434
+ * [
435
+ * [ 'margin', '1px 1px 2px' ]
436
+ * ]
437
+ * ```
438
+ *
439
+ * because it might be represented as a shorthand 'margin' value. However if one of margin long hand values is missing it should return:
440
+ *
441
+ * ```ts
442
+ * [
443
+ * [ 'margin-top', '1px' ],
444
+ * [ 'margin-right', '1px' ],
445
+ * [ 'margin-bottom', '2px' ]
446
+ * // the 'left' value is missing - cannot use 'margin' shorthand.
447
+ * ]
448
+ * ```
449
+ *
450
+ * **Note**: To define reducer callbacks use {@link #setReducer}.
451
+ *
452
+ * @param name Name of style property.
453
+ */
454
+ getReducedForm(name, styles) {
455
+ const normalizedValue = this.getNormalized(name, styles);
456
+ // Might be empty string.
457
+ if (normalizedValue === undefined) {
458
+ return [];
459
+ }
460
+ if (this._reducers.has(name)) {
461
+ const reducer = this._reducers.get(name);
462
+ return reducer(normalizedValue);
463
+ }
464
+ return [[name, normalizedValue]];
465
+ }
466
+ /**
467
+ * Return all style properties. Also expand shorthand properties (e.g. `margin`, `background`) if respective extractor is available.
468
+ *
469
+ * @param styles Object holding normalized styles.
470
+ */
471
+ getStyleNames(styles) {
472
+ // Find all extractable styles that have a value.
473
+ const expandedStyleNames = Array.from(this._consumables.keys()).filter(name => {
474
+ const style = this.getNormalized(name, styles);
475
+ if (style && typeof style == 'object') {
476
+ return Object.keys(style).length;
477
+ }
478
+ return style;
479
+ });
480
+ // For simple styles (for example `color`) we don't have a map of those styles
481
+ // but they are 1 to 1 with normalized object keys.
482
+ const styleNamesKeysSet = new Set([
483
+ ...expandedStyleNames,
484
+ ...Object.keys(styles)
485
+ ]);
486
+ return Array.from(styleNamesKeysSet);
487
+ }
488
+ /**
489
+ * Returns related style names.
490
+ *
491
+ * ```ts
492
+ * stylesProcessor.getRelatedStyles( 'margin' );
493
+ * // will return: [ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ];
494
+ *
495
+ * stylesProcessor.getRelatedStyles( 'margin-top' );
496
+ * // will return: [ 'margin' ];
497
+ * ```
498
+ *
499
+ * **Note**: To define new style relations load an existing style processor or use
500
+ * {@link module:engine/view/stylesmap~StylesProcessor#setStyleRelation `StylesProcessor.setStyleRelation()`}.
501
+ */
502
+ getRelatedStyles(name) {
503
+ return this._consumables.get(name) || [];
504
+ }
505
+ /**
506
+ * Adds a normalizer method for a style property.
507
+ *
508
+ * A normalizer returns describing how the value should be normalized.
509
+ *
510
+ * For instance 'margin' style is a shorthand for four margin values:
511
+ *
512
+ * - 'margin-top'
513
+ * - 'margin-right'
514
+ * - 'margin-bottom'
515
+ * - 'margin-left'
516
+ *
517
+ * and can be written in various ways if some values are equal to others. For instance `'margin: 1px 2em;'` is a shorthand for
518
+ * `'margin-top: 1px;margin-right: 2em;margin-bottom: 1px;margin-left: 2em'`.
519
+ *
520
+ * A normalizer should parse various margin notations as a single object:
521
+ *
522
+ * ```ts
523
+ * const styles = {
524
+ * margin: {
525
+ * top: '1px',
526
+ * right: '2em',
527
+ * bottom: '1px',
528
+ * left: '2em'
529
+ * }
530
+ * };
531
+ * ```
532
+ *
533
+ * Thus a normalizer for 'margin' style should return an object defining style path and value to store:
534
+ *
535
+ * ```ts
536
+ * const returnValue = {
537
+ * path: 'margin',
538
+ * value: {
539
+ * top: '1px',
540
+ * right: '2em',
541
+ * bottom: '1px',
542
+ * left: '2em'
543
+ * }
544
+ * };
545
+ * ```
546
+ *
547
+ * Additionally to fully support all margin notations there should be also defined 4 normalizers for longhand margin notations. Below
548
+ * is an example for 'margin-top' style property normalizer:
549
+ *
550
+ * ```ts
551
+ * stylesProcessor.setNormalizer( 'margin-top', valueString => {
552
+ * return {
553
+ * path: 'margin.top',
554
+ * value: valueString
555
+ * }
556
+ * } );
557
+ * ```
558
+ */
559
+ setNormalizer(name, callback) {
560
+ this._normalizers.set(name, callback);
561
+ }
562
+ /**
563
+ * Adds a extractor callback for a style property.
564
+ *
565
+ * Most normalized style values are stored as one level objects. It is assumed that `'margin-top'` style will be stored as:
566
+ *
567
+ * ```ts
568
+ * const styles = {
569
+ * margin: {
570
+ * top: 'value'
571
+ * }
572
+ * }
573
+ * ```
574
+ *
575
+ * However, some styles can have conflicting notations and thus it might be harder to extract a style value from shorthand. For instance
576
+ * the 'border-top-style' can be defined using `'border-top:solid'`, `'border-style:solid none none none'` or by `'border:solid'`
577
+ * shorthands. The default border styles processors stores styles as:
578
+ *
579
+ * ```ts
580
+ * const styles = {
581
+ * border: {
582
+ * style: {
583
+ * top: 'solid'
584
+ * }
585
+ * }
586
+ * }
587
+ * ```
588
+ *
589
+ * as it is better to modify border style independently from other values. On the other part the output of the border might be
590
+ * desired as `border-top`, `border-left`, etc notation.
591
+ *
592
+ * In the above example an extractor should return a side border value that combines style, color and width:
593
+ *
594
+ * ```ts
595
+ * styleProcessor.setExtractor( 'border-top', styles => {
596
+ * return {
597
+ * color: styles.border.color.top,
598
+ * style: styles.border.style.top,
599
+ * width: styles.border.width.top
600
+ * }
601
+ * } );
602
+ * ```
603
+ *
604
+ * @param callbackOrPath Callback that return a requested value or path string for single values.
605
+ */
606
+ setExtractor(name, callbackOrPath) {
607
+ this._extractors.set(name, callbackOrPath);
608
+ }
609
+ /**
610
+ * Adds a reducer callback for a style property.
611
+ *
612
+ * Reducer returns a minimal notation for given style name. For longhand properties it is not required to write a reducer as
613
+ * by default the direct value from style path is taken.
614
+ *
615
+ * For shorthand styles a reducer should return minimal style notation either by returning single name-value tuple or multiple tuples
616
+ * if a shorthand cannot be used. For instance for a margin shorthand a reducer might return:
617
+ *
618
+ * ```ts
619
+ * const marginShortHandTuple = [
620
+ * [ 'margin', '1px 1px 2px' ]
621
+ * ];
622
+ * ```
623
+ *
624
+ * or a longhand tuples for defined values:
625
+ *
626
+ * ```ts
627
+ * // Considering margin.bottom and margin.left are undefined.
628
+ * const marginLonghandsTuples = [
629
+ * [ 'margin-top', '1px' ],
630
+ * [ 'margin-right', '1px' ]
631
+ * ];
632
+ * ```
633
+ *
634
+ * A reducer obtains a normalized style value:
635
+ *
636
+ * ```ts
637
+ * // Simplified reducer that always outputs 4 values which are always present:
638
+ * stylesProcessor.setReducer( 'margin', margin => {
639
+ * return [
640
+ * [ 'margin', `${ margin.top } ${ margin.right } ${ margin.bottom } ${ margin.left }` ]
641
+ * ]
642
+ * } );
643
+ * ```
644
+ */
645
+ setReducer(name, callback) {
646
+ this._reducers.set(name, callback);
647
+ }
648
+ /**
649
+ * Defines a style shorthand relation to other style notations.
650
+ *
651
+ * ```ts
652
+ * stylesProcessor.setStyleRelation( 'margin', [
653
+ * 'margin-top',
654
+ * 'margin-right',
655
+ * 'margin-bottom',
656
+ * 'margin-left'
657
+ * ] );
658
+ * ```
659
+ *
660
+ * This enables expanding of style names for shorthands. For instance, if defined,
661
+ * {@link module:engine/conversion/viewconsumable~ViewConsumable view consumable} items are automatically created
662
+ * for long-hand margin style notation alongside the `'margin'` item.
663
+ *
664
+ * This means that when an element being converted has a style `margin`, a converter for `margin-left` will work just
665
+ * fine since the view consumable will contain a consumable `margin-left` item (thanks to the relation) and
666
+ * `element.getStyle( 'margin-left' )` will work as well assuming that the style processor was correctly configured.
667
+ * However, once `margin-left` is consumed, `margin` will not be consumable anymore.
668
+ */
669
+ setStyleRelation(shorthandName, styleNames) {
670
+ this._mapStyleNames(shorthandName, styleNames);
671
+ for (const alsoName of styleNames) {
672
+ this._mapStyleNames(alsoName, [shorthandName]);
673
+ }
674
+ }
675
+ /**
676
+ * Set two-way binding of style names.
677
+ */
678
+ _mapStyleNames(name, styleNames) {
679
+ if (!this._consumables.has(name)) {
680
+ this._consumables.set(name, []);
681
+ }
682
+ this._consumables.get(name).push(...styleNames);
683
+ }
684
+ }
685
+ /**
686
+ * Parses inline styles and puts property - value pairs into styles map.
687
+ *
688
+ * @param stylesString Styles to parse.
689
+ * @returns Map of parsed properties and values.
690
+ */
691
+ function parseInlineStyles(stylesString) {
692
+ // `null` if no quote was found in input string or last found quote was a closing quote. See below.
693
+ let quoteType = null;
694
+ let propertyNameStart = 0;
695
+ let propertyValueStart = 0;
696
+ let propertyName = null;
697
+ const stylesMap = new Map();
698
+ // Do not set anything if input string is empty.
699
+ if (stylesString === '') {
700
+ return stylesMap;
701
+ }
702
+ // Fix inline styles that do not end with `;` so they are compatible with algorithm below.
703
+ if (stylesString.charAt(stylesString.length - 1) != ';') {
704
+ stylesString = stylesString + ';';
705
+ }
706
+ // Seek the whole string for "special characters".
707
+ for (let i = 0; i < stylesString.length; i++) {
708
+ const char = stylesString.charAt(i);
709
+ if (quoteType === null) {
710
+ // No quote found yet or last found quote was a closing quote.
711
+ switch (char) {
712
+ case ':':
713
+ // Most of time colon means that property name just ended.
714
+ // Sometimes however `:` is found inside property value (for example in background image url).
715
+ if (!propertyName) {
716
+ // Treat this as end of property only if property name is not already saved.
717
+ // Save property name.
718
+ propertyName = stylesString.substr(propertyNameStart, i - propertyNameStart);
719
+ // Save this point as the start of property value.
720
+ propertyValueStart = i + 1;
721
+ }
722
+ break;
723
+ case '"':
724
+ case '\'':
725
+ // Opening quote found (this is an opening quote, because `quoteType` is `null`).
726
+ quoteType = char;
727
+ break;
728
+ case ';': {
729
+ // Property value just ended.
730
+ // Use previously stored property value start to obtain property value.
731
+ const propertyValue = stylesString.substr(propertyValueStart, i - propertyValueStart);
732
+ if (propertyName) {
733
+ // Save parsed part.
734
+ stylesMap.set(propertyName.trim(), propertyValue.trim());
735
+ }
736
+ propertyName = null;
737
+ // Save this point as property name start. Property name starts immediately after previous property value ends.
738
+ propertyNameStart = i + 1;
739
+ break;
740
+ }
741
+ }
742
+ }
743
+ else if (char === quoteType) {
744
+ // If a quote char is found and it is a closing quote, mark this fact by `null`-ing `quoteType`.
745
+ quoteType = null;
746
+ }
747
+ }
748
+ return stylesMap;
749
+ }
750
+ /**
751
+ * Return lodash compatible path from style name.
752
+ */
753
+ function toPath(name) {
754
+ return name.replace('-', '.');
755
+ }
756
+ /**
757
+ * Appends style definition to the styles object.
758
+ */
759
+ function appendStyleValue(stylesObject, nameOrPath, valueOrObject) {
760
+ let valueToSet = valueOrObject;
761
+ if (isObject(valueOrObject)) {
762
+ valueToSet = merge({}, get(stylesObject, nameOrPath), valueOrObject);
763
+ }
764
+ set(stylesObject, nameOrPath, valueToSet);
765
+ }