alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

courrier preview

Browse Source
This commit is contained in:
alma 2025-05-01 16:30:42 +02:00
parent f9244f5a20
commit d582a2ba30
2 changed files with 81 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
components/email/RichEmailEditor.tsx
View File

@ -15,6 +15,51 @@ interface RichEmailEditorProps {
preserveFormatting?: boolean;
}
/**
* Clean up problematic table structures that cause issues with quill-better-table
*/
function cleanupTableStructures(htmlContent: string): string {
if (!htmlContent) return htmlContent;
try {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlContent;
// Find tables with problematic nested structures
const tables = tempDiv.querySelectorAll('table');
// Simple approach: if we have tables in forwarded content, convert them to divs
// to prevent quill-better-table from trying to interpret them
if (tables.length > 0 && htmlContent.includes('---------- Forwarded message ----------')) {
console.log(`Converting ${tables.length} tables in forwarded email to prevent Quill errors`);
tables.forEach(table => {
// Create a replacement div
const replacementDiv = document.createElement('div');
replacementDiv.className = 'converted-table';
replacementDiv.style.border = '1px solid #ddd';
replacementDiv.style.margin = '10px 0';
replacementDiv.style.padding = '10px';
// Copy the table's innerHTML
replacementDiv.innerHTML = table.innerHTML;
// Replace the table with the div
if (table.parentNode) {
table.parentNode.replaceChild(replacementDiv, table);
}
});
return tempDiv.innerHTML;
}
return htmlContent;
} catch (error) {
console.error('Error cleaning up table structures:', error);
return htmlContent;
}
}
const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
initialContent,
onChange,
@ -96,11 +141,10 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
hasBlockquote: initialContent.includes('<blockquote')
});
// Detect text direction
const direction = detectTextDirection(initialContent);
// Process HTML content using centralized utility
const sanitizedContent = processHtmlContent(initialContent);
const processed = processHtmlContent(initialContent);
const sanitizedContent = processed.sanitizedContent;
const direction = processed.direction; // Use direction from processed result
// Log sanitized content details for debugging
console.log('Sanitized content details:', {
@ -236,11 +280,10 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
firstNChars: initialContent.substring(0, 100).replace(/\n/g, '\\n')
});
// Detect text direction
const direction = detectTextDirection(initialContent);
// Process HTML content using centralized utility
const sanitizedContent = processHtmlContent(initialContent);
const processed = processHtmlContent(initialContent);
const sanitizedContent = processed.sanitizedContent;
const direction = processed.direction; // Use direction from processed result
// Log sanitized content details for debugging
console.log('Sanitized content details:', {
@ -269,23 +312,41 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
} else {
// SIMPLIFIED: Set content directly to the root element rather than using clipboard
if (quillRef.current && quillRef.current.root) {
// Clean up any problematic table structures first
const cleanedContent = cleanupTableStructures(sanitizedContent);
// First set the content
quillRef.current.root.innerHTML = sanitizedContent;
quillRef.current.root.innerHTML = cleanedContent;
// Then safely apply formatting only if quillRef is valid
try {
if (quillRef.current && quillRef.current.format && quillRef.current.root.innerHTML.trim().length > 0) {
// Set the direction for the content
quillRef.current.format('direction', direction);
if (direction === 'rtl') {
quillRef.current.format('align', 'right');
}
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) {
// Force update
quillRef.current.update();
// Set selection to beginning
quillRef.current.setSelection(0, 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');
}

30
lib/utils/email-utils.ts
View File

@ -667,34 +667,4 @@ export function formatEmailForReplyOrForward(
} else {
return formatReplyEmail(email, type as 'reply' | 'reply-all');
}
}
// First check if Quill is fully initialized and ready
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) {
// Wrap formatting operations in try/catch to prevent errors from crashing the app
try {
// Delay the formatting to ensure Quill is fully ready
setTimeout(() => {
if (quillRef.current) {
// Set the direction for the content
quillRef.current.format('direction', direction);
if (direction === 'rtl') {
quillRef.current.format('align', 'right');
}
// Set selection to beginning
quillRef.current.setSelection(0, 0);
}
}, 100);
} catch (formatError) {
console.error('Error applying formatting:', formatError);
// Continue without formatting if there's an error
}
}