propmt input in mobile + print email + ltr and rtl new message + najva token

src/components/newMessage/EmailEditor.tsx

@@ -1,5 +1,6 @@
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 import ReactQuill from 'react-quill-new'
+import 'react-quill-new/dist/quill.snow.css'
 
 interface EmailEditorProps {
     value: string
@@ -10,19 +11,85 @@ interface EmailEditorProps {
 const EmailEditor: FC<EmailEditorProps> = ({
     value,
     onChange,
-    placeholder = ''
+    placeholder = 'متن پیام خود را وارد کنید...'
 }) => {
+    const modules = useMemo(() => ({
+        toolbar: [
+            ['bold', 'italic', 'underline'],
+            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+            [{ 'align': [] }],
+            [{ 'direction': 'rtl' }],
+            ['link'],
+            [{ 'color': [] }, { 'background': [] }],
+            [{ 'font': [] }, { 'size': ['small', false, 'large', 'huge'] }],
+            ['clean']
+        ],
+    }), [])
 
+    const formats = [
+        'bold', 'italic', 'underline',
+        'list', 'bullet',
+        'align', 'direction',
+        'link',
+        'color', 'background',
+        'font', 'size'
+    ]
 
     return (
-        <ReactQuill
-            theme="snow"
-            value={value}
-            onChange={onChange}
-            placeholder={placeholder}
-            style={{ minHeight: '120px' }}
-            className='text-sm'
-        />
+        <div dir="rtl" className="text-right">
+            <style>{`
+                .ql-editor {
+                    direction: rtl;
+                    text-align: start;
+                    unicode-bidi: plaintext;
+                    font-family: 'Irancell', 'Vazirmatn', sans-serif;
+                    font-size: 14px;
+                    line-height: 1.6;
+                    min-height: 120px;
+                }
+                .ql-editor p {
+                    unicode-bidi: plaintext;
+                    text-align: start;
+                    direction: auto;
+                }
+                .ql-editor.ql-blank::before {
+                    direction: rtl;
+                    text-align: right;
+                    font-style: normal;
+                    color: #9ca3af;
+                }
+                .ql-toolbar {
+                    border-top: 1px solid #e5e7eb;
+                    border-left: 1px solid #e5e7eb;
+                    border-right: 1px solid #e5e7eb;
+                    border-radius: 8px 8px 0 0;
+                }
+                .ql-container {
+                    border-bottom: 1px solid #e5e7eb;
+                    border-left: 1px solid #e5e7eb;
+                    border-right: 1px solid #e5e7eb;
+                    border-radius: 0 0 8px 8px;
+                }
+                .ql-snow .ql-picker-label {
+                    color: #374151;
+                }
+                .ql-snow .ql-stroke {
+                    stroke: #6b7280;
+                }
+                .ql-snow .ql-fill {
+                    fill: #6b7280;
+                }
+            `}</style>
+            <ReactQuill
+                theme="snow"
+                value={value}
+                onChange={onChange}
+                placeholder={placeholder}
+                modules={modules}
+                formats={formats}
+                className="bg-white rounded-lg"
+            />
+        </div>
     )
 }
 

src/components/newMessage/NewMessage.tsx

@@ -146,7 +146,7 @@ const NewMessage: FC = () => {
                             </div>
 
                             <div className='flex gap-2 items-end'>
-                                <div className='flex flex-1 items-end gap-2'>
+                                <div className='flex lg:flex-row flex-col flex-1 items-end gap-2'>
                                     <Input
                                         label={t('new_message.subject')}
                                         value={subject}

src/components/newMessage/hooks/useNewMessage.ts

@@ -146,7 +146,9 @@ export const useNewMessage = () => {
         const draftUpdateData = {
           to: parseEmailAddresses(toEmails),
           subject,
-          html: ensureString(content),
+          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, ""),
           ...(attachments.length > 0 && { attachments }),
         };
@@ -170,6 +172,9 @@ 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>`,
                 isDraft: true,
                 uploadOnly: true,
               },
@@ -195,7 +200,9 @@ export const useNewMessage = () => {
           from: { address: userEmail || "sender@example.com" },
           to: parseEmailAddresses(toEmails),
           subject,
-          html: ensureString(content),
+          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, ""),
           ...(attachments.length > 0 && { attachments }),
           ...(isDraft && { isDraft: true, uploadOnly: true }),