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') ||
(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<RichEmailEditorProps> = ({
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('<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);
};
@ -404,55 +465,65 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
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
}
}
}