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 17:10:09 +02:00
parent ddcb428233
commit 149a49d6f3
1 changed files with 121 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
components/email/RichEmailEditor.tsx
View File

@ -53,17 +53,24 @@ function cleanupTableStructures(htmlContent: string): string {
if (table.closest('blockquote') || if (table.closest('blockquote') ||
(isReplyEmail && table.innerHTML.includes('wrote:'))) { (isReplyEmail && table.innerHTML.includes('wrote:'))) {
console.log('Preserving table inside quoted content'); 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;'); // Add width attribute to all cells to prevent width calculation issues
// Make sure all cells have some basic styling
const cells = table.querySelectorAll('td, th'); const cells = table.querySelectorAll('td, th');
cells.forEach(cell => { cells.forEach(cell => {
if (cell instanceof HTMLTableCellElement) { if (cell instanceof HTMLTableCellElement) {
if (!cell.hasAttribute('width')) {
cell.setAttribute('width', '100');
}
cell.style.padding = '4px'; cell.style.padding = '4px';
cell.style.textAlign = 'left'; cell.style.textAlign = 'left';
cell.style.verticalAlign = 'top'; 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; return;
} }
@ -75,6 +82,21 @@ function cleanupTableStructures(htmlContent: string): string {
console.log('Preserving forwarded email header table'); console.log('Preserving forwarded email header table');
// Ensure the table has proper styling // Ensure the table has proper styling
table.setAttribute('style', 'margin: 10px 0; border-collapse: collapse; font-size: 13px; color: #333;'); 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; return;
} }
@ -90,6 +112,8 @@ function cleanupTableStructures(htmlContent: string): string {
if (isSimpleTable) { if (isSimpleTable) {
console.log('Preserving simple table structure'); console.log('Preserving simple table structure');
// Add width attribute
table.setAttribute('width', '100%');
return; return;
} }
@ -328,6 +352,43 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
if (editorContainer) { if (editorContainer) {
editorContainer.classList.add('email-editor-container'); 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('<table');
console.log('Checking if better-table should be enabled:', {
hasReplyForwardContent,
hasTables
});
// Only initialize table module for regular content, not for replies/forwards
if (!hasReplyForwardContent && hasTables) {
console.log('Initializing better-table module for regular content with tables');
quillRef.current.getModule('better-table').setTableSelection(true);
} else if (hasReplyForwardContent && hasTables) {
// For reply/forward content with tables, we'll use a more limited approach
console.log('Tables in reply/forward content detected - using limited table handling');
// Don't initialize selection tools to avoid errors
} else {
console.log('No tables detected or simple content - proceeding without table module');
}
}
}, 300);
} catch (err) {
console.warn('Error initializing better-table module:', err);
}
}
setIsReady(true); setIsReady(true);
}; };
@ -404,55 +465,65 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
quillRef.current.setText(textContent || 'No content available'); quillRef.current.setText(textContent || 'No content available');
} }
} else { } else {
// SIMPLIFIED: Set content directly to the root element rather than using clipboard // Special handling for reply or forward content
if (quillRef.current && quillRef.current.root) { 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) { // Set content directly to the root element
console.log('Using special handling for reply/forward content update'); if (quillRef.current && quillRef.current.root) {
// Clean up tables with special care for quoted content // Temporarily disable the better-table module if it's initialized
contentToSet = cleanupTableStructures(sanitizedContent); if (quillRef.current.getModule('better-table')) {
} quillRef.current.getModule('better-table').hideTableTools();
}
// First set the content
quillRef.current.root.innerHTML = contentToSet; // Set content without table handling by the module
quillRef.current.root.innerHTML = contentToSet;
// Then safely apply formatting only if quillRef is valid
try { // Delay applying formatting to ensure Quill is fully ready
if (quillRef.current && setTimeout(() => {
quillRef.current.format && if (quillRef.current) {
typeof quillRef.current.format === 'function' && try {
quillRef.current.root && // Set the direction for the content
quillRef.current.root.innerHTML && quillRef.current.format('direction', direction);
quillRef.current.root.innerHTML.trim().length > 0) { if (direction === 'rtl') {
quillRef.current.format('align', 'right');
// Delay formatting to ensure Quill is fully ready }
setTimeout(() => {
if (quillRef.current) { // Force update
try { quillRef.current.update();
// Set the direction for the content
quillRef.current.format('direction', direction); // Set selection to beginning
if (direction === 'rtl') { quillRef.current.setSelection(0, 0);
quillRef.current.format('align', 'right'); } catch (innerError) {
} console.error('Error applying delayed formatting:', innerError);
}
// Force update }
quillRef.current.update(); }, 100);
}
// Set selection to beginning } else {
quillRef.current.setSelection(0, 0); // For regular content, use Quill's normal process
} catch (innerError) { if (quillRef.current && quillRef.current.root) {
console.error('Error applying delayed formatting:', innerError); quillRef.current.root.innerHTML = contentToSet;
}
} // Safely apply formatting
}, 100); // Small delay to ensure editor is ready try {
} else { quillRef.current.format('direction', direction);
console.warn('Skipping format - either editor not ready or content empty'); 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
} }
} }
} }