Merge pull request #75 from internxt/fix/preview-pane-fixes

[_]: feat/add inline image handling and styling for email content

Author: xabg2

src/components/compose-message/config.ts

@@ -8,6 +8,10 @@ import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import { FontFamily } from '@tiptap/extension-font-family';
 import { FontSize } from './extensions/font-size';
+import i18next from 'i18next';
+import notificationsService, { ToastType } from '@/services/notifications';
+import { bytesToString } from '@/utils/bytes-to-string';
+import { MAX_INLINE_IMAGE_BYTES } from '@/constants';
 
 export const FONTS = [
   { label: 'Arial', value: 'Arial, sans-serif' },
@@ -84,7 +88,40 @@ export const EDITOR_CONFIG = {
   ],
   editorProps: {
     attributes: {
-      class: 'focus:outline-none h-full',
+      class: 'mail-content focus:outline-none h-full',
+    },
+    handleDrop: (view: any, event: any, _slice: any, moved: boolean) => {
+      if (moved) return false;
+
+      const files = Array.from(event.dataTransfer?.files ?? []) as File[];
+      const allImages = files.filter((file) => file.type.startsWith('image/'));
+      if (allImages.length === 0) return false;
+
+      event.preventDefault();
+
+      const images = allImages.filter((file) => file.size <= MAX_INLINE_IMAGE_BYTES);
+      if (images.length < allImages.length) {
+        notificationsService.show({
+          text: i18next.t('modals.composeMessageDialog.errors.inlineImageTooLarge', {
+            maxSize: bytesToString({ size: MAX_INLINE_IMAGE_BYTES }),
+          }),
+          type: ToastType.Warning,
+        });
+      }
+
+      const coords = view.posAtCoords({ left: event.clientX, top: event.clientY });
+      const pos = coords?.pos ?? view.state.selection.from;
+
+      images.forEach((file) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          if (typeof reader.result !== 'string') return;
+          const node = view.state.schema.nodes.image.create({ src: reader.result });
+          view.dispatch(view.state.tr.insert(pos, node));
+        };
+        reader.readAsDataURL(file);
+      });
+      return true;
     },
     handlePaste: (view: any, event: any) => {
       const text = event.clipboardData?.getData('text/plain');

src/constants.ts

@@ -11,4 +11,5 @@ export const INTERNXT_EMAIL_DOMAINS = ['@inxt.me', '@inxt.eu', '@encrypt.eu'] as
 
 export const DEFAULT_FOLDER_LIMIT = 15;
 export const MAX_TOTAL_ATTACHMENT_BYTES_PER_MAIL = 25 * 1024 * 1024;
+export const MAX_INLINE_IMAGE_BYTES = 5 * 1024 * 1024;
 export const AUTO_POLLING_INTERVAL_IN_MILLISECONDS = 30000;

src/features/mail/components/mail-preview/preview/index.tsx

@@ -47,7 +47,7 @@ const Preview = ({ mailId, subject, body, attachments, envelope }: PreviewProps)
     <div className="flex flex-col w-full p-5">
       <div className="flex flex-col gap-2.5">
         <h2 className="text-2xl font-semibold text-gray-100">{subject}</h2>
-        <div className="prose text-gray-100" dangerouslySetInnerHTML={{ __html: sanitizedBody }} />
+        <div className="mail-content text-gray-100" dangerouslySetInnerHTML={{ __html: sanitizedBody }} />
       </div>
 
       {attachments && attachments.length > 0 && (

src/i18n/locales/en.json

@@ -225,7 +225,8 @@
         "noRecipients": "Add at least one recipient before sending",
         "sendFailed": "Could not send the email",
         "keyLookupFailed": "Could not fetch recipient keys",
-        "attachmentsTooLarge": "Attachments exceed the {{maxSize}} limit"
+        "attachmentsTooLarge": "Attachments exceed the {{maxSize}} limit",
+        "inlineImageTooLarge": "Inline images can't exceed {{maxSize}}"
       },
       "attachments": {
         "totalSize": "{{used}} of {{max}}"

src/i18n/locales/es.json

@@ -227,7 +227,8 @@
         "noRecipients": "Agrega al menos un destinatario antes de enviar",
         "sendFailed": "No se pudo enviar el correo",
         "keyLookupFailed": "No se pudieron obtener las claves del destinatario",
-        "attachmentsTooLarge": "Los adjuntos superan el límite de {{maxSize}}"
+        "attachmentsTooLarge": "Los adjuntos superan el límite de {{maxSize}}",
+        "inlineImageTooLarge": "Las imágenes insertadas no pueden superar {{maxSize}}"
       },
       "attachments": {
         "totalSize": "{{used}} de {{max}}"

src/i18n/locales/fr.json

@@ -227,7 +227,8 @@
         "noRecipients": "Ajoutez au moins un destinataire avant d'envoyer",
         "sendFailed": "Impossible d'envoyer le courriel",
         "keyLookupFailed": "Impossible de récupérer les clés du destinataire",
-        "attachmentsTooLarge": "Les pièces jointes dépassent la limite de {{maxSize}}"
+        "attachmentsTooLarge": "Les pièces jointes dépassent la limite de {{maxSize}}",
+        "inlineImageTooLarge": "Les images intégrées ne peuvent pas dépasser {{maxSize}}"
       },
       "attachments": {
         "totalSize": "{{used}} sur {{max}}"

src/i18n/locales/it.json

@@ -227,7 +227,8 @@
         "noRecipients": "Aggiungi almeno un destinatario prima di inviare",
         "sendFailed": "Impossibile inviare l'email",
         "keyLookupFailed": "Impossibile recuperare le chiavi del destinatario",
-        "attachmentsTooLarge": "Gli allegati superano il limite di {{maxSize}}"
+        "attachmentsTooLarge": "Gli allegati superano il limite di {{maxSize}}",
+        "inlineImageTooLarge": "Le immagini inline non possono superare {{maxSize}}"
       },
       "attachments": {
         "totalSize": "{{used}} di {{max}}"

src/index.css

@@ -47,6 +47,65 @@ button {
   cursor: pointer;
 }
 
+/* Rendered mail bodies are raw HTML, so Tailwind's preflight reset (which flattens
+   headings, removes list markers, and unstyles links) must be undone inside them. */
+@layer components {
+  .mail-content h1 {
+    font-size: 1.5em;
+    font-weight: 700;
+    margin: 0.6em 0 0.35em;
+  }
+
+  .mail-content h2 {
+    font-size: 1.3em;
+    font-weight: 600;
+    margin: 0.6em 0 0.35em;
+  }
+
+  .mail-content h3 {
+    font-size: 1.15em;
+    font-weight: 600;
+    margin: 0.6em 0 0.35em;
+  }
+
+  .mail-content h4,
+  .mail-content h5,
+  .mail-content h6 {
+    font-weight: 600;
+    margin: 0.6em 0 0.35em;
+  }
+
+  .mail-content p {
+    margin: 0 0 0.5em;
+  }
+
+  .mail-content ul {
+    list-style: disc;
+    padding-left: 1.5em;
+    margin: 0.5em 0;
+  }
+
+  .mail-content ul ul {
+    list-style: circle;
+  }
+
+  .mail-content ol {
+    list-style: decimal;
+    padding-left: 1.5em;
+    margin: 0.5em 0;
+  }
+
+  .mail-content a {
+    color: var(--color-primary);
+    text-decoration: underline;
+  }
+
+  .mail-content img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color-scheme: light;