@ckeditor/ckeditor5-image 29.1.0 → 31.1.0

package/src/image/converters.js

@@ -39,11 +39,14 @@ export function upcastImageFigure( imageUtils ) {
 		// Find an image element inside the figure element.
 		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;
 		}
 
+		// Consume the figure to prevent other converters from processing it again.
+		conversionApi.consumable.consume( data.viewItem, { name: true, classes: 'image' } );
+
 		// Convert view image to model image.
 		const conversionResult = conversionApi.convertItem( viewImage, data.modelCursor );
 
@@ -52,6 +55,9 @@ export function upcastImageFigure( imageUtils ) {
 
 		// When image wasn't successfully converted then finish conversion.
 		if ( !modelImage ) {
+			// Revert consumed figure so other features can convert it.
+			conversionApi.consumable.revert( data.viewItem, { name: true, classes: 'image' } );
+
 			return;
 		}
 
@@ -136,12 +142,6 @@ export function upcastPicture( imageUtils ) {
 			data.modelCursor = conversionResult.modelCursor;
 
 			modelImage = first( conversionResult.modelRange.getItems() );
-
-			// It could be that the <img/> was broken (e.g. missing "src"). There's no point in converting
-			// <picture> any further around a broken <img/>.
-			if ( !modelImage ) {
-				return;
-			}
 		}
 
 		conversionApi.consumable.consume( pictureViewElement, { name: true } );

package/src/image/imageblockediting.js

@@ -112,7 +112,10 @@ export default class ImageBlockEditing extends Plugin {
 		conversion.for( 'upcast' )
 			.elementToElement( {
 				view: getImgViewElementMatcher( editor, 'imageBlock' ),
-				model: ( viewImage, { writer } ) => writer.createElement( 'imageBlock', { src: viewImage.getAttribute( 'src' ) } )
+				model: ( viewImage, { writer } ) => writer.createElement(
+					'imageBlock',
+					viewImage.hasAttribute( 'src' ) ? { src: viewImage.getAttribute( 'src' ) } : null
+				)
 			} )
 			.add( upcastImageFigure( imageUtils ) );
 	}

package/src/image/imageinlineediting.js

@@ -64,6 +64,7 @@ export default class ImageInlineEditing extends Plugin {
 			isObject: true,
 			isInline: true,
 			allowWhere: '$text',
+			allowAttributesOf: '$text',
 			allowAttributes: [ 'alt', 'src', 'srcset' ]
 		} );
 
@@ -120,7 +121,10 @@ export default class ImageInlineEditing extends Plugin {
 		conversion.for( 'upcast' )
 			.elementToElement( {
 				view: getImgViewElementMatcher( editor, 'imageInline' ),
-				model: ( viewImage, { writer } ) => writer.createElement( 'imageInline', { src: viewImage.getAttribute( 'src' ) } )
+				model: ( viewImage, { writer } ) => writer.createElement(
+					'imageInline',
+					viewImage.hasAttribute( 'src' ) ? { src: viewImage.getAttribute( 'src' ) } : null
+				)
 			} );
 	}
 

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

@@ -49,19 +49,14 @@ export function createImageViewElement( writer, imageType ) {
  */
 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 getImgViewElementMatcher( editor, matchImageType ) {
 			return null;
 		}
 
-		return { name: true, attributes: [ 'src' ] };
+		return { name: true };
 	};
 }
 

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/imageinsert/ui/imageinsertpanelview.js

@@ -203,6 +203,16 @@ export default class ImageInsertPanelView extends View {
 		}, { priority: 'high' } );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Returns a view of the integration.
 	 *

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;
 		}

package/src/imagetextalternative/ui/textalternativeformview.js

@@ -151,6 +151,16 @@ export default class TextAlternativeFormView extends View {
 			} );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Creates the button view.
 	 *

package/src/imageupload/imageuploadprogress.js

@@ -12,8 +12,6 @@
 import { Plugin } from 'ckeditor5/src/core';
 import { FileRepository } from 'ckeditor5/src/upload';
 
-import uploadingPlaceholder from '../../theme/icons/image_placeholder.svg';
-
 import '../../theme/imageuploadprogress.css';
 import '../../theme/imageuploadicon.css';
 import '../../theme/imageuploadloader.css';
@@ -41,10 +39,12 @@ export default class ImageUploadProgress extends Plugin {
 		/**
 		 * The image placeholder that is displayed before real image data can be accessed.
 		 *
+		 * For the record, this image is a 1x1 px GIF with an aspect ratio set by CSS.
+		 *
 		 * @protected
 		 * @member {String} #placeholder
 		 */
-		this.placeholder = 'data:image/svg+xml;utf8,' + encodeURIComponent( uploadingPlaceholder );
+		this.placeholder = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 	}
 
 	/**