Editor doesn't preserve image size when pasting resized images from Google Docs

[jswiderski]

📝 Provide detailed reproduction steps (if any)

1. Create sample document in Google Docs with resized image.
2. Copy the image and paste it into editor.

✔️ Expected result

Pasted images has the same size as in Google Docs.

❌ Actual result

Image is pasted with its original size.

Image HTML has width/height attributes which doesn't seem to be taken into account when pasting:

<img src="https://lh4.googleusercontent.com/APWThOWTll8I0A_cIYAEe-o69Ddbc-uul0YkfwnSVnhZp9GoRvtCENXG50sq6sx9A0nKMw7C64nju3IU0gyPd7Xg6YxfG2Ul3hn_nqsj7jEUoAXbMEaNERGVkagEa57zooZWr-6L" width="161" height="226" style="margin-left:0px;margin-top:0px;" />

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

• Browser: Any
• OS: Any
• First affected CKEditor version: N/A
• Installed CKEditor plugins: Image

---

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

[jswiderski]

Similar or related issues - #5632, #5154

[jswiderski]

Even if you set GHS to allow width/height attributes, it will not have any effect:

htmlSupport: {
			disallow: [
				{
					name: 'img',
					styles: {
						width: true,
						height: true
					}
				}
			],	
			allow: [
				{
					name: 'img',
					attributes: {
						width: true,
						height: true
						
					}
				}
			]
}

Attributes are assigned to wrapping span but not to img element.

Google Docs:

[mlewand]

I did a quick assessment on this.

Google simply uses img[height] and img[width] attributes to convey image size. We don't have any conversion for this.

All we need to fix size retention for proportionally resized images is to add converter for img[width] attribute.

However, we don't have any handling for image height in CKE5 so far, so if we were to handle non-proportionally resized image we'd need to add a handling for that which is a bigger task.

For a reference here's the example HTML code placed in the clipboard (Chrome, didn't check other browsers):

<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span
		style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"><span
			style="border:none;display:inline-block;overflow:hidden;width:429px;height:306px;">
			<img src="https://lh4.googleusercontent.com/VfZ3NHygkdxd2_0BDsdX7s54xkSOhw-noVSJDAEBde36EGr04YGEaXIG1s0Q2j4H__SgqrOlQCZppBDWDAEaHo07auCncNwO33zqhh02PqkLDOXet5mC2mwUGVSU-RSuzocNvC-f"
				width="429" height="306" style="margin-left:0px;margin-top:0px;" /></span></span></p>

[wimleers]

Google simply uses img[height] and img[width] attributes to convey image size. We don't have any conversion for this.

Then I'm pretty sure this will also be a problem for Drupal.

[mmichaelis]

I think, this may also be a related issue:

• Image plugin doesn't handle width/height in attributes #11393

[Witoso]

This issue was solved with the #14146.