From 8a5b007bc47e30380f0368e82900693f1f7b9cba Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 19 Feb 2025 09:07:00 +0530
Subject: [PATCH] feat: update vue-letter and allow transform css (#10865)

Emails from iOS and MacOS clients can often come with size
transformation. This results in a broken layout when sanitizing with Vue
letter.

This PR updates the vue-letter to include the [recent changes made
there](https://github.com/mat-sz/vue-letter/pull/2). And adds the
`transform` and `transform-origin` properties to the allow list

Ref: https://www.caniemail.com/features/css-transform/

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../message/bubbles/Email/Index.vue           | 11 ++++++++++
 package.json                                  |  3 ++-
 pnpm-lock.yaml                                | 21 +++++++++++--------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index ea2f57f34..05031f055 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useTemplateRef, ref, onMounted } from 'vue';
 import { Letter } from 'vue-letter';
+import { allowedCssProperties } from 'lettersanitizer';
 
 import Icon from 'next/icon/Icon.vue';
 import { EmailQuoteExtractor } from './removeReply.js';
@@ -93,6 +94,11 @@ const hasQuotedMessage = computed(() => {
           <Letter
             v-if="showQuotedMessage"
             class-name="prose prose-bubble !max-w-none"
+            :allowed-css-properties="[
+              ...allowedCssProperties,
+              'transform',
+              'transform-origin',
+            ]"
             :html="fullHTML"
             :text="textToShow"
           />
@@ -100,6 +106,11 @@ const hasQuotedMessage = computed(() => {
             v-else
             class-name="prose prose-bubble !max-w-none"
             :html="unquotedHTML"
+            :allowed-css-properties="[
+              ...allowedCssProperties,
+              'transform',
+              'transform-origin',
+            ]"
             :text="textToShow"
           />
         </template>
diff --git a/package.json b/package.json
index c23cfa5a9..50f5a98c0 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "highlight.js": "^11.10.0",
     "idb": "^8.0.0",
     "js-cookie": "^3.0.5",
+    "lettersanitizer": "^1.0.6",
     "libphonenumber-js": "^1.11.9",
     "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1",
@@ -92,7 +93,7 @@
     "vue-datepicker-next": "^1.0.3",
     "vue-dompurify-html": "^5.1.0",
     "vue-i18n": "9.14.2",
-    "vue-letter": "^0.2.0",
+    "vue-letter": "^0.2.1",
     "vue-multiselect": "3.1.0",
     "vue-router": "~4.4.5",
     "vue-upload-component": "^3.1.17",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb3403914..96737e1cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -136,6 +136,9 @@ importers:
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
+      lettersanitizer:
+        specifier: ^1.0.6
+        version: 1.0.6
       libphonenumber-js:
         specifier: ^1.11.9
         version: 1.11.9
@@ -197,8 +200,8 @@ importers:
         specifier: 9.14.2
         version: 9.14.2(vue@3.5.12(typescript@5.6.2))
       vue-letter:
-        specifier: ^0.2.0
-        version: 0.2.0
+        specifier: ^0.2.1
+        version: 0.2.1
       vue-multiselect:
         specifier: 3.1.0
         version: 3.1.0
@@ -3336,8 +3339,8 @@ packages:
   launch-editor@2.9.1:
     resolution: {integrity: sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==}
 
-  lettersanitizer@1.0.5:
-    resolution: {integrity: sha512-OEJjdlRE96uKB0VfMi4nb3hBctYl1Ss6DQg9SPXRpGcjaBjcmDaibp0ZIdQu1TPwMAEvWC8xRqIcTAooElSDIg==}
+  lettersanitizer@1.0.6:
+    resolution: {integrity: sha512-2vj0tUtBRjlmTCFsgVlFmfi04p049Zwv/4eBGWBUOKropEoL+q+jTQQfFyDu50j7gL76pycMvrqD0uV0vxX2zg==}
 
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
@@ -4848,8 +4851,8 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
-  vue-letter@0.2.0:
-    resolution: {integrity: sha512-p4qHpw89GKidKyGcg4J4IjUcMQuVaTJq83c6UE4616claaLF9rj2Bg/Hq19uDCmokd+SvzEwxq6/ctfaaednkw==}
+  vue-letter@0.2.1:
+    resolution: {integrity: sha512-IYWp47XUikjKfEniWYlFxeJFKABZwAE5IEjz866qCBytBr2dzqVDdjoMDpBP//krxkzN/QZYyHe6C09y/IODYg==}
 
   vue-multiselect@3.1.0:
     resolution: {integrity: sha512-+i/fjTqFBpaay9NP+lU7obBeNaw2DdFDFs4mqhsM0aEtKRdvIf7CfREAx2o2B4XDmPrBt1r7x1YCM3BOMLaUgQ==}
@@ -8558,7 +8561,7 @@ snapshots:
       picocolors: 1.1.0
       shell-quote: 1.8.1
 
-  lettersanitizer@1.0.5: {}
+  lettersanitizer@1.0.6: {}
 
   levn@0.4.1:
     dependencies:
@@ -10224,9 +10227,9 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.12(typescript@5.6.2)
 
-  vue-letter@0.2.0:
+  vue-letter@0.2.1:
     dependencies:
-      lettersanitizer: 1.0.5
+      lettersanitizer: 1.0.6
 
   vue-multiselect@3.1.0: {}