@ckeditor/ckeditor5-image 39.0.2 → 40.0.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 (116) hide show
  1. package/build/image.js +1 -1
  2. package/build/image.js.map +1 -0
  3. package/build/translations/pt-br.js +1 -1
  4. package/ckeditor5-metadata.json +12 -0
  5. package/lang/translations/pt-br.po +1 -1
  6. package/package.json +3 -3
  7. package/src/augmentation.d.ts +56 -55
  8. package/src/augmentation.js +5 -5
  9. package/src/autoimage.d.ts +52 -52
  10. package/src/autoimage.js +132 -132
  11. package/src/image/converters.d.ts +66 -66
  12. package/src/image/converters.js +232 -242
  13. package/src/image/imageblockediting.d.ts +58 -55
  14. package/src/image/imageblockediting.js +152 -136
  15. package/src/image/imageediting.d.ts +30 -30
  16. package/src/image/imageediting.js +63 -74
  17. package/src/image/imageinlineediting.d.ts +59 -56
  18. package/src/image/imageinlineediting.js +176 -160
  19. package/src/image/imageloadobserver.d.ts +48 -48
  20. package/src/image/imageloadobserver.js +52 -52
  21. package/src/image/imagetypecommand.d.ts +44 -40
  22. package/src/image/imagetypecommand.js +80 -77
  23. package/src/image/insertimagecommand.d.ts +66 -66
  24. package/src/image/insertimagecommand.js +120 -120
  25. package/src/image/replaceimagesourcecommand.d.ts +34 -34
  26. package/src/image/replaceimagesourcecommand.js +44 -44
  27. package/src/image/ui/utils.d.ts +25 -25
  28. package/src/image/ui/utils.js +44 -44
  29. package/src/image/utils.d.ts +64 -52
  30. package/src/image/utils.js +121 -100
  31. package/src/image.d.ts +34 -34
  32. package/src/image.js +38 -38
  33. package/src/imageblock.d.ts +33 -33
  34. package/src/imageblock.js +37 -37
  35. package/src/imagecaption/imagecaptionediting.d.ts +89 -89
  36. package/src/imagecaption/imagecaptionediting.js +225 -225
  37. package/src/imagecaption/imagecaptionui.d.ts +26 -26
  38. package/src/imagecaption/imagecaptionui.js +61 -61
  39. package/src/imagecaption/imagecaptionutils.d.ts +38 -38
  40. package/src/imagecaption/imagecaptionutils.js +62 -62
  41. package/src/imagecaption/toggleimagecaptioncommand.d.ts +66 -66
  42. package/src/imagecaption/toggleimagecaptioncommand.js +138 -138
  43. package/src/imagecaption.d.ts +26 -26
  44. package/src/imagecaption.js +30 -30
  45. package/src/imageconfig.d.ts +713 -713
  46. package/src/imageconfig.js +5 -5
  47. package/src/imageinline.d.ts +33 -33
  48. package/src/imageinline.js +37 -37
  49. package/src/imageinsert/imageinsertui.d.ts +44 -44
  50. package/src/imageinsert/imageinsertui.js +141 -141
  51. package/src/imageinsert/ui/imageinsertformrowview.d.ts +61 -61
  52. package/src/imageinsert/ui/imageinsertformrowview.js +54 -54
  53. package/src/imageinsert/ui/imageinsertpanelview.d.ts +106 -106
  54. package/src/imageinsert/ui/imageinsertpanelview.js +161 -161
  55. package/src/imageinsert/utils.d.ts +25 -25
  56. package/src/imageinsert/utils.js +58 -58
  57. package/src/imageinsert.d.ts +33 -33
  58. package/src/imageinsert.js +37 -37
  59. package/src/imageinsertviaurl.d.ts +30 -30
  60. package/src/imageinsertviaurl.js +34 -34
  61. package/src/imageresize/imageresizebuttons.d.ts +67 -67
  62. package/src/imageresize/imageresizebuttons.js +217 -217
  63. package/src/imageresize/imageresizeediting.d.ts +37 -37
  64. package/src/imageresize/imageresizeediting.js +165 -114
  65. package/src/imageresize/imageresizehandles.d.ts +31 -30
  66. package/src/imageresize/imageresizehandles.js +114 -107
  67. package/src/imageresize/resizeimagecommand.d.ts +42 -42
  68. package/src/imageresize/resizeimagecommand.js +63 -61
  69. package/src/imageresize.d.ts +27 -27
  70. package/src/imageresize.js +31 -31
  71. package/src/imagesizeattributes.d.ts +34 -0
  72. package/src/imagesizeattributes.js +143 -0
  73. package/src/imagestyle/converters.d.ts +24 -24
  74. package/src/imagestyle/converters.js +79 -79
  75. package/src/imagestyle/imagestylecommand.d.ts +68 -65
  76. package/src/imagestyle/imagestylecommand.js +107 -101
  77. package/src/imagestyle/imagestyleediting.d.ts +50 -50
  78. package/src/imagestyle/imagestyleediting.js +108 -108
  79. package/src/imagestyle/imagestyleui.d.ts +56 -56
  80. package/src/imagestyle/imagestyleui.js +192 -192
  81. package/src/imagestyle/utils.d.ts +101 -101
  82. package/src/imagestyle/utils.js +329 -329
  83. package/src/imagestyle.d.ts +32 -32
  84. package/src/imagestyle.js +36 -36
  85. package/src/imagetextalternative/imagetextalternativecommand.d.ts +34 -34
  86. package/src/imagetextalternative/imagetextalternativecommand.js +44 -44
  87. package/src/imagetextalternative/imagetextalternativeediting.d.ts +28 -28
  88. package/src/imagetextalternative/imagetextalternativeediting.js +35 -35
  89. package/src/imagetextalternative/imagetextalternativeui.d.ts +68 -68
  90. package/src/imagetextalternative/imagetextalternativeui.js +173 -173
  91. package/src/imagetextalternative/ui/textalternativeformview.d.ts +72 -72
  92. package/src/imagetextalternative/ui/textalternativeformview.js +121 -121
  93. package/src/imagetextalternative.d.ts +29 -29
  94. package/src/imagetextalternative.js +33 -33
  95. package/src/imagetoolbar.d.ts +35 -35
  96. package/src/imagetoolbar.js +57 -57
  97. package/src/imageupload/imageuploadediting.d.ts +111 -111
  98. package/src/imageupload/imageuploadediting.js +337 -335
  99. package/src/imageupload/imageuploadprogress.d.ts +42 -42
  100. package/src/imageupload/imageuploadprogress.js +211 -211
  101. package/src/imageupload/imageuploadui.d.ts +23 -23
  102. package/src/imageupload/imageuploadui.js +57 -57
  103. package/src/imageupload/uploadimagecommand.d.ts +60 -60
  104. package/src/imageupload/uploadimagecommand.js +100 -100
  105. package/src/imageupload/utils.d.ts +33 -33
  106. package/src/imageupload/utils.js +112 -112
  107. package/src/imageupload.d.ts +32 -32
  108. package/src/imageupload.js +36 -36
  109. package/src/imageutils.d.ts +125 -102
  110. package/src/imageutils.js +306 -248
  111. package/src/index.d.ts +48 -47
  112. package/src/index.js +39 -38
  113. package/src/pictureediting.d.ts +88 -88
  114. package/src/pictureediting.js +130 -130
  115. package/theme/image.css +38 -11
  116. package/theme/imageresize.css +5 -0
package/src/index.d.ts CHANGED
@@ -1,47 +1,48 @@
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
7
- */
8
- export { default as AutoImage } from './autoimage';
9
- export { default as Image } from './image';
10
- export { default as ImageEditing } from './image/imageediting';
11
- export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils';
12
- export { default as ImageCaption } from './imagecaption';
13
- export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting';
14
- export { default as ImageInsert } from './imageinsert';
15
- export { default as ImageInsertUI } from './imageinsert/imageinsertui';
16
- export { default as ImageResize } from './imageresize';
17
- export { default as ImageResizeButtons } from './imageresize/imageresizebuttons';
18
- export { default as ImageResizeEditing } from './imageresize/imageresizeediting';
19
- export { default as ImageResizeHandles } from './imageresize/imageresizehandles';
20
- export { default as ImageStyle } from './imagestyle';
21
- export { default as ImageStyleEditing } from './imagestyle/imagestyleediting';
22
- export { default as ImageStyleUI } from './imagestyle/imagestyleui';
23
- export { default as ImageTextAlternative } from './imagetextalternative';
24
- export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting';
25
- export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui';
26
- export { default as ImageToolbar } from './imagetoolbar';
27
- export { default as ImageUpload } from './imageupload';
28
- export { default as ImageUploadEditing, type ImageUploadCompleteEvent } from './imageupload/imageuploadediting';
29
- export { default as ImageUploadProgress } from './imageupload/imageuploadprogress';
30
- export { default as ImageUploadUI } from './imageupload/imageuploadui';
31
- export { default as PictureEditing } from './pictureediting';
32
- export { default as ImageBlock } from './imageblock';
33
- export { default as ImageInline } from './imageinline';
34
- export { default as ImageInsertViaUrl } from './imageinsertviaurl';
35
- export { default as ImageUtils } from './imageutils';
36
- export { default as ImageBlockEditing } from './image/imageblockediting';
37
- export { default as ImageCaptionUI } from './imagecaption/imagecaptionui';
38
- export type { ImageConfig } from './imageconfig';
39
- export type { default as ImageTypeCommand } from './image/imagetypecommand';
40
- export type { default as InsertImageCommand } from './image/insertimagecommand';
41
- export type { default as ReplaceImageSourceCommand } from './image/replaceimagesourcecommand';
42
- export type { default as ToggleImageCaptionCommand } from './imagecaption/toggleimagecaptioncommand';
43
- export type { default as ResizeImageCommand } from './imageresize/resizeimagecommand';
44
- export type { default as ImageStyleCommand } from './imagestyle/imagestylecommand';
45
- export type { default as ImageTextAlternativeCommand } from './imagetextalternative/imagetextalternativecommand';
46
- export type { default as UploadImageCommand } from './imageupload/uploadimagecommand';
47
- import './augmentation';
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
7
+ */
8
+ export { default as AutoImage } from './autoimage';
9
+ export { default as Image } from './image';
10
+ export { default as ImageEditing } from './image/imageediting';
11
+ export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils';
12
+ export { default as ImageCaption } from './imagecaption';
13
+ export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting';
14
+ export { default as ImageInsert } from './imageinsert';
15
+ export { default as ImageInsertUI } from './imageinsert/imageinsertui';
16
+ export { default as ImageResize } from './imageresize';
17
+ export { default as ImageResizeButtons } from './imageresize/imageresizebuttons';
18
+ export { default as ImageResizeEditing } from './imageresize/imageresizeediting';
19
+ export { default as ImageResizeHandles } from './imageresize/imageresizehandles';
20
+ export { default as ImageSizeAttributes } from './imagesizeattributes';
21
+ export { default as ImageStyle } from './imagestyle';
22
+ export { default as ImageStyleEditing } from './imagestyle/imagestyleediting';
23
+ export { default as ImageStyleUI } from './imagestyle/imagestyleui';
24
+ export { default as ImageTextAlternative } from './imagetextalternative';
25
+ export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting';
26
+ export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui';
27
+ export { default as ImageToolbar } from './imagetoolbar';
28
+ export { default as ImageUpload } from './imageupload';
29
+ export { default as ImageUploadEditing, type ImageUploadCompleteEvent } from './imageupload/imageuploadediting';
30
+ export { default as ImageUploadProgress } from './imageupload/imageuploadprogress';
31
+ export { default as ImageUploadUI } from './imageupload/imageuploadui';
32
+ export { default as PictureEditing } from './pictureediting';
33
+ export { default as ImageBlock } from './imageblock';
34
+ export { default as ImageInline } from './imageinline';
35
+ export { default as ImageInsertViaUrl } from './imageinsertviaurl';
36
+ export { default as ImageUtils } from './imageutils';
37
+ export { default as ImageBlockEditing } from './image/imageblockediting';
38
+ export { default as ImageCaptionUI } from './imagecaption/imagecaptionui';
39
+ export type { ImageConfig } from './imageconfig';
40
+ export type { default as ImageTypeCommand } from './image/imagetypecommand';
41
+ export type { default as InsertImageCommand } from './image/insertimagecommand';
42
+ export type { default as ReplaceImageSourceCommand } from './image/replaceimagesourcecommand';
43
+ export type { default as ToggleImageCaptionCommand } from './imagecaption/toggleimagecaptioncommand';
44
+ export type { default as ResizeImageCommand } from './imageresize/resizeimagecommand';
45
+ export type { default as ImageStyleCommand } from './imagestyle/imagestylecommand';
46
+ export type { default as ImageTextAlternativeCommand } from './imagetextalternative/imagetextalternativecommand';
47
+ export type { default as UploadImageCommand } from './imageupload/uploadimagecommand';
48
+ import './augmentation';
package/src/index.js CHANGED
@@ -1,38 +1,39 @@
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
7
- */
8
- export { default as AutoImage } from './autoimage';
9
- export { default as Image } from './image';
10
- export { default as ImageEditing } from './image/imageediting';
11
- export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils';
12
- export { default as ImageCaption } from './imagecaption';
13
- export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting';
14
- export { default as ImageInsert } from './imageinsert';
15
- export { default as ImageInsertUI } from './imageinsert/imageinsertui';
16
- export { default as ImageResize } from './imageresize';
17
- export { default as ImageResizeButtons } from './imageresize/imageresizebuttons';
18
- export { default as ImageResizeEditing } from './imageresize/imageresizeediting';
19
- export { default as ImageResizeHandles } from './imageresize/imageresizehandles';
20
- export { default as ImageStyle } from './imagestyle';
21
- export { default as ImageStyleEditing } from './imagestyle/imagestyleediting';
22
- export { default as ImageStyleUI } from './imagestyle/imagestyleui';
23
- export { default as ImageTextAlternative } from './imagetextalternative';
24
- export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting';
25
- export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui';
26
- export { default as ImageToolbar } from './imagetoolbar';
27
- export { default as ImageUpload } from './imageupload';
28
- export { default as ImageUploadEditing } from './imageupload/imageuploadediting';
29
- export { default as ImageUploadProgress } from './imageupload/imageuploadprogress';
30
- export { default as ImageUploadUI } from './imageupload/imageuploadui';
31
- export { default as PictureEditing } from './pictureediting';
32
- export { default as ImageBlock } from './imageblock';
33
- export { default as ImageInline } from './imageinline';
34
- export { default as ImageInsertViaUrl } from './imageinsertviaurl';
35
- export { default as ImageUtils } from './imageutils';
36
- export { default as ImageBlockEditing } from './image/imageblockediting';
37
- export { default as ImageCaptionUI } from './imagecaption/imagecaptionui';
38
- import './augmentation';
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
7
+ */
8
+ export { default as AutoImage } from './autoimage';
9
+ export { default as Image } from './image';
10
+ export { default as ImageEditing } from './image/imageediting';
11
+ export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils';
12
+ export { default as ImageCaption } from './imagecaption';
13
+ export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting';
14
+ export { default as ImageInsert } from './imageinsert';
15
+ export { default as ImageInsertUI } from './imageinsert/imageinsertui';
16
+ export { default as ImageResize } from './imageresize';
17
+ export { default as ImageResizeButtons } from './imageresize/imageresizebuttons';
18
+ export { default as ImageResizeEditing } from './imageresize/imageresizeediting';
19
+ export { default as ImageResizeHandles } from './imageresize/imageresizehandles';
20
+ export { default as ImageSizeAttributes } from './imagesizeattributes';
21
+ export { default as ImageStyle } from './imagestyle';
22
+ export { default as ImageStyleEditing } from './imagestyle/imagestyleediting';
23
+ export { default as ImageStyleUI } from './imagestyle/imagestyleui';
24
+ export { default as ImageTextAlternative } from './imagetextalternative';
25
+ export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting';
26
+ export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui';
27
+ export { default as ImageToolbar } from './imagetoolbar';
28
+ export { default as ImageUpload } from './imageupload';
29
+ export { default as ImageUploadEditing } from './imageupload/imageuploadediting';
30
+ export { default as ImageUploadProgress } from './imageupload/imageuploadprogress';
31
+ export { default as ImageUploadUI } from './imageupload/imageuploadui';
32
+ export { default as PictureEditing } from './pictureediting';
33
+ export { default as ImageBlock } from './imageblock';
34
+ export { default as ImageInline } from './imageinline';
35
+ export { default as ImageInsertViaUrl } from './imageinsertviaurl';
36
+ export { default as ImageUtils } from './imageutils';
37
+ export { default as ImageBlockEditing } from './image/imageblockediting';
38
+ export { default as ImageCaptionUI } from './imagecaption/imagecaptionui';
39
+ import './augmentation';
@@ -1,88 +1,88 @@
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/pictureediting
7
- */
8
- import { Plugin } from 'ckeditor5/src/core';
9
- import ImageEditing from './image/imageediting';
10
- import ImageUtils from './imageutils';
11
- /**
12
- * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
13
- *
14
- * * It enables the `sources` model attribute on `imageBlock` and `imageInline` model elements
15
- * (brought by {@link module:image/imageblock~ImageBlock} and {@link module:image/imageinline~ImageInline}, respectively).
16
- * * It translates the `sources` model element to the view (also: data) structure that may look as follows:
17
- *
18
- * ```html
19
- * <p>Inline image using picture:
20
- * <picture>
21
- * <source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
22
- * <source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
23
- * <!-- Other sources as specified in the "sources" model attribute... -->
24
- * <img src="image.png" alt="An image using picture" />
25
- * </picture>
26
- * </p>
27
- *
28
- * <p>Block image using picture:</p>
29
- * <figure class="image">
30
- * <picture>
31
- * <source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
32
- * <source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
33
- * <!-- Other sources as specified in the "sources" model attribute... -->
34
- * <img src="image.png" alt="An image using picture" />
35
- * </picture>
36
- * <figcaption>Caption of the image</figcaption>
37
- * </figure>
38
- * ```
39
- *
40
- * **Note:** The value of the `sources` {@glink framework/architecture/editing-engine#changing-the-model model attribute}
41
- * in both examples equals:
42
- *
43
- * ```css
44
- * [
45
- * {
46
- * media: '(min-width: 800px)',
47
- * srcset: 'image-large.webp',
48
- * type: 'image/webp'
49
- * },
50
- * {
51
- * media: '(max-width: 800px)',
52
- * srcset: 'image-small.webp',
53
- * type: 'image/webp'
54
- * }
55
- * ]
56
- * ```
57
- *
58
- * * It integrates with the {@link module:image/imageupload~ImageUpload} plugin so images uploaded in the editor
59
- * automatically render using `<picture>` if the {@glink features/images/image-upload/image-upload upload adapter}
60
- * supports image sources and provides neccessary data.
61
- *
62
- * @private
63
- */
64
- export default class PictureEditing extends Plugin {
65
- /**
66
- * @inheritDoc
67
- */
68
- static get requires(): readonly [typeof ImageEditing, typeof ImageUtils];
69
- /**
70
- * @inheritDoc
71
- */
72
- static get pluginName(): "PictureEditing";
73
- /**
74
- * @inheritDoc
75
- */
76
- afterInit(): void;
77
- /**
78
- * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
79
- * and the model `sources` attribute.
80
- */
81
- private _setupConversion;
82
- /**
83
- * Makes it possible for uploaded images to get the `sources` model attribute and the `<picture>...</picture>`
84
- * view structure out-of-the-box if relevant data is provided along the
85
- * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing#event:uploadComplete} event.
86
- */
87
- private _setupImageUploadEditingIntegration;
88
- }
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/pictureediting
7
+ */
8
+ import { Plugin } from 'ckeditor5/src/core';
9
+ import ImageEditing from './image/imageediting';
10
+ import ImageUtils from './imageutils';
11
+ /**
12
+ * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
13
+ *
14
+ * * It enables the `sources` model attribute on `imageBlock` and `imageInline` model elements
15
+ * (brought by {@link module:image/imageblock~ImageBlock} and {@link module:image/imageinline~ImageInline}, respectively).
16
+ * * It translates the `sources` model element to the view (also: data) structure that may look as follows:
17
+ *
18
+ * ```html
19
+ * <p>Inline image using picture:
20
+ * <picture>
21
+ * <source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
22
+ * <source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
23
+ * <!-- Other sources as specified in the "sources" model attribute... -->
24
+ * <img src="image.png" alt="An image using picture" />
25
+ * </picture>
26
+ * </p>
27
+ *
28
+ * <p>Block image using picture:</p>
29
+ * <figure class="image">
30
+ * <picture>
31
+ * <source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
32
+ * <source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
33
+ * <!-- Other sources as specified in the "sources" model attribute... -->
34
+ * <img src="image.png" alt="An image using picture" />
35
+ * </picture>
36
+ * <figcaption>Caption of the image</figcaption>
37
+ * </figure>
38
+ * ```
39
+ *
40
+ * **Note:** The value of the `sources` {@glink framework/architecture/editing-engine#changing-the-model model attribute}
41
+ * in both examples equals:
42
+ *
43
+ * ```css
44
+ * [
45
+ * {
46
+ * media: '(min-width: 800px)',
47
+ * srcset: 'image-large.webp',
48
+ * type: 'image/webp'
49
+ * },
50
+ * {
51
+ * media: '(max-width: 800px)',
52
+ * srcset: 'image-small.webp',
53
+ * type: 'image/webp'
54
+ * }
55
+ * ]
56
+ * ```
57
+ *
58
+ * * It integrates with the {@link module:image/imageupload~ImageUpload} plugin so images uploaded in the editor
59
+ * automatically render using `<picture>` if the {@glink features/images/image-upload/image-upload upload adapter}
60
+ * supports image sources and provides neccessary data.
61
+ *
62
+ * @private
63
+ */
64
+ export default class PictureEditing extends Plugin {
65
+ /**
66
+ * @inheritDoc
67
+ */
68
+ static get requires(): readonly [typeof ImageEditing, typeof ImageUtils];
69
+ /**
70
+ * @inheritDoc
71
+ */
72
+ static get pluginName(): "PictureEditing";
73
+ /**
74
+ * @inheritDoc
75
+ */
76
+ afterInit(): void;
77
+ /**
78
+ * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
79
+ * and the model `sources` attribute.
80
+ */
81
+ private _setupConversion;
82
+ /**
83
+ * Makes it possible for uploaded images to get the `sources` model attribute and the `<picture>...</picture>`
84
+ * view structure out-of-the-box if relevant data is provided along the
85
+ * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing#event:uploadComplete} event.
86
+ */
87
+ private _setupImageUploadEditingIntegration;
88
+ }
@@ -1,130 +1,130 @@
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/pictureediting
7
- */
8
- import { Plugin } from 'ckeditor5/src/core';
9
- import ImageEditing from './image/imageediting';
10
- import ImageUtils from './imageutils';
11
- import { downcastSourcesAttribute, upcastPicture } from './image/converters';
12
- /**
13
- * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
14
- *
15
- * * It enables the `sources` model attribute on `imageBlock` and `imageInline` model elements
16
- * (brought by {@link module:image/imageblock~ImageBlock} and {@link module:image/imageinline~ImageInline}, respectively).
17
- * * It translates the `sources` model element to the view (also: data) structure that may look as follows:
18
- *
19
- * ```html
20
- * <p>Inline image using picture:
21
- * <picture>
22
- * <source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
23
- * <source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
24
- * <!-- Other sources as specified in the "sources" model attribute... -->
25
- * <img src="image.png" alt="An image using picture" />
26
- * </picture>
27
- * </p>
28
- *
29
- * <p>Block image using picture:</p>
30
- * <figure class="image">
31
- * <picture>
32
- * <source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
33
- * <source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
34
- * <!-- Other sources as specified in the "sources" model attribute... -->
35
- * <img src="image.png" alt="An image using picture" />
36
- * </picture>
37
- * <figcaption>Caption of the image</figcaption>
38
- * </figure>
39
- * ```
40
- *
41
- * **Note:** The value of the `sources` {@glink framework/architecture/editing-engine#changing-the-model model attribute}
42
- * in both examples equals:
43
- *
44
- * ```css
45
- * [
46
- * {
47
- * media: '(min-width: 800px)',
48
- * srcset: 'image-large.webp',
49
- * type: 'image/webp'
50
- * },
51
- * {
52
- * media: '(max-width: 800px)',
53
- * srcset: 'image-small.webp',
54
- * type: 'image/webp'
55
- * }
56
- * ]
57
- * ```
58
- *
59
- * * It integrates with the {@link module:image/imageupload~ImageUpload} plugin so images uploaded in the editor
60
- * automatically render using `<picture>` if the {@glink features/images/image-upload/image-upload upload adapter}
61
- * supports image sources and provides neccessary data.
62
- *
63
- * @private
64
- */
65
- export default class PictureEditing extends Plugin {
66
- /**
67
- * @inheritDoc
68
- */
69
- static get requires() {
70
- return [ImageEditing, ImageUtils];
71
- }
72
- /**
73
- * @inheritDoc
74
- */
75
- static get pluginName() {
76
- return 'PictureEditing';
77
- }
78
- /**
79
- * @inheritDoc
80
- */
81
- afterInit() {
82
- const editor = this.editor;
83
- if (editor.plugins.has('ImageBlockEditing')) {
84
- editor.model.schema.extend('imageBlock', {
85
- allowAttributes: ['sources']
86
- });
87
- }
88
- if (editor.plugins.has('ImageInlineEditing')) {
89
- editor.model.schema.extend('imageInline', {
90
- allowAttributes: ['sources']
91
- });
92
- }
93
- this._setupConversion();
94
- this._setupImageUploadEditingIntegration();
95
- }
96
- /**
97
- * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
98
- * and the model `sources` attribute.
99
- */
100
- _setupConversion() {
101
- const editor = this.editor;
102
- const conversion = editor.conversion;
103
- const imageUtils = editor.plugins.get('ImageUtils');
104
- conversion.for('upcast').add(upcastPicture(imageUtils));
105
- conversion.for('downcast').add(downcastSourcesAttribute(imageUtils));
106
- }
107
- /**
108
- * Makes it possible for uploaded images to get the `sources` model attribute and the `<picture>...</picture>`
109
- * view structure out-of-the-box if relevant data is provided along the
110
- * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing#event:uploadComplete} event.
111
- */
112
- _setupImageUploadEditingIntegration() {
113
- const editor = this.editor;
114
- if (!editor.plugins.has('ImageUploadEditing')) {
115
- return;
116
- }
117
- const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
118
- this.listenTo(imageUploadEditing, 'uploadComplete', (evt, { imageElement, data }) => {
119
- const sources = data.sources;
120
- if (!sources) {
121
- return;
122
- }
123
- editor.model.change(writer => {
124
- writer.setAttributes({
125
- sources
126
- }, imageElement);
127
- });
128
- });
129
- }
130
- }
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/pictureediting
7
+ */
8
+ import { Plugin } from 'ckeditor5/src/core';
9
+ import ImageEditing from './image/imageediting';
10
+ import ImageUtils from './imageutils';
11
+ import { downcastSourcesAttribute, upcastPicture } from './image/converters';
12
+ /**
13
+ * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
14
+ *
15
+ * * It enables the `sources` model attribute on `imageBlock` and `imageInline` model elements
16
+ * (brought by {@link module:image/imageblock~ImageBlock} and {@link module:image/imageinline~ImageInline}, respectively).
17
+ * * It translates the `sources` model element to the view (also: data) structure that may look as follows:
18
+ *
19
+ * ```html
20
+ * <p>Inline image using picture:
21
+ * <picture>
22
+ * <source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
23
+ * <source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
24
+ * <!-- Other sources as specified in the "sources" model attribute... -->
25
+ * <img src="image.png" alt="An image using picture" />
26
+ * </picture>
27
+ * </p>
28
+ *
29
+ * <p>Block image using picture:</p>
30
+ * <figure class="image">
31
+ * <picture>
32
+ * <source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
33
+ * <source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
34
+ * <!-- Other sources as specified in the "sources" model attribute... -->
35
+ * <img src="image.png" alt="An image using picture" />
36
+ * </picture>
37
+ * <figcaption>Caption of the image</figcaption>
38
+ * </figure>
39
+ * ```
40
+ *
41
+ * **Note:** The value of the `sources` {@glink framework/architecture/editing-engine#changing-the-model model attribute}
42
+ * in both examples equals:
43
+ *
44
+ * ```css
45
+ * [
46
+ * {
47
+ * media: '(min-width: 800px)',
48
+ * srcset: 'image-large.webp',
49
+ * type: 'image/webp'
50
+ * },
51
+ * {
52
+ * media: '(max-width: 800px)',
53
+ * srcset: 'image-small.webp',
54
+ * type: 'image/webp'
55
+ * }
56
+ * ]
57
+ * ```
58
+ *
59
+ * * It integrates with the {@link module:image/imageupload~ImageUpload} plugin so images uploaded in the editor
60
+ * automatically render using `<picture>` if the {@glink features/images/image-upload/image-upload upload adapter}
61
+ * supports image sources and provides neccessary data.
62
+ *
63
+ * @private
64
+ */
65
+ export default class PictureEditing extends Plugin {
66
+ /**
67
+ * @inheritDoc
68
+ */
69
+ static get requires() {
70
+ return [ImageEditing, ImageUtils];
71
+ }
72
+ /**
73
+ * @inheritDoc
74
+ */
75
+ static get pluginName() {
76
+ return 'PictureEditing';
77
+ }
78
+ /**
79
+ * @inheritDoc
80
+ */
81
+ afterInit() {
82
+ const editor = this.editor;
83
+ if (editor.plugins.has('ImageBlockEditing')) {
84
+ editor.model.schema.extend('imageBlock', {
85
+ allowAttributes: ['sources']
86
+ });
87
+ }
88
+ if (editor.plugins.has('ImageInlineEditing')) {
89
+ editor.model.schema.extend('imageInline', {
90
+ allowAttributes: ['sources']
91
+ });
92
+ }
93
+ this._setupConversion();
94
+ this._setupImageUploadEditingIntegration();
95
+ }
96
+ /**
97
+ * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
98
+ * and the model `sources` attribute.
99
+ */
100
+ _setupConversion() {
101
+ const editor = this.editor;
102
+ const conversion = editor.conversion;
103
+ const imageUtils = editor.plugins.get('ImageUtils');
104
+ conversion.for('upcast').add(upcastPicture(imageUtils));
105
+ conversion.for('downcast').add(downcastSourcesAttribute(imageUtils));
106
+ }
107
+ /**
108
+ * Makes it possible for uploaded images to get the `sources` model attribute and the `<picture>...</picture>`
109
+ * view structure out-of-the-box if relevant data is provided along the
110
+ * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing#event:uploadComplete} event.
111
+ */
112
+ _setupImageUploadEditingIntegration() {
113
+ const editor = this.editor;
114
+ if (!editor.plugins.has('ImageUploadEditing')) {
115
+ return;
116
+ }
117
+ const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
118
+ this.listenTo(imageUploadEditing, 'uploadComplete', (evt, { imageElement, data }) => {
119
+ const sources = data.sources;
120
+ if (!sources) {
121
+ return;
122
+ }
123
+ editor.model.change(writer => {
124
+ writer.setAttributes({
125
+ sources
126
+ }, imageElement);
127
+ });
128
+ });
129
+ }
130
+ }