courrier preview

components/email/RichEmailEditor.tsx

@@ -24,10 +24,16 @@ interface RichEmailEditorProps {
 // Register better table module
 function registerTableModule() {
   try {
+    // Only attempt to register if the module exists
+    if (typeof QuillBetterTable !== 'undefined') {
       Quill.register({
         'modules/better-table': QuillBetterTable
       }, true);
       return true;
+    } else {
+      console.warn('QuillBetterTable module is not available, skipping registration');
+      return false;
+    }
   } catch (error) {
     console.error('Error registering table module:', error);
     return false;
@@ -166,51 +172,6 @@ function cleanupTableStructures(htmlContent: string, isReplyOrForward: boolean =
   }
 }
 
-// Clean up existing editor before creating a new one
-const cleanupExistingEditor = () => {
-  try {
-    // Clear any existing timeouts
-    if (quillInitTimeoutRef.current) {
-      clearTimeout(quillInitTimeoutRef.current);
-      quillInitTimeoutRef.current = null;
-    }
-    
-    // Remove existing Quill instance if it exists
-    if (quillRef.current) {
-      console.log('Cleaning up existing Quill editor');
-      
-      // Remove event listeners
-      try {
-        quillRef.current.off('text-change');
-        quillRef.current.off('selection-change');
-        
-        // Get the container of the editor
-        const editorContainer = document.querySelector('#quill-editor');
-        if (editorContainer instanceof HTMLElement) {
-          // Clear the content
-          editorContainer.innerHTML = '';
-        }
-      } catch (err) {
-        console.warn('Error removing Quill event listeners:', err);
-      }
-      
-      // Set to null to ensure garbage collection
-      quillRef.current = null;
-    }
-    
-    // Also ensure the editor element is empty
-    const editorElement = document.querySelector('#quill-editor');
-    if (editorElement) {
-      editorElement.innerHTML = '';
-    }
-    
-    return true;
-  } catch (error) {
-    console.error('Error cleaning up editor:', error);
-    return false;
-  }
-};
-
 // Define toolbar options for consistency
 const emailToolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],
@@ -238,9 +199,47 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
   const editorRef = useRef<HTMLDivElement>(null);
   const toolbarRef = useRef<HTMLDivElement>(null);
   const quillRef = useRef<any>(null);
+  const quillInitTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const [isReady, setIsReady] = useState(false);
   const [isReplyOrForward, setIsReplyOrForward] = useState(false);
-  const quillInitTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Helper function to clean up existing editor
+  const cleanupEditor = () => {
+    try {
+      // Clear any existing timeouts
+      if (quillInitTimeoutRef.current) {
+        clearTimeout(quillInitTimeoutRef.current);
+        quillInitTimeoutRef.current = null;
+      }
+      
+      // Remove existing Quill instance if it exists
+      if (quillRef.current) {
+        console.log('Cleaning up existing Quill editor');
+        
+        // Remove event listeners
+        try {
+          quillRef.current.off('text-change');
+          quillRef.current.off('selection-change');
+          
+          // Get the container of the editor
+          if (editorRef.current) {
+            // Clear the content
+            editorRef.current.innerHTML = '';
+          }
+        } catch (err) {
+          console.warn('Error removing Quill event listeners:', err);
+        }
+        
+        // Set to null to ensure garbage collection
+        quillRef.current = null;
+      }
+      
+      return true;
+    } catch (error) {
+      console.error('Error cleaning up editor:', error);
+      return false;
+    }
+  };
 
   // Initialize editor effect
   useEffect(() => {
@@ -251,7 +250,7 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
     const initEditor = async () => {
       try {
         // First cleanup any existing editor instances to prevent memory leaks
-        cleanupExistingEditor();
+        cleanupEditor();
         
         if (!editorRef.current) {
           console.error('Editor reference is not available');
@@ -268,29 +267,24 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
         registerTableModule();
         console.log('Better Table module registered successfully');
         
-        // Set up Quill with configurations
+        // Create a modules configuration that works
-        const quill = new Quill(editorRef.current, {
+        const modules = {
-          modules: {
           toolbar: emailToolbarOptions,
-            betterTable: {
-              operationMenu: {
-                items: {
-                  unmergeCells: {
-                    text: 'Unmerge cells',
-                  },
-                },
-              },
-            },
           keyboard: {
             bindings: customKeyBindings,
-            },
+          }
-          },
+        };
+        
+        // Set up Quill with configurations
+        const quill = new Quill(editorRef.current, {
+          modules,
           theme: 'snow',
           placeholder: placeholder || 'Write your message here...',
           formats: allowedFormats,
         });
 
         // Store the instance for cleanup
+        quillRef.current = quill;
         editorInstance = quill;
         
         // Process and set initial content if available
@@ -304,12 +298,9 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             // Use dangerouslyPasteHTML which accepts string content directly
             quill.clipboard.dangerouslyPasteHTML(processedContent);
             
-            // Emit initial content
+            // Emit initial content with the string HTML
             if (onChange) {
-              onChange({
+              onChange(quill.root.innerHTML);
-                html: quill.root.innerHTML,
-                text: quill.getText()
-              });
             }
             
             initialContentSet = true;
@@ -319,9 +310,19 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             // Fallback to direct HTML setting if conversion fails
             try {
               quill.root.innerHTML = handleBlockedContent(initialContent);
+              
+              // Still emit the change even with the fallback approach
+              if (onChange) {
+                onChange(quill.root.innerHTML);
+              }
             } catch (innerErr) {
               console.error('Fallback content setting failed:', innerErr);
               quill.root.innerHTML = '<p>Error loading content. Please start typing or paste content manually.</p>';
+              
+              // Emit the fallback content
+              if (onChange) {
+                onChange(quill.root.innerHTML);
+              }
             }
           }
         }
@@ -341,6 +342,9 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             quill.setSelection(0, 0);
           }, 100);
         }
+        
+        // Mark editor as ready
+        setIsReady(true);
       } catch (error) {
         console.error('Error initializing editor:', error);
       }
@@ -352,7 +356,7 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
         console.warn('Editor initialization timed out after 3 seconds');
         
         // Force cleanup and try one more time with minimal settings
-        cleanupExistingEditor();
+        cleanupEditor();
         
         try {
           // Create a simple editor without complex modules
@@ -370,13 +374,18 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
             onChange(html);
           });
           
+          quillRef.current = fallbackQuill;
           editorInstance = fallbackQuill;
+          setIsReady(true);
         } catch (fallbackError) {
           console.error('Fallback editor initialization also failed:', fallbackError);
         }
       }
     }, 3000);
     
+    // Store timeout reference to allow cleanup
+    quillInitTimeoutRef.current = initializationTimeout;
+    
     // Initialize the editor
     initEditor();
     
@@ -386,6 +395,11 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
         clearTimeout(initializationTimeout);
       }
       
+      if (quillInitTimeoutRef.current) {
+        clearTimeout(quillInitTimeoutRef.current);
+        quillInitTimeoutRef.current = null;
+      }
+      
       if (editorInstance) {
         try {
           // Remove event listeners
@@ -401,7 +415,7 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
       }
       
       // Final cleanup of any Quill instances
-      cleanupExistingEditor();
+      cleanupEditor();
     };
   }, [initialContent, onChange, placeholder, autofocus, mode, allowedFormats, customKeyBindings]);