@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.
- package/build/image.js +1 -1
- package/build/image.js.map +1 -0
- package/build/translations/pt-br.js +1 -1
- package/ckeditor5-metadata.json +12 -0
- package/lang/translations/pt-br.po +1 -1
- package/package.json +3 -3
- package/src/augmentation.d.ts +56 -55
- package/src/augmentation.js +5 -5
- package/src/autoimage.d.ts +52 -52
- package/src/autoimage.js +132 -132
- package/src/image/converters.d.ts +66 -66
- package/src/image/converters.js +232 -242
- package/src/image/imageblockediting.d.ts +58 -55
- package/src/image/imageblockediting.js +152 -136
- package/src/image/imageediting.d.ts +30 -30
- package/src/image/imageediting.js +63 -74
- package/src/image/imageinlineediting.d.ts +59 -56
- package/src/image/imageinlineediting.js +176 -160
- package/src/image/imageloadobserver.d.ts +48 -48
- package/src/image/imageloadobserver.js +52 -52
- package/src/image/imagetypecommand.d.ts +44 -40
- package/src/image/imagetypecommand.js +80 -77
- package/src/image/insertimagecommand.d.ts +66 -66
- package/src/image/insertimagecommand.js +120 -120
- package/src/image/replaceimagesourcecommand.d.ts +34 -34
- package/src/image/replaceimagesourcecommand.js +44 -44
- package/src/image/ui/utils.d.ts +25 -25
- package/src/image/ui/utils.js +44 -44
- package/src/image/utils.d.ts +64 -52
- package/src/image/utils.js +121 -100
- package/src/image.d.ts +34 -34
- package/src/image.js +38 -38
- package/src/imageblock.d.ts +33 -33
- package/src/imageblock.js +37 -37
- package/src/imagecaption/imagecaptionediting.d.ts +89 -89
- package/src/imagecaption/imagecaptionediting.js +225 -225
- package/src/imagecaption/imagecaptionui.d.ts +26 -26
- package/src/imagecaption/imagecaptionui.js +61 -61
- package/src/imagecaption/imagecaptionutils.d.ts +38 -38
- package/src/imagecaption/imagecaptionutils.js +62 -62
- package/src/imagecaption/toggleimagecaptioncommand.d.ts +66 -66
- package/src/imagecaption/toggleimagecaptioncommand.js +138 -138
- package/src/imagecaption.d.ts +26 -26
- package/src/imagecaption.js +30 -30
- package/src/imageconfig.d.ts +713 -713
- package/src/imageconfig.js +5 -5
- package/src/imageinline.d.ts +33 -33
- package/src/imageinline.js +37 -37
- package/src/imageinsert/imageinsertui.d.ts +44 -44
- package/src/imageinsert/imageinsertui.js +141 -141
- package/src/imageinsert/ui/imageinsertformrowview.d.ts +61 -61
- package/src/imageinsert/ui/imageinsertformrowview.js +54 -54
- package/src/imageinsert/ui/imageinsertpanelview.d.ts +106 -106
- package/src/imageinsert/ui/imageinsertpanelview.js +161 -161
- package/src/imageinsert/utils.d.ts +25 -25
- package/src/imageinsert/utils.js +58 -58
- package/src/imageinsert.d.ts +33 -33
- package/src/imageinsert.js +37 -37
- package/src/imageinsertviaurl.d.ts +30 -30
- package/src/imageinsertviaurl.js +34 -34
- package/src/imageresize/imageresizebuttons.d.ts +67 -67
- package/src/imageresize/imageresizebuttons.js +217 -217
- package/src/imageresize/imageresizeediting.d.ts +37 -37
- package/src/imageresize/imageresizeediting.js +165 -114
- package/src/imageresize/imageresizehandles.d.ts +31 -30
- package/src/imageresize/imageresizehandles.js +114 -107
- package/src/imageresize/resizeimagecommand.d.ts +42 -42
- package/src/imageresize/resizeimagecommand.js +63 -61
- package/src/imageresize.d.ts +27 -27
- package/src/imageresize.js +31 -31
- package/src/imagesizeattributes.d.ts +34 -0
- package/src/imagesizeattributes.js +143 -0
- package/src/imagestyle/converters.d.ts +24 -24
- package/src/imagestyle/converters.js +79 -79
- package/src/imagestyle/imagestylecommand.d.ts +68 -65
- package/src/imagestyle/imagestylecommand.js +107 -101
- package/src/imagestyle/imagestyleediting.d.ts +50 -50
- package/src/imagestyle/imagestyleediting.js +108 -108
- package/src/imagestyle/imagestyleui.d.ts +56 -56
- package/src/imagestyle/imagestyleui.js +192 -192
- package/src/imagestyle/utils.d.ts +101 -101
- package/src/imagestyle/utils.js +329 -329
- package/src/imagestyle.d.ts +32 -32
- package/src/imagestyle.js +36 -36
- package/src/imagetextalternative/imagetextalternativecommand.d.ts +34 -34
- package/src/imagetextalternative/imagetextalternativecommand.js +44 -44
- package/src/imagetextalternative/imagetextalternativeediting.d.ts +28 -28
- package/src/imagetextalternative/imagetextalternativeediting.js +35 -35
- package/src/imagetextalternative/imagetextalternativeui.d.ts +68 -68
- package/src/imagetextalternative/imagetextalternativeui.js +173 -173
- package/src/imagetextalternative/ui/textalternativeformview.d.ts +72 -72
- package/src/imagetextalternative/ui/textalternativeformview.js +121 -121
- package/src/imagetextalternative.d.ts +29 -29
- package/src/imagetextalternative.js +33 -33
- package/src/imagetoolbar.d.ts +35 -35
- package/src/imagetoolbar.js +57 -57
- package/src/imageupload/imageuploadediting.d.ts +111 -111
- package/src/imageupload/imageuploadediting.js +337 -335
- package/src/imageupload/imageuploadprogress.d.ts +42 -42
- package/src/imageupload/imageuploadprogress.js +211 -211
- package/src/imageupload/imageuploadui.d.ts +23 -23
- package/src/imageupload/imageuploadui.js +57 -57
- package/src/imageupload/uploadimagecommand.d.ts +60 -60
- package/src/imageupload/uploadimagecommand.js +100 -100
- package/src/imageupload/utils.d.ts +33 -33
- package/src/imageupload/utils.js +112 -112
- package/src/imageupload.d.ts +32 -32
- package/src/imageupload.js +36 -36
- package/src/imageutils.d.ts +125 -102
- package/src/imageutils.js +306 -248
- package/src/index.d.ts +48 -47
- package/src/index.js +39 -38
- package/src/pictureediting.d.ts +88 -88
- package/src/pictureediting.js +130 -130
- package/theme/image.css +38 -11
- 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
|
|
21
|
-
export { default as
|
|
22
|
-
export { default as
|
|
23
|
-
export { default as
|
|
24
|
-
export { default as
|
|
25
|
-
export { default as
|
|
26
|
-
export { default as
|
|
27
|
-
export { default as
|
|
28
|
-
export { default as
|
|
29
|
-
export { default as
|
|
30
|
-
export { default as
|
|
31
|
-
export { default as
|
|
32
|
-
export { default as
|
|
33
|
-
export { default as
|
|
34
|
-
export { default as
|
|
35
|
-
export { default as
|
|
36
|
-
export { default as
|
|
37
|
-
export { default as
|
|
38
|
-
export
|
|
39
|
-
export type {
|
|
40
|
-
export type { default as
|
|
41
|
-
export type { default as
|
|
42
|
-
export type { default as
|
|
43
|
-
export type { default as
|
|
44
|
-
export type { default as
|
|
45
|
-
export type { default as
|
|
46
|
-
export type { default as
|
|
47
|
-
|
|
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
|
|
21
|
-
export { default as
|
|
22
|
-
export { default as
|
|
23
|
-
export { default as
|
|
24
|
-
export { default as
|
|
25
|
-
export { default as
|
|
26
|
-
export { default as
|
|
27
|
-
export { default as
|
|
28
|
-
export { default as
|
|
29
|
-
export { default as
|
|
30
|
-
export { default as
|
|
31
|
-
export { default as
|
|
32
|
-
export { default as
|
|
33
|
-
export { default as
|
|
34
|
-
export { default as
|
|
35
|
-
export { default as
|
|
36
|
-
export { default as
|
|
37
|
-
export { default as
|
|
38
|
-
|
|
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';
|
package/src/pictureediting.d.ts
CHANGED
|
@@ -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
|
+
}
|
package/src/pictureediting.js
CHANGED
|
@@ -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
|
+
}
|