courrier preview

components/email/RichEmailEditor.tsx

@@ -15,6 +15,51 @@ interface RichEmailEditorProps {
   preserveFormatting?: boolean;
 }
 
+/**
+ * Clean up problematic table structures that cause issues with quill-better-table
+ */
+function cleanupTableStructures(htmlContent: string): string {
+  if (!htmlContent) return htmlContent;
+  
+  try {
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+    
+    // Find tables with problematic nested structures
+    const tables = tempDiv.querySelectorAll('table');
+    
+    // Simple approach: if we have tables in forwarded content, convert them to divs
+    // to prevent quill-better-table from trying to interpret them
+    if (tables.length > 0 && htmlContent.includes('---------- Forwarded message ----------')) {
+      console.log(`Converting ${tables.length} tables in forwarded email to prevent Quill errors`);
+      
+      tables.forEach(table => {
+        // Create a replacement div
+        const replacementDiv = document.createElement('div');
+        replacementDiv.className = 'converted-table';
+        replacementDiv.style.border = '1px solid #ddd';
+        replacementDiv.style.margin = '10px 0';
+        replacementDiv.style.padding = '10px';
+        
+        // Copy the table's innerHTML
+        replacementDiv.innerHTML = table.innerHTML;
+        
+        // Replace the table with the div
+        if (table.parentNode) {
+          table.parentNode.replaceChild(replacementDiv, table);
+        }
+      });
+      
+      return tempDiv.innerHTML;
+    }
+    
+    return htmlContent;
+  } catch (error) {
+    console.error('Error cleaning up table structures:', error);
+    return htmlContent;
+  }
+}
+
 const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
   initialContent,
   onChange,
@@ -96,11 +141,10 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             hasBlockquote: initialContent.includes('<blockquote')
           });
           
-          // Detect text direction
-          const direction = detectTextDirection(initialContent);
-          
           // Process HTML content using centralized utility
-          const sanitizedContent = processHtmlContent(initialContent);
+          const processed = processHtmlContent(initialContent);
+          const sanitizedContent = processed.sanitizedContent;
+          const direction = processed.direction; // Use direction from processed result
           
           // Log sanitized content details for debugging
           console.log('Sanitized content details:', {
@@ -236,11 +280,10 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             firstNChars: initialContent.substring(0, 100).replace(/\n/g, '\\n')
           });
           
-          // Detect text direction
-          const direction = detectTextDirection(initialContent);
-          
           // Process HTML content using centralized utility
-          const sanitizedContent = processHtmlContent(initialContent);
+          const processed = processHtmlContent(initialContent);
+          const sanitizedContent = processed.sanitizedContent;
+          const direction = processed.direction; // Use direction from processed result
           
           // Log sanitized content details for debugging
           console.log('Sanitized content details:', {
@@ -269,23 +312,41 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
           } else {
             // SIMPLIFIED: Set content directly to the root element rather than using clipboard
             if (quillRef.current && quillRef.current.root) {
+              // Clean up any problematic table structures first
+              const cleanedContent = cleanupTableStructures(sanitizedContent);
+              
               // First set the content
-              quillRef.current.root.innerHTML = sanitizedContent;
+              quillRef.current.root.innerHTML = cleanedContent;
               
               // Then safely apply formatting only if quillRef is valid
               try {
-                if (quillRef.current && quillRef.current.format && quillRef.current.root.innerHTML.trim().length > 0) {
+                if (quillRef.current && 
-                  // Set the direction for the content
+                    quillRef.current.format && 
-                  quillRef.current.format('direction', direction);
+                    typeof quillRef.current.format === 'function' &&
-                  if (direction === 'rtl') {
+                    quillRef.current.root && 
-                    quillRef.current.format('align', 'right');
+                    quillRef.current.root.innerHTML && 
-                  }
+                    quillRef.current.root.innerHTML.trim().length > 0) {
                   
-                  // Force update
+                  // Delay formatting to ensure Quill is fully ready
-                  quillRef.current.update();
+                  setTimeout(() => {
-                  
+                    if (quillRef.current) {
-                  // Set selection to beginning
+                      try {
-                  quillRef.current.setSelection(0, 0);
+                        // Set the direction for the content
+                        quillRef.current.format('direction', direction);
+                        if (direction === 'rtl') {
+                          quillRef.current.format('align', 'right');
+                        }
+                        
+                        // Force update
+                        quillRef.current.update();
+                        
+                        // Set selection to beginning
+                        quillRef.current.setSelection(0, 0);
+                      } catch (innerError) {
+                        console.error('Error applying delayed formatting:', innerError);
+                      }
+                    }
+                  }, 100); // Small delay to ensure editor is ready
                 } else {
                   console.warn('Skipping format - either editor not ready or content empty');
                 }

lib/utils/email-utils.ts

@@ -667,34 +667,4 @@ export function formatEmailForReplyOrForward(
   } else {
     return formatReplyEmail(email, type as 'reply' | 'reply-all');
   }
-}
-
-// First check if Quill is fully initialized and ready
-if (quillRef.current && 
-    quillRef.current.format && 
-    typeof quillRef.current.format === 'function' &&
-    quillRef.current.root && 
-    quillRef.current.root.innerHTML && 
-    quillRef.current.root.innerHTML.trim().length > 0) {
-    
-    // Wrap formatting operations in try/catch to prevent errors from crashing the app
-    try {
-        // Delay the formatting to ensure Quill is fully ready
-        setTimeout(() => {
-            if (quillRef.current) {
-                // Set the direction for the content
-                quillRef.current.format('direction', direction);
-                
-                if (direction === 'rtl') {
-                    quillRef.current.format('align', 'right');
-                }
-                
-                // Set selection to beginning
-                quillRef.current.setSelection(0, 0);
-            }
-        }, 100);
-    } catch (formatError) {
-        console.error('Error applying formatting:', formatError);
-        // Continue without formatting if there's an error
-    }
 }