@ckeditor/ckeditor5-image 47.6.1 → 48.0.0-alpha.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 (289) hide show
  1. package/LICENSE.md +1 -1
  2. package/ckeditor5-metadata.json +25 -25
  3. package/{src → dist}/autoimage.d.ts +4 -4
  4. package/{src → dist}/image/converters.d.ts +1 -1
  5. package/{src → dist}/image/imageblockediting.d.ts +2 -2
  6. package/{src → dist}/image/imageediting.d.ts +1 -1
  7. package/{src → dist}/image/imageinlineediting.d.ts +2 -2
  8. package/{src → dist}/image/imageloadobserver.d.ts +1 -1
  9. package/{src → dist}/image/imageplaceholder.d.ts +1 -1
  10. package/{src → dist}/image/imagetypecommand.d.ts +2 -2
  11. package/{src → dist}/image/insertimagecommand.d.ts +2 -2
  12. package/{src → dist}/image/replaceimagesourcecommand.d.ts +2 -2
  13. package/{src → dist}/image/ui/utils.d.ts +2 -2
  14. package/{src → dist}/image/utils.d.ts +2 -2
  15. package/{src → dist}/image.d.ts +1 -1
  16. package/{src → dist}/imageblock.d.ts +2 -2
  17. package/{src → dist}/imagecaption/imagecaptionediting.d.ts +2 -2
  18. package/{src → dist}/imagecaption/imagecaptionui.d.ts +1 -1
  19. package/{src → dist}/imagecaption/imagecaptionutils.d.ts +2 -2
  20. package/{src → dist}/imagecaption/toggleimagecaptioncommand.d.ts +1 -1
  21. package/{src → dist}/imagecaption.d.ts +1 -1
  22. package/{src → dist}/imageconfig.d.ts +25 -16
  23. package/{src → dist}/imageinline.d.ts +2 -2
  24. package/{src → dist}/imageinsert/imageinsertui.d.ts +3 -3
  25. package/{src → dist}/imageinsert/imageinsertviaurlui.d.ts +2 -2
  26. package/{src → dist}/imageinsert/ui/imageinsertformview.d.ts +2 -2
  27. package/{src → dist}/imageinsert/ui/imageinserturlview.d.ts +2 -2
  28. package/{src → dist}/imageinsert.d.ts +1 -1
  29. package/{src → dist}/imageinsertviaurl.d.ts +1 -1
  30. package/{src → dist}/imageresize/imagecustomresizeui.d.ts +2 -2
  31. package/{src → dist}/imageresize/imageresizebuttons.d.ts +1 -1
  32. package/{src → dist}/imageresize/imageresizeediting.d.ts +1 -1
  33. package/{src → dist}/imageresize/imageresizehandles.d.ts +2 -2
  34. package/{src → dist}/imageresize/resizeimagecommand.d.ts +1 -1
  35. package/{src → dist}/imageresize/ui/imagecustomresizeformview.d.ts +2 -4
  36. package/{src → dist}/imageresize/utils/getselectedimageeditornodes.d.ts +2 -2
  37. package/{src → dist}/imageresize/utils/getselectedimagepossibleresizerange.d.ts +1 -1
  38. package/{src → dist}/imageresize/utils/getselectedimagewidthinunits.d.ts +1 -1
  39. package/{src → dist}/imageresize.d.ts +1 -1
  40. package/{src → dist}/imagesizeattributes.d.ts +1 -1
  41. package/{src → dist}/imagestyle/converters.d.ts +2 -2
  42. package/{src → dist}/imagestyle/imagestylecommand.d.ts +2 -2
  43. package/{src → dist}/imagestyle/imagestyleediting.d.ts +1 -1
  44. package/{src → dist}/imagestyle/imagestyleui.d.ts +1 -1
  45. package/{src → dist}/imagestyle/utils.d.ts +1 -1
  46. package/{src → dist}/imagestyle.d.ts +1 -1
  47. package/{src → dist}/imagetextalternative/imagetextalternativecommand.d.ts +1 -1
  48. package/{src → dist}/imagetextalternative/imagetextalternativeediting.d.ts +1 -1
  49. package/{src → dist}/imagetextalternative/imagetextalternativeui.d.ts +2 -2
  50. package/{src → dist}/imagetextalternative/ui/textalternativeformview.d.ts +2 -4
  51. package/{src → dist}/imagetextalternative.d.ts +1 -1
  52. package/{src → dist}/imagetoolbar.d.ts +2 -2
  53. package/{src → dist}/imageupload/imageuploadediting.d.ts +5 -5
  54. package/{src → dist}/imageupload/imageuploadprogress.d.ts +1 -1
  55. package/{src → dist}/imageupload/imageuploadui.d.ts +1 -1
  56. package/{src → dist}/imageupload/uploadimagecommand.d.ts +2 -2
  57. package/{src → dist}/imageupload/utils.d.ts +1 -1
  58. package/{src → dist}/imageupload.d.ts +1 -1
  59. package/{src → dist}/imageutils.d.ts +2 -2
  60. package/dist/index-content.css +97 -100
  61. package/dist/index-editor.css +313 -190
  62. package/dist/index.css +388 -458
  63. package/dist/index.css.map +1 -1
  64. package/dist/index.js +1 -2
  65. package/dist/index.js.map +1 -1
  66. package/{src → dist}/pictureediting.d.ts +1 -1
  67. package/package.json +29 -53
  68. package/build/image.js +0 -5
  69. package/build/translations/af.js +0 -1
  70. package/build/translations/ar.js +0 -1
  71. package/build/translations/ast.js +0 -1
  72. package/build/translations/az.js +0 -1
  73. package/build/translations/be.js +0 -1
  74. package/build/translations/bg.js +0 -1
  75. package/build/translations/bn.js +0 -1
  76. package/build/translations/bs.js +0 -1
  77. package/build/translations/ca.js +0 -1
  78. package/build/translations/cs.js +0 -1
  79. package/build/translations/da.js +0 -1
  80. package/build/translations/de-ch.js +0 -1
  81. package/build/translations/de.js +0 -1
  82. package/build/translations/el.js +0 -1
  83. package/build/translations/en-au.js +0 -1
  84. package/build/translations/en-gb.js +0 -1
  85. package/build/translations/eo.js +0 -1
  86. package/build/translations/es-co.js +0 -1
  87. package/build/translations/es.js +0 -1
  88. package/build/translations/et.js +0 -1
  89. package/build/translations/eu.js +0 -1
  90. package/build/translations/fa.js +0 -1
  91. package/build/translations/fi.js +0 -1
  92. package/build/translations/fr.js +0 -1
  93. package/build/translations/gl.js +0 -1
  94. package/build/translations/gu.js +0 -1
  95. package/build/translations/he.js +0 -1
  96. package/build/translations/hi.js +0 -1
  97. package/build/translations/hr.js +0 -1
  98. package/build/translations/hu.js +0 -1
  99. package/build/translations/hy.js +0 -1
  100. package/build/translations/id.js +0 -1
  101. package/build/translations/it.js +0 -1
  102. package/build/translations/ja.js +0 -1
  103. package/build/translations/jv.js +0 -1
  104. package/build/translations/kk.js +0 -1
  105. package/build/translations/km.js +0 -1
  106. package/build/translations/kn.js +0 -1
  107. package/build/translations/ko.js +0 -1
  108. package/build/translations/ku.js +0 -1
  109. package/build/translations/lt.js +0 -1
  110. package/build/translations/lv.js +0 -1
  111. package/build/translations/ms.js +0 -1
  112. package/build/translations/nb.js +0 -1
  113. package/build/translations/ne.js +0 -1
  114. package/build/translations/nl.js +0 -1
  115. package/build/translations/no.js +0 -1
  116. package/build/translations/oc.js +0 -1
  117. package/build/translations/pl.js +0 -1
  118. package/build/translations/pt-br.js +0 -1
  119. package/build/translations/pt.js +0 -1
  120. package/build/translations/ro.js +0 -1
  121. package/build/translations/ru.js +0 -1
  122. package/build/translations/si.js +0 -1
  123. package/build/translations/sk.js +0 -1
  124. package/build/translations/sl.js +0 -1
  125. package/build/translations/sq.js +0 -1
  126. package/build/translations/sr-latn.js +0 -1
  127. package/build/translations/sr.js +0 -1
  128. package/build/translations/sv.js +0 -1
  129. package/build/translations/th.js +0 -1
  130. package/build/translations/ti.js +0 -1
  131. package/build/translations/tk.js +0 -1
  132. package/build/translations/tr.js +0 -1
  133. package/build/translations/tt.js +0 -1
  134. package/build/translations/ug.js +0 -1
  135. package/build/translations/uk.js +0 -1
  136. package/build/translations/ur.js +0 -1
  137. package/build/translations/uz.js +0 -1
  138. package/build/translations/vi.js +0 -1
  139. package/build/translations/zh-cn.js +0 -1
  140. package/build/translations/zh.js +0 -1
  141. package/lang/contexts.json +0 -48
  142. package/lang/translations/af.po +0 -196
  143. package/lang/translations/ar.po +0 -196
  144. package/lang/translations/ast.po +0 -196
  145. package/lang/translations/az.po +0 -196
  146. package/lang/translations/be.po +0 -196
  147. package/lang/translations/bg.po +0 -196
  148. package/lang/translations/bn.po +0 -196
  149. package/lang/translations/bs.po +0 -196
  150. package/lang/translations/ca.po +0 -196
  151. package/lang/translations/cs.po +0 -196
  152. package/lang/translations/da.po +0 -196
  153. package/lang/translations/de-ch.po +0 -196
  154. package/lang/translations/de.po +0 -196
  155. package/lang/translations/el.po +0 -196
  156. package/lang/translations/en-au.po +0 -196
  157. package/lang/translations/en-gb.po +0 -196
  158. package/lang/translations/en.po +0 -196
  159. package/lang/translations/eo.po +0 -196
  160. package/lang/translations/es-co.po +0 -196
  161. package/lang/translations/es.po +0 -196
  162. package/lang/translations/et.po +0 -196
  163. package/lang/translations/eu.po +0 -196
  164. package/lang/translations/fa.po +0 -196
  165. package/lang/translations/fi.po +0 -196
  166. package/lang/translations/fr.po +0 -196
  167. package/lang/translations/gl.po +0 -196
  168. package/lang/translations/gu.po +0 -196
  169. package/lang/translations/he.po +0 -196
  170. package/lang/translations/hi.po +0 -196
  171. package/lang/translations/hr.po +0 -196
  172. package/lang/translations/hu.po +0 -196
  173. package/lang/translations/hy.po +0 -196
  174. package/lang/translations/id.po +0 -196
  175. package/lang/translations/it.po +0 -196
  176. package/lang/translations/ja.po +0 -196
  177. package/lang/translations/jv.po +0 -196
  178. package/lang/translations/kk.po +0 -196
  179. package/lang/translations/km.po +0 -196
  180. package/lang/translations/kn.po +0 -196
  181. package/lang/translations/ko.po +0 -196
  182. package/lang/translations/ku.po +0 -196
  183. package/lang/translations/lt.po +0 -196
  184. package/lang/translations/lv.po +0 -196
  185. package/lang/translations/ms.po +0 -196
  186. package/lang/translations/nb.po +0 -196
  187. package/lang/translations/ne.po +0 -196
  188. package/lang/translations/nl.po +0 -196
  189. package/lang/translations/no.po +0 -196
  190. package/lang/translations/oc.po +0 -196
  191. package/lang/translations/pl.po +0 -196
  192. package/lang/translations/pt-br.po +0 -196
  193. package/lang/translations/pt.po +0 -196
  194. package/lang/translations/ro.po +0 -196
  195. package/lang/translations/ru.po +0 -196
  196. package/lang/translations/si.po +0 -196
  197. package/lang/translations/sk.po +0 -196
  198. package/lang/translations/sl.po +0 -196
  199. package/lang/translations/sq.po +0 -196
  200. package/lang/translations/sr-latn.po +0 -196
  201. package/lang/translations/sr.po +0 -196
  202. package/lang/translations/sv.po +0 -196
  203. package/lang/translations/th.po +0 -196
  204. package/lang/translations/ti.po +0 -196
  205. package/lang/translations/tk.po +0 -196
  206. package/lang/translations/tr.po +0 -196
  207. package/lang/translations/tt.po +0 -196
  208. package/lang/translations/ug.po +0 -196
  209. package/lang/translations/uk.po +0 -196
  210. package/lang/translations/ur.po +0 -196
  211. package/lang/translations/uz.po +0 -196
  212. package/lang/translations/vi.po +0 -196
  213. package/lang/translations/zh-cn.po +0 -196
  214. package/lang/translations/zh.po +0 -196
  215. package/src/augmentation.js +0 -5
  216. package/src/autoimage.js +0 -148
  217. package/src/image/converters.js +0 -236
  218. package/src/image/imageblockediting.js +0 -159
  219. package/src/image/imageediting.js +0 -69
  220. package/src/image/imageinlineediting.js +0 -178
  221. package/src/image/imageloadobserver.js +0 -52
  222. package/src/image/imageplaceholder.js +0 -119
  223. package/src/image/imagetypecommand.js +0 -84
  224. package/src/image/insertimagecommand.js +0 -125
  225. package/src/image/replaceimagesourcecommand.js +0 -75
  226. package/src/image/ui/utils.js +0 -46
  227. package/src/image/utils.js +0 -125
  228. package/src/image.js +0 -44
  229. package/src/imageblock.js +0 -44
  230. package/src/imagecaption/imagecaptionediting.js +0 -238
  231. package/src/imagecaption/imagecaptionui.js +0 -68
  232. package/src/imagecaption/imagecaptionutils.js +0 -68
  233. package/src/imagecaption/toggleimagecaptioncommand.js +0 -138
  234. package/src/imagecaption.js +0 -36
  235. package/src/imageconfig.js +0 -5
  236. package/src/imageinline.js +0 -44
  237. package/src/imageinsert/imageinsertui.js +0 -216
  238. package/src/imageinsert/imageinsertviaurlui.js +0 -175
  239. package/src/imageinsert/ui/imageinsertformview.js +0 -117
  240. package/src/imageinsert/ui/imageinserturlview.js +0 -102
  241. package/src/imageinsert.js +0 -43
  242. package/src/imageinsertviaurl.js +0 -41
  243. package/src/imageresize/imagecustomresizeui.js +0 -177
  244. package/src/imageresize/imageresizebuttons.js +0 -303
  245. package/src/imageresize/imageresizeediting.js +0 -206
  246. package/src/imageresize/imageresizehandles.js +0 -118
  247. package/src/imageresize/resizeimagecommand.js +0 -63
  248. package/src/imageresize/ui/imagecustomresizeformview.js +0 -264
  249. package/src/imageresize/utils/getselectedimageeditornodes.js +0 -25
  250. package/src/imageresize/utils/getselectedimagepossibleresizerange.js +0 -33
  251. package/src/imageresize/utils/getselectedimagewidthinunits.js +0 -42
  252. package/src/imageresize/utils/tryparsedimensionwithunit.js +0 -58
  253. package/src/imageresize.js +0 -38
  254. package/src/imagesizeattributes.js +0 -163
  255. package/src/imagestyle/converters.js +0 -118
  256. package/src/imagestyle/imagestylecommand.js +0 -117
  257. package/src/imagestyle/imagestyleediting.js +0 -127
  258. package/src/imagestyle/imagestyleui.js +0 -198
  259. package/src/imagestyle/utils.js +0 -333
  260. package/src/imagestyle.js +0 -42
  261. package/src/imagetextalternative/imagetextalternativecommand.js +0 -44
  262. package/src/imagetextalternative/imagetextalternativeediting.js +0 -41
  263. package/src/imagetextalternative/imagetextalternativeui.js +0 -183
  264. package/src/imagetextalternative/ui/textalternativeformview.js +0 -193
  265. package/src/imagetextalternative.js +0 -39
  266. package/src/imagetoolbar.js +0 -63
  267. package/src/imageupload/imageuploadediting.js +0 -482
  268. package/src/imageupload/imageuploadprogress.js +0 -222
  269. package/src/imageupload/imageuploadui.js +0 -135
  270. package/src/imageupload/uploadimagecommand.js +0 -110
  271. package/src/imageupload/utils.js +0 -114
  272. package/src/imageupload.js +0 -42
  273. package/src/imageutils.js +0 -309
  274. package/src/index.js +0 -67
  275. package/src/pictureediting.js +0 -136
  276. package/theme/image.css +0 -143
  277. package/theme/imagecaption.css +0 -53
  278. package/theme/imagecustomresizeform.css +0 -4
  279. package/theme/imageinsert.css +0 -14
  280. package/theme/imageplaceholder.css +0 -10
  281. package/theme/imageresize.css +0 -53
  282. package/theme/imagestyle.css +0 -120
  283. package/theme/imageuploadicon.css +0 -23
  284. package/theme/imageuploadloader.css +0 -18
  285. package/theme/imageuploadprogress.css +0 -19
  286. package/theme/textalternativeform.css +0 -4
  287. /package/{src → dist}/augmentation.d.ts +0 -0
  288. /package/{src → dist}/imageresize/utils/tryparsedimensionwithunit.d.ts +0 -0
  289. /package/{src → dist}/index.d.ts +0 -0
@@ -1,198 +0,0 @@
1
- /**
2
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
5
- /**
6
- * @module image/imagestyle/imagestyleui
7
- */
8
- import { Plugin } from 'ckeditor5/src/core.js';
9
- import { ButtonView, createDropdown, addToolbarToDropdown, SplitButtonView } from 'ckeditor5/src/ui.js';
10
- import { isObject, identity } from 'es-toolkit/compat';
11
- import { ImageStyleEditing } from './imagestyleediting.js';
12
- import { utils } from './utils.js';
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 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
- * @inheritDoc
36
- */
37
- static get isOfficialPlugin() {
38
- return true;
39
- }
40
- /**
41
- * Returns the default localized style titles provided by the plugin.
42
- *
43
- * The following localized titles corresponding with
44
- * {@link module:image/imagestyle/utils#DEFAULT_OPTIONS} are available:
45
- *
46
- * * `'Wrap text'`,
47
- * * `'Break text'`,
48
- * * `'In line'`,
49
- * * `'Full size image'`,
50
- * * `'Side image'`,
51
- * * `'Left aligned image'`,
52
- * * `'Centered image'`,
53
- * * `'Right aligned image'`
54
- */
55
- get localizedDefaultStylesTitles() {
56
- const t = this.editor.t;
57
- return {
58
- 'Wrap text': t('Wrap text'),
59
- 'Break text': t('Break text'),
60
- 'In line': t('In line'),
61
- 'Full size image': t('Full size image'),
62
- 'Side image': t('Side image'),
63
- 'Left aligned image': t('Left aligned image'),
64
- 'Centered image': t('Centered image'),
65
- 'Right aligned image': t('Right aligned image')
66
- };
67
- }
68
- /**
69
- * @inheritDoc
70
- */
71
- init() {
72
- const plugins = this.editor.plugins;
73
- const toolbarConfig = this.editor.config.get('image.toolbar') || [];
74
- const imageStyleEditing = plugins.get('ImageStyleEditing');
75
- const definedStyles = translateStyles(imageStyleEditing.normalizedStyles, this.localizedDefaultStylesTitles);
76
- for (const styleConfig of definedStyles) {
77
- this._createButton(styleConfig);
78
- }
79
- const definedDropdowns = translateStyles([
80
- ...toolbarConfig.filter(isObject),
81
- ...utils.getDefaultDropdownDefinitions(plugins)
82
- ], this.localizedDefaultStylesTitles);
83
- for (const dropdownConfig of definedDropdowns) {
84
- this._createDropdown(dropdownConfig, definedStyles);
85
- }
86
- }
87
- /**
88
- * Creates a dropdown and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
89
- */
90
- _createDropdown(dropdownConfig, definedStyles) {
91
- const factory = this.editor.ui.componentFactory;
92
- factory.add(dropdownConfig.name, locale => {
93
- let defaultButton;
94
- const { defaultItem, items, title } = dropdownConfig;
95
- const buttonViews = items
96
- .filter(itemName => definedStyles.find(({ name }) => getUIComponentName(name) === itemName))
97
- .map(buttonName => {
98
- const button = factory.create(buttonName);
99
- if (buttonName === defaultItem) {
100
- defaultButton = button;
101
- }
102
- return button;
103
- });
104
- if (items.length !== buttonViews.length) {
105
- utils.warnInvalidStyle({ dropdown: dropdownConfig });
106
- }
107
- const dropdownView = createDropdown(locale, SplitButtonView);
108
- const splitButtonView = dropdownView.buttonView;
109
- const splitButtonViewArrow = splitButtonView.arrowView;
110
- addToolbarToDropdown(dropdownView, buttonViews, { enableActiveItemFocusOnDropdownOpen: true });
111
- splitButtonView.set({
112
- label: getDropdownButtonTitle(title, defaultButton.label),
113
- class: null,
114
- tooltip: true
115
- });
116
- splitButtonViewArrow.unbind('label');
117
- splitButtonViewArrow.set({
118
- label: title
119
- });
120
- splitButtonView.bind('icon').toMany(buttonViews, 'isOn', (...areOn) => {
121
- const index = areOn.findIndex(identity);
122
- return (index < 0) ? defaultButton.icon : buttonViews[index].icon;
123
- });
124
- splitButtonView.bind('label').toMany(buttonViews, 'isOn', (...areOn) => {
125
- const index = areOn.findIndex(identity);
126
- return getDropdownButtonTitle(title, (index < 0) ? defaultButton.label : buttonViews[index].label);
127
- });
128
- splitButtonView.bind('isOn').toMany(buttonViews, 'isOn', (...areOn) => areOn.some(identity));
129
- splitButtonView.bind('class')
130
- .toMany(buttonViews, 'isOn', (...areOn) => areOn.some(identity) ? 'ck-splitbutton_flatten' : undefined);
131
- splitButtonView.on('execute', () => {
132
- if (!buttonViews.some(({ isOn }) => isOn)) {
133
- defaultButton.fire('execute');
134
- }
135
- else {
136
- dropdownView.isOpen = !dropdownView.isOpen;
137
- }
138
- });
139
- dropdownView.bind('isEnabled')
140
- .toMany(buttonViews, 'isEnabled', (...areEnabled) => areEnabled.some(identity));
141
- // Focus the editable after executing the command.
142
- // Overrides a default behaviour where the focus is moved to the dropdown button (#12125).
143
- this.listenTo(dropdownView, 'execute', () => {
144
- this.editor.editing.view.focus();
145
- });
146
- return dropdownView;
147
- });
148
- }
149
- /**
150
- * Creates a button and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
151
- */
152
- _createButton(buttonConfig) {
153
- const buttonName = buttonConfig.name;
154
- this.editor.ui.componentFactory.add(getUIComponentName(buttonName), locale => {
155
- const command = this.editor.commands.get('imageStyle');
156
- const view = new ButtonView(locale);
157
- view.set({
158
- label: buttonConfig.title,
159
- icon: buttonConfig.icon,
160
- tooltip: true,
161
- isToggleable: true
162
- });
163
- view.bind('isEnabled').to(command, 'isEnabled');
164
- view.bind('isOn').to(command, 'value', value => value === buttonName);
165
- view.on('execute', this._executeCommand.bind(this, buttonName));
166
- return view;
167
- });
168
- }
169
- _executeCommand(name) {
170
- this.editor.execute('imageStyle', { value: name });
171
- this.editor.editing.view.focus();
172
- }
173
- }
174
- /**
175
- * Returns the translated `title` from the passed styles array.
176
- */
177
- function translateStyles(styles, titles) {
178
- for (const style of styles) {
179
- // Localize the titles of the styles, if a title corresponds with
180
- // a localized default provided by the plugin.
181
- if (titles[style.title]) {
182
- style.title = titles[style.title];
183
- }
184
- }
185
- return styles;
186
- }
187
- /**
188
- * Returns the image style component name with the "imageStyle:" prefix.
189
- */
190
- function getUIComponentName(name) {
191
- return `imageStyle:${name}`;
192
- }
193
- /**
194
- * Returns title for the splitbutton containing the dropdown title and default action item title.
195
- */
196
- function getDropdownButtonTitle(dropdownTitle, buttonTitle) {
197
- return (dropdownTitle ? dropdownTitle + ': ' : '') + buttonTitle;
198
- }
@@ -1,333 +0,0 @@
1
- /**
2
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
5
- /**
6
- * @module image/imagestyle/utils
7
- */
8
- import { logWarning } from 'ckeditor5/src/utils.js';
9
- import { IconObjectCenter, IconObjectFullWidth, IconObjectInline, IconObjectInlineLeft, IconObjectInlineRight, IconObjectLeft, IconObjectRight } from 'ckeditor5/src/icons.js';
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
- * @internal
29
- */
30
- export const DEFAULT_OPTIONS = {
31
- // This style represents an image placed in the line of text.
32
- get inline() {
33
- return {
34
- name: 'inline',
35
- title: 'In line',
36
- icon: IconObjectInline,
37
- modelElements: ['imageInline'],
38
- isDefault: true
39
- };
40
- },
41
- // This style represents an image aligned to the left and wrapped with text.
42
- get alignLeft() {
43
- return {
44
- name: 'alignLeft',
45
- title: 'Left aligned image',
46
- icon: IconObjectInlineLeft,
47
- modelElements: ['imageBlock', 'imageInline'],
48
- className: 'image-style-align-left'
49
- };
50
- },
51
- // This style represents an image aligned to the left.
52
- get alignBlockLeft() {
53
- return {
54
- name: 'alignBlockLeft',
55
- title: 'Left aligned image',
56
- icon: IconObjectLeft,
57
- modelElements: ['imageBlock'],
58
- className: 'image-style-block-align-left'
59
- };
60
- },
61
- // This style represents a centered image.
62
- get alignCenter() {
63
- return {
64
- name: 'alignCenter',
65
- title: 'Centered image',
66
- icon: IconObjectCenter,
67
- modelElements: ['imageBlock'],
68
- className: 'image-style-align-center'
69
- };
70
- },
71
- // This style represents an image aligned to the right and wrapped with text.
72
- get alignRight() {
73
- return {
74
- name: 'alignRight',
75
- title: 'Right aligned image',
76
- icon: IconObjectInlineRight,
77
- modelElements: ['imageBlock', 'imageInline'],
78
- className: 'image-style-align-right'
79
- };
80
- },
81
- // This style represents an image aligned to the right.
82
- get alignBlockRight() {
83
- return {
84
- name: 'alignBlockRight',
85
- title: 'Right aligned image',
86
- icon: IconObjectRight,
87
- modelElements: ['imageBlock'],
88
- className: 'image-style-block-align-right'
89
- };
90
- },
91
- // This option is equal to the situation when no style is applied.
92
- get block() {
93
- return {
94
- name: 'block',
95
- title: 'Centered image',
96
- icon: IconObjectCenter,
97
- modelElements: ['imageBlock'],
98
- isDefault: true
99
- };
100
- },
101
- // This represents a side image.
102
- get side() {
103
- return {
104
- name: 'side',
105
- title: 'Side image',
106
- icon: IconObjectInlineRight,
107
- modelElements: ['imageBlock'],
108
- className: 'image-style-side'
109
- };
110
- }
111
- };
112
- /**
113
- * Default image style icons provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
114
- * configuration.
115
- *
116
- * See {@link module:image/imageconfig~ImageStyleOptionDefinition#icon} to learn more.
117
- *
118
- * There are 7 default icons available: `'full'`, `'left'`, `'inlineLeft'`, `'center'`, `'right'`, `'inlineRight'`, and `'inline'`.
119
- *
120
- * @internal
121
- */
122
- export const DEFAULT_ICONS = /* #__PURE__ */ (() => ({
123
- full: IconObjectFullWidth,
124
- left: IconObjectLeft,
125
- right: IconObjectRight,
126
- center: IconObjectCenter,
127
- inlineLeft: IconObjectInlineLeft,
128
- inlineRight: IconObjectInlineRight,
129
- inline: IconObjectInline
130
- }))();
131
- /**
132
- * Default drop-downs provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#toolbar}
133
- * configuration. The drop-downs are containers for the {@link module:image/imageconfig~ImageStyleConfig#options image style options}.
134
- *
135
- * If both of the `ImageEditing` plugins are loaded, there are 2 predefined drop-downs available:
136
- *
137
- * * **`'imageStyle:wrapText'`**, which contains the `alignLeft` and `alignRight` options, that is,
138
- * those that wraps the text around the image,
139
- * * **`'imageStyle:breakText'`**, which contains the `alignBlockLeft`, `alignCenter` and `alignBlockRight` options, that is,
140
- * those that breaks the text around the image.
141
- *
142
- * @internal
143
- */
144
- export const DEFAULT_DROPDOWN_DEFINITIONS = [{
145
- name: 'imageStyle:wrapText',
146
- title: 'Wrap text',
147
- defaultItem: 'imageStyle:alignLeft',
148
- items: ['imageStyle:alignLeft', 'imageStyle:alignRight']
149
- }, {
150
- name: 'imageStyle:breakText',
151
- title: 'Break text',
152
- defaultItem: 'imageStyle:block',
153
- items: ['imageStyle:alignBlockLeft', 'imageStyle:block', 'imageStyle:alignBlockRight']
154
- }];
155
- /**
156
- * Returns a list of the normalized and validated image style options.
157
- *
158
- * @param config
159
- * @param config.isInlinePluginLoaded
160
- * Determines whether the {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin has been loaded.
161
- * @param config.isBlockPluginLoaded
162
- * Determines whether the {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin has been loaded.
163
- * @param config.configuredStyles
164
- * The image styles configuration provided in the image styles {@link module:image/imageconfig~ImageConfig#styles configuration}
165
- * as a default or custom value.
166
- * @returns
167
- * * Each of options contains a complete icon markup.
168
- * * The image style options not supported by any of the loaded plugins are filtered out.
169
- */
170
- function normalizeStyles(config) {
171
- const configuredStyles = config.configuredStyles.options || [];
172
- const styles = configuredStyles
173
- .map(arrangement => normalizeDefinition(arrangement))
174
- .filter(arrangement => isValidOption(arrangement, config));
175
- return styles;
176
- }
177
- /**
178
- * Returns the default image styles configuration depending on the loaded image editing plugins.
179
- *
180
- * @param isInlinePluginLoaded
181
- * Determines whether the {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugin has been loaded.
182
- *
183
- * @param isBlockPluginLoaded
184
- * Determines whether the {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} plugin has been loaded.
185
- *
186
- * @returns
187
- * It returns an object with the lists of the image style options and groups defined as strings related to the
188
- * {@link module:image/imagestyle/utils#DEFAULT_OPTIONS default options}
189
- */
190
- function getDefaultStylesConfiguration(isBlockPluginLoaded, isInlinePluginLoaded) {
191
- if (isBlockPluginLoaded && isInlinePluginLoaded) {
192
- return {
193
- options: [
194
- 'inline', 'alignLeft', 'alignRight',
195
- 'alignCenter', 'alignBlockLeft', 'alignBlockRight',
196
- 'block', 'side'
197
- ]
198
- };
199
- }
200
- else if (isBlockPluginLoaded) {
201
- return {
202
- options: ['block', 'side']
203
- };
204
- }
205
- else if (isInlinePluginLoaded) {
206
- return {
207
- options: ['inline', 'alignLeft', 'alignRight']
208
- };
209
- }
210
- return {};
211
- }
212
- /**
213
- * Returns a list of the available predefined drop-downs' definitions depending on the loaded image editing plugins.
214
- */
215
- function getDefaultDropdownDefinitions(pluginCollection) {
216
- if (pluginCollection.has('ImageBlockEditing') && pluginCollection.has('ImageInlineEditing')) {
217
- return [...DEFAULT_DROPDOWN_DEFINITIONS];
218
- }
219
- else {
220
- return [];
221
- }
222
- }
223
- /**
224
- * Normalizes an image style option or group provided in the {@link module:image/imageconfig~ImageConfig#styles}
225
- * and returns it in a {@link module:image/imageconfig~ImageStyleOptionDefinition}/
226
- */
227
- function normalizeDefinition(definition) {
228
- if (typeof definition === 'string') {
229
- // Just the name of the style has been passed, but none of the defaults.
230
- if (!DEFAULT_OPTIONS[definition]) {
231
- // Normalize the style anyway to prevent errors.
232
- definition = { name: definition };
233
- }
234
- // Just the name of the style has been passed and it's one of the defaults, just use it.
235
- // Clone the style to avoid overriding defaults.
236
- else {
237
- definition = { ...DEFAULT_OPTIONS[definition] };
238
- }
239
- }
240
- else {
241
- // If an object style has been passed and if the name matches one of the defaults,
242
- // extend it with defaults – the user wants to customize a default style.
243
- // Note: Don't override the user–defined style object, clone it instead.
244
- definition = extendStyle(DEFAULT_OPTIONS[definition.name], definition);
245
- }
246
- // If an icon is defined as a string and correspond with a name
247
- // in default icons, use the default icon provided by the plugin.
248
- if (typeof definition.icon === 'string') {
249
- definition.icon = DEFAULT_ICONS[definition.icon] || definition.icon;
250
- }
251
- return definition;
252
- }
253
- /**
254
- * Checks if the image style option is valid:
255
- * * if it has the modelElements fields defined and filled,
256
- * * if the defined modelElements are supported by any of the loaded image editing plugins.
257
- * It also displays a console warning these conditions are not met.
258
- *
259
- * @param option image style option
260
- */
261
- function isValidOption(option, { isBlockPluginLoaded, isInlinePluginLoaded }) {
262
- const { modelElements, name } = option;
263
- if (!modelElements || !modelElements.length || !name) {
264
- warnInvalidStyle({ style: option });
265
- return false;
266
- }
267
- else {
268
- const supportedElements = [isBlockPluginLoaded ? 'imageBlock' : null, isInlinePluginLoaded ? 'imageInline' : null];
269
- // Check if the option is supported by any of the loaded plugins.
270
- if (!modelElements.some(elementName => supportedElements.includes(elementName))) {
271
- /**
272
- * In order to work correctly, each image style {@link module:image/imageconfig~ImageStyleOptionDefinition option}
273
- * requires specific model elements (also: types of images) to be supported by the editor.
274
- *
275
- * Model element names to which the image style option can be applied are defined in the
276
- * {@link module:image/imageconfig~ImageStyleOptionDefinition#modelElements} property of the style option
277
- * definition.
278
- *
279
- * Explore the warning in the console to find out precisely which option is not supported and which editor plugins
280
- * are missing. Make sure these plugins are loaded in your editor to get this image style option working.
281
- *
282
- * @error image-style-missing-dependency
283
- * @param {string} style The name of the unsupported option.
284
- * @param {Array.<string>} missingPlugins The names of the plugins one of which has to be loaded for the particular option.
285
- */
286
- logWarning('image-style-missing-dependency', {
287
- style: option,
288
- missingPlugins: modelElements.map(name => name === 'imageBlock' ? 'ImageBlockEditing' : 'ImageInlineEditing')
289
- });
290
- return false;
291
- }
292
- }
293
- return true;
294
- }
295
- /**
296
- * Extends the default style with a style provided by the developer.
297
- * Note: Don't override the custom–defined style object, clone it instead.
298
- */
299
- function extendStyle(source, style) {
300
- const extendedStyle = { ...style };
301
- for (const prop in source) {
302
- if (!Object.prototype.hasOwnProperty.call(style, prop)) {
303
- extendedStyle[prop] = source[prop];
304
- }
305
- }
306
- return extendedStyle;
307
- }
308
- /**
309
- * Displays a console warning with the 'image-style-configuration-definition-invalid' error.
310
- */
311
- function warnInvalidStyle(info) {
312
- /**
313
- * The image style definition provided in the configuration is invalid.
314
- *
315
- * Please make sure the definition implements properly one of the following:
316
- *
317
- * * {@link module:image/imageconfig~ImageStyleOptionDefinition image style option definition},
318
- * * {@link module:image/imageconfig~ImageStyleDropdownDefinition image style dropdown definition}
319
- *
320
- * @error image-style-configuration-definition-invalid
321
- * @param {object} info The information about the invalid definition.
322
- */
323
- logWarning('image-style-configuration-definition-invalid', info);
324
- }
325
- /**
326
- * @internal
327
- */
328
- export const utils = {
329
- normalizeStyles,
330
- getDefaultStylesConfiguration,
331
- getDefaultDropdownDefinitions,
332
- warnInvalidStyle
333
- };
package/src/imagestyle.js DELETED
@@ -1,42 +0,0 @@
1
- /**
2
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
5
- /**
6
- * @module image/imagestyle
7
- */
8
- import { Plugin } from 'ckeditor5/src/core.js';
9
- import { ImageStyleEditing } from './imagestyle/imagestyleediting.js';
10
- import { ImageStyleUI } from './imagestyle/imagestyleui.js';
11
- /**
12
- * The image style plugin.
13
- *
14
- * For a detailed overview of the image styles feature, check the {@glink features/images/images-styles documentation}.
15
- *
16
- * This is a "glue" plugin which loads the following plugins:
17
- * * {@link module:image/imagestyle/imagestyleediting~ImageStyleEditing},
18
- * * {@link module:image/imagestyle/imagestyleui~ImageStyleUI}
19
- *
20
- * It provides a default configuration, which can be extended or overwritten.
21
- * Read more about the {@link module:image/imageconfig~ImageConfig#styles image styles configuration}.
22
- */
23
- export class ImageStyle extends Plugin {
24
- /**
25
- * @inheritDoc
26
- */
27
- static get requires() {
28
- return [ImageStyleEditing, ImageStyleUI];
29
- }
30
- /**
31
- * @inheritDoc
32
- */
33
- static get pluginName() {
34
- return 'ImageStyle';
35
- }
36
- /**
37
- * @inheritDoc
38
- */
39
- static get isOfficialPlugin() {
40
- return true;
41
- }
42
- }
@@ -1,44 +0,0 @@
1
- /**
2
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
5
- /**
6
- * @module image/imagetextalternative/imagetextalternativecommand
7
- */
8
- import { Command } from 'ckeditor5/src/core.js';
9
- /**
10
- * The image text alternative command. It is used to change the `alt` attribute of `<imageBlock>` and `<imageInline>` model elements.
11
- */
12
- export class ImageTextAlternativeCommand extends Command {
13
- /**
14
- * @inheritDoc
15
- */
16
- refresh() {
17
- const editor = this.editor;
18
- const imageUtils = editor.plugins.get('ImageUtils');
19
- const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
20
- this.isEnabled = !!element;
21
- if (this.isEnabled && element.hasAttribute('alt')) {
22
- this.value = element.getAttribute('alt');
23
- }
24
- else {
25
- this.value = false;
26
- }
27
- }
28
- /**
29
- * Executes the command.
30
- *
31
- * @fires execute
32
- * @param options
33
- * @param options.newValue The new value of the `alt` attribute to set.
34
- */
35
- execute(options) {
36
- const editor = this.editor;
37
- const imageUtils = editor.plugins.get('ImageUtils');
38
- const model = editor.model;
39
- const imageElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
40
- model.change(writer => {
41
- writer.setAttribute('alt', options.newValue, imageElement);
42
- });
43
- }
44
- }
@@ -1,41 +0,0 @@
1
- /**
2
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
5
- /**
6
- * @module image/imagetextalternative/imagetextalternativeediting
7
- */
8
- import { Plugin } from 'ckeditor5/src/core.js';
9
- import { ImageTextAlternativeCommand } from './imagetextalternativecommand.js';
10
- import { ImageUtils } from '../imageutils.js';
11
- /**
12
- * The image text alternative editing plugin.
13
- *
14
- * Registers the `'imageTextAlternative'` command.
15
- */
16
- export class ImageTextAlternativeEditing extends Plugin {
17
- /**
18
- * @inheritDoc
19
- */
20
- static get requires() {
21
- return [ImageUtils];
22
- }
23
- /**
24
- * @inheritDoc
25
- */
26
- static get pluginName() {
27
- return 'ImageTextAlternativeEditing';
28
- }
29
- /**
30
- * @inheritDoc
31
- */
32
- static get isOfficialPlugin() {
33
- return true;
34
- }
35
- /**
36
- * @inheritDoc
37
- */
38
- init() {
39
- this.editor.commands.add('imageTextAlternative', new ImageTextAlternativeCommand(this.editor));
40
- }
41
- }