diff --git a/packages/ckeditor5-image/src/imageresize/imageresizeediting.ts b/packages/ckeditor5-image/src/imageresize/imageresizeediting.ts index f0adf13dc56..84975d7d55e 100644 --- a/packages/ckeditor5-image/src/imageresize/imageresizeediting.ts +++ b/packages/ckeditor5-image/src/imageresize/imageresizeediting.ts @@ -186,6 +186,21 @@ export default class ImageResizeEditing extends Plugin { return null; } + // If this is an image inside a figure with width style, skip setting the width. + // See: https://github.com/ckeditor/ckeditor5/issues/17441 + if ( viewElement.name !== 'figure' ) { + let parent = viewElement.parent; + + // Traverse up through parents until we find a figure or run out of ancestors + while ( parent ) { + if ( parent.is( 'element' ) && imageUtils.isBlockImageView( parent ) && parent.getStyle( 'width' ) ) { + return null; + } + + parent = parent.parent; + } + } + return viewElement.getStyle( 'width' ); } } diff --git a/packages/ckeditor5-image/tests/imageresize/imageresizeediting.js b/packages/ckeditor5-image/tests/imageresize/imageresizeediting.js index c8c0b67d41b..cbee886ccba 100644 --- a/packages/ckeditor5-image/tests/imageresize/imageresizeediting.js +++ b/packages/ckeditor5-image/tests/imageresize/imageresizeediting.js @@ -105,6 +105,16 @@ describe( 'ImageResizeEditing', () => { expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'resizedWidth' ) ).to.equal( '100px' ); } ); + it( 'it should prefer the width from the figure element over the width from the image element', () => { + editor.setData( + '
' + + `` + + '
' + ); + + expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'resizedWidth' ) ).to.equal( '100px' ); + } ); + it( 'upcasts 50% width correctly', () => { editor.setData( `
` );