fix templete

src/config/func.ts

@@ -89,22 +89,28 @@ export const sanitizeEmailHTML = (html: string): string => {
     // 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, "");
 
+    // فقط font-family و font-size رو از inline styles حذف کن، بقیه رو حفظ کن
+    sanitized = sanitized.replace(
+      /style\s*=\s*["']([^"']*?)["']/gi,
+      (match, styles) => {
+        // فقط font-family و font-size رو حذف کن
+        const cleanedStyles = styles
+          .replace(/font-family\s*:\s*[^;]*;?/gi, "")
+          .replace(/font-size\s*:\s*[^;]*;?/gi, "")
+          .replace(/font-weight\s*:\s*[^;]*;?/gi, "")
+          .replace(/;\s*;/g, ";") // حذف سمیکالن‌های اضافی
+          .replace(/^\s*;\s*|\s*;\s*$/g, ""); // حذف سمیکالن‌های ابتدا و انتها
+
+        return cleanedStyles ? `style="${cleanedStyles}"` : "";
+      }
+    );
+
     return sanitized;
   } catch (error) {
     console.error("خطا در پاک‌سازی HTML:", error);

src/index.css

@@ -266,29 +266,29 @@ textarea::placeholder {
 .email-content-container {
   /* ایزوله کردن استایل‌های ایمیل از بقیه سایت */
   isolation: isolate;
-  contain: layout style;
+  /* فقط font-family رو override کن */
+  font-family: irancell;
+  font-size: 13px;
+  line-height: 1.75;
+  color: inherit;
 }
 
 .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 {
-  /* حفظ فونت و اندازه اصلی */
+.email-content-container h1,
+.email-content-container h2,
+.email-content-container h3,
+.email-content-container h4,
+.email-content-container h5,
+.email-content-container h6 {
+  /* فقط فونت رو override کن */
   font-family: irancell !important;
-  font-size: 13px !important;
-  line-height: 1.75 !important;
 }
 
 .email-content-container img {
@@ -296,3 +296,17 @@ textarea::placeholder {
   max-width: 100% !important;
   height: auto !important;
 }
+
+.email-content-container table {
+  /* حفظ استایل‌های جدول */
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.email-content-container td,
+.email-content-container th {
+  /* فقط فونت رو override کن */
+  font-family: irancell !important;
+  /* حفظ padding های جدول */
+  padding: 8px;
+}

src/pages/received/Detail.tsx

@@ -165,8 +165,7 @@ const DetailEmail: FC = () => {
             <div className='xl:mt-8 mt-3 text-[13px] leading-7 font-light'>
                 {messageDetail.html && messageDetail.html.length > 0 ? (
                     <div
-                        className='email-content-container p-4 bg-gray-50 rounded-lg overflow-hidden'
-
+                        className='email-content-container border border-gray-200 rounded-lg p-4 overflow-hidden'
                         dangerouslySetInnerHTML={{ __html: sanitizeEmailHTML(messageDetail.html.join('')) }}
                     />
                 ) : (