/
imageconfig.ts
744 lines (712 loc) · 24.9 KB
/
imageconfig.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
/**
* @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 image/imageconfig
*/
/**
* The configuration of the image features. Used by the image features in the `@ckeditor/ckeditor5-image` package.
*
* ```ts
* ClassicEditor
* .create( editorElement, {
* image: ... // Image feature options.
* } )
* .then( ... )
* .catch( ... );
* ```
*
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
*/
export interface ImageConfig {
/**
* The image insert configuration.
*/
insert?: ImageInsertConfig;
/**
* The image resize options.
*
* Each option should have at least these two properties:
*
* * name: The name of the UI component registered in the global
* {@link module:ui/editorui/editorui~EditorUI#componentFactory component factory} of the editor,
* representing the button a user can click to change the size of an image,
* * value: An actual image width applied when a user clicks the mentioned button
* ({@link module:image/imageresize/resizeimagecommand~ResizeImageCommand} gets executed).
* The value property is combined with the
* {@link module:image/imageconfig~ImageConfig#resizeUnit `config.image.resizeUnit`} (`%` by default).
* For instance: `value: '50'` and `resizeUnit: '%'` will render as `'50%'` in the UI.
*
* **Resetting the image size**
*
* If you want to set an option that will reset image to its original size, you need to pass a `null` value
* to one of the options. The `:original` token is not mandatory, you can call it anything you wish, but it must reflect
* in the standalone buttons configuration for the image toolbar.
*
* ```ts
* ClassicEditor
* .create( editorElement, {
* image: {
* resizeUnit: "%",
* resizeOptions: [ {
* name: 'resizeImage:original',
* value: null
* },
* {
* name: 'resizeImage:50',
* value: '50'
* },
* {
* name: 'resizeImage:75',
* value: '75'
* } ]
* }
* } )
* .then( ... )
* .catch( ... );
* ```
*
* **Resizing images using a dropdown**
*
* With resize options defined, you can decide whether you want to display them as a dropdown or as standalone buttons.
* For the dropdown, you need to pass only the `resizeImage` token to the
{@link module:image/imageconfig~ImageConfig#toolbar `config.image.toolbar`}. The dropdown contains all defined options by default:
*
* ```ts
* ClassicEditor
* .create( editorElement, {
* image: {
* resizeUnit: "%",
* resizeOptions: [ {
* name: 'resizeImage:original',
* value: null
* },
* {
* name: 'resizeImage:50',
* value: '50'
* },
* {
* name: 'resizeImage:75',
* value: '75'
* } ],
* toolbar: [ 'resizeImage', ... ],
* }
* } )
* .then( ... )
* .catch( ... );
* ```
*
* **Resizing images using individual buttons**
*
* If you want to have separate buttons for {@link module:image/imageconfig~ImageResizeOption each option},
* pass their names to the {@link module:image/imageconfig~ImageConfig#toolbar `config.image.toolbar`} instead. Please keep in mind
* that this time **you must define the additional
* {@link module:image/imageconfig~ImageResizeOption `icon` property}**:
*
* ```ts
* ClassicEditor
* .create( editorElement, {
* image: {
* resizeUnit: "%",
* resizeOptions: [ {
* name: 'resizeImage:original',
* value: null,
* icon: 'original'
* },
* {
* name: 'resizeImage:25',
* value: '25',
* icon: 'small'
* },
* {
* name: 'resizeImage:50',
* value: '50',
* icon: 'medium'
* },
* {
* name: 'resizeImage:75',
* value: '75',
* icon: 'large'
* } ],
* toolbar: [ 'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage:original', ... ],
* }
* } )
* .then( ... )
* .catch( ... );
* ```
*
* **Customizing resize button labels**
*
* You can set your own label for each resize button. To do that, add the `label` property like in the example below.
*
* * When using the **dropdown**, the labels are displayed on the list of all options when you open the dropdown.
* * When using **standalone buttons**, the labels will are displayed as tooltips when a user hovers over the button.
*
* ```ts
* ClassicEditor
* .create( editorElement, {
* image: {
* resizeUnit: "%",
* resizeOptions: [ {
* name: 'resizeImage:original',
* value: null,
* label: 'Original size'
* // Note: add the "icon" property if you're configuring a standalone button.
* },
* {
* name: 'resizeImage:50',
* value: '50',
* label: 'Medium size'
* // Note: add the "icon" property if you're configuring a standalone button.
* },
* {
* name: 'resizeImage:75',
* value: '75',
* label: 'Large size'
* // Note: add the "icon" property if you're configuring a standalone button.
* } ]
* }
* } )
* .then( ... )
* .catch( ... );
* ```
*
* **Default value**
*
* The following configuration is used by default:
*
* ```ts
* resizeOptions = [
* {
* name: 'resizeImage:original',
* value: null,
* icon: 'original'
* },
* {
* name: 'resizeImage:25',
* value: '25',
* icon: 'small'
* },
* {
* name: 'resizeImage:50',
* value: '50',
* icon: 'medium'
* },
* {
* name: 'resizeImage:75',
* value: '75',
* icon: 'large'
* }
* ];
* ```
*/
resizeOptions?: Array<ImageResizeOption>;
/**
* The available options are `'px'` or `'%'`.
*
* Determines the size unit applied to the resized image.
*
* ```ts
* ClassicEditor
* .create( editorElement, {
* image: {
* resizeUnit: 'px'
* }
* } )
* .then( ... )
* .catch( ... );
* ```
*
* This option is used by the {@link module:image/imageresize~ImageResize} feature.
*
* @default '%'
*/
resizeUnit?: 'px' | '%';
/**
* The {@link module:image/imagestyle `ImageStyle`} plugin requires a list of the
* {@link module:image/imageconfig~ImageStyleConfig#options image style options} to work properly.
* The default configuration is provided (listed below) and can be customized while creating the editor instance.
*
* # **Command**
*
* The {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand `imageStyleCommand`}
* is configured based on the defined options,
* so you can change the style of the selected image by executing the following command:
*
* ```ts
* editor.execute( 'imageStyle' { value: 'alignLeft' } );
* ```
*
* # **Buttons**
*
* All of the image style options provided in the configuration are registered
* in the {@link module:ui/componentfactory~ComponentFactory UI components factory} with the "imageStyle:" prefixes and can be used
* in the {@link module:image/imageconfig~ImageConfig#toolbar image toolbar configuration}. The buttons available by default depending
* on the loaded plugins are listed in the next section.
*
* Read more about styling images in the {@glink features/images/images-styles Image styles guide}.
*
* # **Default options and buttons**
*
* If the custom configuration is not provided, the default configuration will be used depending on the loaded
* image editing plugins.
*
* * If both {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} and
* {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugins are loaded
* (which is usually the default editor configuration), the following options will be available for the toolbar
* configuration. These options will be registered as the buttons with the "imageStyle:" prefixes.
*
* ```ts
* const imageDefaultConfig = {
* styles: {
* options: [
* 'inline', 'alignLeft', 'alignRight',
* 'alignCenter', 'alignBlockLeft', 'alignBlockRight',
* 'block', 'side'
* ]
* }
* };
* ```
*
* * If only the {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin is loaded,
* the following buttons (options) and groups will be available for the toolbar configuration.
* These options will be registered as the buttons with the "imageStyle:" prefixes.
*
* ```ts
* const imageDefaultConfig = {
* styles: {
* options: [ 'block', 'side' ]
* }
* };
* ```
*
* * If only the {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin is loaded,
* the following buttons (options) and groups will available for the toolbar configuration.
* These options will be registered as the buttons with the "imageStyle:" prefixes.
*
* ```ts
* const imageDefaultConfig = {
* styles: {
* options: [ 'inline', 'alignLeft', 'alignRight' ]
* }
* };
* ```
*
* Read more about the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default styling options}.
*
* # **Custom configuration**
*
* The image styles configuration can be customized in several ways:
*
* * Any of the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default styling options}
* can be loaded by the reference to its name as follows:
*
* ```ts
* ClassicEditor
* .create( editorElement, {
* image: {
* styles: {
* options: [ 'alignLeft', 'alignRight' ]
* }
* }
* } );
* ```
*
* * Each of the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default image style options} can be customized,
* e.g. to change the `icon`, `title` or CSS `className` of the style. The feature also provides several
* {@link module:image/imagestyle/utils#DEFAULT_ICONS default icons} to choose from.
*
* ```ts
* import customIcon from 'custom-icon.svg';
*
* // ...
*
* ClassicEditor.create( editorElement, { image:
* styles: {
* options: {
* // This will only customize the icon of the "block" style.
* // Note: 'right' is one of default icons provided by the feature.
* {
* name: 'block',
* icon: 'right'
* },
*
* // This will customize the icon, title and CSS class of the default "side" style.
* {
* name: 'side',
* icon: customIcon,
* title: 'My side style',
* className: 'custom-side-image'
* }
* }
* }
* } );
* ```
*
* * If none of the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default image style options}
* works for the integration, it is possible to define independent custom styles, too.
*
* See the documentation about the image style {@link module:image/imageconfig~ImageStyleOptionDefinition options}
* to define the custom image style configuration properly.
*
* ```ts
* import redIcon from 'red-icon.svg';
* import blueIcon from 'blue-icon.svg';
*
* // ...
*
* ClassicEditor.create( editorElement, { image:
* styles: {
* // A list of completely custom styling options.
* options: [
* {
* name: 'regular',
* modelElements: [ 'imageBlock', 'imageInline' ],
* title: 'Regular image',
* icon: 'full',
* isDefault: true
* }, {
* name: 'blue',
* modelElements: [ 'imageInline' ],
* title: 'Blue image',
* icon: blueIcon,
* className: 'image-blue'
* }, {
* name: 'red',
* modelElements: [ 'imageBlock' ],
* title: 'Red image',
* icon: redIcon,
* className: 'image-red'
* }
* ]
* }
* } );
* ```
*/
styles?: ImageStyleConfig;
/**
* Items to be placed in the image toolbar.
* This option is used by the {@link module:image/imagetoolbar~ImageToolbar} feature.
*
* Assuming that you use the following features:
*
* * {@link module:image/imagestyle~ImageStyle} (with a default configuration),
* * {@link module:image/imagetextalternative~ImageTextAlternative},
* * {@link module:image/imagecaption~ImageCaption},
*
* the following toolbar items will be available in {@link module:ui/componentfactory~ComponentFactory}:
* * `'imageTextAlternative'`,
* * `'toggleImageCaption'`,
* * {@link module:image/imageconfig~ImageConfig#styles buttons provided by the `ImageStyle` plugin},
* * {@link module:image/imagestyle/utils#DEFAULT_DROPDOWN_DEFINITIONS drop-downs provided by the `ImageStyle` plugin},
*
* so you can configure the toolbar like this:
*
* ```ts
* const imageConfig = {
* toolbar: [
* 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|',
* 'toggleImageCaption', 'imageTextAlternative'
* ]
* };
* ```
*
* Besides that, the `ImageStyle` plugin allows to define a
* {@link module:image/imageconfig~ImageStyleDropdownDefinition custom drop-down} while configuring the toolbar.
*
* The same items can also be used in the {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
*
* Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
*/
toolbar?: Array<string | ImageStyleDropdownDefinition>;
/**
* The image upload configuration.
*/
upload?: ImageUploadConfig;
}
/**
* The configuration of the image insert dropdown panel view. Used by the image insert feature in the `@ckeditor/ckeditor5-image` package.
*
* ```ts
* ClassicEditor
* .create( editorElement, {
* image: {
* insert: {
* ... // settings for "insertImage" view goes here
* }
* }
* } )
* .then( ... )
* .catch( ... );
* ```
*
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
*/
export interface ImageInsertConfig {
/**
* The image insert panel view configuration contains a list of {@link module:image/imageinsert~ImageInsert} integrations.
*
* The option accepts string tokens.
* * for predefined integrations, we have 3 special strings: `upload`, `url`, and `assetManager`.
* * for custom integrations, each string should be a name of the integration registered by the
* {@link module:image/imageinsert/imageinsertui~ImageInsertUI#registerIntegration `ImageInsertUI#registerIntegration()`}.
*
* ```ts
* // Add `upload`, `assetManager` and `url` integrations.
* const imageInsertConfig = {
* insert: {
* integrations: [
* 'upload',
* 'assetManager',
* 'url'
* ]
* }
* };
* ```
*
* @default [ 'upload', 'assetManager', 'url' ]
*/
integrations?: Array<string>;
/**
* This option allows to override the image type used by the {@link module:image/image/insertimagecommand~InsertImageCommand}
* when the user inserts new images into the editor content. By default, all images inserted into the editor will be block
* if {@link module:image/imageblock~ImageBlock} is loaded. To let the editor decide the image type, choose `'auto'`.
*
* Available options are:
*
* * `'block'` – all images inserted into the editor will be block (requires the {@link module:image/imageblock~ImageBlock} plugin),
* * `'inline'` – all images inserted into the editor will be inline (requires the {@link module:image/imageinline~ImageInline} plugin),
* * `'auto'` – the editor will choose the optimal image type based on the context of the insertion and availability of plugins.
*
* @default 'block'
*/
type?: 'inline' | 'block' | 'auto';
}
/**
* The image resize option used in the {@link module:image/imageconfig~ImageConfig#resizeOptions image resize configuration}.
*/
export interface ImageResizeOption {
/**
* The name of the UI component that changes the image size.
* * If you configure the feature using individual resize buttons, you can refer to this name in the
* {@link module:image/imageconfig~ImageConfig#toolbar image toolbar configuration}.
* * If you configure the feature using the resize dropdown, this name will be used for a list item in the dropdown.
*/
name: string;
/**
*
* The value of the resize option without the unit
* ({@link module:image/imageconfig~ImageConfig#resizeUnit configured separately}). `null` resets an image to its original size.
*/
value: string | null;
/**
* An icon used by an individual resize button (see the `name` property to learn more).
* Available icons are: `'small'`, `'medium'`, `'large'`, `'original'`.
*/
icon?: string;
/**
* An option label displayed in the dropdown or, if the feature is configured using
* individual buttons, a {@link module:ui/button/buttonview~ButtonView#tooltip} and an ARIA attribute of a button.
* If not specified, the label is generated automatically based on the `value` option and the
* {@link module:image/imageconfig~ImageConfig#resizeUnit `config.image.resizeUnit`}.
*/
label?: string;
}
/**
* # **The image style custom drop-down definition descriptor**
*
* This definition can be implemented in the {@link module:image/imageconfig~ImageConfig#toolbar image toolbar configuration}
* to define a completely custom drop-down in the image toolbar.
*
* ```ts
* ClassicEditor.create( editorElement, {
* image: { toolbar: [
* // One of the predefined drop-downs
* 'imageStyle:wrapText',
* // Custom drop-down
* {
* name: 'imageStyle:customDropdown',
* title: Custom drop-down title,
* items: [ 'imageStyle:alignLeft', 'imageStyle:alignRight' ],
* defaultItem: 'imageStyle:alignLeft'
* }
* ] }
* } );
* ```
*
* **Note:** At the moment it is possible to populate the custom drop-down with only the buttons registered by the `ImageStyle` plugin.
*
* The defined drop-down will be registered
* as the {@link module:ui/dropdown/dropdownview~DropdownView}
* with the {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} under the provided name in the
* {@link module:ui/componentfactory~ComponentFactory}
*/
export interface ImageStyleDropdownDefinition {
/**
* The unique name of the drop-down. It is recommended to precede it with the "imageStyle:" prefix
* to avoid collision with the components' names registered by other plugins.
*/
name: string;
/**
* The drop-down's title. It will be used as the split button label along with the title of the default item
* in the following manner: "Custom drop-down title: Default item title".
*
* Setting `title` to one of
* {@link module:image/imagestyle/imagestyleui~ImageStyleUI#localizedDefaultStylesTitles}
* will automatically translate it to the language of the editor.
*/
title?: string;
/**
* The list of the names of the buttons that will be placed in the drop-down's toolbar.
* Each of the buttons has to be one of the {@link module:image/imageconfig~ImageConfig#styles default image style buttons}
* or to be defined as the {@link module:image/imageconfig~ImageStyleOptionDefinition image styling option}.
*/
items: Array<string>;
/**
* defaultItem The name of one of the buttons from the items list,
* which will be used as a default button for the drop-down's split button.
*/
defaultItem: string;
}
/**
* The configuration for the {@link module:image/imagestyle~ImageStyle} plugin that should be provided
* while creating the editor instance.
*
* A detailed information about the default configuration and customization can be found in
* {@link module:image/imageconfig~ImageConfig#styles `ImageConfig#styles`}.
*/
export interface ImageStyleConfig {
/**
* A list of the image style options.
*/
options?: Array<string | ImageStyleOptionDefinition>;
}
/**
* The image styling option definition descriptor.
*
* This definition should be implemented in the `Image` plugin {@link module:image/imageconfig~ImageConfig#styles configuration} for:
*
* * customizing one of the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default styling options} by providing the proper name
* of the default style and the properties that should be overridden,
* * or defining a completely custom styling option by providing a custom name and implementing the following properties.
*
* ```ts
* import fullSizeIcon from 'path/to/icon.svg';
*
* const imageStyleOptionDefinition = {
* name: 'fullSize',
* icon: fullSizeIcon,
* title: 'Full size image',
* className: 'image-full-size',
* modelElements: [ 'imageBlock', 'imageInline' ]
* }
* ```
*
* The styling option will be registered as the button under the name `'imageStyle:{name}'` in the
* {@link module:ui/componentfactory~ComponentFactory UI components factory} (this functionality is provided by the
* {@link module:image/imagestyle/imagestyleui~ImageStyleUI} plugin).
*/
export interface ImageStyleOptionDefinition {
/**
* The unique name of the styling option. It will be used to:
*
* * refer to one of the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default styling options} or define the custom style,
* * store the chosen style in the model by setting the `imageStyle` attribute of the model image element,
* * as a value of the {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute `imageStyle` command},
* * when registering a button for the style in the following manner: (`'imageStyle:{name}'`).
*/
name: string;
/**
* When set, the style will be used as the default one for the model elements
* listed in the `modelElements` property. A default style does not apply any CSS class to the view element.
*
* If this property is not defined, its value is inherited
* from the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default styling options} addressed in the name property.
*/
isDefault?: boolean;
/**
* One of the following to be used when creating the styles's button:
*
* * an SVG icon source (as an XML string),
* * one of the keys in {@link module:image/imagestyle/utils#DEFAULT_ICONS} to use one of default icons provided by the plugin.
*
* If this property is not defined, its value is inherited
* from the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default styling options} addressed in the name property.
*/
icon: string;
/**
* The styles's title. Setting `title` to one of
* {@link module:image/imagestyle/imagestyleui~ImageStyleUI#localizedDefaultStylesTitles}
* will automatically translate it to the language of the editor.
*
* If this property is not defined, its value is inherited
* from the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default styling options} addressed in the name property.
*/
title: string;
/**
* The CSS class used to represent the style in the view.
* It should be used only for the non-default styles.
*
* If this property is not defined, its value is inherited
* from the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default styling options} addressed in the name property.
*/
className?: string;
/**
* The list of the names of the model elements that are supported by the style.
* The possible values are:
* * `[ 'imageBlock' ]` if the style can be applied to the image type introduced by the
* {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin,
* * `[ 'imageInline' ]` if the style can be applied to the image type introduced by the
* {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin,
* * `[ 'imageInline', 'imageBlock' ]` if the style can be applied to both image types introduced by the plugins mentioned above.
*
* This property determines which model element names work with the style. If the model element name of the currently selected
* image is different, upon executing the
* {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute `imageStyle`} command the image type (model element name)
* will automatically change.
*
* If this property is not defined, its value is inherited
* from the {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default styling options} addressed in the name property.
*/
modelElements: Array<string>;
}
/**
* The configuration of the image upload feature. Used by the image upload feature in the `@ckeditor/ckeditor5-image` package.
*
* ```ts
* ClassicEditor
* .create( editorElement, {
* image: {
* upload: ... // Image upload feature options.
* }
* } )
* .then( ... )
* .catch( ... );
* ```
*
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
*/
export interface ImageUploadConfig {
/**
* The list of accepted image types.
*
* The accepted types of images can be customized to allow only certain types of images:
*
* ```ts
* // Allow only JPEG and PNG images:
* const imageUploadConfig = {
* types: [ 'png', 'jpeg' ]
* };
* ```
*
* The type string should match [one of the sub-types](https://www.iana.org/assignments/media-types/media-types.xhtml#image)
* of the image MIME type. For example, for the `image/jpeg` MIME type, add `'jpeg'` to your image upload configuration.
*
* **Note:** This setting only restricts some image types to be selected and uploaded through the CKEditor UI and commands. Image type
* recognition and filtering should also be implemented on the server which accepts image uploads.
*
* @default [ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff' ]
*/
types: Array<string>;
}