From c2b8cff26571ddbe9e6de4472c172a5bf5cc16e1 Mon Sep 17 00:00:00 2001 From: Marta Motyczynska Date: Tue, 13 Jun 2023 17:30:00 +0200 Subject: [PATCH] Update resizedHeight on image resize (when resize unit is px). --- .../src/imageresize/imageresizehandles.ts | 4 ++-- .../src/imageresize/resizeimagecommand.ts | 11 ++++++++--- packages/ckeditor5-widget/src/widgetresize.ts | 2 +- packages/ckeditor5-widget/src/widgetresize/resizer.ts | 5 +++-- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts b/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts index 04d3880b600..209db201865 100644 --- a/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts +++ b/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 } ); } } ); diff --git a/packages/ckeditor5-image/src/imageresize/resizeimagecommand.ts b/packages/ckeditor5-image/src/imageresize/resizeimagecommand.ts index df14fef73f0..9027900a085 100644 --- a/packages/ckeditor5-image/src/imageresize/resizeimagecommand.ts +++ b/packages/ckeditor5-image/src/imageresize/resizeimagecommand.ts @@ -58,7 +58,7 @@ 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' ); @@ -66,13 +66,18 @@ export default class ResizeImageCommand extends Command { 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 ); + } } ); } } diff --git a/packages/ckeditor5-widget/src/widgetresize.ts b/packages/ckeditor5-widget/src/widgetresize.ts index 4b981639fe1..17ee65bc1ba 100644 --- a/packages/ckeditor5-widget/src/widgetresize.ts +++ b/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; diff --git a/packages/ckeditor5-widget/src/widgetresize/resizer.ts b/packages/ckeditor5-widget/src/widgetresize/resizer.ts index 791b608ea8b..f847967bbd1 100644 --- a/packages/ckeditor5-widget/src/widgetresize/resizer.ts +++ b/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 ); } ); }