diff --git a/components/email/RichEmailEditor.tsx b/components/email/RichEmailEditor.tsx index 4b6093cd..d01d95d1 100644 --- a/components/email/RichEmailEditor.tsx +++ b/components/email/RichEmailEditor.tsx @@ -27,6 +27,50 @@ const RichEmailEditor: React.FC = ({ const toolbarRef = useRef(null); const quillRef = useRef(null); const [isReady, setIsReady] = useState(false); + + // Utility function to safely handle tables in the content + const prepareTablesForDisplay = (content: string): string => { + if (!content || !content.includes(']*width)/g, + ']*width)/g, + '
]*style)/g, + '/g, + '
' + ); + + 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 = ({ startsWithHtml: initialContent.trim().startsWith('<'), containsForwardedMessage: initialContent.includes('---------- Forwarded message ----------'), containsReplyIndicator: initialContent.includes('wrote:'), - hasBlockquote: initialContent.includes(' = ({ initialContent.includes(' = ({ firstNChars: initialContent.substring(0, 100).replace(/\n/g, '\\n') }); + // Check if content has tables + const hasTable = initialContent.includes(' = ({ initialContent.includes(' = ({ 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 = ({ 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 */