@ckeditor/ckeditor5-image 41.4.2 → 42.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 (294) hide show
  1. package/README.md +6 -0
  2. package/build/image.js +2 -2
  3. package/build/translations/ar.js +1 -1
  4. package/build/translations/ast.js +1 -1
  5. package/build/translations/az.js +1 -1
  6. package/build/translations/bg.js +1 -1
  7. package/build/translations/bn.js +1 -1
  8. package/build/translations/bs.js +1 -1
  9. package/build/translations/ca.js +1 -1
  10. package/build/translations/cs.js +1 -1
  11. package/build/translations/da.js +1 -1
  12. package/build/translations/de-ch.js +1 -1
  13. package/build/translations/de.js +1 -1
  14. package/build/translations/el.js +1 -1
  15. package/build/translations/en-au.js +1 -1
  16. package/build/translations/en-gb.js +1 -1
  17. package/build/translations/eo.js +1 -1
  18. package/build/translations/es.js +1 -1
  19. package/build/translations/et.js +1 -1
  20. package/build/translations/eu.js +1 -1
  21. package/build/translations/fa.js +1 -1
  22. package/build/translations/fi.js +1 -1
  23. package/build/translations/fr.js +1 -1
  24. package/build/translations/gl.js +1 -1
  25. package/build/translations/he.js +1 -1
  26. package/build/translations/hi.js +1 -1
  27. package/build/translations/hr.js +1 -1
  28. package/build/translations/hu.js +1 -1
  29. package/build/translations/id.js +1 -1
  30. package/build/translations/it.js +1 -1
  31. package/build/translations/ja.js +1 -1
  32. package/build/translations/jv.js +1 -1
  33. package/build/translations/km.js +1 -1
  34. package/build/translations/kn.js +1 -1
  35. package/build/translations/ko.js +1 -1
  36. package/build/translations/ku.js +1 -1
  37. package/build/translations/lt.js +1 -1
  38. package/build/translations/lv.js +1 -1
  39. package/build/translations/ms.js +1 -1
  40. package/build/translations/nb.js +1 -1
  41. package/build/translations/ne.js +1 -1
  42. package/build/translations/nl.js +1 -1
  43. package/build/translations/no.js +1 -1
  44. package/build/translations/pl.js +1 -1
  45. package/build/translations/pt-br.js +1 -1
  46. package/build/translations/pt.js +1 -1
  47. package/build/translations/ro.js +1 -1
  48. package/build/translations/ru.js +1 -1
  49. package/build/translations/si.js +1 -1
  50. package/build/translations/sk.js +1 -1
  51. package/build/translations/sq.js +1 -1
  52. package/build/translations/sr-latn.js +1 -1
  53. package/build/translations/sr.js +1 -1
  54. package/build/translations/sv.js +1 -1
  55. package/build/translations/th.js +1 -1
  56. package/build/translations/ti.js +1 -1
  57. package/build/translations/tk.js +1 -1
  58. package/build/translations/tr.js +1 -1
  59. package/build/translations/ug.js +1 -1
  60. package/build/translations/uk.js +1 -1
  61. package/build/translations/ur.js +1 -1
  62. package/build/translations/uz.js +1 -1
  63. package/build/translations/vi.js +1 -1
  64. package/build/translations/zh-cn.js +1 -1
  65. package/build/translations/zh.js +1 -1
  66. package/ckeditor5-metadata.json +19 -5
  67. package/dist/index-content.css +20 -12
  68. package/dist/index-editor.css +4 -0
  69. package/dist/index.css +50 -33
  70. package/dist/index.css.map +1 -1
  71. package/dist/index.js +1876 -1330
  72. package/dist/index.js.map +1 -1
  73. package/dist/translations/ar.js +1 -1
  74. package/dist/translations/ar.umd.js +1 -1
  75. package/dist/translations/ast.js +1 -1
  76. package/dist/translations/ast.umd.js +1 -1
  77. package/dist/translations/az.js +1 -1
  78. package/dist/translations/az.umd.js +1 -1
  79. package/dist/translations/bg.js +1 -1
  80. package/dist/translations/bg.umd.js +1 -1
  81. package/dist/translations/bn.js +1 -1
  82. package/dist/translations/bn.umd.js +1 -1
  83. package/dist/translations/bs.js +1 -1
  84. package/dist/translations/bs.umd.js +1 -1
  85. package/dist/translations/ca.js +1 -1
  86. package/dist/translations/ca.umd.js +1 -1
  87. package/dist/translations/cs.js +1 -1
  88. package/dist/translations/cs.umd.js +1 -1
  89. package/dist/translations/da.js +1 -1
  90. package/dist/translations/da.umd.js +1 -1
  91. package/dist/translations/de-ch.js +1 -1
  92. package/dist/translations/de-ch.umd.js +1 -1
  93. package/dist/translations/de.js +1 -1
  94. package/dist/translations/de.umd.js +1 -1
  95. package/dist/translations/el.js +1 -1
  96. package/dist/translations/el.umd.js +1 -1
  97. package/dist/translations/en-au.js +1 -1
  98. package/dist/translations/en-au.umd.js +1 -1
  99. package/dist/translations/en-gb.js +1 -1
  100. package/dist/translations/en-gb.umd.js +1 -1
  101. package/dist/translations/en.js +1 -1
  102. package/dist/translations/en.umd.js +1 -1
  103. package/dist/translations/eo.js +1 -1
  104. package/dist/translations/eo.umd.js +1 -1
  105. package/dist/translations/es.js +1 -1
  106. package/dist/translations/es.umd.js +1 -1
  107. package/dist/translations/et.js +1 -1
  108. package/dist/translations/et.umd.js +1 -1
  109. package/dist/translations/eu.js +1 -1
  110. package/dist/translations/eu.umd.js +1 -1
  111. package/dist/translations/fa.js +1 -1
  112. package/dist/translations/fa.umd.js +1 -1
  113. package/dist/translations/fi.js +1 -1
  114. package/dist/translations/fi.umd.js +1 -1
  115. package/dist/translations/fr.js +1 -1
  116. package/dist/translations/fr.umd.js +1 -1
  117. package/dist/translations/gl.js +1 -1
  118. package/dist/translations/gl.umd.js +1 -1
  119. package/dist/translations/he.js +1 -1
  120. package/dist/translations/he.umd.js +1 -1
  121. package/dist/translations/hi.js +1 -1
  122. package/dist/translations/hi.umd.js +1 -1
  123. package/dist/translations/hr.js +1 -1
  124. package/dist/translations/hr.umd.js +1 -1
  125. package/dist/translations/hu.js +1 -1
  126. package/dist/translations/hu.umd.js +1 -1
  127. package/dist/translations/id.js +1 -1
  128. package/dist/translations/id.umd.js +1 -1
  129. package/dist/translations/it.js +1 -1
  130. package/dist/translations/it.umd.js +1 -1
  131. package/dist/translations/ja.js +1 -1
  132. package/dist/translations/ja.umd.js +1 -1
  133. package/dist/translations/jv.js +1 -1
  134. package/dist/translations/jv.umd.js +1 -1
  135. package/dist/translations/km.js +1 -1
  136. package/dist/translations/km.umd.js +1 -1
  137. package/dist/translations/kn.js +1 -1
  138. package/dist/translations/kn.umd.js +1 -1
  139. package/dist/translations/ko.js +1 -1
  140. package/dist/translations/ko.umd.js +1 -1
  141. package/dist/translations/ku.js +1 -1
  142. package/dist/translations/ku.umd.js +1 -1
  143. package/dist/translations/lt.js +1 -1
  144. package/dist/translations/lt.umd.js +1 -1
  145. package/dist/translations/lv.js +1 -1
  146. package/dist/translations/lv.umd.js +1 -1
  147. package/dist/translations/ms.js +1 -1
  148. package/dist/translations/ms.umd.js +1 -1
  149. package/dist/translations/nb.js +1 -1
  150. package/dist/translations/nb.umd.js +1 -1
  151. package/dist/translations/ne.js +1 -1
  152. package/dist/translations/ne.umd.js +1 -1
  153. package/dist/translations/nl.js +1 -1
  154. package/dist/translations/nl.umd.js +1 -1
  155. package/dist/translations/no.js +1 -1
  156. package/dist/translations/no.umd.js +1 -1
  157. package/dist/translations/pl.js +1 -1
  158. package/dist/translations/pl.umd.js +1 -1
  159. package/dist/translations/pt-br.js +1 -1
  160. package/dist/translations/pt-br.umd.js +1 -1
  161. package/dist/translations/pt.js +1 -1
  162. package/dist/translations/pt.umd.js +1 -1
  163. package/dist/translations/ro.js +1 -1
  164. package/dist/translations/ro.umd.js +1 -1
  165. package/dist/translations/ru.js +1 -1
  166. package/dist/translations/ru.umd.js +1 -1
  167. package/dist/translations/si.js +1 -1
  168. package/dist/translations/si.umd.js +1 -1
  169. package/dist/translations/sk.js +1 -1
  170. package/dist/translations/sk.umd.js +1 -1
  171. package/dist/translations/sq.js +1 -1
  172. package/dist/translations/sq.umd.js +1 -1
  173. package/dist/translations/sr-latn.js +1 -1
  174. package/dist/translations/sr-latn.umd.js +1 -1
  175. package/dist/translations/sr.js +1 -1
  176. package/dist/translations/sr.umd.js +1 -1
  177. package/dist/translations/sv.js +1 -1
  178. package/dist/translations/sv.umd.js +1 -1
  179. package/dist/translations/th.js +1 -1
  180. package/dist/translations/th.umd.js +1 -1
  181. package/dist/translations/ti.js +1 -1
  182. package/dist/translations/ti.umd.js +1 -1
  183. package/dist/translations/tk.js +1 -1
  184. package/dist/translations/tk.umd.js +1 -1
  185. package/dist/translations/tr.js +1 -1
  186. package/dist/translations/tr.umd.js +1 -1
  187. package/dist/translations/ug.js +1 -1
  188. package/dist/translations/ug.umd.js +1 -1
  189. package/dist/translations/uk.js +1 -1
  190. package/dist/translations/uk.umd.js +1 -1
  191. package/dist/translations/ur.js +1 -1
  192. package/dist/translations/ur.umd.js +1 -1
  193. package/dist/translations/uz.js +1 -1
  194. package/dist/translations/uz.umd.js +1 -1
  195. package/dist/translations/vi.js +1 -1
  196. package/dist/translations/vi.umd.js +1 -1
  197. package/dist/translations/zh-cn.js +1 -1
  198. package/dist/translations/zh-cn.umd.js +1 -1
  199. package/dist/translations/zh.js +1 -1
  200. package/dist/translations/zh.umd.js +1 -1
  201. package/dist/types/imageinsert/imageinsertui.d.ts +10 -2
  202. package/dist/types/imageinsert/imageinsertviaurlui.d.ts +31 -9
  203. package/dist/types/imageinsert/ui/imageinserturlview.d.ts +6 -49
  204. package/dist/types/imageupload/imageuploadui.d.ts +18 -1
  205. package/lang/contexts.json +7 -4
  206. package/lang/translations/ar.po +21 -9
  207. package/lang/translations/ast.po +19 -7
  208. package/lang/translations/az.po +19 -7
  209. package/lang/translations/bg.po +21 -9
  210. package/lang/translations/bn.po +21 -9
  211. package/lang/translations/bs.po +21 -9
  212. package/lang/translations/ca.po +21 -9
  213. package/lang/translations/cs.po +21 -9
  214. package/lang/translations/da.po +21 -9
  215. package/lang/translations/de-ch.po +21 -9
  216. package/lang/translations/de.po +21 -9
  217. package/lang/translations/el.po +21 -9
  218. package/lang/translations/en-au.po +21 -9
  219. package/lang/translations/en-gb.po +19 -7
  220. package/lang/translations/en.po +21 -9
  221. package/lang/translations/eo.po +19 -7
  222. package/lang/translations/es.po +21 -9
  223. package/lang/translations/et.po +21 -9
  224. package/lang/translations/eu.po +19 -7
  225. package/lang/translations/fa.po +19 -7
  226. package/lang/translations/fi.po +21 -9
  227. package/lang/translations/fr.po +21 -9
  228. package/lang/translations/gl.po +21 -9
  229. package/lang/translations/he.po +21 -9
  230. package/lang/translations/hi.po +21 -9
  231. package/lang/translations/hr.po +21 -9
  232. package/lang/translations/hu.po +21 -9
  233. package/lang/translations/id.po +21 -9
  234. package/lang/translations/it.po +21 -9
  235. package/lang/translations/ja.po +21 -9
  236. package/lang/translations/jv.po +21 -9
  237. package/lang/translations/km.po +19 -7
  238. package/lang/translations/kn.po +19 -7
  239. package/lang/translations/ko.po +21 -9
  240. package/lang/translations/ku.po +19 -7
  241. package/lang/translations/lt.po +21 -9
  242. package/lang/translations/lv.po +21 -9
  243. package/lang/translations/ms.po +21 -9
  244. package/lang/translations/nb.po +19 -7
  245. package/lang/translations/ne.po +19 -7
  246. package/lang/translations/nl.po +21 -9
  247. package/lang/translations/no.po +21 -9
  248. package/lang/translations/pl.po +21 -9
  249. package/lang/translations/pt-br.po +21 -9
  250. package/lang/translations/pt.po +21 -9
  251. package/lang/translations/ro.po +21 -9
  252. package/lang/translations/ru.po +21 -9
  253. package/lang/translations/si.po +19 -7
  254. package/lang/translations/sk.po +21 -9
  255. package/lang/translations/sq.po +19 -7
  256. package/lang/translations/sr-latn.po +21 -9
  257. package/lang/translations/sr.po +21 -9
  258. package/lang/translations/sv.po +21 -9
  259. package/lang/translations/th.po +21 -9
  260. package/lang/translations/ti.po +20 -8
  261. package/lang/translations/tk.po +19 -7
  262. package/lang/translations/tr.po +21 -9
  263. package/lang/translations/ug.po +20 -8
  264. package/lang/translations/uk.po +21 -9
  265. package/lang/translations/ur.po +19 -7
  266. package/lang/translations/uz.po +21 -9
  267. package/lang/translations/vi.po +21 -9
  268. package/lang/translations/zh-cn.po +21 -9
  269. package/lang/translations/zh.po +21 -9
  270. package/package.json +3 -3
  271. package/src/image/imageinlineediting.js +4 -9
  272. package/src/imageinsert/imageinsertui.d.ts +10 -2
  273. package/src/imageinsert/imageinsertui.js +41 -4
  274. package/src/imageinsert/imageinsertviaurlui.d.ts +31 -9
  275. package/src/imageinsert/imageinsertviaurlui.js +111 -64
  276. package/src/imageinsert/ui/imageinsertformview.js +0 -17
  277. package/src/imageinsert/ui/imageinserturlview.d.ts +6 -49
  278. package/src/imageinsert/ui/imageinserturlview.js +6 -74
  279. package/src/imageresize/imageresizebuttons.js +2 -2
  280. package/src/imagestyle/utils.js +17 -18
  281. package/src/imageupload/imageuploadui.d.ts +18 -1
  282. package/src/imageupload/imageuploadui.js +59 -38
  283. package/theme/imageinsert.css +3 -0
  284. package/theme/imagestyle.css +47 -34
  285. package/build/translations/es-co.js +0 -1
  286. package/build/translations/tt.js +0 -1
  287. package/dist/translations/es-co.d.ts +0 -8
  288. package/dist/translations/es-co.js +0 -5
  289. package/dist/translations/es-co.umd.js +0 -11
  290. package/dist/translations/tt.d.ts +0 -8
  291. package/dist/translations/tt.js +0 -5
  292. package/dist/translations/tt.umd.js +0 -11
  293. package/lang/translations/es-co.po +0 -178
  294. package/lang/translations/tt.po +0 -178
@@ -2,8 +2,11 @@
2
2
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
- import { ButtonView, View, FocusCycler, LabeledFieldView, type InputTextView } from 'ckeditor5/src/ui.js';
6
- import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
5
+ /**
6
+ * @module image/imageinsert/ui/imageinserturlview
7
+ */
8
+ import { View, LabeledFieldView, type InputTextView } from 'ckeditor5/src/ui.js';
9
+ import { KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
7
10
  /**
8
11
  * The insert an image via URL view.
9
12
  *
@@ -14,14 +17,6 @@ export default class ImageInsertUrlView extends View {
14
17
  * The URL input field view.
15
18
  */
16
19
  urlInputView: LabeledFieldView<InputTextView>;
17
- /**
18
- * The "insert/update" button view.
19
- */
20
- insertButtonView: ButtonView;
21
- /**
22
- * The "cancel" button view.
23
- */
24
- cancelButtonView: ButtonView;
25
20
  /**
26
21
  * The value of the URL input.
27
22
  *
@@ -40,22 +35,10 @@ export default class ImageInsertUrlView extends View {
40
35
  * @observable
41
36
  */
42
37
  isEnabled: boolean;
43
- /**
44
- * Tracks information about DOM focus in the form.
45
- */
46
- readonly focusTracker: FocusTracker;
47
38
  /**
48
39
  * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
49
40
  */
50
41
  readonly keystrokes: KeystrokeHandler;
51
- /**
52
- * Helps cycling over {@link #_focusables} in the form.
53
- */
54
- readonly focusCycler: FocusCycler;
55
- /**
56
- * A collection of views that can be focused in the form.
57
- */
58
- private readonly _focusables;
59
42
  /**
60
43
  * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
61
44
  *
@@ -74,34 +57,8 @@ export default class ImageInsertUrlView extends View {
74
57
  * Creates the {@link #urlInputView}.
75
58
  */
76
59
  private _createUrlInputView;
77
- /**
78
- * Creates the {@link #insertButtonView}.
79
- */
80
- private _createInsertButton;
81
- /**
82
- * Creates the {@link #cancelButtonView}.
83
- */
84
- private _createCancelButton;
85
60
  /**
86
61
  * Focuses the view.
87
62
  */
88
- focus(direction: 1 | -1): void;
63
+ focus(): void;
89
64
  }
90
- /**
91
- * Fired when the form view is submitted.
92
- *
93
- * @eventName ~ImageInsertUrlView#submit
94
- */
95
- export type ImageInsertUrlViewSubmitEvent = {
96
- name: 'submit';
97
- args: [];
98
- };
99
- /**
100
- * Fired when the form view is canceled.
101
- *
102
- * @eventName ~ImageInsertUrlView#cancel
103
- */
104
- export type ImageInsertUrlViewCancelEvent = {
105
- name: 'cancel';
106
- args: [];
107
- };
@@ -5,9 +5,8 @@
5
5
  /**
6
6
  * @module image/imageinsert/ui/imageinserturlview
7
7
  */
8
- import { icons } from 'ckeditor5/src/core.js';
9
- import { ButtonView, View, ViewCollection, FocusCycler, LabeledFieldView, createLabeledInputText } from 'ckeditor5/src/ui.js';
10
- import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
8
+ import { View, LabeledFieldView, createLabeledInputText } from 'ckeditor5/src/ui.js';
9
+ import { KeystrokeHandler } from 'ckeditor5/src/utils.js';
11
10
  /**
12
11
  * The insert an image via URL view.
13
12
  *
@@ -24,28 +23,8 @@ export default class ImageInsertUrlView extends View {
24
23
  this.set('imageURLInputValue', '');
25
24
  this.set('isImageSelected', false);
26
25
  this.set('isEnabled', true);
27
- this.focusTracker = new FocusTracker();
28
26
  this.keystrokes = new KeystrokeHandler();
29
- this._focusables = new ViewCollection();
30
- this.focusCycler = new FocusCycler({
31
- focusables: this._focusables,
32
- focusTracker: this.focusTracker,
33
- keystrokeHandler: this.keystrokes,
34
- actions: {
35
- // Navigate form fields backwards using the Shift + Tab keystroke.
36
- focusPrevious: 'shift + tab',
37
- // Navigate form fields forwards using the Tab key.
38
- focusNext: 'tab'
39
- }
40
- });
41
27
  this.urlInputView = this._createUrlInputView();
42
- this.insertButtonView = this._createInsertButton();
43
- this.cancelButtonView = this._createCancelButton();
44
- this._focusables.addMany([
45
- this.urlInputView,
46
- this.insertButtonView,
47
- this.cancelButtonView
48
- ]);
49
28
  this.setTemplate({
50
29
  tag: 'div',
51
30
  attributes: {
@@ -63,11 +42,7 @@ export default class ImageInsertUrlView extends View {
63
42
  'ck',
64
43
  'ck-image-insert-url__action-row'
65
44
  ]
66
- },
67
- children: [
68
- this.insertButtonView,
69
- this.cancelButtonView
70
- ]
45
+ }
71
46
  }
72
47
  ]
73
48
  });
@@ -77,9 +52,6 @@ export default class ImageInsertUrlView extends View {
77
52
  */
78
53
  render() {
79
54
  super.render();
80
- for (const view of this._focusables) {
81
- this.focusTracker.add(view.element);
82
- }
83
55
  // Start listening for the keystrokes coming from #element.
84
56
  this.keystrokes.listenTo(this.element);
85
57
  }
@@ -88,7 +60,6 @@ export default class ImageInsertUrlView extends View {
88
60
  */
89
61
  destroy() {
90
62
  super.destroy();
91
- this.focusTracker.destroy();
92
63
  this.keystrokes.destroy();
93
64
  }
94
65
  /**
@@ -100,6 +71,7 @@ export default class ImageInsertUrlView extends View {
100
71
  const urlInputView = new LabeledFieldView(locale, createLabeledInputText);
101
72
  urlInputView.bind('label').to(this, 'isImageSelected', value => value ? t('Update image URL') : t('Insert image via URL'));
102
73
  urlInputView.bind('isEnabled').to(this);
74
+ urlInputView.fieldView.inputMode = 'url';
103
75
  urlInputView.fieldView.placeholder = 'https://example.com/image.png';
104
76
  urlInputView.fieldView.bind('value').to(this, 'imageURLInputValue', (value) => value || '');
105
77
  urlInputView.fieldView.on('input', () => {
@@ -107,50 +79,10 @@ export default class ImageInsertUrlView extends View {
107
79
  });
108
80
  return urlInputView;
109
81
  }
110
- /**
111
- * Creates the {@link #insertButtonView}.
112
- */
113
- _createInsertButton() {
114
- const locale = this.locale;
115
- const t = locale.t;
116
- const insertButtonView = new ButtonView(locale);
117
- insertButtonView.set({
118
- icon: icons.check,
119
- class: 'ck-button-save',
120
- type: 'submit',
121
- withText: true
122
- });
123
- insertButtonView.bind('label').to(this, 'isImageSelected', value => value ? t('Update') : t('Insert'));
124
- insertButtonView.bind('isEnabled').to(this, 'imageURLInputValue', this, 'isEnabled', (...values) => values.every(value => value));
125
- insertButtonView.delegate('execute').to(this, 'submit');
126
- return insertButtonView;
127
- }
128
- /**
129
- * Creates the {@link #cancelButtonView}.
130
- */
131
- _createCancelButton() {
132
- const locale = this.locale;
133
- const t = locale.t;
134
- const cancelButtonView = new ButtonView(locale);
135
- cancelButtonView.set({
136
- label: t('Cancel'),
137
- icon: icons.cancel,
138
- class: 'ck-button-cancel',
139
- withText: true
140
- });
141
- cancelButtonView.bind('isEnabled').to(this);
142
- cancelButtonView.delegate('execute').to(this, 'cancel');
143
- return cancelButtonView;
144
- }
145
82
  /**
146
83
  * Focuses the view.
147
84
  */
148
- focus(direction) {
149
- if (direction === -1) {
150
- this.focusCycler.focusLast();
151
- }
152
- else {
153
- this.focusCycler.focusFirst();
154
- }
85
+ focus() {
86
+ this.urlInputView.focus();
155
87
  }
156
88
  }
@@ -10,13 +10,13 @@ import { Plugin, icons } from 'ckeditor5/src/core.js';
10
10
  import { ButtonView, DropdownButtonView, ViewModel, createDropdown, addListToDropdown } from 'ckeditor5/src/ui.js';
11
11
  import { CKEditorError, Collection } from 'ckeditor5/src/utils.js';
12
12
  import ImageResizeEditing from './imageresizeediting.js';
13
- const RESIZE_ICONS = {
13
+ const RESIZE_ICONS = /* #__PURE__ */ (() => ({
14
14
  small: icons.objectSizeSmall,
15
15
  medium: icons.objectSizeMedium,
16
16
  large: icons.objectSizeLarge,
17
17
  custom: icons.objectSizeCustom,
18
18
  original: icons.objectSizeFull
19
- };
19
+ }))();
20
20
  /**
21
21
  * The image resize buttons plugin.
22
22
  *
@@ -7,7 +7,6 @@
7
7
  */
8
8
  import { icons } from 'ckeditor5/src/core.js';
9
9
  import { logWarning } from 'ckeditor5/src/utils.js';
10
- const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, objectBlockLeft, objectBlockRight } = icons;
11
10
  /**
12
11
  * Default image style options provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
13
12
  * configuration.
@@ -32,7 +31,7 @@ export const DEFAULT_OPTIONS = {
32
31
  return {
33
32
  name: 'inline',
34
33
  title: 'In line',
35
- icon: objectInline,
34
+ icon: icons.objectInline,
36
35
  modelElements: ['imageInline'],
37
36
  isDefault: true
38
37
  };
@@ -42,7 +41,7 @@ export const DEFAULT_OPTIONS = {
42
41
  return {
43
42
  name: 'alignLeft',
44
43
  title: 'Left aligned image',
45
- icon: objectLeft,
44
+ icon: icons.objectLeft,
46
45
  modelElements: ['imageBlock', 'imageInline'],
47
46
  className: 'image-style-align-left'
48
47
  };
@@ -52,7 +51,7 @@ export const DEFAULT_OPTIONS = {
52
51
  return {
53
52
  name: 'alignBlockLeft',
54
53
  title: 'Left aligned image',
55
- icon: objectBlockLeft,
54
+ icon: icons.objectBlockLeft,
56
55
  modelElements: ['imageBlock'],
57
56
  className: 'image-style-block-align-left'
58
57
  };
@@ -62,7 +61,7 @@ export const DEFAULT_OPTIONS = {
62
61
  return {
63
62
  name: 'alignCenter',
64
63
  title: 'Centered image',
65
- icon: objectCenter,
64
+ icon: icons.objectCenter,
66
65
  modelElements: ['imageBlock'],
67
66
  className: 'image-style-align-center'
68
67
  };
@@ -72,7 +71,7 @@ export const DEFAULT_OPTIONS = {
72
71
  return {
73
72
  name: 'alignRight',
74
73
  title: 'Right aligned image',
75
- icon: objectRight,
74
+ icon: icons.objectRight,
76
75
  modelElements: ['imageBlock', 'imageInline'],
77
76
  className: 'image-style-align-right'
78
77
  };
@@ -82,7 +81,7 @@ export const DEFAULT_OPTIONS = {
82
81
  return {
83
82
  name: 'alignBlockRight',
84
83
  title: 'Right aligned image',
85
- icon: objectBlockRight,
84
+ icon: icons.objectBlockRight,
86
85
  modelElements: ['imageBlock'],
87
86
  className: 'image-style-block-align-right'
88
87
  };
@@ -92,7 +91,7 @@ export const DEFAULT_OPTIONS = {
92
91
  return {
93
92
  name: 'block',
94
93
  title: 'Centered image',
95
- icon: objectCenter,
94
+ icon: icons.objectCenter,
96
95
  modelElements: ['imageBlock'],
97
96
  isDefault: true
98
97
  };
@@ -102,7 +101,7 @@ export const DEFAULT_OPTIONS = {
102
101
  return {
103
102
  name: 'side',
104
103
  title: 'Side image',
105
- icon: objectRight,
104
+ icon: icons.objectRight,
106
105
  modelElements: ['imageBlock'],
107
106
  className: 'image-style-side'
108
107
  };
@@ -116,15 +115,15 @@ export const DEFAULT_OPTIONS = {
116
115
  *
117
116
  * There are 7 default icons available: `'full'`, `'left'`, `'inlineLeft'`, `'center'`, `'right'`, `'inlineRight'`, and `'inline'`.
118
117
  */
119
- export const DEFAULT_ICONS = {
120
- full: objectFullWidth,
121
- left: objectBlockLeft,
122
- right: objectBlockRight,
123
- center: objectCenter,
124
- inlineLeft: objectLeft,
125
- inlineRight: objectRight,
126
- inline: objectInline
127
- };
118
+ export const DEFAULT_ICONS = /* #__PURE__ */ (() => ({
119
+ full: icons.objectFullWidth,
120
+ left: icons.objectBlockLeft,
121
+ right: icons.objectBlockRight,
122
+ center: icons.objectCenter,
123
+ inlineLeft: icons.objectLeft,
124
+ inlineRight: icons.objectRight,
125
+ inline: icons.objectInline
126
+ }))();
128
127
  /**
129
128
  * Default drop-downs provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#toolbar}
130
129
  * configuration. The drop-downs are containers for the {@link module:image/imageconfig~ImageStyleConfig#options image style options}.
@@ -13,6 +13,11 @@ import { Plugin } from 'ckeditor5/src/core.js';
13
13
  *
14
14
  * Adds the `'uploadImage'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
15
15
  * and also the `imageUpload` button as an alias for backward compatibility.
16
+ *
17
+ * Adds the `'menuBar:uploadImage'` menu button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
18
+ *
19
+ * It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component, which are the default components
20
+ * through which image upload is available.
16
21
  */
17
22
  export default class ImageUploadUI extends Plugin {
18
23
  /**
@@ -24,7 +29,19 @@ export default class ImageUploadUI extends Plugin {
24
29
  */
25
30
  init(): void;
26
31
  /**
27
- * Creates a button for image upload command to use either in toolbar or in menu bar.
32
+ * Creates the base for various kinds of the button component provided by this feature.
28
33
  */
29
34
  private _createButton;
35
+ /**
36
+ * Creates a simple toolbar button, with an icon and a tooltip.
37
+ */
38
+ private _createToolbarButton;
39
+ /**
40
+ * Creates a button for the dropdown view, with an icon, text and no tooltip.
41
+ */
42
+ private _createDropdownButton;
43
+ /**
44
+ * Creates a button for the menu bar.
45
+ */
46
+ private _createMenuBarButton;
30
47
  }
@@ -15,6 +15,11 @@ import { createImageTypeRegExp } from './utils.js';
15
15
  *
16
16
  * Adds the `'uploadImage'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
17
17
  * and also the `imageUpload` button as an alias for backward compatibility.
18
+ *
19
+ * Adds the `'menuBar:uploadImage'` menu button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
20
+ *
21
+ * It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component, which are the default components
22
+ * through which image upload is available.
18
23
  */
19
24
  export default class ImageUploadUI extends Plugin {
20
25
  /**
@@ -28,51 +33,22 @@ export default class ImageUploadUI extends Plugin {
28
33
  */
29
34
  init() {
30
35
  const editor = this.editor;
31
- const t = editor.t;
32
- const toolbarComponentCreator = () => {
33
- const button = this._createButton(FileDialogButtonView);
34
- button.set({
35
- label: t('Upload image from computer'),
36
- tooltip: true
37
- });
38
- return button;
39
- };
40
36
  // Setup `uploadImage` button and add `imageUpload` button as an alias for backward compatibility.
41
- editor.ui.componentFactory.add('uploadImage', toolbarComponentCreator);
42
- editor.ui.componentFactory.add('imageUpload', toolbarComponentCreator);
43
- editor.ui.componentFactory.add('menuBar:uploadImage', () => {
44
- const button = this._createButton(MenuBarMenuListItemFileDialogButtonView);
45
- button.label = t('Image from computer');
46
- return button;
47
- });
37
+ editor.ui.componentFactory.add('uploadImage', () => this._createToolbarButton());
38
+ editor.ui.componentFactory.add('imageUpload', () => this._createToolbarButton());
39
+ editor.ui.componentFactory.add('menuBar:uploadImage', () => this._createMenuBarButton('standalone'));
48
40
  if (editor.plugins.has('ImageInsertUI')) {
49
- const imageInsertUI = editor.plugins.get('ImageInsertUI');
50
- imageInsertUI.registerIntegration({
41
+ editor.plugins.get('ImageInsertUI').registerIntegration({
51
42
  name: 'upload',
52
43
  observable: () => editor.commands.get('uploadImage'),
53
- buttonViewCreator: () => {
54
- const uploadImageButton = editor.ui.componentFactory.create('uploadImage');
55
- uploadImageButton.bind('label').to(imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ?
56
- t('Replace image from computer') :
57
- t('Upload image from computer'));
58
- return uploadImageButton;
59
- },
60
- formViewCreator: () => {
61
- const uploadImageButton = editor.ui.componentFactory.create('uploadImage');
62
- uploadImageButton.withText = true;
63
- uploadImageButton.bind('label').to(imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ?
64
- t('Replace from computer') :
65
- t('Upload from computer'));
66
- uploadImageButton.on('execute', () => {
67
- imageInsertUI.dropdownView.isOpen = false;
68
- });
69
- return uploadImageButton;
70
- }
44
+ buttonViewCreator: () => this._createToolbarButton(),
45
+ formViewCreator: () => this._createDropdownButton(),
46
+ menuBarButtonViewCreator: isOnly => this._createMenuBarButton(isOnly ? 'insertOnly' : 'insertNested')
71
47
  });
72
48
  }
73
49
  }
74
50
  /**
75
- * Creates a button for image upload command to use either in toolbar or in menu bar.
51
+ * Creates the base for various kinds of the button component provided by this feature.
76
52
  */
77
53
  _createButton(ButtonClass) {
78
54
  const editor = this.editor;
@@ -85,7 +61,7 @@ export default class ImageUploadUI extends Plugin {
85
61
  view.set({
86
62
  acceptedType: imageTypes.map(type => `image/${type}`).join(','),
87
63
  allowMultipleFiles: true,
88
- label: t('Upload image from computer'),
64
+ label: t('Upload from computer'),
89
65
  icon: icons.imageUpload
90
66
  });
91
67
  view.bind('isEnabled').to(command);
@@ -98,4 +74,49 @@ export default class ImageUploadUI extends Plugin {
98
74
  });
99
75
  return view;
100
76
  }
77
+ /**
78
+ * Creates a simple toolbar button, with an icon and a tooltip.
79
+ */
80
+ _createToolbarButton() {
81
+ const t = this.editor.locale.t;
82
+ const imageInsertUI = this.editor.plugins.get('ImageInsertUI');
83
+ const button = this._createButton(FileDialogButtonView);
84
+ button.tooltip = true;
85
+ button.bind('label').to(imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ? t('Replace image from computer') : t('Upload image from computer'));
86
+ return button;
87
+ }
88
+ /**
89
+ * Creates a button for the dropdown view, with an icon, text and no tooltip.
90
+ */
91
+ _createDropdownButton() {
92
+ const t = this.editor.locale.t;
93
+ const imageInsertUI = this.editor.plugins.get('ImageInsertUI');
94
+ const button = this._createButton(FileDialogButtonView);
95
+ button.withText = true;
96
+ button.bind('label').to(imageInsertUI, 'isImageSelected', isImageSelected => isImageSelected ? t('Replace from computer') : t('Upload from computer'));
97
+ button.on('execute', () => {
98
+ imageInsertUI.dropdownView.isOpen = false;
99
+ });
100
+ return button;
101
+ }
102
+ /**
103
+ * Creates a button for the menu bar.
104
+ */
105
+ _createMenuBarButton(type) {
106
+ const t = this.editor.locale.t;
107
+ const button = this._createButton(MenuBarMenuListItemFileDialogButtonView);
108
+ button.withText = true;
109
+ switch (type) {
110
+ case 'standalone':
111
+ button.label = t('Image from computer');
112
+ break;
113
+ case 'insertOnly':
114
+ button.label = t('Image');
115
+ break;
116
+ case 'insertNested':
117
+ button.label = t('From computer');
118
+ break;
119
+ }
120
+ return button;
121
+ }
101
122
  }
@@ -4,6 +4,9 @@
4
4
  */
5
5
 
6
6
  .ck.ck-image-insert-url {
7
+ width: 400px;
8
+ padding: var(--ck-spacing-large) var(--ck-spacing-large) 0;
9
+
7
10
  & .ck-image-insert-url__action-row {
8
11
  display: grid;
9
12
  grid-template-columns: repeat(2, 1fr);
@@ -9,30 +9,48 @@
9
9
  }
10
10
 
11
11
  .ck-content {
12
- /* Provides a minimal side margin for the left and right aligned images, so that the user has a visual feedback
13
- confirming successful application of the style if image width exceeds the editor's size.
14
- See https://github.com/ckeditor/ckeditor5/issues/9342 */
15
- & .image-style-block-align-left,
16
- & .image-style-block-align-right {
17
- max-width: calc(100% - var(--ck-image-style-spacing));
18
- }
12
+ /* See: https://github.com/ckeditor/ckeditor5/issues/16317 */
13
+ & .image {
14
+ /* Provides a minimal side margin for the left and right aligned images, so that the user has a visual feedback
15
+ confirming successful application of the style if image width exceeds the editor's size.
16
+ See https://github.com/ckeditor/ckeditor5/issues/9342 */
17
+ &.image-style-block-align-left,
18
+ &.image-style-block-align-right {
19
+ max-width: calc(100% - var(--ck-image-style-spacing));
20
+ }
19
21
 
20
- /* Allows displaying multiple floating images in the same line.
21
- See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */
22
- & .image-style-align-left,
23
- & .image-style-align-right {
24
- clear: none;
25
- }
22
+ /* Allows displaying multiple floating images in the same line.
23
+ See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */
24
+ &.image-style-align-left,
25
+ &.image-style-align-right {
26
+ clear: none;
27
+ }
26
28
 
27
- & .image-style-side {
28
- float: right;
29
- margin-left: var(--ck-image-style-spacing);
30
- max-width: 50%;
31
- }
29
+ &.image-style-side {
30
+ float: right;
31
+ margin-left: var(--ck-image-style-spacing);
32
+ max-width: 50%;
33
+ }
32
34
 
33
- & .image-style-align-left {
34
- float: left;
35
- margin-right: var(--ck-image-style-spacing);
35
+ &.image-style-align-left {
36
+ float: left;
37
+ margin-right: var(--ck-image-style-spacing);
38
+ }
39
+
40
+ &.image-style-align-right {
41
+ float: right;
42
+ margin-left: var(--ck-image-style-spacing);
43
+ }
44
+
45
+ &.image-style-block-align-right {
46
+ margin-right: 0;
47
+ margin-left: auto;
48
+ }
49
+
50
+ &.image-style-block-align-left {
51
+ margin-left: 0;
52
+ margin-right: auto;
53
+ }
36
54
  }
37
55
 
38
56
  & .image-style-align-center {
@@ -40,25 +58,20 @@
40
58
  margin-right: auto;
41
59
  }
42
60
 
61
+ & .image-style-align-left {
62
+ float: left;
63
+ margin-right: var(--ck-image-style-spacing);
64
+ }
65
+
43
66
  & .image-style-align-right {
44
67
  float: right;
45
68
  margin-left: var(--ck-image-style-spacing);
46
69
  }
47
70
 
48
- & .image-style-block-align-right {
49
- margin-right: 0;
50
- margin-left: auto;
51
- }
52
-
53
- & .image-style-block-align-left {
54
- margin-left: 0;
55
- margin-right: auto;
56
- }
57
-
58
71
  /* Simulates margin collapsing with the preceding paragraph, which does not work for the floating elements. */
59
- & p + .image-style-align-left,
60
- & p + .image-style-align-right,
61
- & p + .image-style-side {
72
+ & p + .image.image-style-align-left,
73
+ & p + .image.image-style-align-right,
74
+ & p + .image.image-style-side {
62
75
  margin-top: 0;
63
76
  }
64
77
 
@@ -1 +0,0 @@
1
- !function(e){const a=e["es-co"]=e["es-co"]||{};a.dictionary=Object.assign(a.dictionary||{},{"Break text":"","Caption for image: %0":"","Caption for the image":"","Centered image":"","Change image text alternative":"",Custom:"","Custom image size":"","Enter image caption":"","Error during image upload":"","Full size image":"","Image from computer":"","Image resize list":"","Image toolbar":"","Image upload complete":"","image widget":"","In line":"",Insert:"Insertar","Insert image":"","Insert image via URL":"","Left aligned image":"",Original:"","Replace from computer":"","Replace image":"","Replace image from computer":"","Resize image":"","Resize image (in %0)":"","Resize image to %0":"","Resize image to the original size":"","Right aligned image":"","Side image":"","Text alternative":"","The value must not be empty.":"","The value should be a plain number.":"",Update:"","Update image URL":"","Upload failed":"","Upload from computer":"","Upload image from computer":"","Uploading image":"","Wrap text":""})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));
@@ -1 +0,0 @@
1
- !function(e){const a=e.tt=e.tt||{};a.dictionary=Object.assign(a.dictionary||{},{"Break text":"","Caption for image: %0":"","Caption for the image":"","Centered image":"","Change image text alternative":"",Custom:"","Custom image size":"","Enter image caption":"","Error during image upload":"","Full size image":"","Image from computer":"","Image resize list":"","Image toolbar":"","Image upload complete":"","image widget":"","In line":"",Insert:"","Insert image":"","Insert image via URL":"","Left aligned image":"",Original:"","Replace from computer":"","Replace image":"","Replace image from computer":"","Resize image":"","Resize image (in %0)":"","Resize image to %0":"","Resize image to the original size":"","Right aligned image":"","Side image":"","Text alternative":"","The value must not be empty.":"","The value should be a plain number.":"",Update:"Яңарт","Update image URL":"","Upload failed":"","Upload from computer":"","Upload image from computer":"","Uploading image":"","Wrap text":""})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));
@@ -1,8 +0,0 @@
1
- /**
2
- * @license Copyright (c) 2003-2024, 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
- import type { Translations } from 'ckeditor5';
7
- declare const translations: Translations;
8
- export default translations;
@@ -1,5 +0,0 @@
1
- /**
2
- * @license Copyright (c) 2003-2024, 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
- export default {"es-co":{"dictionary":{"image widget":"","Wrap text":"","Break text":"","In line":"","Side image":"","Full size image":"","Left aligned image":"","Centered image":"","Right aligned image":"","Change image text alternative":"","Text alternative":"","Enter image caption":"","Insert image":"","Replace image":"","Upload from computer":"","Replace from computer":"","Upload image from computer":"","Image from computer":"","Replace image from computer":"","Upload failed":"","Image toolbar":"","Resize image":"","Resize image to %0":"","Resize image to the original size":"","Resize image (in %0)":"","Original":"","Custom image size":"","Custom":"","Image resize list":"","Insert":"Insertar","Update":"","Insert image via URL":"","Update image URL":"","Caption for the image":"","Caption for image: %0":"","The value must not be empty.":"","The value should be a plain number.":"","Uploading image":"","Image upload complete":"","Error during image upload":""},getPluralForm(n){return n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;}}}
@@ -1,11 +0,0 @@
1
- /**
2
- * @license Copyright (c) 2003-2024, 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
- ( e => {
7
- const { [ 'es-co' ]: { dictionary, getPluralForm } } = {"es-co":{"dictionary":{"image widget":"","Wrap text":"","Break text":"","In line":"","Side image":"","Full size image":"","Left aligned image":"","Centered image":"","Right aligned image":"","Change image text alternative":"","Text alternative":"","Enter image caption":"","Insert image":"","Replace image":"","Upload from computer":"","Replace from computer":"","Upload image from computer":"","Image from computer":"","Replace image from computer":"","Upload failed":"","Image toolbar":"","Resize image":"","Resize image to %0":"","Resize image to the original size":"","Resize image (in %0)":"","Original":"","Custom image size":"","Custom":"","Image resize list":"","Insert":"Insertar","Update":"","Insert image via URL":"","Update image URL":"","Caption for the image":"","Caption for image: %0":"","The value must not be empty.":"","The value should be a plain number.":"","Uploading image":"","Image upload complete":"","Error during image upload":""},getPluralForm(n){return n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;}}};
8
- e[ 'es-co' ] ||= { dictionary: {}, getPluralForm: null };
9
- e[ 'es-co' ].dictionary = Object.assign( e[ 'es-co' ].dictionary, dictionary );
10
- e[ 'es-co' ].getPluralForm = getPluralForm;
11
- } )( window.CKEDITOR_TRANSLATIONS ||= {} );