mail page fix design dang

components/ComposeEmail.tsx

@@ -79,45 +79,54 @@ export default function ComposeEmail({
 }: ComposeEmailProps) {
   const composeBodyRef = useRef<HTMLDivElement>(null);
   const [localContent, setLocalContent] = useState('');
+  const [isInitialized, setIsInitialized] = useState(false);
   
   useEffect(() => {
-    if (composeBodyRef.current) {
+    if (composeBodyRef.current && !isInitialized) {
       // Initialize the content structure with both new reply area and original content in a single contentEditable div
       const content = replyTo || forwardFrom ? `
-        <br/>
-        <br/>
-        ${forwardFrom ? `
-          ---------- Forwarded message ---------<br/>
-          From: ${forwardFrom.from}<br/>
-          Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
-          Subject: ${forwardFrom.subject}<br/>
-          To: ${forwardFrom.to}<br/>
-          ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
-          <br/>
-        ` : `
-          On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:<br/>
-        `}
-        <blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid rgb(204,204,204); padding-left: 1ex;">
-          ${composeBody}
-        </blockquote>
+        <div class="compose-area" contenteditable="true"></div>
+        <div class="quoted-content" contenteditable="false">
+          ${forwardFrom ? `
+            ---------- Forwarded message ---------<br/>
+            From: ${forwardFrom.from}<br/>
+            Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
+            Subject: ${forwardFrom.subject}<br/>
+            To: ${forwardFrom.to}<br/>
+            ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
+            <br/>
+          ` : `
+            On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:<br/>
+          `}
+          <blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid rgb(204,204,204); padding-left: 1ex;">
+            ${composeBody}
+          </blockquote>
+        </div>
       ` : '';
 
       composeBodyRef.current.innerHTML = content;
+      setIsInitialized(true);
       
-      // Place cursor at the beginning
-      const range = document.createRange();
-      const sel = window.getSelection();
-      range.setStart(composeBodyRef.current, 0);
-      range.collapse(true);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
+      // Place cursor at the beginning of the compose area
+      const composeArea = composeBodyRef.current.querySelector('.compose-area');
+      if (composeArea) {
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.setStart(composeArea, 0);
+        range.collapse(true);
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+      }
     }
-  }, [composeBody, replyTo, forwardFrom]);
+  }, [composeBody, replyTo, forwardFrom, isInitialized]);
 
   // Modified input handler to work with the single contentEditable area
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (!composeBodyRef.current) return;
-    setComposeBody(composeBodyRef.current.innerHTML);
+    const composeArea = composeBodyRef.current.querySelector('.compose-area');
+    if (composeArea) {
+      setComposeBody(composeArea.innerHTML);
+    }
   };
 
   const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -257,13 +266,11 @@ export default function ComposeEmail({
               />
             </div>
 
-            {/* Message Body - Single contentEditable area */}
+            {/* Message Body - Single contentEditable area with separated regions */}
             <div className="flex-1 min-h-[200px] flex flex-col">
               <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
               <div
                 ref={composeBodyRef}
-                contentEditable
-                onInput={handleInput}
                 className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-gray-900 overflow-y-auto focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                 style={{ direction: 'ltr' }}
                 dir="ltr"
@@ -271,7 +278,25 @@ export default function ComposeEmail({
                 role="textbox"
                 aria-multiline="true"
                 tabIndex={0}
-              />
+              >
+                <style>{`
+                  .compose-area {
+                    min-height: 100px;
+                    margin-bottom: 20px;
+                    outline: none;
+                  }
+                  .quoted-content {
+                    color: #666;
+                    user-select: text;
+                    -webkit-user-select: text;
+                  }
+                  .quoted-content blockquote {
+                    margin: 0.8ex;
+                    padding-left: 1ex;
+                    border-left: 1px solid #ccc;
+                  }
+                `}</style>
+              </div>
             </div>
           </div>
         </div>