fix problem font in detail email + refetch inbox when open detail email + ...

src/config/func.ts

@@ -80,3 +80,34 @@ export const formatDate = (dateString: string) => {
     minute: "2-digit",
   }).format(date);
 };
+
+export const sanitizeEmailHTML = (html: string): string => {
+  try {
+    // Remove style tags and their content
+    let sanitized = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
+
+    // Remove link tags (CSS files)
+    sanitized = sanitized.replace(/<link[^>]*>/gi, "");
+
+    // Remove all style attributes
+    sanitized = sanitized.replace(/\s*style\s*=\s*["'][^"']*["']/gi, "");
+
+    // Remove font-family and other font-related CSS properties
+    sanitized = sanitized
+      .replace(/font-family\s*:\s*[^;]*;?/gi, "")
+      .replace(/font-size\s*:\s*[^;]*;?/gi, "")
+      .replace(/font-weight\s*:\s*[^;]*;?/gi, "")
+      .replace(/color\s*:\s*[^;]*;?/gi, "");
+
+    // Remove script tags for security
+    sanitized = sanitized.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "");
+
+    // Remove potentially harmful attributes
+    sanitized = sanitized.replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, "");
+
+    return sanitized;
+  } catch (error) {
+    console.error("خطا در پاک‌سازی HTML:", error);
+    return "خطا در نمایش محتوای ایمیل";
+  }
+};

src/index.css

@@ -261,3 +261,38 @@ textarea::placeholder {
 .animate-spin-reverse {
   animation: spin-reverse 1s linear infinite;
 }
+
+/* Email Content Isolation */
+.email-content-container {
+  /* ایزوله کردن استایل‌های ایمیل از بقیه سایت */
+  isolation: isolate;
+  contain: layout style;
+}
+
+.email-content-container * {
+  /* اعمال فونت اصلی سایت به تمام عناصر داخل ایمیل */
+  font-family: irancell !important;
+  /* محدود کردن اندازه فونت */
+  font-size: inherit !important;
+  line-height: inherit !important;
+  /* جلوگیری از تغییر رنگ پس‌زمینه */
+  background-color: transparent !important;
+}
+
+.email-content-container p,
+.email-content-container div,
+.email-content-container span,
+.email-content-container table,
+.email-content-container td,
+.email-content-container th {
+  /* حفظ فونت و اندازه اصلی */
+  font-family: irancell !important;
+  font-size: 13px !important;
+  line-height: 1.75 !important;
+}
+
+.email-content-container img {
+  /* محدود کردن اندازه تصاویر */
+  max-width: 100% !important;
+  height: auto !important;
+}

src/pages/received/Detail.tsx

@@ -1,5 +1,5 @@
 import Button from '@/components/Button'
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import AvatarImage from '@/assets/images/avatar.svg'
@@ -9,16 +9,17 @@ import AnswerIcon from '@/assets/images/answer.svg'
 import Header from './Components/Header'
 import ReactQuill from 'react-quill-new';
 import Select from '@/components/Select'
-import { useGetMessageDetail, useSendEmail } from './hooks/useEmailData'
+import { useGetInbox, useGetMessageDetail, useSendEmail } from './hooks/useEmailData'
 import { useAuthStore } from '../auth/store/AuthStore'
 import { SendEmailDto } from './types/Types'
 import { toast } from '@/components/Toast'
-import { formatDate } from '@/config/func'
+import { formatDate, sanitizeEmailHTML } from '@/config/func'
 import SkeletonDetail from './Components/SkeletonDetail'
 
 const DetailEmail: FC = () => {
 
     const { t } = useTranslation()
+    const { refetch } = useGetInbox({ page: 1 })
     const { id } = useParams<{ id: string }>()
     const { email: userEmail } = useAuthStore()
     const [showAnswer, setShowAnswer] = useState<boolean>(false)
@@ -26,7 +27,7 @@ const DetailEmail: FC = () => {
     const [priority, setPriority] = useState<string>('')
 
     // API hooks
-    const { data: messageDetail, isLoading, error } = useGetMessageDetail(id || '', !!id)
+    const { data: messageDetail, isLoading, error, isSuccess } = useGetMessageDetail(id || '', !!id)
     const sendEmailMutation = useSendEmail()
     // const saveDraftMutation = useSaveDraft()
 
@@ -107,6 +108,12 @@ const DetailEmail: FC = () => {
         toast('قابلیت ارسال به دیگران به زودی اضافه خواهد شد', 'info')
     }
 
+    useEffect(() => {
+        if (isSuccess) {
+            refetch()
+        }
+    }, [isSuccess])
+
     if (isLoading) {
         return (
             <SkeletonDetail />
@@ -157,7 +164,11 @@ const DetailEmail: FC = () => {
 
             <div className='xl:mt-8 mt-3 text-[13px] leading-7 font-light'>
                 {messageDetail.html && messageDetail.html.length > 0 ? (
-                    <div dangerouslySetInnerHTML={{ __html: messageDetail.html.join('') }} />
+                    <div
+                        className='email-content-container p-4 bg-gray-50 rounded-lg overflow-hidden'
+
+                        dangerouslySetInnerHTML={{ __html: sanitizeEmailHTML(messageDetail.html.join('')) }}
+                    />
                 ) : (
                     <p>{messageDetail.text || 'محتوای پیام'}</p>
                 )}