diff --git a/components/email/RichEmailEditor.tsx b/components/email/RichEmailEditor.tsx index 3605cb9f..e2f79b73 100644 --- a/components/email/RichEmailEditor.tsx +++ b/components/email/RichEmailEditor.tsx @@ -53,17 +53,24 @@ function cleanupTableStructures(htmlContent: string): string { if (table.closest('blockquote') || (isReplyEmail && table.innerHTML.includes('wrote:'))) { console.log('Preserving table inside quoted content'); - // Apply minimal styling to ensure it renders correctly - table.setAttribute('style', 'border-collapse: collapse; width: 100%; max-width: 100%; margin: 8px 0;'); - // Make sure all cells have some basic styling + + // Add width attribute to all cells to prevent width calculation issues const cells = table.querySelectorAll('td, th'); cells.forEach(cell => { if (cell instanceof HTMLTableCellElement) { + if (!cell.hasAttribute('width')) { + cell.setAttribute('width', '100'); + } cell.style.padding = '4px'; cell.style.textAlign = 'left'; cell.style.verticalAlign = 'top'; } }); + + // Apply minimal styling to ensure it renders correctly + table.setAttribute('style', 'border-collapse: collapse; width: 100%; max-width: 100%; margin: 8px 0;'); + // Add explicit width attribute to the table + table.setAttribute('width', '100%'); return; } @@ -75,6 +82,21 @@ function cleanupTableStructures(htmlContent: string): string { console.log('Preserving forwarded email header table'); // Ensure the table has proper styling table.setAttribute('style', 'margin: 10px 0; border-collapse: collapse; font-size: 13px; color: #333;'); + // Add explicit width attribute + table.setAttribute('width', '100%'); + + // Add width to cells + const cells = table.querySelectorAll('td, th'); + cells.forEach(cell => { + if (cell instanceof HTMLTableCellElement && !cell.hasAttribute('width')) { + // First column (labels) narrower + if (cell.textContent?.includes(':')) { + cell.setAttribute('width', '80'); + } else { + cell.setAttribute('width', '400'); + } + } + }); return; } @@ -90,6 +112,8 @@ function cleanupTableStructures(htmlContent: string): string { if (isSimpleTable) { console.log('Preserving simple table structure'); + // Add width attribute + table.setAttribute('width', '100%'); return; } @@ -328,6 +352,43 @@ const RichEmailEditor: React.FC = ({ if (editorContainer) { editorContainer.classList.add('email-editor-container'); } + + // Safe initialization of better-table module if available + if (tableModule) { + try { + // Wait a small delay to ensure content is properly set before initializing table module + setTimeout(() => { + if (quillRef.current) { + // First check if content has tables and whether it's a reply/forward + const hasReplyForwardContent = + quillRef.current.root.innerHTML.includes('wrote:') || + quillRef.current.root.innerHTML.includes('blockquote') || + quillRef.current.root.innerHTML.includes('Forwarded message'); + + const hasTables = quillRef.current.root.innerHTML.includes(' = ({ quillRef.current.setText(textContent || 'No content available'); } } else { - // SIMPLIFIED: Set content directly to the root element rather than using clipboard - if (quillRef.current && quillRef.current.root) { - // Special handling for reply or forward content - let contentToSet = sanitizedContent; + // Special handling for reply or forward content + let contentToSet = sanitizedContent; + + if (isReplyOrForward) { + console.log('Using special handling for reply/forward content update'); + // Clean up tables with special care for quoted content + contentToSet = cleanupTableStructures(sanitizedContent); - if (isReplyOrForward) { - console.log('Using special handling for reply/forward content update'); - // Clean up tables with special care for quoted content - contentToSet = cleanupTableStructures(sanitizedContent); - } - - // First set the content - quillRef.current.root.innerHTML = contentToSet; - - // Then safely apply formatting only if quillRef is valid - try { - 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) { - - // Delay formatting to ensure Quill is fully ready - setTimeout(() => { - if (quillRef.current) { - try { - // 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'); + // Set content directly to the root element + if (quillRef.current && quillRef.current.root) { + // Temporarily disable the better-table module if it's initialized + if (quillRef.current.getModule('better-table')) { + quillRef.current.getModule('better-table').hideTableTools(); + } + + // Set content without table handling by the module + quillRef.current.root.innerHTML = contentToSet; + + // Delay applying formatting to ensure Quill is fully ready + setTimeout(() => { + if (quillRef.current) { + try { + // 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); + } + } else { + // For regular content, use Quill's normal process + if (quillRef.current && quillRef.current.root) { + quillRef.current.root.innerHTML = contentToSet; + + // Safely apply formatting + try { + 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 (formatError) { + console.error('Error applying formatting:', formatError); } - } catch (formatError) { - console.error('Error applying formatting:', formatError); - // Continue without formatting if there's an error } } }