UNPKG

3.25 kBTypeScriptView Raw
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 */
8import { Plugin } from 'ckeditor5/src/core';
9import ImageEditing from './image/imageediting';
10import 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 */
64export 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}