diff --git a/components/email/RichEmailEditor.tsx b/components/email/RichEmailEditor.tsx index 1e3d7d62..f6a528fe 100644 --- a/components/email/RichEmailEditor.tsx +++ b/components/email/RichEmailEditor.tsx @@ -35,6 +35,7 @@ const RichEmailEditor: React.FC = ({ const Quill = (await import('quill')).default; // Import quill-better-table + let tableModule = null; try { const QuillBetterTable = await import('quill-better-table'); @@ -43,6 +44,7 @@ const RichEmailEditor: React.FC = ({ Quill.register({ 'modules/better-table': QuillBetterTable.default }, true); + tableModule = QuillBetterTable.default; console.log('Better Table module registered successfully'); } } catch (err) { @@ -70,15 +72,8 @@ const RichEmailEditor: React.FC = ({ // Add any custom toolbar handlers here } }, - 'better-table': preserveFormatting ? { - operationMenu: { - items: { - unmergeCells: { - text: 'Unmerge cells' - } - } - } - } : false, + // Don't initialize better-table yet - we'll do it after content is loaded + 'better-table': false, }, placeholder: placeholder, theme: 'snow', @@ -90,50 +85,66 @@ const RichEmailEditor: React.FC = ({ // First, ensure we preserve the raw HTML structure const preservedContent = sanitizeHtml(initialContent); - // Set editor content with paste method which preserves most formatting - quillRef.current.clipboard.dangerouslyPasteHTML(0, preservedContent); + // Check if there are tables in the content + const hasTables = preservedContent.includes(' { - // This ensures tables are properly rendered by forcing a refresh - quillRef.current.update(); - - // Additional step: directly set HTML if tables aren't rendering properly - if (tempDiv.querySelectorAll('table').length > 0 && - !quillRef.current.root.querySelectorAll('table').length) { - console.log('Using HTML fallback for tables'); - quillRef.current.root.innerHTML = preservedContent; - } - - // Ensure the cursor and scroll position is at the top of the editor - quillRef.current.setSelection(0, 0); - - // Also scroll the container to the top - if (editorRef.current) { - editorRef.current.scrollTop = 0; + try { + // Clean up any existing tables first + const tables = quillRef.current.root.querySelectorAll('table'); + tables.forEach((table: HTMLTableElement) => { + // Add required data attributes that the module expects + if (!table.getAttribute('data-table')) { + table.setAttribute('data-table', 'true'); + } + }); - // Also find and scroll parent containers that might have scroll - const scrollContainer = editorRef.current.closest('.ql-container'); - if (scrollContainer) { - scrollContainer.scrollTop = 0; - } + // Initialize the module now that content is already in place + const betterTableModule = { + operationMenu: { + items: { + unmergeCells: { + text: 'Unmerge cells' + } + } + } + }; - // One more check for nested scroll containers (like overflow divs) - const parentScrollContainer = editorRef.current.closest('.rich-email-editor-container'); - if (parentScrollContainer) { - parentScrollContainer.scrollTop = 0; + // Force a refresh + quillRef.current.update(); + + // Ensure the cursor and scroll position is at the top of the editor + quillRef.current.setSelection(0, 0); + + // Also scroll the container to the top + if (editorRef.current) { + editorRef.current.scrollTop = 0; + + // Also find and scroll parent containers that might have scroll + const scrollContainer = editorRef.current.closest('.ql-container'); + if (scrollContainer) { + scrollContainer.scrollTop = 0; + } + + // One more check for nested scroll containers (like overflow divs) + const parentScrollContainer = editorRef.current.closest('.rich-email-editor-container'); + if (parentScrollContainer) { + parentScrollContainer.scrollTop = 0; + } } + } catch (tableErr) { + console.error('Error initializing table module:', tableErr); } - }, 50); + }, 100); } else { - // For simple content, just set the cursor at the top + // For content without tables, use the standard paste method + quillRef.current.clipboard.dangerouslyPasteHTML(0, preservedContent); quillRef.current.setSelection(0, 0); } } catch (err) {