@ckeditor/ckeditor5-image 29.0.0 → 31.0.0

package/src/imageupload/imageuploadediting.js

@@ -25,7 +25,7 @@ import { createImageTypeRegExp } from './utils';
  * The editing part of the image upload feature. It registers the `'uploadImage'` command
  * and the `imageUpload` command as an aliased name.
  *
- * When an image is uploaded, it fires the {@link ~ImageUploadEditing#event:uploadComplete `uploadComplete` event}
+ * When an image is uploaded, it fires the {@link ~ImageUploadEditing#event:uploadComplete `uploadComplete`} event
  * that allows adding custom attributes to the {@link module:engine/model/element~Element image element}.
  *
  * @extends module:core/plugin~Plugin
@@ -291,7 +291,7 @@ export default class ImageUploadEditing extends Plugin {
 				/* istanbul ignore next */
 				if ( env.isSafari ) {
 					const viewFigure = editor.editing.mapper.toViewElement( imageElement );
-					const viewImg = imageUtils.getViewImageFromWidget( viewFigure );
+					const viewImg = imageUtils.findViewImgElement( viewFigure );
 
 					editor.editing.view.once( 'render', () => {
 						// Early returns just to be safe. There might be some code ran

package/src/imageupload/imageuploadprogress.js

@@ -157,7 +157,7 @@ function _showPlaceholder( imageUtils, placeholder, viewFigure, writer ) {
 		writer.addClass( 'ck-image-upload-placeholder', viewFigure );
 	}
 
-	const viewImg = imageUtils.getViewImageFromWidget( viewFigure );
+	const viewImg = imageUtils.findViewImgElement( viewFigure );
 
 	if ( viewImg.getAttribute( 'src' ) !== placeholder ) {
 		writer.setAttribute( 'src', placeholder, viewImg );
@@ -285,7 +285,7 @@ function _removeUIElement( viewFigure, writer, uniqueProperty ) {
 // @param {module:upload/filerepository~FileLoader} loader
 function _displayLocalImage( imageUtils, viewFigure, writer, loader ) {
 	if ( loader.data ) {
-		const viewImg = imageUtils.getViewImageFromWidget( viewFigure );
+		const viewImg = imageUtils.findViewImgElement( viewFigure );
 
 		writer.setAttribute( 'src', loader.data, viewImg );
 	}

package/src/imageutils.js

@@ -190,7 +190,7 @@ export default class ImageUtils extends Plugin {
 		writer.setCustomProperty( 'image', true, viewElement );
 
 		const labelCreator = () => {
-			const imgElement = this.getViewImageFromWidget( viewElement );
+			const imgElement = this.findViewImgElement( viewElement );
 			const altText = imgElement.getAttribute( 'alt' );
 
 			return altText ? `${ altText } ${ label }` : label;
@@ -231,33 +231,25 @@ export default class ImageUtils extends Plugin {
 	}
 
 	/**
-	 * Get view `<img>` element from the view widget (`<figure>`).
+	 * Get the view `<img>` from another view element, e.g. a widget (`<figure class="image">`), a link (`<a>`).
 	 *
-	 * Assuming that image is always a first child of a widget (ie. `figureView.getChild( 0 )`) is unsafe as other features might
-	 * inject their own elements to the widget.
+	 * The `<img>` can be located deep in other elements, so this helper performs a deep tree search.
 	 *
-	 * The `<img>` can be wrapped to other elements, e.g. `<a>`. Nested check required.
-	 *
-	 * @protected
 	 * @param {module:engine/view/element~Element} figureView
 	 * @returns {module:engine/view/element~Element}
 	 */
-	getViewImageFromWidget( figureView ) {
+	findViewImgElement( figureView ) {
 		if ( this.isInlineImageView( figureView ) ) {
 			return figureView;
 		}
 
-		const figureChildren = [];
+		const editingView = this.editor.editing.view;
 
-		for ( const figureChild of figureView.getChildren() ) {
-			figureChildren.push( figureChild );
-
-			if ( figureChild.is( 'element' ) ) {
-				figureChildren.push( ...figureChild.getChildren() );
+		for ( const { item } of editingView.createRangeIn( figureView ) ) {
+			if ( this.isInlineImageView( item ) ) {
+				return item;
 			}
 		}
-
-		return figureChildren.find( this.isInlineImageView );
 	}
 }
 

package/src/pictureediting.js

@@ -0,0 +1,149 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module image/pictureediting
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import ImageEditing from './image/imageediting';
+import ImageUtils from './imageutils';
+import {
+	downcastSourcesAttribute,
+	upcastPicture
+} from './image/converters';
+
+/**
+ * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
+ *
+ * * It enables the `sources` model attribute on `imageBlock` and `imageInline` model elements
+ * (brought by {@link module:image/imageblock~ImageBlock} and {@link module:image/imageinline~ImageInline}, respectively).
+ * * It translates the `sources` model element to the view (also: data) structure that may look as follows:
+ *
+ *		<p>Inline image using picture:
+ *			<picture>
+ *				<source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
+ *				<source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
+ *				<!-- Other sources as specified in the "sources" model attribute... -->
+ *				<img src="image.png" alt="An image using picture" />
+ *			</picture>
+ *		</p>
+ *
+ *		<p>Block image using picture:</p>
+ *		<figure class="image">
+ *			<picture>
+ *				<source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
+ *				<source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
+ *				<!-- Other sources as specified in the "sources" model attribute... -->
+ *				<img src="image.png" alt="An image using picture" />
+ *			</picture>
+ *			<figcaption>Caption of the image</figcaption>
+ *		</figure>
+ *
+ *	**Note:** The value of the `sources` {@glink framework/guides/architecture/editing-engine#changing-the-model model attribute}
+ * 	in both examples equals:
+ *
+ *		[
+ *			{
+ *				media: '(min-width: 800px)',
+ *				srcset: 'image-large.webp',
+ *				type: 'image/webp'
+ *			},
+ *			{
+ *				media: '(max-width: 800px)',
+ *				srcset: 'image-small.webp',
+ *				type: 'image/webp'
+ *			}
+ * 		]
+ *
+ * * It integrates with the {@link module:image/imageupload~ImageUpload} plugin so images uploaded in the editor
+ * automatically render using `<picture>` if the {@glink features/images/image-upload/image-upload upload adapter}
+ * supports image sources and provides neccessary data.
+ *
+ * @private
+ * @extends module:core/plugin~Plugin
+ */
+export default class PictureEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageEditing, ImageUtils ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'PictureEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	afterInit() {
+		const editor = this.editor;
+
+		if ( editor.plugins.has( 'ImageBlockEditing' ) ) {
+			editor.model.schema.extend( 'imageBlock', {
+				allowAttributes: [ 'sources' ]
+			} );
+		}
+
+		if ( editor.plugins.has( 'ImageInlineEditing' ) ) {
+			editor.model.schema.extend( 'imageInline', {
+				allowAttributes: [ 'sources' ]
+			} );
+		}
+
+		this._setupConversion();
+		this._setupImageUploadEditingIntegration();
+	}
+
+	/**
+	 * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
+	 * and the model `sources` attribute.
+	 *
+	 * @private
+	 */
+	_setupConversion() {
+		const editor = this.editor;
+		const conversion = editor.conversion;
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
+
+		conversion.for( 'upcast' ).add( upcastPicture( imageUtils ) );
+		conversion.for( 'downcast' ).add( downcastSourcesAttribute( imageUtils ) );
+	}
+
+	/**
+	 * Makes it possible for uploaded images to get the `sources` model attribute and the `<picture>...</picture>`
+	 * view structure out-of-the-box if relevant data is provided along the
+	 * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing#event:uploadComplete} event.
+	 *
+	 * @private
+	 */
+	_setupImageUploadEditingIntegration() {
+		const editor = this.editor;
+
+		if ( !editor.plugins.has( 'ImageUploadEditing' ) ) {
+			return;
+		}
+
+		this.listenTo( editor.plugins.get( 'ImageUploadEditing' ), 'uploadComplete', ( evt, { imageElement, data } ) => {
+			const sources = data.sources;
+
+			if ( !sources ) {
+				return;
+			}
+
+			editor.model.change( writer => {
+				writer.setAttributes( {
+					sources
+				}, imageElement );
+			} );
+		} );
+	}
+}

package/theme/image.css

@@ -46,6 +46,13 @@
 		/* This is required by Safari to resize images in a sensible way. Without this, the browser breaks the ratio. */
 		align-items: flex-start;
 
+		/* When the picture is present it must act as a flex container to let the img resize properly */
+		& picture {
+			display: flex;
+		}
+
+		/* When the picture is present, it must act like a resizable img. */
+		& picture,
 		& img {
 			/* This is necessary for the img to span the entire .image-inline wrapper and to resize properly. */
 			flex-grow: 1;