Merge branch 'develop' into fix/next-message-bubbles

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';
@@ -29,8 +30,15 @@ const isOutgoing = computed(() => {
 });
 const isIncoming = computed(() => !isOutgoing.value);
 
+const textToShow = computed(() => {
+  const text =
+    contentAttributes?.value?.email?.textContent?.full ?? content.value;
+  return text?.replace(/\n/g, '<br>');
+});
+
+// Use TextContent as the default to fullHTML
 const fullHTML = computed(() => {
-  return contentAttributes?.value?.email?.htmlContent?.full ?? content.value;
+  return contentAttributes?.value?.email?.htmlContent?.full ?? textToShow.value;
 });
 
 const unquotedHTML = computed(() => {
@@ -40,12 +48,6 @@ const unquotedHTML = computed(() => {
 const hasQuotedMessage = computed(() => {
   return EmailQuoteExtractor.hasQuotes(fullHTML.value);
 });
-
-const textToShow = computed(() => {
-  const text =
-    contentAttributes?.value?.email?.textContent?.full ?? content.value;
-  return text?.replace(/\n/g, '<br>');
-});
 </script>
 
 <template>
@@ -92,6 +94,11 @@ const textToShow = computed(() => {
           <Letter
             v-if="showQuotedMessage"
             class-name="prose prose-bubble !max-w-none"
+            :allowed-css-properties="[
+              ...allowedCssProperties,
+              'transform',
+              'transform-origin',
+            ]"
             :html="fullHTML"
             :text="textToShow"
           />
@@ -99,6 +106,11 @@ const textToShow = computed(() => {
             v-else
             class-name="prose prose-bubble !max-w-none"
             :html="unquotedHTML"
+            :allowed-css-properties="[
+              ...allowedCssProperties,
+              'transform',
+              'transform-origin',
+            ]"
             :text="textToShow"
           />
         </template>