Allow and preserve image width and height

[mmotyczynska]

Suggested merge commit message (convention)

Feature (image): It should be possible to load and preserve image width and height attributes. Closes #14201.

MAJOR BREAKING CHANGE (image): The name of the image resize width attribute has been changed to resizedWidth. The width and height attributes are now used to preserve image width and height.

MAJOR BREAKING CHANGE (image): The srcset attribute has been simplified. It is no longer an object { data: "...", width: "..." }, but a value previously stored in the data part.

---

Additional information

For example – encountered issues, assumptions you had to make, other affected tickets, etc.

[arkflpc]

@ckeditor/qa-team , can you look at it?
@mmotyczynska , will you provide more info if neede?

[dufipl]

@arkflpc Sure, we will take a look at this 🕵️

[mmotyczynska]

The first  change:

• We now enable width and height attributes for imageInline and imageBlock elements.
• Unfortunately the width attribute in model element was already in use for image resize. So we had to change its name from width to resizedWidth.

The second change:

• We simplified the srcset attribute which previosusly was an object: { data: "...", width: "..." }, but now it's a value previously stored in the data part. This is because we handle the width in the first change and it's no longer needed here in srcset.

Manual tests:

• There is one new manual test  that already loads new attributes for block/inline images with and without resize value.
• But these changes may affect also other tests that handle images, e.g. paste from office.

What to check:

• The image should load and preserve new attributes (use dedicated manual test or setData() for example).
• Images should preserve aspect ratio.
• This change should not break the image resize feature, but its value should now be stored in resizedWidth instead of width attribute.
• Other than that use your creativity and try to break the editor or break importing images etc. 😄

[Acrophost]

height attribute is completely ignored even when width is not specified

Steps

1. Open the manual test
2. Call editor.setData('<img src="sample.jpg" alt="Foo" height="100">'); in the console

Result

Image gets the default size of 800x376 regardless of given height.
The height attribute is kept but size itself is overwritten by .ck-content .image-inline picture, .ck-content .image-inline img { height: auto; } .
If the width is specified, image resizes accordingly to it.

[Acrophost]

We have finished testing ✨
The main thing we noticed is that height is getting overwritten by height: auto style and thus, has no effect even when there is no width defined (when this declaration is disabled, all works as it should).
Aside from that, everything looks good to us 🎉

@charlttsie @dufipl thank you for the jolly cooperation 🍻