From 98157f53f3c9e7050a047640a1f95e3a8e38c711 Mon Sep 17 00:00:00 2001
From: Xavier Ripoll <xavier@wiris.com>
Date: Thu, 11 Jan 2024 12:18:06 +0100
Subject: [PATCH] fix: Keep base64 images in base64 after fixing their size

---
 packages/devkit/src/image.js | 39 +++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/packages/devkit/src/image.js b/packages/devkit/src/image.js
index 3b26b23c2..416d5b8bb 100644
--- a/packages/devkit/src/image.js
+++ b/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);