add warning if size is higher than 102kb and remove minification of html

packages/editor/src/css/badsender-editor.less

@@ -554,7 +554,7 @@ body {
  }
 }
 
-.error-message {
+.error-message, .size-warning-message {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  max-width: 700px;

packages/editor/src/js/ext/badsender-control-quality.js

@@ -108,7 +108,46 @@ function displayErrors (errors, viewModel) {
  $errorMessageDiv.append($errorMessageTitle, $errorMessageDescription, $errorsDiv);
 }
 
+function checkAndDisplaySizeWarning(viewModel) {
+
+ const sizeThreshold = 102 * 1024; // 102KB in octets
+ const htmlToExport = viewModel.exportHTML();
+ const exportedHtmlSize = new Blob([htmlToExport]).size; // to calculate the size of the exported HTML in octets
+
+ if (exportedHtmlSize > sizeThreshold) {
+ displaySizeWarning(viewModel);
+ } else {
+ // Remove any existing size warning message
+ $('.size-warning-message').remove();
+ }
+}
+
+function displaySizeWarning(viewModel) {
+ // Remove any existing size warning message
+ $('.size-warning-message').remove();
+
+ // Define the default English messages with keys for translation
+ const warningTitleKey = 'Excessive Size';
+ const warningDescriptionKey = 'The exported HTML exceeds 102KB, which may result in clipping email on Gmail.';
+
+ // Construct the warning message elements with translation keys
+ const $warningMessageTitle = $(`<h3>${viewModel.t(warningTitleKey)}</h3>`);
+ const $warningMessageDescription = $(`<p>${viewModel.t(warningDescriptionKey)}</p>`);
+
+ // Create the warning message container with styling
+ const $warningMessageDiv = $('<div class="size-warning-message"></div>');
+
+ // Insert the warning message before the specified body location
+ $warningMessageDiv.insertBefore('replacedbody');
+ // Append the title and description to the container
+ $warningMessageDiv.append($warningMessageTitle, $warningMessageDescription);
+}
+
+
+
+
 module.exports = {
  getErrorsForControlQuality,
- displayErrors
+ displayErrors,
+ checkAndDisplaySizeWarning,
 }

packages/editor/src/js/ext/badsender-server-storage.js

@@ -5,7 +5,7 @@ const console = require('console');
 const $ = require('jquery');
 const ko = require('knockout');
 const _omit = require('lodash.omit');
-const { getErrorsForControlQuality, displayErrors } = require('../ext/badsender-control-quality');
+const { getErrorsForControlQuality, displayErrors, checkAndDisplaySizeWarning } = require('../ext/badsender-control-quality');
 
 function getData(viewModel) {
  // gather meta
@@ -90,6 +90,7 @@ function loader(opts) {
 
  const dlDefault = { forCdn: false, forFtp: false };
  downloadCmd.execute = function downloadMail(downloadOptions = dlDefault) {
+ checkAndDisplaySizeWarning(viewModel);
  // ====================================
  // Check for missing input values
  const errors = getErrorsForControlQuality(viewModel);

packages/editor/src/js/viewmodel.js

@@ -698,12 +698,6 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
  var blackLinesRegex = /^\s*[\r\n]/gm;
  content = content.replace(blackLinesRegex, '');
 
- // Remove successif empty indentation and empty spaces if content exceeds 102k
- if (content.length > MAX_SIZE) {
- content = content.replace(/\n|\t/g, ' ');
- content = content.replace(/\s\s+/g, ' ');
- }
-
  return content;
  };
 

packages/editor/src/js/vue/components/esp/esp-send-mail.js

@@ -9,6 +9,7 @@ const { ESP_TYPE } = require('../../constant/esp-type');
 const {
  getErrorsForControlQuality,
  displayErrors,
+ checkAndDisplaySizeWarning,
 } = require('../../../ext/badsender-control-quality');
 
 const {
@@ -158,6 +159,9 @@ const EspComponent = Vue.component('EspForm', {
  this.isLoadingExport = true;
  const unprocessedHtml = this.vm.exportHTML();
 
+ // Check for HTML size warning
+ checkAndDisplaySizeWarning(this.vm);
+
  axios
  .post(this.vm.metadata.url.sendCampaignMail, {
  html: unprocessedHtml,

public/lang/mosaico-en.json

@@ -94,6 +94,8 @@
  "Select from gallery": "Select from gallery",
  "Your email was successfully exported": "Your email was successfully exported",
  "We noticed some missing details while executing quality controls:": "We noticed some missing details while executing quality controls:",
+ "Excessive Size": "Excessive Size",
+ "The exported HTML exceeds 102KB, which may result in clipping email on Gmail.": "The exported HTML exceeds 102KB, which may result in clipping email on Gmail.",
  "Missing link label:": "Missing link on:",
  "Missing background image": "Missing background image",
  "Picture with no link": "Picture with no link",

public/lang/mosaico-fr.json

@@ -94,6 +94,8 @@
  "Select from gallery": "Sélectionnez dans la galerie",
  "Your email was successfully exported": "Votre email a bien été exporté",
  "We noticed some missing details while executing quality controls:": "Nous avons détecté quelques oublis lors du contrôle qualité",
+ "Excessive Size": "Poids trop élevé",
+ "The exported HTML exceeds 102KB, which may result in clipping email on Gmail.": "Le HTML exporté fait plus de 102ko, cela risque de tronquer le rendu du message sur Gmail.",
  "Missing link label:": "Lien manquant sur:",
  "Missing background image": "Image de fond manquant",
  "Picture with no link": "Image sans lien",