FIX: Return `naturalWidth` and `naturalHeight` for Composer image sizes (#13271)

FIX: Return naturalWidth and naturalHeight for Composer image sizes (#13271)

Rather than returning the size of the currently rendered image in the composer window (which is dependent on browser settings such as window size and zoom level), return the actual dimensions of the image file itself.

(Also see commit abac61449282cce61886fb1b50a3587a579e6406 which was an earlier attempt to fix this by excluding Oneboxed images entirely. That was reverted as the CSS selector didn’t work on all browsers.)

diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js
index e0c09b7..0c4be84 100644
--- a/app/assets/javascripts/discourse/app/controllers/composer.js
+++ b/app/assets/javascripts/discourse/app/controllers/composer.js
@@ -770,14 +770,15 @@ export default Controller.extend({
 
     // TODO: This should not happen in model
     const imageSizes = {};
-    $("#reply-control .d-editor-preview img").each((i, e) => {
-      const $img = $(e);
-      const src = $img.prop("src");
+    document
+      .querySelectorAll("#reply-control .d-editor-preview img")
+      .forEach((e) => {
+        const src = e.src;
 
-      if (src && src.length) {
-        imageSizes[src] = { width: $img.width(), height: $img.height() };
-      }
-    });
+        if (src && src.length) {
+          imageSizes[src] = { width: e.naturalWidth, height: e.naturalHeight };
+        }
+      });
 
     const promise = composer
       .save({ imageSizes, editReason: this.editReason })

GitHub sha: 9d8bc6a4

This commit appears in #13271 which was approved by pmusaraj. It was merged by jbrw.

This commit has been mentioned on Discourse Meta. There might be relevant details there: