courrier clean 2

components/email/ComposeEmail.tsx

@@ -237,6 +237,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   const [body, setBody] = useState<string>('');
   const [userMessage, setUserMessage] = useState<string>('');
   const [originalContent, setOriginalContent] = useState<string>('');
+  const [editingOriginalContent, setEditingOriginalContent] = useState<boolean>(false);
   const [showCc, setShowCc] = useState<boolean>(false);
   const [showBcc, setShowBcc] = useState<boolean>(false);
   const [sending, setSending] = useState<boolean>(false);
@@ -249,6 +250,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   
   // Refs
   const editorRef = useRef<HTMLDivElement>(null);
+  const originalContentRef = useRef<HTMLDivElement>(null);
   const attachmentInputRef = useRef<HTMLInputElement>(null);
   
   // Initialize the form when replying to or forwarding an email
@@ -411,6 +413,19 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
     setAttachments(current => current.filter((_, i) => i !== index));
   };
 
+  // Handle editing of original content
+  const handleOriginalContentInput = (e: React.FormEvent<HTMLDivElement>) => {
+    if (originalContentRef.current) {
+      const content = originalContentRef.current.innerHTML;
+      setOriginalContent(content);
+    }
+  };
+
+  // Toggle original content editing
+  const toggleEditOriginalContent = () => {
+    setEditingOriginalContent(!editingOriginalContent);
+  };
+
   // Modified send handler to combine user message with forwarded content
   const handleSend = async () => {
     if (!to) {
@@ -618,17 +633,35 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
               }}
             />
             
-            {/* Original content display with visual separation - now as plain text for better reliability */}
+            {/* Original content display with visual separation */}
             {type !== 'new' && originalContent && (
               <div className="border-t">
-                <div className="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500">
+                <div className="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500 flex justify-between items-center">
-                  {type === 'forward' ? 'Forwarded content (original)' : 'Original message'}
+                  <span>{type === 'forward' ? 'Forwarded content (original)' : 'Original message'}</span>
+                  <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    onClick={toggleEditOriginalContent} 
+                    className="h-6 px-2 text-xs"
+                  >
+                    {editingOriginalContent ? 'Done Editing' : 'Edit Content'}
+                  </Button>
                 </div>
                 <div className="p-4 bg-gray-50 border-t overflow-auto max-h-[400px]">
-                  <div 
+                  {editingOriginalContent ? (
-                    className="forwarded-content text-sm" 
+                    <div 
-                    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(originalContent) }}
+                      ref={originalContentRef}
-                  />
+                      contentEditable={true}
+                      className="forwarded-content text-sm" 
+                      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(originalContent) }}
+                      onInput={handleOriginalContentInput}
+                    />
+                  ) : (
+                    <div 
+                      className="forwarded-content text-sm" 
+                      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(originalContent) }}
+                    />
+                  )}
                 </div>
               </div>
             )}