fix: images not being compressed properly in editor

apps/web/package.json

@@ -11,6 +11,7 @@
     "@tinymce/tinymce-react": "^3.10.2",
     "clipboard": "^2.0.6",
     "cogo-toast": "^4.2.3",
+    "compressorjs": "^1.0.7",
     "dayjs": "^1.10.4",
     "emotion-theming": "^10.0.19",
     "eventsource": "^1.0.7",

apps/web/src/components/editor/plugins/quickimage/plugin.js

@@ -1,4 +1,5 @@
 import tinymce from "tinymce/tinymce";
+import Compressor from "compressorjs";
 
 (function () {
   tinymce.PluginManager.add("quickimage", function (editor, url) {
@@ -14,24 +15,25 @@ import tinymce from "tinymce/tinymce";
       input.onchange = function () {
         var file = this.files[0];
         if (!file) return null;
-        var reader = new FileReader();
-        reader.onload = function (e) {
-          minifyImg(
-            reader.result,
-            600,
-            (r) => {
-              var content = `<img src="${r}">`;
-              editor.insertContent(content);
-              reader.onerror = null;
-            },
-            1
-          );
 
-          reader.onerror = function () {
-            reader.onerror = null;
-          };
-        };
-        reader.readAsDataURL(file);
+        new Compressor(file, {
+          quality: 0.6,
+          mimeType: "image/jpeg",
+          width: 1024,
+          success(result) {
+            var reader = new FileReader();
+            reader.readAsDataURL(result);
+
+            reader.onloadend = function () {
+              var base64data = reader.result;
+              var content = `<img src="${base64data}"/>`;
+              editor.insertContent(content);
+            };
+          },
+          error(err) {
+            console.error(err.message);
+          },
+        });
       };
       input.dispatchEvent(new MouseEvent("click"));
     }
@@ -42,29 +44,6 @@ import tinymce from "tinymce/tinymce";
       onAction: _onAction,
     });
 
-    var minifyImg = function (dataUrl, newWidth, resolve, quality) {
-      var image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl;
-      new Promise(function (resolve) {
-        image = new Image();
-        image.src = dataUrl;
-        resolve();
-      }).then(() => {
-        oldWidth = image.width;
-        oldHeight = image.height;
-
-        newHeight = Math.floor((oldHeight / oldWidth) * newWidth);
-
-        canvas = document.createElement("canvas");
-        canvas.width = newWidth;
-        canvas.height = newHeight;
-
-        ctx = canvas.getContext("2d");
-        ctx.drawImage(image, 0, 0, newWidth, newHeight);
-        newDataUrl = canvas.toDataURL(undefined, quality);
-        resolve(newDataUrl);
-      });
-    };
-
     editor.addCommand("InsertImage", function (ui, value) {
       _onAction();
     });

apps/web/yarn.lock

@@ -3136,6 +3136,11 @@ bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+blueimp-canvas-to-blob@^3.28.0:
+  version "3.28.0"
+  resolved "https://registry.yarnpkg.com/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.28.0.tgz#c8ab4dc6bb08774a7f273798cdf94b0776adf6c8"
+  integrity sha512-5q+YHzgGsuHQ01iouGgJaPJXod2AzTxJXmVv90PpGrRxU7G7IqgPqWXz+PBmt3520jKKi6irWbNV87DicEa7wg==
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
   version "4.11.9"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
@@ -3848,6 +3853,14 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compressorjs@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/compressorjs/-/compressorjs-1.0.7.tgz#67cd0b3b9ac97540515b22b334dc32eb92b730b1"
+  integrity sha512-ca+H8CGrn0LG103//VQmXBbNdvzvHiW26LGdWncp4RmLNbNQjaaFWIUxMN9++hbhGobLtofkHoxzzXGisNyD3w==
+  dependencies:
+    blueimp-canvas-to-blob "^3.28.0"
+    is-blob "^2.1.0"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -6545,6 +6558,11 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-blob@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-blob/-/is-blob-2.1.0.tgz#e36cd82c90653f1e1b930f11baf9c64216a05385"
+  integrity sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"