fix rtl and ltr text in new message

.env

@@ -7,7 +7,7 @@ VITE_SOCKET_URL = 'wss://dmail-api.danakcorp.com/email'
 # VITE_SOCKET_URL = 'ws://192.168.1.106:4000/email'
 
 VITE_BASE_URL = 'https://dmail-api.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.1.106:4000'
+# VITE_BASE_URL = 'http://192.168.1.117:4000'
 
 
 VITE_SERVICE_ID = 'e51afdc3-ea0b-49cf-8f49-2a6f131b024e'

src/components/newMessage/EmailEditor.tsx

@@ -47,11 +47,15 @@ const EmailEditor: FC<EmailEditorProps> = ({
                     line-height: 1.6;
                     min-height: 120px;
                 }
-                .ql-editor p {
+                .ql-editor p, .ql-editor div, .ql-editor span {
                     unicode-bidi: plaintext;
                     text-align: start;
                     direction: auto;
                 }
+                .ql-editor br + * {
+                    direction: auto;
+                    unicode-bidi: plaintext;
+                }
                 .ql-editor.ql-blank::before {
                     direction: rtl;
                     text-align: right;

src/components/newMessage/hooks/useNewMessage.ts

@@ -9,6 +9,7 @@ import { SendEmailDto, EmailAttachmentDto } from "@/pages/received/types/Types";
 import { useUpdateDraft, useSendDraft } from "@/pages/draft/hooks/useDraftData";
 import { toast } from "@/components/Toast";
 import { useEmailSuggestions } from "./useEmailSuggestions";
+import { detectTextDirection } from "@/helpers/utils";
 
 export const useNewMessage = () => {
   const {
@@ -143,13 +144,13 @@ export const useNewMessage = () => {
     try {
       let messageId = "";
       if (isEditingDraft) {
+        const contentString = ensureString(content);
+        const textDirection = detectTextDirection(contentString);
         const draftUpdateData = {
           to: parseEmailAddresses(toEmails),
           subject,
-          html: `<div dir="auto" style="text-align: start; unicode-bidi: plaintext; font-family: 'Irancell', 'Vazirmatn', sans-serif;">${ensureString(
-            content
-          )}</div>`,
-          text: ensureString(content).replace(/<[^>]*>/g, ""),
+          html: `<div dir="${textDirection}" style="text-align: start; unicode-bidi: plaintext; font-family: 'Irancell', 'Vazirmatn', sans-serif;">${contentString}</div>`,
+          text: contentString.replace(/<[^>]*>/g, ""),
           ...(attachments.length > 0 && { attachments }),
         };
 
@@ -172,9 +173,7 @@ export const useNewMessage = () => {
               messageId: editingDraftId.toString(),
               draftData: {
                 ...draftUpdateData,
-                html: `<div dir="auto" style="text-align: start; unicode-bidi: plaintext; font-family: 'Irancell', 'Vazirmatn', sans-serif;">${ensureString(
-                  content
-                )}</div>`,
+                html: `<div dir="${textDirection}" style="text-align: start; unicode-bidi: plaintext; font-family: 'Irancell', 'Vazirmatn', sans-serif;">${contentString}</div>`,
                 isDraft: true,
                 uploadOnly: true,
               },
@@ -196,14 +195,14 @@ export const useNewMessage = () => {
         setEditingDraftId(null);
         return true;
       } else {
+        const contentString = ensureString(content);
+        const textDirection = detectTextDirection(contentString);
         const emailData: SendEmailDto = {
           from: { address: userEmail || "sender@example.com" },
           to: parseEmailAddresses(toEmails),
           subject,
-          html: `<div dir="auto" style="text-align: start; unicode-bidi: plaintext; font-family: 'Irancell', 'Vazirmatn', sans-serif;">${ensureString(
-            content
-          )}</div>`,
-          text: ensureString(content).replace(/<[^>]*>/g, ""),
+          html: `<div dir="${textDirection}" style="text-align: start; unicode-bidi: plaintext; font-family: 'Irancell', 'Vazirmatn', sans-serif;">${contentString}</div>`,
+          text: contentString.replace(/<[^>]*>/g, ""),
           ...(attachments.length > 0 && { attachments }),
           ...(isDraft && { isDraft: true, uploadOnly: true }),
         };

src/helpers/utils.ts

@@ -9,3 +9,32 @@ import { twMerge } from "tailwind-merge";
 export const clx = (...classes: (string | boolean | undefined)[]): string => {
   return twMerge(classes.filter(Boolean).join(" "));
 };
+
+/**
+ * Detects the text direction based on the content
+ *
+ * @param text - The text to analyze
+ * @returns 'rtl' | 'ltr' | 'auto'
+ */
+export const detectTextDirection = (text: string): "rtl" | "ltr" | "auto" => {
+  // Remove HTML tags
+  const cleanText = text.replace(/<[^>]*>/g, "").trim();
+  if (!cleanText) return "auto";
+
+  // Count RTL and LTR characters
+  const rtlChars =
+    cleanText.match(
+      /[\u0590-\u083F\u08A0-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/g
+    ) || [];
+  const ltrChars = cleanText.match(/[A-Za-z]/g) || [];
+
+  const rtlCount = rtlChars.length;
+  const ltrCount = ltrChars.length;
+
+  // If there's a significant difference, return that direction
+  if (rtlCount > ltrCount * 1.5) return "rtl";
+  if (ltrCount > rtlCount * 1.5) return "ltr";
+
+  // Otherwise, use auto
+  return "auto";
+};