mail page fix design dang

components/ComposeEmail.tsx

@@ -79,13 +79,14 @@ 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/>
+        <div class="compose-area" contenteditable="true"></div>
-        <br/>
+        <div class="quoted-content" contenteditable="false">
           ${forwardFrom ? `
             ---------- Forwarded message ---------<br/>
             From: ${forwardFrom.from}<br/>
@@ -100,24 +101,32 @@ export default function ComposeEmail({
           <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
+      // 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(composeBodyRef.current, 0);
+        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>