Add image resizedHeight model attribute (convert from style height)

packages/ckeditor5-image/package.json

@@ -33,11 +33,13 @@
     "@ckeditor/ckeditor5-essentials": "^38.0.1",
     "@ckeditor/ckeditor5-heading": "^38.0.1",
     "@ckeditor/ckeditor5-html-embed": "^38.0.1",
+    "@ckeditor/ckeditor5-html-support": "^38.0.1",
     "@ckeditor/ckeditor5-indent": "^38.0.1",
     "@ckeditor/ckeditor5-link": "^38.0.1",
     "@ckeditor/ckeditor5-list": "^38.0.1",
     "@ckeditor/ckeditor5-media-embed": "^38.0.1",
     "@ckeditor/ckeditor5-paragraph": "^38.0.1",
+    "@ckeditor/ckeditor5-paste-from-office": "^38.0.1",
     "@ckeditor/ckeditor5-table": "^38.0.1",
     "@ckeditor/ckeditor5-theme-lark": "^38.0.1",
     "@ckeditor/ckeditor5-typing": "^38.0.1",

packages/ckeditor5-image/src/imageresize/imageresizeediting.ts

@@ -82,11 +82,11 @@ export default class ImageResizeEditing extends Plugin {
 
 	private _registerSchema(): void {
 		if ( this.editor.plugins.has( 'ImageBlockEditing' ) ) {
-			this.editor.model.schema.extend( 'imageBlock', { allowAttributes: 'resizedWidth' } );
+			this.editor.model.schema.extend( 'imageBlock', { allowAttributes: [ 'resizedWidth', 'resizedHeight' ] } );
 		}
 
 		if ( this.editor.plugins.has( 'ImageInlineEditing' ) ) {
-			this.editor.model.schema.extend( 'imageInline', { allowAttributes: 'resizedWidth' } );
+			this.editor.model.schema.extend( 'imageInline', { allowAttributes: [ 'resizedWidth', 'resizedHeight' ] } );
 		}
 	}
 
@@ -97,6 +97,7 @@ export default class ImageResizeEditing extends Plugin {
 	 */
 	private _registerConverters( imageType: 'imageBlock' | 'imageInline' ) {
 		const editor = this.editor;
+		const imageUtils: ImageUtils = editor.plugins.get( 'ImageUtils' );
 
 		// Dedicated converter to propagate image's attribute to the img tag.
 		editor.conversion.for( 'downcast' ).add( dispatcher =>
@@ -118,6 +119,35 @@ export default class ImageResizeEditing extends Plugin {
 			} )
 		);
 
+		editor.conversion.for( 'dataDowncast' ).add( dispatcher =>
+			dispatcher.on( `attribute:resizedHeight:${ imageType }`, ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				const viewWriter = conversionApi.writer;
+				const viewElement = conversionApi.mapper.toViewElement( data.item );
+
+				viewWriter.setStyle( 'height', data.attributeNewValue, viewElement );
+			} )
+		);
+
+		editor.conversion.for( 'editingDowncast' ).add( dispatcher =>
+			dispatcher.on( `attribute:resizedHeight:${ imageType }`, ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				if ( data.attributeNewValue !== null ) {
+					const viewWriter = conversionApi.writer;
+					const figure = conversionApi.mapper.toViewElement( data.item );
+					const target = imageType === 'imageInline' ? imageUtils.findViewImgElement( figure ) : figure;
+
+					viewWriter.setStyle( 'height', data.attributeNewValue, target );
+				}
+			} )
+		);
+
 		editor.conversion.for( 'upcast' )
 			.attributeToAttribute( {
 				view: {
@@ -128,7 +158,45 @@ export default class ImageResizeEditing extends Plugin {
 				},
 				model: {
 					key: 'resizedWidth',
-					value: ( viewElement: ViewElement ) => viewElement.getStyle( 'width' )
+					value: ( viewElement: ViewElement ) => {
+						const widthStyle = imageUtils.getSizeInPx( viewElement.getStyle( 'width' ) );
+						const heightStyle = imageUtils.getSizeInPx( viewElement.getStyle( 'height' ) );
+
+						// If both image styles: width & height are set, they will override the image width & height attributes in the
+						// browser. In this case, the image looks the same as if these styles were applied to attributes instead of styles.
+						// That's why we can upcast these styles to width & height attributes instead of resizedWidth and resizedHeight.
+						if ( widthStyle && heightStyle ) {
+							return null;
+						}
+
+						return viewElement.getStyle( 'width' );
+					}
+				}
+			} );
+
+		editor.conversion.for( 'upcast' )
+			.attributeToAttribute( {
+				view: {
+					name: imageType === 'imageBlock' ? 'figure' : 'img',
+					styles: {
+						height: /.+/
+					}
+				},
+				model: {
+					key: 'resizedHeight',
+					value: ( viewElement: ViewElement ) => {
+						const widthStyle = imageUtils.getSizeInPx( viewElement.getStyle( 'width' ) );
+						const heightStyle = imageUtils.getSizeInPx( viewElement.getStyle( 'height' ) );
+
+						// If both image styles: width & height are set, they will override the image width & height attributes in the
+						// browser. In this case, the image looks the same as if these styles were applied to attributes instead of styles.
+						// That's why we can upcast these styles to width & height attributes instead of resizedWidth and resizedHeight.
+						if ( widthStyle && heightStyle ) {
+							return null;
+						}
+
+						return viewElement.getStyle( 'height' );
+					}
 				}
 			} );
 	}

packages/ckeditor5-image/src/imageresize/imageresizehandles.ts

@@ -10,6 +10,7 @@
 import type { Element, ViewContainerElement, ViewElement } from 'ckeditor5/src/engine';
 import { Plugin } from 'ckeditor5/src/core';
 import { WidgetResize } from 'ckeditor5/src/widget';
+import ImageUtils from '../imageutils';
 
 import ImageLoadObserver, { type ImageLoadedEvent } from '../image/imageloadobserver';
 import type ResizeImageCommand from './resizeimagecommand';
@@ -37,7 +38,7 @@ export default class ImageResizeHandles extends Plugin {
 	 * @inheritDoc
 	 */
 	public static get requires() {
-		return [ WidgetResize ] as const;
+		return [ WidgetResize, ImageUtils ] as const;
 	}
 
 	/**
@@ -63,6 +64,7 @@ export default class ImageResizeHandles extends Plugin {
 	private _setupResizerCreator(): void {
 		const editor = this.editor;
 		const editingView = editor.editing.view;
+		const imageUtils: ImageUtils = editor.plugins.get( 'ImageUtils' );
 
 		editingView.addObserver( ImageLoadObserver );
 
@@ -130,6 +132,27 @@ export default class ImageResizeHandles extends Plugin {
 						writer.addClass( RESIZED_IMAGE_CLASS, widgetView );
 					} );
 				}
+
+				const target = imageModel.name === 'imageInline' ? imageView : widgetView;
+
+				if ( target.getStyle( 'height' ) ) {
+					editingView.change( writer => {
+						writer.removeStyle( 'height', target );
+					} );
+				}
+			} );
+
+			resizer.on( 'begin', () => {
+				const img = imageUtils.findViewImgElement( imageView )!;
+				const aspectRatio = img.getStyle( 'aspect-ratio' );
+				const widthAttr = imageModel.getAttribute( 'width' );
+				const heightAttr = imageModel.getAttribute( 'height' );
+
+				if ( widthAttr && heightAttr && !aspectRatio ) {
+					editingView.change( writer => {
+						writer.setStyle( 'aspect-ratio', `${ widthAttr }/${ heightAttr }`, img );
+					} );
+				}
 			} );
 
 			resizer.bind( 'isEnabled' ).to( this );

packages/ckeditor5-image/src/imageresize/resizeimagecommand.ts

@@ -72,6 +72,7 @@ export default class ResizeImageCommand extends Command {
 		if ( imageElement ) {
 			model.change( writer => {
 				writer.setAttribute( 'resizedWidth', options.width, imageElement );
+				writer.removeAttribute( 'resizedHeight', imageElement );
 			} );
 		}
 	}

packages/ckeditor5-image/src/imagesizeattributes.ts

@@ -60,6 +60,27 @@ export default class ImageSizeAttributes extends Plugin {
 		const viewElementName = imageType === 'imageBlock' ? 'figure' : 'img';
 
 		editor.conversion.for( 'upcast' )
+			.attributeToAttribute( {
+				view: {
+					name: imageType === 'imageBlock' ? 'figure' : 'img',
+					styles: {
+						width: /.+/
+					}
+				},
+				model: {
+					key: 'width',
+					value: ( viewElement: ViewElement ) => {
+						const widthStyle = imageUtils.getSizeInPx( viewElement.getStyle( 'width' ) );
+						const heightStyle = imageUtils.getSizeInPx( viewElement.getStyle( 'height' ) );
+
+						if ( widthStyle && heightStyle ) {
+							return widthStyle;
+						}
+
+						return null;
+					}
+				}
+			} )
 			.attributeToAttribute( {
 				view: {
 					name: viewElementName,
@@ -72,6 +93,27 @@ export default class ImageSizeAttributes extends Plugin {
 					value: ( viewElement: ViewElement ) => viewElement.getAttribute( 'width' )
 				}
 			} )
+			.attributeToAttribute( {
+				view: {
+					name: imageType === 'imageBlock' ? 'figure' : 'img',
+					styles: {
+						height: /.+/
+					}
+				},
+				model: {
+					key: 'height',
+					value: ( viewElement: ViewElement ) => {
+						const widthStyle = imageUtils.getSizeInPx( viewElement.getStyle( 'width' ) );
+						const heightStyle = imageUtils.getSizeInPx( viewElement.getStyle( 'height' ) );
+
+						if ( widthStyle && heightStyle ) {
+							return heightStyle;
+						}
+
+						return null;
+					}
+				}
+			} )
 			.attributeToAttribute( {
 				view: {
 					name: viewElementName,
@@ -91,7 +133,9 @@ export default class ImageSizeAttributes extends Plugin {
 			attachDowncastConverter( dispatcher, 'height', 'height' );
 		} );
 
-		function attachDowncastConverter( dispatcher: DowncastDispatcher, modelAttributeName: string, viewAttributeName: string ) {
+		function attachDowncastConverter(
+			dispatcher: DowncastDispatcher, modelAttributeName: string, viewAttributeName: string
+		) {
 			dispatcher.on<DowncastAttributeEvent>( `attribute:${ modelAttributeName }:${ imageType }`, ( evt, data, conversionApi ) => {
 				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
 					return;
@@ -106,7 +150,17 @@ export default class ImageSizeAttributes extends Plugin {
 				} else {
 					viewWriter.removeAttribute( viewAttributeName, img );
 				}
+
+				const width = data.item.getAttribute( 'width' );
+				const height = data.item.getAttribute( 'height' );
+				const isResized = data.item.hasAttribute( 'resizedWidth' );
+				const aspectRatio = img.getStyle( 'aspect-ratio' );
+
+				if ( width && height && !aspectRatio && isResized ) {
+					viewWriter.setStyle( 'aspect-ratio', `${ width }/${ height }`, img );
+				}
 			} );
 		}
 	}
 }
+

packages/ckeditor5-image/src/imageutils.ts

@@ -293,6 +293,17 @@ export default class ImageUtils extends Plugin {
 
 		return super.destroy();
 	}
+
+	/**
+	 * Returns parsed value of the size, but only if it contains unit: px.
+	 */
+	public getSizeInPx( size: string | undefined ): number | null {
+		if ( size && size.endsWith( 'px' ) ) {
+			return parseInt( size );
+		}
+
+		return null;
+	}
 }
 
 /**