Merge pull request #165 from craftcms/bugfix/94-transformimagecommand…

…-adjust-dimensions

when transforming asset, adjust width and hight too

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Release Notes for CKEditor for Craft CMS
 
+## Unreleased
+
+- Fixed a bug where resized images weren’t getting updated `width` and `height` attributes. ([#165](https://github.com/craftcms/ckeditor/pull/165))
+
 ## 3.7.3 - 2024-02-08
 
 - Fixed a JavaScript error. ([#161](https://github.com/craftcms/ckeditor/issues/161))

src/controllers/CkeditorController.php

@@ -46,6 +46,8 @@ public function actionImageUrl(): Response
 
         return $this->asJson([
             'url' => $asset->getUrl($transform, false),
+            'width' => $asset->getWidth($transform),
+            'height' => $asset->getHeight($transform),
         ]);
     }
 }

src/web/assets/ckeditor/src/image/imagetransform/transformimagecommand.js

@@ -97,6 +97,16 @@ export default class TransformImageCommand extends Command {
         model.change((writer) => {
           const src = data.url + hash;
           writer.setAttribute('src', src, element);
+
+          // update image width and height to match the transformed size;
+          // ckeditor insists on keeping those around:
+          // https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html#image-width-and-height-attributes
+          if (data.width) {
+            writer.setAttribute('width', data.width, element);
+          }
+          if (data.height) {
+            writer.setAttribute('height', data.height, element);
+          }
         });
       });
     }