@ckeditor/ckeditor5-image 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 (253) hide show
  1. package/CHANGELOG.md +25 -25
  2. package/LICENSE.md +3 -3
  3. package/build/image.js +2 -2
  4. package/build/translations/ar.js +1 -1
  5. package/build/translations/ast.js +1 -1
  6. package/build/translations/az.js +1 -1
  7. package/build/translations/bg.js +1 -1
  8. package/build/translations/bn.js +1 -1
  9. package/build/translations/bs.js +1 -1
  10. package/build/translations/ca.js +1 -1
  11. package/build/translations/cs.js +1 -1
  12. package/build/translations/da.js +1 -1
  13. package/build/translations/de-ch.js +1 -1
  14. package/build/translations/de.js +1 -1
  15. package/build/translations/el.js +1 -1
  16. package/build/translations/en-au.js +1 -1
  17. package/build/translations/en-gb.js +1 -1
  18. package/build/translations/eo.js +1 -1
  19. package/build/translations/es.js +1 -1
  20. package/build/translations/et.js +1 -1
  21. package/build/translations/eu.js +1 -1
  22. package/build/translations/fa.js +1 -1
  23. package/build/translations/fi.js +1 -1
  24. package/build/translations/fr.js +1 -1
  25. package/build/translations/gl.js +1 -1
  26. package/build/translations/he.js +1 -1
  27. package/build/translations/hi.js +1 -1
  28. package/build/translations/hr.js +1 -1
  29. package/build/translations/hu.js +1 -1
  30. package/build/translations/id.js +1 -1
  31. package/build/translations/it.js +1 -1
  32. package/build/translations/ja.js +1 -1
  33. package/build/translations/jv.js +1 -1
  34. package/build/translations/km.js +1 -1
  35. package/build/translations/kn.js +1 -1
  36. package/build/translations/ko.js +1 -1
  37. package/build/translations/ku.js +1 -1
  38. package/build/translations/lt.js +1 -1
  39. package/build/translations/lv.js +1 -1
  40. package/build/translations/ms.js +1 -1
  41. package/build/translations/nb.js +1 -1
  42. package/build/translations/ne.js +1 -1
  43. package/build/translations/nl.js +1 -1
  44. package/build/translations/no.js +1 -1
  45. package/build/translations/pl.js +1 -1
  46. package/build/translations/pt-br.js +1 -1
  47. package/build/translations/pt.js +1 -1
  48. package/build/translations/ro.js +1 -1
  49. package/build/translations/ru.js +1 -1
  50. package/build/translations/si.js +1 -1
  51. package/build/translations/sk.js +1 -1
  52. package/build/translations/sq.js +1 -1
  53. package/build/translations/sr-latn.js +1 -1
  54. package/build/translations/sr.js +1 -1
  55. package/build/translations/sv.js +1 -1
  56. package/build/translations/th.js +1 -1
  57. package/build/translations/tk.js +1 -1
  58. package/build/translations/tr.js +1 -1
  59. package/build/translations/tt.js +1 -1
  60. package/build/translations/ug.js +1 -1
  61. package/build/translations/uk.js +1 -1
  62. package/build/translations/ur.js +1 -1
  63. package/build/translations/uz.js +1 -1
  64. package/build/translations/vi.js +1 -1
  65. package/build/translations/zh-cn.js +1 -1
  66. package/build/translations/zh.js +1 -1
  67. package/ckeditor5-metadata.json +3 -3
  68. package/lang/contexts.json +5 -0
  69. package/lang/translations/ar.po +20 -0
  70. package/lang/translations/ast.po +20 -0
  71. package/lang/translations/az.po +20 -0
  72. package/lang/translations/bg.po +20 -0
  73. package/lang/translations/bn.po +20 -0
  74. package/lang/translations/bs.po +20 -0
  75. package/lang/translations/ca.po +20 -0
  76. package/lang/translations/cs.po +20 -0
  77. package/lang/translations/da.po +20 -0
  78. package/lang/translations/de-ch.po +20 -0
  79. package/lang/translations/de.po +20 -0
  80. package/lang/translations/el.po +20 -0
  81. package/lang/translations/en-au.po +20 -0
  82. package/lang/translations/en-gb.po +20 -0
  83. package/lang/translations/en.po +20 -0
  84. package/lang/translations/eo.po +20 -0
  85. package/lang/translations/es.po +20 -0
  86. package/lang/translations/et.po +20 -0
  87. package/lang/translations/eu.po +20 -0
  88. package/lang/translations/fa.po +20 -0
  89. package/lang/translations/fi.po +20 -0
  90. package/lang/translations/fr.po +20 -0
  91. package/lang/translations/gl.po +20 -0
  92. package/lang/translations/he.po +20 -0
  93. package/lang/translations/hi.po +20 -0
  94. package/lang/translations/hr.po +20 -0
  95. package/lang/translations/hu.po +20 -0
  96. package/lang/translations/id.po +20 -0
  97. package/lang/translations/it.po +20 -0
  98. package/lang/translations/ja.po +20 -0
  99. package/lang/translations/jv.po +20 -0
  100. package/lang/translations/km.po +20 -0
  101. package/lang/translations/kn.po +20 -0
  102. package/lang/translations/ko.po +20 -0
  103. package/lang/translations/ku.po +20 -0
  104. package/lang/translations/lt.po +20 -0
  105. package/lang/translations/lv.po +20 -0
  106. package/lang/translations/ms.po +20 -0
  107. package/lang/translations/nb.po +20 -0
  108. package/lang/translations/ne.po +20 -0
  109. package/lang/translations/nl.po +20 -0
  110. package/lang/translations/no.po +20 -0
  111. package/lang/translations/pl.po +20 -0
  112. package/lang/translations/pt-br.po +20 -0
  113. package/lang/translations/pt.po +20 -0
  114. package/lang/translations/ro.po +20 -0
  115. package/lang/translations/ru.po +20 -0
  116. package/lang/translations/si.po +20 -0
  117. package/lang/translations/sk.po +20 -0
  118. package/lang/translations/sq.po +20 -0
  119. package/lang/translations/sr-latn.po +20 -0
  120. package/lang/translations/sr.po +20 -0
  121. package/lang/translations/sv.po +20 -0
  122. package/lang/translations/th.po +20 -0
  123. package/lang/translations/tk.po +20 -0
  124. package/lang/translations/tr.po +20 -0
  125. package/lang/translations/tt.po +20 -0
  126. package/lang/translations/ug.po +21 -1
  127. package/lang/translations/uk.po +20 -0
  128. package/lang/translations/ur.po +20 -0
  129. package/lang/translations/uz.po +20 -0
  130. package/lang/translations/vi.po +20 -0
  131. package/lang/translations/zh-cn.po +20 -0
  132. package/lang/translations/zh.po +20 -0
  133. package/package.json +3 -3
  134. package/src/augmentation.d.ts +56 -56
  135. package/src/augmentation.js +5 -5
  136. package/src/autoimage.d.ts +52 -52
  137. package/src/autoimage.js +132 -132
  138. package/src/image/converters.d.ts +66 -66
  139. package/src/image/converters.js +232 -232
  140. package/src/image/imageblockediting.d.ts +59 -58
  141. package/src/image/imageblockediting.js +153 -152
  142. package/src/image/imageediting.d.ts +30 -30
  143. package/src/image/imageediting.js +63 -63
  144. package/src/image/imageinlineediting.d.ts +60 -59
  145. package/src/image/imageinlineediting.js +177 -176
  146. package/src/image/imageloadobserver.d.ts +48 -48
  147. package/src/image/imageloadobserver.js +52 -52
  148. package/src/image/imageplaceholder.d.ts +39 -0
  149. package/src/image/imageplaceholder.js +113 -0
  150. package/src/image/imagetypecommand.d.ts +44 -44
  151. package/src/image/imagetypecommand.js +80 -80
  152. package/src/image/insertimagecommand.d.ts +66 -66
  153. package/src/image/insertimagecommand.js +120 -120
  154. package/src/image/replaceimagesourcecommand.d.ts +51 -34
  155. package/src/image/replaceimagesourcecommand.js +75 -44
  156. package/src/image/ui/utils.d.ts +25 -25
  157. package/src/image/ui/utils.js +44 -44
  158. package/src/image/utils.d.ts +64 -64
  159. package/src/image/utils.js +121 -121
  160. package/src/image.d.ts +34 -34
  161. package/src/image.js +38 -38
  162. package/src/imageblock.d.ts +34 -33
  163. package/src/imageblock.js +38 -37
  164. package/src/imagecaption/imagecaptionediting.d.ts +89 -89
  165. package/src/imagecaption/imagecaptionediting.js +225 -225
  166. package/src/imagecaption/imagecaptionui.d.ts +26 -26
  167. package/src/imagecaption/imagecaptionui.js +61 -61
  168. package/src/imagecaption/imagecaptionutils.d.ts +38 -38
  169. package/src/imagecaption/imagecaptionutils.js +62 -62
  170. package/src/imagecaption/toggleimagecaptioncommand.d.ts +66 -66
  171. package/src/imagecaption/toggleimagecaptioncommand.js +138 -138
  172. package/src/imagecaption.d.ts +26 -26
  173. package/src/imagecaption.js +30 -30
  174. package/src/imageconfig.d.ts +712 -713
  175. package/src/imageconfig.js +5 -5
  176. package/src/imageinline.d.ts +34 -33
  177. package/src/imageinline.js +38 -37
  178. package/src/imageinsert/imageinsertui.d.ts +72 -44
  179. package/src/imageinsert/imageinsertui.js +174 -141
  180. package/src/imageinsert/imageinsertviaurlui.d.ts +44 -0
  181. package/src/imageinsert/imageinsertviaurlui.js +122 -0
  182. package/src/imageinsert/ui/imageinsertformview.d.ts +56 -0
  183. package/src/imageinsert/ui/imageinsertformview.js +112 -0
  184. package/src/imageinsert/ui/imageinserturlview.d.ts +107 -0
  185. package/src/imageinsert/ui/imageinserturlview.js +156 -0
  186. package/src/imageinsert.d.ts +33 -33
  187. package/src/imageinsert.js +37 -37
  188. package/src/imageinsertviaurl.d.ts +31 -30
  189. package/src/imageinsertviaurl.js +35 -34
  190. package/src/imageresize/imageresizebuttons.d.ts +67 -67
  191. package/src/imageresize/imageresizebuttons.js +217 -217
  192. package/src/imageresize/imageresizeediting.d.ts +37 -37
  193. package/src/imageresize/imageresizeediting.js +165 -165
  194. package/src/imageresize/imageresizehandles.d.ts +31 -31
  195. package/src/imageresize/imageresizehandles.js +114 -114
  196. package/src/imageresize/resizeimagecommand.d.ts +42 -42
  197. package/src/imageresize/resizeimagecommand.js +63 -63
  198. package/src/imageresize.d.ts +27 -27
  199. package/src/imageresize.js +31 -31
  200. package/src/imagesizeattributes.d.ts +34 -34
  201. package/src/imagesizeattributes.js +142 -143
  202. package/src/imagestyle/converters.d.ts +24 -24
  203. package/src/imagestyle/converters.js +79 -79
  204. package/src/imagestyle/imagestylecommand.d.ts +68 -68
  205. package/src/imagestyle/imagestylecommand.js +107 -107
  206. package/src/imagestyle/imagestyleediting.d.ts +50 -50
  207. package/src/imagestyle/imagestyleediting.js +108 -108
  208. package/src/imagestyle/imagestyleui.d.ts +56 -56
  209. package/src/imagestyle/imagestyleui.js +192 -192
  210. package/src/imagestyle/utils.d.ts +101 -101
  211. package/src/imagestyle/utils.js +329 -329
  212. package/src/imagestyle.d.ts +32 -32
  213. package/src/imagestyle.js +36 -36
  214. package/src/imagetextalternative/imagetextalternativecommand.d.ts +34 -34
  215. package/src/imagetextalternative/imagetextalternativecommand.js +44 -44
  216. package/src/imagetextalternative/imagetextalternativeediting.d.ts +28 -28
  217. package/src/imagetextalternative/imagetextalternativeediting.js +35 -35
  218. package/src/imagetextalternative/imagetextalternativeui.d.ts +68 -68
  219. package/src/imagetextalternative/imagetextalternativeui.js +173 -173
  220. package/src/imagetextalternative/ui/textalternativeformview.d.ts +90 -72
  221. package/src/imagetextalternative/ui/textalternativeformview.js +121 -121
  222. package/src/imagetextalternative.d.ts +29 -29
  223. package/src/imagetextalternative.js +33 -33
  224. package/src/imagetoolbar.d.ts +35 -35
  225. package/src/imagetoolbar.js +57 -57
  226. package/src/imageupload/imageuploadediting.d.ts +111 -111
  227. package/src/imageupload/imageuploadediting.js +337 -337
  228. package/src/imageupload/imageuploadprogress.d.ts +42 -42
  229. package/src/imageupload/imageuploadprogress.js +211 -211
  230. package/src/imageupload/imageuploadui.d.ts +23 -23
  231. package/src/imageupload/imageuploadui.js +81 -57
  232. package/src/imageupload/uploadimagecommand.d.ts +60 -60
  233. package/src/imageupload/uploadimagecommand.js +100 -100
  234. package/src/imageupload/utils.d.ts +33 -33
  235. package/src/imageupload/utils.js +112 -112
  236. package/src/imageupload.d.ts +32 -32
  237. package/src/imageupload.js +36 -36
  238. package/src/imageutils.d.ts +125 -125
  239. package/src/imageutils.js +306 -306
  240. package/src/index.d.ts +48 -48
  241. package/src/index.js +39 -39
  242. package/src/pictureediting.d.ts +88 -88
  243. package/src/pictureediting.js +130 -130
  244. package/theme/imageinsert.css +5 -17
  245. package/theme/imageplaceholder.css +10 -0
  246. package/build/image.js.map +0 -1
  247. package/src/imageinsert/ui/imageinsertformrowview.d.ts +0 -61
  248. package/src/imageinsert/ui/imageinsertformrowview.js +0 -54
  249. package/src/imageinsert/ui/imageinsertpanelview.d.ts +0 -106
  250. package/src/imageinsert/ui/imageinsertpanelview.js +0 -161
  251. package/src/imageinsert/utils.d.ts +0 -25
  252. package/src/imageinsert/utils.js +0 -58
  253. package/theme/imageinsertformrowview.css +0 -36
@@ -1,192 +1,192 @@
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 image/imagestyle/imagestyleui
7
- */
8
- import { Plugin } from 'ckeditor5/src/core';
9
- import { ButtonView, createDropdown, addToolbarToDropdown, SplitButtonView } from 'ckeditor5/src/ui';
10
- import { isObject, identity } from 'lodash-es';
11
- import ImageStyleEditing from './imagestyleediting';
12
- import utils from './utils';
13
- import '../../theme/imagestyle.css';
14
- /**
15
- * The image style UI plugin.
16
- *
17
- * It registers buttons corresponding to the {@link module:image/imageconfig~ImageConfig#styles} configuration.
18
- * It also registers the {@link module:image/imagestyle/utils#DEFAULT_DROPDOWN_DEFINITIONS default drop-downs} and the
19
- * custom drop-downs defined by the developer in the {@link module:image/imageconfig~ImageConfig#toolbar} configuration.
20
- */
21
- export default class ImageStyleUI extends Plugin {
22
- /**
23
- * @inheritDoc
24
- */
25
- static get requires() {
26
- return [ImageStyleEditing];
27
- }
28
- /**
29
- * @inheritDoc
30
- */
31
- static get pluginName() {
32
- return 'ImageStyleUI';
33
- }
34
- /**
35
- * Returns the default localized style titles provided by the plugin.
36
- *
37
- * The following localized titles corresponding with
38
- * {@link module:image/imagestyle/utils#DEFAULT_OPTIONS} are available:
39
- *
40
- * * `'Wrap text'`,
41
- * * `'Break text'`,
42
- * * `'In line'`,
43
- * * `'Full size image'`,
44
- * * `'Side image'`,
45
- * * `'Left aligned image'`,
46
- * * `'Centered image'`,
47
- * * `'Right aligned image'`
48
- */
49
- get localizedDefaultStylesTitles() {
50
- const t = this.editor.t;
51
- return {
52
- 'Wrap text': t('Wrap text'),
53
- 'Break text': t('Break text'),
54
- 'In line': t('In line'),
55
- 'Full size image': t('Full size image'),
56
- 'Side image': t('Side image'),
57
- 'Left aligned image': t('Left aligned image'),
58
- 'Centered image': t('Centered image'),
59
- 'Right aligned image': t('Right aligned image')
60
- };
61
- }
62
- /**
63
- * @inheritDoc
64
- */
65
- init() {
66
- const plugins = this.editor.plugins;
67
- const toolbarConfig = this.editor.config.get('image.toolbar') || [];
68
- const imageStyleEditing = plugins.get('ImageStyleEditing');
69
- const definedStyles = translateStyles(imageStyleEditing.normalizedStyles, this.localizedDefaultStylesTitles);
70
- for (const styleConfig of definedStyles) {
71
- this._createButton(styleConfig);
72
- }
73
- const definedDropdowns = translateStyles([
74
- ...toolbarConfig.filter(isObject),
75
- ...utils.getDefaultDropdownDefinitions(plugins)
76
- ], this.localizedDefaultStylesTitles);
77
- for (const dropdownConfig of definedDropdowns) {
78
- this._createDropdown(dropdownConfig, definedStyles);
79
- }
80
- }
81
- /**
82
- * Creates a dropdown and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
83
- */
84
- _createDropdown(dropdownConfig, definedStyles) {
85
- const factory = this.editor.ui.componentFactory;
86
- factory.add(dropdownConfig.name, locale => {
87
- let defaultButton;
88
- const { defaultItem, items, title } = dropdownConfig;
89
- const buttonViews = items
90
- .filter(itemName => definedStyles.find(({ name }) => getUIComponentName(name) === itemName))
91
- .map(buttonName => {
92
- const button = factory.create(buttonName);
93
- if (buttonName === defaultItem) {
94
- defaultButton = button;
95
- }
96
- return button;
97
- });
98
- if (items.length !== buttonViews.length) {
99
- utils.warnInvalidStyle({ dropdown: dropdownConfig });
100
- }
101
- const dropdownView = createDropdown(locale, SplitButtonView);
102
- const splitButtonView = dropdownView.buttonView;
103
- const splitButtonViewArrow = splitButtonView.arrowView;
104
- addToolbarToDropdown(dropdownView, buttonViews, { enableActiveItemFocusOnDropdownOpen: true });
105
- splitButtonView.set({
106
- label: getDropdownButtonTitle(title, defaultButton.label),
107
- class: null,
108
- tooltip: true
109
- });
110
- splitButtonViewArrow.unbind('label');
111
- splitButtonViewArrow.set({
112
- label: title
113
- });
114
- splitButtonView.bind('icon').toMany(buttonViews, 'isOn', (...areOn) => {
115
- const index = areOn.findIndex(identity);
116
- return (index < 0) ? defaultButton.icon : buttonViews[index].icon;
117
- });
118
- splitButtonView.bind('label').toMany(buttonViews, 'isOn', (...areOn) => {
119
- const index = areOn.findIndex(identity);
120
- return getDropdownButtonTitle(title, (index < 0) ? defaultButton.label : buttonViews[index].label);
121
- });
122
- splitButtonView.bind('isOn').toMany(buttonViews, 'isOn', (...areOn) => areOn.some(identity));
123
- splitButtonView.bind('class')
124
- .toMany(buttonViews, 'isOn', (...areOn) => areOn.some(identity) ? 'ck-splitbutton_flatten' : undefined);
125
- splitButtonView.on('execute', () => {
126
- if (!buttonViews.some(({ isOn }) => isOn)) {
127
- defaultButton.fire('execute');
128
- }
129
- else {
130
- dropdownView.isOpen = !dropdownView.isOpen;
131
- }
132
- });
133
- dropdownView.bind('isEnabled')
134
- .toMany(buttonViews, 'isEnabled', (...areEnabled) => areEnabled.some(identity));
135
- // Focus the editable after executing the command.
136
- // Overrides a default behaviour where the focus is moved to the dropdown button (#12125).
137
- this.listenTo(dropdownView, 'execute', () => {
138
- this.editor.editing.view.focus();
139
- });
140
- return dropdownView;
141
- });
142
- }
143
- /**
144
- * Creates a button and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
145
- */
146
- _createButton(buttonConfig) {
147
- const buttonName = buttonConfig.name;
148
- this.editor.ui.componentFactory.add(getUIComponentName(buttonName), locale => {
149
- const command = this.editor.commands.get('imageStyle');
150
- const view = new ButtonView(locale);
151
- view.set({
152
- label: buttonConfig.title,
153
- icon: buttonConfig.icon,
154
- tooltip: true,
155
- isToggleable: true
156
- });
157
- view.bind('isEnabled').to(command, 'isEnabled');
158
- view.bind('isOn').to(command, 'value', value => value === buttonName);
159
- view.on('execute', this._executeCommand.bind(this, buttonName));
160
- return view;
161
- });
162
- }
163
- _executeCommand(name) {
164
- this.editor.execute('imageStyle', { value: name });
165
- this.editor.editing.view.focus();
166
- }
167
- }
168
- /**
169
- * Returns the translated `title` from the passed styles array.
170
- */
171
- function translateStyles(styles, titles) {
172
- for (const style of styles) {
173
- // Localize the titles of the styles, if a title corresponds with
174
- // a localized default provided by the plugin.
175
- if (titles[style.title]) {
176
- style.title = titles[style.title];
177
- }
178
- }
179
- return styles;
180
- }
181
- /**
182
- * Returns the image style component name with the "imageStyle:" prefix.
183
- */
184
- function getUIComponentName(name) {
185
- return `imageStyle:${name}`;
186
- }
187
- /**
188
- * Returns title for the splitbutton containing the dropdown title and default action item title.
189
- */
190
- function getDropdownButtonTitle(dropdownTitle, buttonTitle) {
191
- return (dropdownTitle ? dropdownTitle + ': ' : '') + buttonTitle;
192
- }
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 image/imagestyle/imagestyleui
7
+ */
8
+ import { Plugin } from 'ckeditor5/src/core';
9
+ import { ButtonView, createDropdown, addToolbarToDropdown, SplitButtonView } from 'ckeditor5/src/ui';
10
+ import { isObject, identity } from 'lodash-es';
11
+ import ImageStyleEditing from './imagestyleediting';
12
+ import utils from './utils';
13
+ import '../../theme/imagestyle.css';
14
+ /**
15
+ * The image style UI plugin.
16
+ *
17
+ * It registers buttons corresponding to the {@link module:image/imageconfig~ImageConfig#styles} configuration.
18
+ * It also registers the {@link module:image/imagestyle/utils#DEFAULT_DROPDOWN_DEFINITIONS default drop-downs} and the
19
+ * custom drop-downs defined by the developer in the {@link module:image/imageconfig~ImageConfig#toolbar} configuration.
20
+ */
21
+ export default class ImageStyleUI extends Plugin {
22
+ /**
23
+ * @inheritDoc
24
+ */
25
+ static get requires() {
26
+ return [ImageStyleEditing];
27
+ }
28
+ /**
29
+ * @inheritDoc
30
+ */
31
+ static get pluginName() {
32
+ return 'ImageStyleUI';
33
+ }
34
+ /**
35
+ * Returns the default localized style titles provided by the plugin.
36
+ *
37
+ * The following localized titles corresponding with
38
+ * {@link module:image/imagestyle/utils#DEFAULT_OPTIONS} are available:
39
+ *
40
+ * * `'Wrap text'`,
41
+ * * `'Break text'`,
42
+ * * `'In line'`,
43
+ * * `'Full size image'`,
44
+ * * `'Side image'`,
45
+ * * `'Left aligned image'`,
46
+ * * `'Centered image'`,
47
+ * * `'Right aligned image'`
48
+ */
49
+ get localizedDefaultStylesTitles() {
50
+ const t = this.editor.t;
51
+ return {
52
+ 'Wrap text': t('Wrap text'),
53
+ 'Break text': t('Break text'),
54
+ 'In line': t('In line'),
55
+ 'Full size image': t('Full size image'),
56
+ 'Side image': t('Side image'),
57
+ 'Left aligned image': t('Left aligned image'),
58
+ 'Centered image': t('Centered image'),
59
+ 'Right aligned image': t('Right aligned image')
60
+ };
61
+ }
62
+ /**
63
+ * @inheritDoc
64
+ */
65
+ init() {
66
+ const plugins = this.editor.plugins;
67
+ const toolbarConfig = this.editor.config.get('image.toolbar') || [];
68
+ const imageStyleEditing = plugins.get('ImageStyleEditing');
69
+ const definedStyles = translateStyles(imageStyleEditing.normalizedStyles, this.localizedDefaultStylesTitles);
70
+ for (const styleConfig of definedStyles) {
71
+ this._createButton(styleConfig);
72
+ }
73
+ const definedDropdowns = translateStyles([
74
+ ...toolbarConfig.filter(isObject),
75
+ ...utils.getDefaultDropdownDefinitions(plugins)
76
+ ], this.localizedDefaultStylesTitles);
77
+ for (const dropdownConfig of definedDropdowns) {
78
+ this._createDropdown(dropdownConfig, definedStyles);
79
+ }
80
+ }
81
+ /**
82
+ * Creates a dropdown and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
83
+ */
84
+ _createDropdown(dropdownConfig, definedStyles) {
85
+ const factory = this.editor.ui.componentFactory;
86
+ factory.add(dropdownConfig.name, locale => {
87
+ let defaultButton;
88
+ const { defaultItem, items, title } = dropdownConfig;
89
+ const buttonViews = items
90
+ .filter(itemName => definedStyles.find(({ name }) => getUIComponentName(name) === itemName))
91
+ .map(buttonName => {
92
+ const button = factory.create(buttonName);
93
+ if (buttonName === defaultItem) {
94
+ defaultButton = button;
95
+ }
96
+ return button;
97
+ });
98
+ if (items.length !== buttonViews.length) {
99
+ utils.warnInvalidStyle({ dropdown: dropdownConfig });
100
+ }
101
+ const dropdownView = createDropdown(locale, SplitButtonView);
102
+ const splitButtonView = dropdownView.buttonView;
103
+ const splitButtonViewArrow = splitButtonView.arrowView;
104
+ addToolbarToDropdown(dropdownView, buttonViews, { enableActiveItemFocusOnDropdownOpen: true });
105
+ splitButtonView.set({
106
+ label: getDropdownButtonTitle(title, defaultButton.label),
107
+ class: null,
108
+ tooltip: true
109
+ });
110
+ splitButtonViewArrow.unbind('label');
111
+ splitButtonViewArrow.set({
112
+ label: title
113
+ });
114
+ splitButtonView.bind('icon').toMany(buttonViews, 'isOn', (...areOn) => {
115
+ const index = areOn.findIndex(identity);
116
+ return (index < 0) ? defaultButton.icon : buttonViews[index].icon;
117
+ });
118
+ splitButtonView.bind('label').toMany(buttonViews, 'isOn', (...areOn) => {
119
+ const index = areOn.findIndex(identity);
120
+ return getDropdownButtonTitle(title, (index < 0) ? defaultButton.label : buttonViews[index].label);
121
+ });
122
+ splitButtonView.bind('isOn').toMany(buttonViews, 'isOn', (...areOn) => areOn.some(identity));
123
+ splitButtonView.bind('class')
124
+ .toMany(buttonViews, 'isOn', (...areOn) => areOn.some(identity) ? 'ck-splitbutton_flatten' : undefined);
125
+ splitButtonView.on('execute', () => {
126
+ if (!buttonViews.some(({ isOn }) => isOn)) {
127
+ defaultButton.fire('execute');
128
+ }
129
+ else {
130
+ dropdownView.isOpen = !dropdownView.isOpen;
131
+ }
132
+ });
133
+ dropdownView.bind('isEnabled')
134
+ .toMany(buttonViews, 'isEnabled', (...areEnabled) => areEnabled.some(identity));
135
+ // Focus the editable after executing the command.
136
+ // Overrides a default behaviour where the focus is moved to the dropdown button (#12125).
137
+ this.listenTo(dropdownView, 'execute', () => {
138
+ this.editor.editing.view.focus();
139
+ });
140
+ return dropdownView;
141
+ });
142
+ }
143
+ /**
144
+ * Creates a button and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
145
+ */
146
+ _createButton(buttonConfig) {
147
+ const buttonName = buttonConfig.name;
148
+ this.editor.ui.componentFactory.add(getUIComponentName(buttonName), locale => {
149
+ const command = this.editor.commands.get('imageStyle');
150
+ const view = new ButtonView(locale);
151
+ view.set({
152
+ label: buttonConfig.title,
153
+ icon: buttonConfig.icon,
154
+ tooltip: true,
155
+ isToggleable: true
156
+ });
157
+ view.bind('isEnabled').to(command, 'isEnabled');
158
+ view.bind('isOn').to(command, 'value', value => value === buttonName);
159
+ view.on('execute', this._executeCommand.bind(this, buttonName));
160
+ return view;
161
+ });
162
+ }
163
+ _executeCommand(name) {
164
+ this.editor.execute('imageStyle', { value: name });
165
+ this.editor.editing.view.focus();
166
+ }
167
+ }
168
+ /**
169
+ * Returns the translated `title` from the passed styles array.
170
+ */
171
+ function translateStyles(styles, titles) {
172
+ for (const style of styles) {
173
+ // Localize the titles of the styles, if a title corresponds with
174
+ // a localized default provided by the plugin.
175
+ if (titles[style.title]) {
176
+ style.title = titles[style.title];
177
+ }
178
+ }
179
+ return styles;
180
+ }
181
+ /**
182
+ * Returns the image style component name with the "imageStyle:" prefix.
183
+ */
184
+ function getUIComponentName(name) {
185
+ return `imageStyle:${name}`;
186
+ }
187
+ /**
188
+ * Returns title for the splitbutton containing the dropdown title and default action item title.
189
+ */
190
+ function getDropdownButtonTitle(dropdownTitle, buttonTitle) {
191
+ return (dropdownTitle ? dropdownTitle + ': ' : '') + buttonTitle;
192
+ }
@@ -1,101 +1,101 @@
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 image/imagestyle/utils
7
- */
8
- import { type Editor, type PluginCollection } from 'ckeditor5/src/core';
9
- import type { ImageStyleConfig, ImageStyleDropdownDefinition, ImageStyleOptionDefinition } from '../imageconfig';
10
- /**
11
- * Default image style options provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
12
- * configuration.
13
- *
14
- * There are available 5 styles focused on formatting:
15
- *
16
- * * **`'alignLeft'`** aligns the inline or block image to the left and wraps it with the text using the `image-style-align-left` class,
17
- * * **`'alignRight'`** aligns the inline or block image to the right and wraps it with the text using the `image-style-align-right` class,
18
- * * **`'alignCenter'`** centers the block image using the `image-style-align-center` class,
19
- * * **`'alignBlockLeft'`** aligns the block image to the left using the `image-style-block-align-left` class,
20
- * * **`'alignBlockRight'`** aligns the block image to the right using the `image-style-block-align-right` class,
21
- *
22
- * and 3 semantic styles:
23
- *
24
- * * **`'inline'`** is an inline image without any CSS class,
25
- * * **`'block'`** is a block image without any CSS class,
26
- * * **`'side'`** is a block image styled with the `image-style-side` CSS class.
27
- */
28
- export declare const DEFAULT_OPTIONS: Record<string, ImageStyleOptionDefinition>;
29
- /**
30
- * Default image style icons provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
31
- * configuration.
32
- *
33
- * See {@link module:image/imageconfig~ImageStyleOptionDefinition#icon} to learn more.
34
- *
35
- * There are 7 default icons available: `'full'`, `'left'`, `'inlineLeft'`, `'center'`, `'right'`, `'inlineRight'`, and `'inline'`.
36
- */
37
- export declare const DEFAULT_ICONS: Record<string, string>;
38
- /**
39
- * Default drop-downs provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#toolbar}
40
- * configuration. The drop-downs are containers for the {@link module:image/imageconfig~ImageStyleConfig#options image style options}.
41
- *
42
- * If both of the `ImageEditing` plugins are loaded, there are 2 predefined drop-downs available:
43
- *
44
- * * **`'imageStyle:wrapText'`**, which contains the `alignLeft` and `alignRight` options, that is,
45
- * those that wraps the text around the image,
46
- * * **`'imageStyle:breakText'`**, which contains the `alignBlockLeft`, `alignCenter` and `alignBlockRight` options, that is,
47
- * those that breaks the text around the image.
48
- */
49
- export declare const DEFAULT_DROPDOWN_DEFINITIONS: Array<ImageStyleDropdownDefinition>;
50
- /**
51
- * Returns a list of the normalized and validated image style options.
52
- *
53
- * @param config
54
- * @param config.isInlinePluginLoaded
55
- * Determines whether the {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin has been loaded.
56
- * @param config.isBlockPluginLoaded
57
- * Determines whether the {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin has been loaded.
58
- * @param config.configuredStyles
59
- * The image styles configuration provided in the image styles {@link module:image/imageconfig~ImageConfig#styles configuration}
60
- * as a default or custom value.
61
- * @returns
62
- * * Each of options contains a complete icon markup.
63
- * * The image style options not supported by any of the loaded plugins are filtered out.
64
- */
65
- declare function normalizeStyles(config: {
66
- isInlinePluginLoaded: boolean;
67
- isBlockPluginLoaded: boolean;
68
- configuredStyles: ImageStyleConfig;
69
- }): Array<ImageStyleOptionDefinition>;
70
- /**
71
- * Returns the default image styles configuration depending on the loaded image editing plugins.
72
- *
73
- * @param isInlinePluginLoaded
74
- * Determines whether the {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin has been loaded.
75
- *
76
- * @param isBlockPluginLoaded
77
- * Determines whether the {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin has been loaded.
78
- *
79
- * @returns
80
- * It returns an object with the lists of the image style options and groups defined as strings related to the
81
- * {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default options}
82
- */
83
- declare function getDefaultStylesConfiguration(isBlockPluginLoaded: boolean, isInlinePluginLoaded: boolean): ImageStyleConfig;
84
- /**
85
- * Returns a list of the available predefined drop-downs' definitions depending on the loaded image editing plugins.
86
- */
87
- declare function getDefaultDropdownDefinitions(pluginCollection: PluginCollection<Editor>): Array<ImageStyleDropdownDefinition>;
88
- /**
89
- * Displays a console warning with the 'image-style-configuration-definition-invalid' error.
90
- */
91
- declare function warnInvalidStyle(info: object): void;
92
- declare const _default: {
93
- normalizeStyles: typeof normalizeStyles;
94
- getDefaultStylesConfiguration: typeof getDefaultStylesConfiguration;
95
- getDefaultDropdownDefinitions: typeof getDefaultDropdownDefinitions;
96
- warnInvalidStyle: typeof warnInvalidStyle;
97
- DEFAULT_OPTIONS: Record<string, ImageStyleOptionDefinition>;
98
- DEFAULT_ICONS: Record<string, string>;
99
- DEFAULT_DROPDOWN_DEFINITIONS: ImageStyleDropdownDefinition[];
100
- };
101
- export default _default;
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 image/imagestyle/utils
7
+ */
8
+ import { type Editor, type PluginCollection } from 'ckeditor5/src/core';
9
+ import type { ImageStyleConfig, ImageStyleDropdownDefinition, ImageStyleOptionDefinition } from '../imageconfig';
10
+ /**
11
+ * Default image style options provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
12
+ * configuration.
13
+ *
14
+ * There are available 5 styles focused on formatting:
15
+ *
16
+ * * **`'alignLeft'`** aligns the inline or block image to the left and wraps it with the text using the `image-style-align-left` class,
17
+ * * **`'alignRight'`** aligns the inline or block image to the right and wraps it with the text using the `image-style-align-right` class,
18
+ * * **`'alignCenter'`** centers the block image using the `image-style-align-center` class,
19
+ * * **`'alignBlockLeft'`** aligns the block image to the left using the `image-style-block-align-left` class,
20
+ * * **`'alignBlockRight'`** aligns the block image to the right using the `image-style-block-align-right` class,
21
+ *
22
+ * and 3 semantic styles:
23
+ *
24
+ * * **`'inline'`** is an inline image without any CSS class,
25
+ * * **`'block'`** is a block image without any CSS class,
26
+ * * **`'side'`** is a block image styled with the `image-style-side` CSS class.
27
+ */
28
+ export declare const DEFAULT_OPTIONS: Record<string, ImageStyleOptionDefinition>;
29
+ /**
30
+ * Default image style icons provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
31
+ * configuration.
32
+ *
33
+ * See {@link module:image/imageconfig~ImageStyleOptionDefinition#icon} to learn more.
34
+ *
35
+ * There are 7 default icons available: `'full'`, `'left'`, `'inlineLeft'`, `'center'`, `'right'`, `'inlineRight'`, and `'inline'`.
36
+ */
37
+ export declare const DEFAULT_ICONS: Record<string, string>;
38
+ /**
39
+ * Default drop-downs provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#toolbar}
40
+ * configuration. The drop-downs are containers for the {@link module:image/imageconfig~ImageStyleConfig#options image style options}.
41
+ *
42
+ * If both of the `ImageEditing` plugins are loaded, there are 2 predefined drop-downs available:
43
+ *
44
+ * * **`'imageStyle:wrapText'`**, which contains the `alignLeft` and `alignRight` options, that is,
45
+ * those that wraps the text around the image,
46
+ * * **`'imageStyle:breakText'`**, which contains the `alignBlockLeft`, `alignCenter` and `alignBlockRight` options, that is,
47
+ * those that breaks the text around the image.
48
+ */
49
+ export declare const DEFAULT_DROPDOWN_DEFINITIONS: Array<ImageStyleDropdownDefinition>;
50
+ /**
51
+ * Returns a list of the normalized and validated image style options.
52
+ *
53
+ * @param config
54
+ * @param config.isInlinePluginLoaded
55
+ * Determines whether the {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin has been loaded.
56
+ * @param config.isBlockPluginLoaded
57
+ * Determines whether the {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin has been loaded.
58
+ * @param config.configuredStyles
59
+ * The image styles configuration provided in the image styles {@link module:image/imageconfig~ImageConfig#styles configuration}
60
+ * as a default or custom value.
61
+ * @returns
62
+ * * Each of options contains a complete icon markup.
63
+ * * The image style options not supported by any of the loaded plugins are filtered out.
64
+ */
65
+ declare function normalizeStyles(config: {
66
+ isInlinePluginLoaded: boolean;
67
+ isBlockPluginLoaded: boolean;
68
+ configuredStyles: ImageStyleConfig;
69
+ }): Array<ImageStyleOptionDefinition>;
70
+ /**
71
+ * Returns the default image styles configuration depending on the loaded image editing plugins.
72
+ *
73
+ * @param isInlinePluginLoaded
74
+ * Determines whether the {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin has been loaded.
75
+ *
76
+ * @param isBlockPluginLoaded
77
+ * Determines whether the {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin has been loaded.
78
+ *
79
+ * @returns
80
+ * It returns an object with the lists of the image style options and groups defined as strings related to the
81
+ * {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default options}
82
+ */
83
+ declare function getDefaultStylesConfiguration(isBlockPluginLoaded: boolean, isInlinePluginLoaded: boolean): ImageStyleConfig;
84
+ /**
85
+ * Returns a list of the available predefined drop-downs' definitions depending on the loaded image editing plugins.
86
+ */
87
+ declare function getDefaultDropdownDefinitions(pluginCollection: PluginCollection<Editor>): Array<ImageStyleDropdownDefinition>;
88
+ /**
89
+ * Displays a console warning with the 'image-style-configuration-definition-invalid' error.
90
+ */
91
+ declare function warnInvalidStyle(info: object): void;
92
+ declare const _default: {
93
+ normalizeStyles: typeof normalizeStyles;
94
+ getDefaultStylesConfiguration: typeof getDefaultStylesConfiguration;
95
+ getDefaultDropdownDefinitions: typeof getDefaultDropdownDefinitions;
96
+ warnInvalidStyle: typeof warnInvalidStyle;
97
+ DEFAULT_OPTIONS: Record<string, ImageStyleOptionDefinition>;
98
+ DEFAULT_ICONS: Record<string, string>;
99
+ DEFAULT_DROPDOWN_DEFINITIONS: ImageStyleDropdownDefinition[];
100
+ };
101
+ export default _default;