courrier preview

components/email/RichEmailEditor.tsx

@@ -27,6 +27,50 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
   const toolbarRef = useRef<HTMLDivElement>(null);
   const quillRef = useRef<any>(null);
   const [isReady, setIsReady] = useState(false);
+  
+  // Utility function to safely handle tables in the content
+  const prepareTablesForDisplay = (content: string): string => {
+    if (!content || !content.includes('<table')) return content;
+    
+    try {
+      // First fix any broken table structures that might cause errors
+      let fixedContent = content;
+      
+      // Add width attributes to all tables to prevent layout issues
+      fixedContent = fixedContent.replace(
+        /<table(?![^>]*width)/g, 
+        '<table width="100%" style="width: 100%; table-layout: fixed; border-collapse: collapse;"'
+      );
+      
+      // Add width to table cells that don't have it to prevent the error
+      fixedContent = fixedContent.replace(
+        /<td(?![^>]*width)/g, 
+        '<td width="auto" style="width: auto; min-width: 30px; word-break: break-word;"'
+      );
+      
+      // Add standard styling to all table cells to ensure consistent display
+      fixedContent = fixedContent.replace(
+        /<td(?![^>]*style)/g, 
+        '<td style="border: 1px solid #ddd; padding: 6px 8px; overflow-wrap: break-word;"'
+      );
+      
+      // Wrap all tables in a div with proper styling to prevent layout issues
+      fixedContent = fixedContent.replace(
+        /<table/g,
+        '<div class="table-wrapper" style="width:100%; overflow-x:auto;"><table'
+      );
+      
+      fixedContent = fixedContent.replace(
+        /<\/table>/g,
+        '</table></div>'
+      );
+      
+      return fixedContent;
+    } catch (e) {
+      console.warn('Error preparing tables:', e);
+      return content;
+    }
+  };
 
   // Initialize Quill editor when component mounts
   useEffect(() => {
@@ -93,9 +137,13 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             startsWithHtml: initialContent.trim().startsWith('<'),
             containsForwardedMessage: initialContent.includes('---------- Forwarded message ----------'),
             containsReplyIndicator: initialContent.includes('wrote:'),
-            hasBlockquote: initialContent.includes('<blockquote')
+            hasBlockquote: initialContent.includes('<blockquote'),
+            hasTable: initialContent.includes('<table')
           });
           
+          // Check if content contains tables - if so, we need to be careful with table module
+          const hasTable = initialContent.includes('<table');
+          
           // Detect text direction
           const direction = detectTextDirection(initialContent);
           
@@ -106,12 +154,38 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             initialContent.includes('<blockquote')
           );
           
+          // If content has tables AND is a forwarded/reply email, don't try to use the better-table module
+          // as it can cause the "Cannot read properties of undefined (reading 'width')" error
+          if (hasTable && isPreFormattedContent) {
+            console.log('Pre-formatted content has tables - better-table module will be disabled');
+            // Table module might cause errors when dealing with forwarded/replied tables
+            // Don't initialize it for this session
+          } else if (hasTable && !isPreFormattedContent && tableModule) {
+            // Only initialize table module for regular emails with tables
+            try {
+              console.log('Initializing better-table module for regular content with tables');
+              // Initialize the table module with safe defaults
+              const betterTableModule = quillRef.current.getModule('better-table');
+              if (betterTableModule && typeof betterTableModule.appendTo === 'function') {
+                betterTableModule.appendTo(editorRef.current);
+              }
+            } catch (tableError) {
+              console.error('Failed to initialize table module:', tableError);
+              // Continue without table module
+            }
+          }
+          
           // Process HTML content using centralized utility or use as-is if pre-formatted
           let sanitizedContent;
           if (isPreFormattedContent) {
             console.log('Content appears to be pre-formatted as reply/forward, using as-is');
             // Just do basic sanitization without additional processing
             sanitizedContent = sanitizeHtml(initialContent);
+            
+            // For pre-formatted content with tables, fix table attributes to prevent width errors
+            if (hasTable) {
+              sanitizedContent = prepareTablesForDisplay(sanitizedContent);
+            }
           } else {
             // Full processing for regular content
             sanitizedContent = processHtmlContent(initialContent);
@@ -251,6 +325,9 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             firstNChars: initialContent.substring(0, 100).replace(/\n/g, '\\n')
           });
           
+          // Check if content has tables
+          const hasTable = initialContent.includes('<table');
+          
           // Detect text direction
           const direction = detectTextDirection(initialContent);
           
@@ -261,12 +338,33 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             initialContent.includes('<blockquote')
           );
           
+          // For forwarded/replied content with tables, make sure the table module is disabled
+          // to prevent "Cannot read properties of undefined (reading 'width')" errors
+          if (hasTable && isPreFormattedContent && quillRef.current) {
+            console.log('Updated content has tables in forwarded/replied context - ensuring table module is disabled');
+            // Ensure table module is not active
+            try {
+              const tableModule = quillRef.current.getModule('better-table');
+              if (tableModule && typeof tableModule.destroy === 'function') {
+                tableModule.destroy();
+              }
+            } catch (tableError) {
+              console.warn('Error handling table module:', tableError);
+              // Continue despite the error
+            }
+          }
+          
           // Process HTML content using centralized utility or use as-is if pre-formatted
           let sanitizedContent;
           if (isPreFormattedContent) {
             console.log('Content appears to be pre-formatted as reply/forward, using as-is');
             // Just do basic sanitization without additional processing
             sanitizedContent = sanitizeHtml(initialContent);
+            
+            // For pre-formatted content with tables, fix table attributes to prevent width errors
+            if (hasTable) {
+              sanitizedContent = prepareTablesForDisplay(sanitizedContent);
+            }
           } else {
             // Full processing for regular content
             sanitizedContent = processHtmlContent(initialContent);
@@ -508,6 +606,13 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
           table-layout: fixed !important;
           margin: 10px 0 !important;
           border: 1px solid #ddd !important;
+          max-width: 100% !important;
+        }
+        
+        :global(.ql-editor .table-wrapper) {
+          max-width: 100% !important;
+          margin: 10px 0 !important;
+          overflow-x: auto !important;
         }
         
         :global(.ql-editor td), 
@@ -517,7 +622,9 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
           overflow-wrap: break-word !important;
           word-break: break-word !important;
           min-width: 30px !important;
+          width: auto !important; /* Add auto width to prevent undefined width errors */
           font-size: 13px !important;
+          position: relative !important; /* Ensure positioned context for any absolute elements */
         }
         
         /* Email quote styling */