width style from <img> overrides the style on resized <figure>

[Mgsy]

📝 Provide detailed reproduction steps (if any)

1. Go to https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-featured-editor.html.
2. Open source editing
3. Use the following source:

<figure style="clear: both;margin: 0.9em auto;min-width: 50px;text-align: center;box-sizing: border-box;display: block;max-width: 100%;width: 5.15%;"class="image image_resized">
 <img height="233" width="258" src="https://www.shutterstock.com/image-vector/sample-red-square-grunge-stamp-260nw-338250266.jpg" style="display: block;height: auto;margin: 0px auto;max-width: 100%;min-width: 100%;width: 100%;aspect-ratio: 258/233;" />
</figure>

4. View the source again.

✔️ Expected result

<figure> preserves the width: 5.15% style.

❌ Actual result

<figure> inherits width: 100% from <img>.

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Mati365]

Adding such upcast seems to bypass the issue:

editor.conversion.for( 'upcast' ).add( dispatcher => {
	dispatcher.on( 'element:figure', ( evt, data, conversionApi ) => {
		const viewFigure = data.viewItem;
		const viewImg = imageUtils.findViewImgElement( viewFigure );

		if ( !viewImg || !viewImg.getStyle( 'width' ) || !imageUtils.isBlockImageView( viewFigure ) ) {
			return;
		}

		const figureWidth = viewFigure.getStyle( 'width' );

		if ( figureWidth ) {
			conversionApi.writer.setAttribute( 'resizedWidth', figureWidth, data.modelRange.start.nodeAfter );
		}
	}, { priority: 'low' } );
} );

But I'm not sure if it's optimal solution. We need to dig more.