fix: Keep base64 images in base64 after fixing their size

packages/devkit/src/image.js

@@ -72,6 +72,24 @@ export default class Image {
     });
   }
 
+  /**
+   * Determines whether an img src contains an SVG.
+   * @param {HTMLImageElement} img the img element to inspect
+   * @returns true if the img src contains an SVG, false otherwise
+   */
+  static isSvg(img) {
+    return img.src.startsWith('data:image/svg+xml;');
+  }
+
+  /**
+   * Determines whether an img src is encoded in base64 or not.
+   * @param {HTMLImageElement} img the img element to inspect
+   * @returns true if the img src is encoded in base64, false otherwise
+   */
+  static isBase64(img) {
+    return img.src.startsWith('data:image/svg+xml;base64,') || img.src.startsWith('data:image/png;base64,');
+  }
+
   /**
   * Calculates the metrics of a MathType image given the the service response and the image format.
   * @param {HTMLImageElement} img - The HTMLImageElement.
@@ -86,10 +104,10 @@ export default class Image {
     let svgString;
     if (jsonResponse) {
       // Cleaning data:image/png;base64.
-      if (Configuration.get('imageFormat') === 'svg') {
+      if (Image.isSvg(img)) {
         // SVG format.
         // If SVG is encoded in base64 we need to convert the base64 bytes into a SVG string.
-        if (Configuration.get('saveMode') !== 'base64') {
+        if (!Image.isBase64(img)) {
           ar = Image.getMetricsFromSvgString(uri);
         } else {
           base64String = img.src.substr(img.src.indexOf('base64,') + 7, img.src.length);
@@ -143,18 +161,25 @@ export default class Image {
       if (img.src.indexOf('data:image') !== -1) {
         if (img.src.indexOf('data:image/svg+xml') !== -1) {
 
-          // Image is in base64
+          // Image is in base64: decode it in order to calculate the size, and then bring it back to base64
+          // This is a bit of an ugly hack used to recycle the logic of Image.setImgSize instead of rewriting it
+          // (which would actually make more sense for readibility and efficiency).
           if (img.src.indexOf('data:image/svg+xml;base64,') !== -1) {
             // 'data:image/svg+xml;base64,'.length === 26
             const base64String = img.getAttribute('src').substring(26);
             const svgString = window.atob(base64String);
             const encodedSvgString = encodeURIComponent(svgString);
             img.setAttribute('src', `data:image/svg+xml;charset=utf8,${encodedSvgString}`);
+            // 'data:image/svg+xml;charset=utf8,'.length === 32.
+            const svg = decodeURIComponent(img.src.substring(32, img.src.length));
+            Image.setImgSize(img, svg, true);
+            // Return src to base64!
+            img.setAttribute('src', `data:image/svg+xml;base64,${base64String}`);
+          } else {
+            // 'data:image/svg+xml;charset=utf8,'.length === 32.
+            const svg = decodeURIComponent(img.src.substring(32, img.src.length));
+            Image.setImgSize(img, svg, true);
           }
-
-          // 'data:image/svg+xml;charset=utf8,'.length === 32.
-          const svg = decodeURIComponent(img.src.substring(32, img.src.length));
-          Image.setImgSize(img, svg, true);
         } else {
           // 'data:image/png;base64,' === 22.
           const base64 = img.src.substring(22, img.src.length);