Update resizedHeight on image resize (when resize unit is px).

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

@@ -111,7 +111,7 @@ export default class ImageResizeHandles extends Plugin {
 						return !imageStyle || imageStyle == 'block' || imageStyle == 'alignCenter';
 					},
 
-					onCommit( newValue ) {
+					onCommit( newWidth, newHeight ) {
 						// Get rid of the CSS class in case the command execution that follows is unsuccessful
 						// (e.g. Track Changes can override it and the new dimensions will not apply). Otherwise,
 						// the presence of the class and the absence of the width style will cause it to take 100%
@@ -120,7 +120,7 @@ export default class ImageResizeHandles extends Plugin {
 							writer.removeClass( RESIZED_IMAGE_CLASS, widgetView );
 						} );
 
-						editor.execute( 'resizeImage', { width: newValue } );
+						editor.execute( 'resizeImage', { width: newWidth, height: newHeight } );
 					}
 				} );
 

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

@@ -58,21 +58,26 @@ export default class ResizeImageCommand extends Command {
 	 * @param options.width The new width of the image.
 	 * @fires execute
 	 */
-	public override execute( options: { width: string | null } ): void {
+	public override execute( options: { width: string | null; height: string | null } ): void {
 		const editor = this.editor;
 		const model = editor.model;
 		const imageUtils: ImageUtils = editor.plugins.get( 'ImageUtils' );
 		const imageElement = imageUtils.getClosestSelectedImageElement( model.document.selection );
 
 		this.value = {
 			width: options.width,
-			height: null
+			height: options.height
 		};
 
 		if ( imageElement ) {
 			model.change( writer => {
 				writer.setAttribute( 'resizedWidth', options.width, imageElement );
-				writer.removeAttribute( 'resizedHeight', imageElement );
+
+				if ( options.height ) {
+					writer.setAttribute( 'resizedHeight', options.height, imageElement );
+				} else {
+					writer.removeAttribute( 'resizedHeight', imageElement );
+				}
 			} );
 		}
 	}

packages/ckeditor5-widget/src/widgetresize.ts

@@ -321,7 +321,7 @@ export interface ResizerOptions {
 	 * };
 	 * ```
 	 */
-	onCommit: ( newValue: string ) => void;
+	onCommit: ( newWidth: string, newHeight: string | null ) => void;
 
 	getResizeHost: ( widgetWrapper: HTMLElement ) => HTMLElement;
 

packages/ckeditor5-widget/src/widgetresize/resizer.ts

@@ -242,12 +242,13 @@ export default class Resizer extends ObservableMixin() {
 	 */
 	public commit(): void {
 		const unit = this._options.unit || '%';
-		const newValue = ( unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth ) + unit;
+		const newWidth = ( unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth ) + unit;
+		const newHeight = ( unit === '%' ) ? null : this.state.proposedHeight + unit;
 
 		// Both cleanup and onCommit callback are very likely to make view changes. Ensure that it is made in a single step.
 		this._options.editor.editing.view.change( () => {
 			this._cleanup();
-			this._options.onCommit( newValue );
+			this._options.onCommit( newWidth, newHeight );
 		} );
 	}