@ckeditor/ckeditor5-image 29.0.0 → 31.0.0

package/package.json

@@ -1,49 +1,50 @@
 {
   "name": "@ckeditor/ckeditor5-image",
-  "version": "29.0.0",
+  "version": "31.0.0",
   "description": "Image feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
     "ckeditor5",
     "ckeditor 5",
     "ckeditor5-feature",
-    "ckeditor5-plugin"
+    "ckeditor5-plugin",
+    "ckeditor5-dll"
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^29.0.0",
-    "ckeditor5": "^29.0.0",
+    "@ckeditor/ckeditor5-ui": "^31.0.0",
+    "ckeditor5": "^31.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-adapter-ckfinder": "^29.0.0",
-    "@ckeditor/ckeditor5-autoformat": "^29.0.0",
-    "@ckeditor/ckeditor5-basic-styles": "^29.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^29.0.0",
-    "@ckeditor/ckeditor5-ckfinder": "^29.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^29.0.0",
-    "@ckeditor/ckeditor5-cloud-services": "^29.0.0",
-    "@ckeditor/ckeditor5-core": "^29.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^25.0.0",
-    "@ckeditor/ckeditor5-easy-image": "^29.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^29.0.0",
-    "@ckeditor/ckeditor5-engine": "^29.0.0",
-    "@ckeditor/ckeditor5-enter": "^29.0.0",
-    "@ckeditor/ckeditor5-essentials": "^29.0.0",
-    "@ckeditor/ckeditor5-heading": "^29.0.0",
-    "@ckeditor/ckeditor5-html-embed": "^29.0.0",
-    "@ckeditor/ckeditor5-indent": "^29.0.0",
-    "@ckeditor/ckeditor5-link": "^29.0.0",
-    "@ckeditor/ckeditor5-list": "^29.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^29.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^29.0.0",
-    "@ckeditor/ckeditor5-table": "^29.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^29.0.0",
-    "@ckeditor/ckeditor5-typing": "^29.0.0",
-    "@ckeditor/ckeditor5-undo": "^29.0.0",
-    "@ckeditor/ckeditor5-upload": "^29.0.0",
-    "@ckeditor/ckeditor5-utils": "^29.0.0",
-    "@ckeditor/ckeditor5-widget": "^29.0.0",
+    "@ckeditor/ckeditor5-adapter-ckfinder": "^31.0.0",
+    "@ckeditor/ckeditor5-autoformat": "^31.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^31.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^31.0.0",
+    "@ckeditor/ckeditor5-ckfinder": "^31.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^31.0.0",
+    "@ckeditor/ckeditor5-cloud-services": "^31.0.0",
+    "@ckeditor/ckeditor5-core": "^31.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^25.4.0",
+    "@ckeditor/ckeditor5-easy-image": "^31.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^31.0.0",
+    "@ckeditor/ckeditor5-engine": "^31.0.0",
+    "@ckeditor/ckeditor5-enter": "^31.0.0",
+    "@ckeditor/ckeditor5-essentials": "^31.0.0",
+    "@ckeditor/ckeditor5-heading": "^31.0.0",
+    "@ckeditor/ckeditor5-html-embed": "^31.0.0",
+    "@ckeditor/ckeditor5-indent": "^31.0.0",
+    "@ckeditor/ckeditor5-link": "^31.0.0",
+    "@ckeditor/ckeditor5-list": "^31.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^31.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^31.0.0",
+    "@ckeditor/ckeditor5-table": "^31.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
+    "@ckeditor/ckeditor5-typing": "^31.0.0",
+    "@ckeditor/ckeditor5-undo": "^31.0.0",
+    "@ckeditor/ckeditor5-upload": "^31.0.0",
+    "@ckeditor/ckeditor5-utils": "^31.0.0",
+    "@ckeditor/ckeditor5-widget": "^31.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },
@@ -64,7 +65,8 @@
     "lang",
     "src",
     "theme",
-    "build"
+    "build",
+    "ckeditor5-metadata.json"
   ],
   "scripts": {
     "dll:build": "webpack"

package/src/autoimage.js

@@ -11,6 +11,7 @@ import { Plugin } from 'ckeditor5/src/core';
 import { Clipboard } from 'ckeditor5/src/clipboard';
 import { LivePosition, LiveRange } from 'ckeditor5/src/engine';
 import { Undo } from 'ckeditor5/src/undo';
+import { Delete } from 'ckeditor5/src/typing';
 import { global } from 'ckeditor5/src/utils';
 
 import ImageUtils from './imageutils';
@@ -32,7 +33,7 @@ export default class AutoImage extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ Clipboard, ImageUtils, Undo ];
+		return [ Clipboard, ImageUtils, Undo, Delete ];
 	}
 
 	/**
@@ -173,6 +174,8 @@ export default class AutoImage extends Plugin {
 				this._positionToInsert.detach();
 				this._positionToInsert = null;
 			} );
+
+			editor.plugins.get( 'Delete' ).requestUndoOnBackspace();
 		}, 100 );
 	}
 }

package/src/image/converters.js

@@ -21,10 +21,11 @@ import { first } from 'ckeditor5/src/utils';
  * The entire content of the `<figure>` element except the first `<img>` is being converted as children
  * of the `<imageBlock>` model element.
  *
+ * @protected
  * @param {module:image/imageutils~ImageUtils} imageUtils
  * @returns {Function}
  */
-export function viewFigureToModel( imageUtils ) {
+export function upcastImageFigure( imageUtils ) {
 	return dispatcher => {
 		dispatcher.on( 'element:figure', converter );
 	};
@@ -36,10 +37,10 @@ export function viewFigureToModel( imageUtils ) {
 		}
 
 		// Find an image element inside the figure element.
-		const viewImage = imageUtils.getViewImageFromWidget( data.viewItem );
+		const viewImage = imageUtils.findViewImgElement( data.viewItem );
 
-		// Do not convert if image element is absent, is missing src attribute or was already converted.
-		if ( !viewImage || !viewImage.hasAttribute( 'src' ) || !conversionApi.consumable.test( viewImage, { name: true } ) ) {
+		// Do not convert if image element is absent or was already converted.
+		if ( !viewImage || !conversionApi.consumable.test( viewImage, { name: true } ) ) {
 			return;
 		}
 
@@ -54,6 +55,9 @@ export function viewFigureToModel( imageUtils ) {
 			return;
 		}
 
+		// Consume the figure to prevent other converters from processing it again.
+		conversionApi.consumable.consume( data.viewItem, { name: true, classes: 'image' } );
+
 		// Convert rest of the figure element's children as an image children.
 		conversionApi.convertChildren( data.viewItem, modelImage );
 
@@ -61,14 +65,108 @@ export function viewFigureToModel( imageUtils ) {
 	}
 }
 
+/**
+ * Returns a function that converts the image view representation:
+ *
+ *		<picture><source ... /><source ... />...<img ... /></picture>
+ *
+ * to the model representation as the `sources` attribute:
+ *
+ *		<image[Block|Inline] ... sources="..."></image[Block|Inline]>
+ *
+ * @protected
+ * @param {module:image/imageutils~ImageUtils} imageUtils
+ * @returns {Function}
+ */
+export function upcastPicture( imageUtils ) {
+	const sourceAttributeNames = [ 'srcset', 'media', 'type' ];
+
+	return dispatcher => {
+		dispatcher.on( 'element:picture', converter );
+	};
+
+	function converter( evt, data, conversionApi ) {
+		const pictureViewElement = data.viewItem;
+
+		// Do not convert <picture> if already consumed.
+		if ( !conversionApi.consumable.test( pictureViewElement, { name: true } ) ) {
+			return;
+		}
+
+		const sources = new Map();
+
+		// Collect all <source /> elements attribute values.
+		for ( const childSourceElement of pictureViewElement.getChildren() ) {
+			if ( childSourceElement.is( 'element', 'source' ) ) {
+				const attributes = {};
+
+				for ( const name of sourceAttributeNames ) {
+					if ( childSourceElement.hasAttribute( name ) ) {
+						// Don't collect <source /> attribute if already consumed somewhere else.
+						if ( conversionApi.consumable.test( childSourceElement, { attributes: name } ) ) {
+							attributes[ name ] = childSourceElement.getAttribute( name );
+						}
+					}
+				}
+
+				if ( Object.keys( attributes ).length ) {
+					sources.set( childSourceElement, attributes );
+				}
+			}
+		}
+
+		const imgViewElement = imageUtils.findViewImgElement( pictureViewElement );
+
+		// Don't convert when a picture has no <img/> inside (it is broken).
+		if ( !imgViewElement ) {
+			return;
+		}
+
+		let modelImage = data.modelCursor.parent;
+
+		// - In case of an inline image (cursor parent in a <paragraph>), the <img/> must be converted right away
+		// because no converter handled it yet and otherwise there would be no model element to set the sources attribute on.
+		// - In case of a block image, the <figure class="image"> converter (in ImageBlockEditing) converts the
+		// <img/> right away on its own and the modelCursor is already inside an imageBlock and there's nothing special
+		// to do here.
+		if ( !modelImage.is( 'element', 'imageBlock' ) ) {
+			const conversionResult = conversionApi.convertItem( imgViewElement, data.modelCursor );
+
+			// Set image range as conversion result.
+			data.modelRange = conversionResult.modelRange;
+
+			// Continue conversion where image conversion ends.
+			data.modelCursor = conversionResult.modelCursor;
+
+			modelImage = first( conversionResult.modelRange.getItems() );
+		}
+
+		conversionApi.consumable.consume( pictureViewElement, { name: true } );
+
+		// Consume only these <source/> attributes that were actually collected and will be passed on
+		// to the image model element.
+		for ( const [ sourceElement, attributes ] of sources ) {
+			conversionApi.consumable.consume( sourceElement, { attributes: Object.keys( attributes ) } );
+		}
+
+		if ( sources.size ) {
+			conversionApi.writer.setAttribute( 'sources', Array.from( sources.values() ), modelImage );
+		}
+
+		// Convert rest of the <picture> children as an image children. Other converters may want to consume them.
+		conversionApi.convertChildren( pictureViewElement, modelImage );
+	}
+}
+
 /**
  * Converter used to convert the `srcset` model image attribute to the `srcset`, `sizes` and `width` attributes in the view.
  *
+ * @protected
  * @param {module:image/imageutils~ImageUtils} imageUtils
  * @param {'imageBlock'|'imageInline'} imageType The type of the image.
  * @returns {Function}
  */
-export function srcsetAttributeConverter( imageUtils, imageType ) {
+export function downcastSrcsetAttribute( imageUtils, imageType ) {
 	return dispatcher => {
 		dispatcher.on( `attribute:srcset:${ imageType }`, converter );
 	};
@@ -80,7 +178,7 @@ export function srcsetAttributeConverter( imageUtils, imageType ) {
 
 		const writer = conversionApi.writer;
 		const element = conversionApi.mapper.toViewElement( data.item );
-		const img = imageUtils.getViewImageFromWidget( element );
+		const img = imageUtils.findViewImgElement( element );
 
 		if ( data.attributeNewValue === null ) {
 			const srcset = data.attributeOldValue;
@@ -109,15 +207,82 @@ export function srcsetAttributeConverter( imageUtils, imageType ) {
 	}
 }
 
+/**
+ * Converts the `source` model attribute to the `<picture><source /><source />...<img /></picture>`
+ * view structure.
+ *
+ * @protected
+ * @param {module:image/imageutils~ImageUtils} imageUtils
+ * @returns {Function}
+ */
+export function downcastSourcesAttribute( imageUtils ) {
+	return dispatcher => {
+		dispatcher.on( 'attribute:sources:imageBlock', converter );
+		dispatcher.on( 'attribute:sources:imageInline', converter );
+	};
+
+	function converter( evt, data, conversionApi ) {
+		if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+			return;
+		}
+
+		const viewWriter = conversionApi.writer;
+		const element = conversionApi.mapper.toViewElement( data.item );
+		const imgElement = imageUtils.findViewImgElement( element );
+
+		if ( data.attributeNewValue && data.attributeNewValue.length ) {
+			// Make sure <picture> does not break attribute elements, for instance <a> in linked images.
+			const pictureElement = viewWriter.createContainerElement( 'picture', {}, { isAllowedInsideAttributeElement: true } );
+
+			for ( const sourceAttributes of data.attributeNewValue ) {
+				const sourceElement = viewWriter.createEmptyElement( 'source', sourceAttributes );
+
+				viewWriter.insert( viewWriter.createPositionAt( pictureElement, 'end' ), sourceElement );
+			}
+
+			// Collect all wrapping attribute elements.
+			const attributeElements = [];
+			let viewElement = imgElement.parent;
+
+			while ( viewElement && viewElement.is( 'attributeElement' ) ) {
+				const parentElement = viewElement.parent;
+
+				viewWriter.unwrap( viewWriter.createRangeOn( imgElement ), viewElement );
+
+				attributeElements.unshift( viewElement );
+				viewElement = parentElement;
+			}
+
+			// Insert the picture and move img into it.
+			viewWriter.insert( viewWriter.createPositionBefore( imgElement ), pictureElement );
+			viewWriter.move( viewWriter.createRangeOn( imgElement ), viewWriter.createPositionAt( pictureElement, 'end' ) );
+
+			// Apply collected attribute elements over the new picture element.
+			for ( const attributeElement of attributeElements ) {
+				viewWriter.wrap( viewWriter.createRangeOn( pictureElement ), attributeElement );
+			}
+		}
+		// Both setting "sources" to an empty array and removing the attribute should unwrap the <img />.
+		// Unwrap once if the latter followed the former, though.
+		else if ( imgElement.parent.is( 'element', 'picture' ) ) {
+			const pictureElement = imgElement.parent;
+
+			viewWriter.move( viewWriter.createRangeOn( imgElement ), viewWriter.createPositionBefore( pictureElement ) );
+			viewWriter.remove( pictureElement );
+		}
+	}
+}
+
 /**
  * Converter used to convert a given image attribute from the model to the view.
  *
+ * @protected
  * @param {module:image/imageutils~ImageUtils} imageUtils
  * @param {'imageBlock'|'imageInline'} imageType The type of the image.
  * @param {String} attributeKey The name of the attribute to convert.
  * @returns {Function}
  */
-export function modelToViewAttributeConverter( imageUtils, imageType, attributeKey ) {
+export function downcastImageAttribute( imageUtils, imageType, attributeKey ) {
 	return dispatcher => {
 		dispatcher.on( `attribute:${ attributeKey }:${ imageType }`, converter );
 	};
@@ -129,8 +294,9 @@ export function modelToViewAttributeConverter( imageUtils, imageType, attributeK
 
 		const viewWriter = conversionApi.writer;
 		const element = conversionApi.mapper.toViewElement( data.item );
-		const img = imageUtils.getViewImageFromWidget( element );
+		const img = imageUtils.findViewImgElement( element );
 
 		viewWriter.setAttribute( data.attributeKey, data.attributeNewValue || '', img );
 	}
 }
+

package/src/image/imageblockediting.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -11,13 +11,17 @@ import { Plugin } from 'ckeditor5/src/core';
 import { ClipboardPipeline } from 'ckeditor5/src/clipboard';
 import { UpcastWriter } from 'ckeditor5/src/engine';
 
-import { modelToViewAttributeConverter, srcsetAttributeConverter, viewFigureToModel } from './converters';
+import {
+	downcastImageAttribute,
+	downcastSrcsetAttribute,
+	upcastImageFigure
+} from './converters';
 
 import ImageEditing from './imageediting';
 import ImageTypeCommand from './imagetypecommand';
 import ImageUtils from '../imageutils';
 import {
-	getImageTypeMatcher,
+	getImgViewElementMatcher,
 	createImageViewElement,
 	determineImageTypeForInsertionAtSelection
 } from '../image/utils';
@@ -100,17 +104,20 @@ export default class ImageBlockEditing extends Plugin {
 			} );
 
 		conversion.for( 'downcast' )
-			.add( modelToViewAttributeConverter( imageUtils, 'imageBlock', 'src' ) )
-			.add( modelToViewAttributeConverter( imageUtils, 'imageBlock', 'alt' ) )
-			.add( srcsetAttributeConverter( imageUtils, 'imageBlock' ) );
+			.add( downcastImageAttribute( imageUtils, 'imageBlock', 'src' ) )
+			.add( downcastImageAttribute( imageUtils, 'imageBlock', 'alt' ) )
+			.add( downcastSrcsetAttribute( imageUtils, 'imageBlock' ) );
 
 		// More image related upcasts are in 'ImageEditing' plugin.
 		conversion.for( 'upcast' )
 			.elementToElement( {
-				view: getImageTypeMatcher( editor, 'imageBlock' ),
-				model: ( viewImage, { writer } ) => writer.createElement( 'imageBlock', { src: viewImage.getAttribute( 'src' ) } )
+				view: getImgViewElementMatcher( editor, 'imageBlock' ),
+				model: ( viewImage, { writer } ) => writer.createElement(
+					'imageBlock',
+					viewImage.hasAttribute( 'src' ) ? { src: viewImage.getAttribute( 'src' ) } : null
+				)
 			} )
-			.add( viewFigureToModel( imageUtils ) );
+			.add( upcastImageFigure( imageUtils ) );
 	}
 
 	/**

package/src/image/imageinlineediting.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -11,13 +11,16 @@ import { Plugin } from 'ckeditor5/src/core';
 import { ClipboardPipeline } from 'ckeditor5/src/clipboard';
 import { UpcastWriter } from 'ckeditor5/src/engine';
 
-import { modelToViewAttributeConverter, srcsetAttributeConverter } from './converters';
+import {
+	downcastImageAttribute,
+	downcastSrcsetAttribute
+} from './converters';
 
 import ImageEditing from './imageediting';
 import ImageTypeCommand from './imagetypecommand';
 import ImageUtils from '../imageutils';
 import {
-	getImageTypeMatcher,
+	getImgViewElementMatcher,
 	createImageViewElement,
 	determineImageTypeForInsertionAtSelection
 } from '../image/utils';
@@ -109,15 +112,18 @@ export default class ImageInlineEditing extends Plugin {
 			} );
 
 		conversion.for( 'downcast' )
-			.add( modelToViewAttributeConverter( imageUtils, 'imageInline', 'src' ) )
-			.add( modelToViewAttributeConverter( imageUtils, 'imageInline', 'alt' ) )
-			.add( srcsetAttributeConverter( imageUtils, 'imageInline' ) );
+			.add( downcastImageAttribute( imageUtils, 'imageInline', 'src' ) )
+			.add( downcastImageAttribute( imageUtils, 'imageInline', 'alt' ) )
+			.add( downcastSrcsetAttribute( imageUtils, 'imageInline' ) );
 
 		// More image related upcasts are in 'ImageEditing' plugin.
 		conversion.for( 'upcast' )
 			.elementToElement( {
-				view: getImageTypeMatcher( editor, 'imageInline' ),
-				model: ( viewImage, { writer } ) => writer.createElement( 'imageInline', { src: viewImage.getAttribute( 'src' ) } )
+				view: getImgViewElementMatcher( editor, 'imageInline' ),
+				model: ( viewImage, { writer } ) => writer.createElement(
+					'imageInline',
+					viewImage.hasAttribute( 'src' ) ? { src: viewImage.getAttribute( 'src' ) } : null
+				)
 			} );
 	}
 
@@ -185,7 +191,7 @@ export default class ImageInlineEditing extends Plugin {
 						Array.from( blockViewImage.getAttributes() )
 							.forEach( attribute => writer.setAttribute(
 								...attribute,
-								imageUtils.getViewImageFromWidget( blockViewImage )
+								imageUtils.findViewImgElement( blockViewImage )
 							) );
 
 						return blockViewImage.getChild( 0 );

package/src/image/imagetypecommand.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/image/insertimagecommand.js

@@ -31,6 +31,15 @@ import { logWarning, toArray } from 'ckeditor5/src/utils';
  *			]
  *		} );
  *
+ * If you want to take the full control over the process, you can specify individual model attributes:
+ *
+ *		editor.execute( 'insertImage', {
+ *			source:  [
+ *				{ src: 'path/to/image.jpg', alt: 'First alt text' },
+ *				{ src: 'path/to/other-image.jpg', alt: 'Second alt text', customAttribute: 'My attribute value' }
+ *			]
+ *		} );
+ *
  * @extends module:core/command~Command
  */
 export default class InsertImageCommand extends Command {
@@ -79,10 +88,11 @@ export default class InsertImageCommand extends Command {
 	 *
 	 * @fires execute
 	 * @param {Object} options Options for the executed command.
-	 * @param {String|Array.<String>} options.source The image source or an array of image sources to insert.
+	 * @param {String|Array.<String>|Array.<Object>} options.source The image source or an array of image sources to insert.
+	 * See the documentation of the command to learn more about accepted formats.
 	 */
 	execute( options ) {
-		const sources = toArray( options.source );
+		const sourceDefinitions = toArray( options.source );
 		const selection = this.editor.model.document.selection;
 		const imageUtils = this.editor.plugins.get( 'ImageUtils' );
 
@@ -96,17 +106,21 @@ export default class InsertImageCommand extends Command {
 		// Note: Selection attributes that do not make sense for images will be filtered out by insertImage() anyway.
 		const selectionAttributes = Object.fromEntries( selection.getAttributes() );
 
-		sources.forEach( ( src, index ) => {
+		sourceDefinitions.forEach( ( sourceDefinition, index ) => {
 			const selectedElement = selection.getSelectedElement();
 
+			if ( typeof sourceDefinition === 'string' ) {
+				sourceDefinition = { src: sourceDefinition };
+			}
+
 			// Inserting of an inline image replace the selected element and make a selection on the inserted image.
 			// Therefore inserting multiple inline images requires creating position after each element.
 			if ( index && selectedElement && imageUtils.isImage( selectedElement ) ) {
 				const position = this.editor.model.createPositionAfter( selectedElement );
 
-				imageUtils.insertImage( { src, ...selectionAttributes }, position );
+				imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, position );
 			} else {
-				imageUtils.insertImage( { src, ...selectionAttributes } );
+				imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes } );
 			}
 		} );
 	}

package/src/image/ui/utils.js

@@ -47,7 +47,8 @@ export function getBalloonPositionData( editor ) {
 			defaultPositions.northArrowSouthEast,
 			defaultPositions.southArrowNorth,
 			defaultPositions.southArrowNorthWest,
-			defaultPositions.southArrowNorthEast
+			defaultPositions.southArrowNorthEast,
+			defaultPositions.viewportStickyNorth
 		]
 	};
 }

package/src/image/utils.js

@@ -47,21 +47,16 @@ export function createImageViewElement( writer, imageType ) {
  * @param {'imageBlock'|'imageInline'} matchImageType The type of created image.
  * @returns {module:engine/view/matcher~MatcherPattern}
  */
-export function getImageTypeMatcher( editor, matchImageType ) {
+export function getImgViewElementMatcher( editor, matchImageType ) {
 	if ( editor.plugins.has( 'ImageInlineEditing' ) !== editor.plugins.has( 'ImageBlockEditing' ) ) {
-		return {
-			name: 'img',
-			attributes: {
-				src: true
-			}
-		};
+		return { name: 'img' };
 	}
 
 	const imageUtils = editor.plugins.get( 'ImageUtils' );
 
 	return element => {
-		// Convert only images with src attribute.
-		if ( !imageUtils.isInlineImageView( element ) || !element.hasAttribute( 'src' ) ) {
+		// Check if view element is an `img`.
+		if ( !imageUtils.isInlineImageView( element ) ) {
 			return null;
 		}
 
@@ -73,7 +68,7 @@ export function getImageTypeMatcher( editor, matchImageType ) {
 			return null;
 		}
 
-		return { name: true, attributes: [ 'src' ] };
+		return { name: true };
 	};
 }
 

package/src/imageblock.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/imagecaption/imagecaptionediting.js

@@ -9,8 +9,7 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 import { Element, enablePlaceholder } from 'ckeditor5/src/engine';
-import { setHighlightHandling, toWidgetEditable } from 'ckeditor5/src/widget';
-import { toArray } from 'ckeditor5/src/utils';
+import { toWidgetEditable } from 'ckeditor5/src/widget';
 
 import ToggleImageCaptionCommand from './toggleimagecaptioncommand';
 
@@ -132,16 +131,7 @@ export default class ImageCaptionEditing extends Plugin {
 					keepOnFocus: true
 				} );
 
-				const widgetEditable = toWidgetEditable( figcaptionElement, writer );
-
-				setHighlightHandling(
-					widgetEditable,
-					writer,
-					( element, descriptor, writer ) => writer.addClass( toArray( descriptor.classes ), element ),
-					( element, descriptor, writer ) => writer.removeClass( toArray( descriptor.classes ), element )
-				);
-
-				return widgetEditable;
+				return toWidgetEditable( figcaptionElement, writer );
 			}
 		} );
 

package/src/imageinline.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/imageresize/imageresizehandles.js

@@ -12,9 +12,13 @@ import { WidgetResize } from 'ckeditor5/src/widget';
 
 import ImageLoadObserver from '../image/imageloadobserver';
 
-const RESIZABLE_IMAGES_CSS_SELECTOR = 'figure.image.ck-widget > img,' +
+const RESIZABLE_IMAGES_CSS_SELECTOR =
+	'figure.image.ck-widget > img,' +
+	'figure.image.ck-widget > picture > img,' +
 	'figure.image.ck-widget > a > img,' +
-	'span.image-inline.ck-widget > img';
+	'figure.image.ck-widget > a > picture > img,' +
+	'span.image-inline.ck-widget > img,' +
+	'span.image-inline.ck-widget > picture > img';
 
 const IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /(image|image-inline)/;
 

package/src/imagestyle/converters.js

@@ -61,7 +61,8 @@ export function viewToModelStyleAttribute( styles ) {
 		const viewElement = data.viewItem;
 		const modelImageElement = first( data.modelRange.getItems() );
 
-		// Check if `modelImageElement` exists (see: #8270, and #9563)...
+		// Run this converter only if an image has been found in the model.
+		// In some cases it may not be found (for example if we run this on a figure with different type than image).
 		if ( !modelImageElement ) {
 			return;
 		}