= ({
}
}
}
- }, [initialContent, isReady, isReplyOrForward]);
+ }, [initialContent, isReady]);
return (
diff --git a/hooks/use-email-state.ts b/hooks/use-email-state.ts
index 088e01e9..fa08e11c 100644
--- a/hooks/use-email-state.ts
+++ b/hooks/use-email-state.ts
@@ -61,84 +61,6 @@ export const useEmailState = () => {
}
}, []);
- // Normalize email content structure to ensure consistency
- const normalizeEmailContent = useCallback((emailData: any): any => {
- if (!emailData) return emailData;
-
- // Create a clone to avoid modifying the original
- const normalizedEmail = { ...emailData };
-
- // Log the incoming email structure
- console.log(`[NORMALIZE_EMAIL] Processing email ${normalizedEmail.id || 'unknown'}: ${normalizedEmail.subject || 'No subject'}`);
-
- try {
- // Handle content field normalization
- if (!normalizedEmail.content) {
- // Create content object if it doesn't exist
- normalizedEmail.content = { html: '', text: '' };
-
- // Try to populate content from html/text fields
- if (normalizedEmail.html) {
- normalizedEmail.content.html = normalizedEmail.html;
- console.log(`[NORMALIZE_EMAIL] Populated content.html from email.html (${normalizedEmail.html.length} chars)`);
- }
-
- if (normalizedEmail.text) {
- normalizedEmail.content.text = normalizedEmail.text;
- console.log(`[NORMALIZE_EMAIL] Populated content.text from email.text (${normalizedEmail.text.length} chars)`);
- }
- }
- // If content is a string, convert to object format
- else if (typeof normalizedEmail.content === 'string') {
- const htmlContent = normalizedEmail.content;
- normalizedEmail.content = {
- html: htmlContent,
- text: htmlContent.replace(/<[^>]*>/g, '') // Simple HTML to text conversion
- };
- console.log(`[NORMALIZE_EMAIL] Converted string content to object (${htmlContent.length} chars)`);
- }
- // Ensure content object has both html and text properties
- else if (typeof normalizedEmail.content === 'object') {
- if (!normalizedEmail.content.html && normalizedEmail.content.text) {
- // Convert text to simple HTML if only text exists
- normalizedEmail.content.html = normalizedEmail.content.text
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/\n/g, '
');
- console.log(`[NORMALIZE_EMAIL] Created HTML content from text (${normalizedEmail.content.text.length} chars)`);
- } else if (!normalizedEmail.content.text && normalizedEmail.content.html) {
- // Create plain text version if only HTML exists
- normalizedEmail.content.text = normalizedEmail.content.html.replace(/<[^>]*>/g, '');
- console.log(`[NORMALIZE_EMAIL] Created text content from HTML (${normalizedEmail.content.html.length} chars)`);
- }
- }
-
- // Ensure html and text properties are also set for backward compatibility
- if (normalizedEmail.content?.html && !normalizedEmail.html) {
- normalizedEmail.html = normalizedEmail.content.html;
- }
-
- if (normalizedEmail.content?.text && !normalizedEmail.text) {
- normalizedEmail.text = normalizedEmail.content.text;
- }
-
- console.log(`[NORMALIZE_EMAIL] Normalized email content structure successfully`, {
- hasContentObj: !!normalizedEmail.content,
- contentHtmlLength: normalizedEmail.content?.html?.length || 0,
- contentTextLength: normalizedEmail.content?.text?.length || 0,
- hasHtml: !!normalizedEmail.html,
- hasText: !!normalizedEmail.text
- });
-
- return normalizedEmail;
- } catch (error) {
- console.error(`[NORMALIZE_EMAIL] Error normalizing email content:`, error);
- // Return the original data if normalization fails
- return emailData;
- }
- }, []);
-
// Load emails from the server
const loadEmails = useCallback(async (page: number, perPage: number, isLoadMore: boolean = false) => {
// CRITICAL FIX: Do important validation before setting loading state
@@ -155,407 +77,194 @@ export const useEmailState = () => {
dispatch({ type: 'SET_LOADING', payload: true });
try {
- // CRITICAL FIX: Add more robust validation to prevent "toString of undefined" error
- if (!state.currentFolder) {
- logEmailOp('ERROR', 'Current folder is undefined, cannot load emails');
- dispatch({
- type: 'SET_ERROR',
- payload: 'Invalid folder configuration'
- });
- dispatch({ type: 'SET_LOADING', payload: false });
- return;
- }
-
// Get normalized parameters using helper function with proper account ID handling
const accountId = state.selectedAccount ? state.selectedAccount.id : undefined;
+ const { normalizedFolder, effectiveAccountId, prefixedFolder } =
+ normalizeFolderAndAccount(state.currentFolder, accountId);
- // Additional validation for accountId
- if (accountId === undefined && state.currentFolder.includes(':')) {
- // Try to extract accountId from folder string as fallback
- const extractedAccountId = state.currentFolder.split(':')[0];
- if (extractedAccountId) {
- console.log(`[DEBUG-LOAD_EMAILS] Using extracted accountId ${extractedAccountId} from folder path as fallback`);
- const { normalizedFolder, effectiveAccountId, prefixedFolder } =
- normalizeFolderAndAccount(state.currentFolder, extractedAccountId);
-
- logEmailOp('LOAD_EMAILS', `Loading emails for ${prefixedFolder} (account: ${effectiveAccountId}, isLoadMore: ${isLoadMore}, page: ${page})`);
+ logEmailOp('LOAD_EMAILS', `Loading emails for ${prefixedFolder} (account: ${effectiveAccountId}, isLoadMore: ${isLoadMore}, page: ${page})`);
+
+ // Construct query parameters
+ const queryParams = new URLSearchParams({
+ folder: normalizedFolder,
+ page: page.toString(),
+ perPage: perPage.toString(),
+ accountId: effectiveAccountId
+ });
+
+ // Debug log existing emails count
+ if (isLoadMore) {
+ console.log(`[DEBUG-PAGINATION] Loading more emails. Current page: ${page}, existing emails: ${state.emails.length}`);
+ }
+
+ // Try to get cached emails first
+ logEmailOp('CACHE_CHECK', `Checking cache for ${prefixedFolder}, page: ${page}`);
+ const cachedEmails = await getCachedEmailsWithTimeout(
+ session.user.id,
+ prefixedFolder,
+ page,
+ perPage,
+ 100,
+ effectiveAccountId
+ );
+
+ if (cachedEmails) {
+ logEmailOp('CACHE_HIT', `Using cached data for ${prefixedFolder}, page: ${page}, emails: ${cachedEmails.emails?.length || 0}, isLoadMore: ${isLoadMore}`);
+
+ // Ensure cached data has emails array property
+ if (Array.isArray(cachedEmails.emails)) {
+ // CRITICAL FIX: Double check we're using the right action type based on isLoadMore param
+ console.log(`[DEBUG-CACHE_HIT] Dispatching ${isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS'} with ${cachedEmails.emails.length} emails`);
- // Continue with the extracted account ID...
- // Construct query parameters
- const queryParams = new URLSearchParams({
- folder: normalizedFolder,
- page: page.toString(),
- perPage: perPage.toString(),
- accountId: effectiveAccountId
- });
-
- // Debug log existing emails count
- if (isLoadMore) {
- console.log(`[DEBUG-PAGINATION] Loading more emails. Current page: ${page}, existing emails: ${state.emails.length}`);
- }
-
- // Try to get cached emails first
- logEmailOp('CACHE_CHECK', `Checking cache for ${prefixedFolder}, page: ${page}`);
- const cachedEmails = await getCachedEmailsWithTimeout(
- session.user.id,
- prefixedFolder,
- page,
- perPage,
- 100,
- effectiveAccountId
- );
-
- if (cachedEmails) {
- logEmailOp('CACHE_HIT', `Using cached data for ${prefixedFolder}, page: ${page}, emails: ${cachedEmails.emails?.length || 0}, isLoadMore: ${isLoadMore}`);
-
- // Ensure cached data has emails array property
- if (Array.isArray(cachedEmails.emails)) {
- // CRITICAL FIX: Double check we're using the right action type based on isLoadMore param
- console.log(`[DEBUG-CACHE_HIT] Dispatching ${isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS'} with ${cachedEmails.emails.length} emails`);
-
- // Dispatch appropriate action based on if we're loading more - DO NOT OVERRIDE isLoadMore!
- dispatch({
- type: isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS',
- payload: cachedEmails.emails
- });
-
- // Set pagination info from cache if available
- if (cachedEmails.totalEmails) {
- dispatch({ type: 'SET_TOTAL_EMAILS', payload: cachedEmails.totalEmails });
- }
-
- if (cachedEmails.totalPages) {
- dispatch({ type: 'SET_TOTAL_PAGES', payload: cachedEmails.totalPages });
- }
-
- // Update available mailboxes if provided
- if (cachedEmails.mailboxes && cachedEmails.mailboxes.length > 0) {
- dispatch({ type: 'SET_MAILBOXES', payload: cachedEmails.mailboxes });
- }
- }
-
- // CRITICAL FIX: If this was a loadMore operation, check the result after the dispatch
- if (isLoadMore) {
- setTimeout(() => {
- console.log(`[DEBUG-CACHE_HIT_APPEND] After ${isLoadMore ? 'APPEND' : 'SET'}, email count is now: ${state.emails.length}`);
- }, 0);
- }
-
- return;
- }
-
- // Fetch emails from API if no cache hit
- logEmailOp('API_FETCH', `Fetching emails from API: ${queryParams.toString()}, isLoadMore: ${isLoadMore}`);
- console.log(`[DEBUG-API_FETCH] Fetching from /api/courrier?${queryParams.toString()}`);
- const response = await fetch(`/api/courrier?${queryParams.toString()}`);
-
- if (!response.ok) {
- // CRITICAL FIX: Try to recover from fetch errors by retrying with different pagination
- if (isLoadMore && page > 1) {
- logEmailOp('ERROR_RECOVERY', `Failed to fetch emails for page ${page}, attempting to recover by decrementing page`);
- console.log(`[DEBUG-ERROR] API returned ${response.status} for page ${page}`);
- // If we're loading more and there's an error, just decrement the page to avoid getting stuck
- dispatch({ type: 'SET_PAGE', payload: page - 1 });
- dispatch({ type: 'SET_LOADING', payload: false });
- // Also reset total pages to try again
- dispatch({ type: 'SET_TOTAL_PAGES', payload: page });
- return;
- }
-
- const errorData = await response.json();
- throw new Error(errorData.error || 'Failed to fetch emails');
- }
-
- const data = await response.json();
- console.log(`[DEBUG-API_RESPONSE] Got response with ${data.emails?.length || 0} emails, totalPages: ${data.totalPages}, totalEmails: ${data.totalEmails}, isLoadMore: ${isLoadMore}`);
-
- // CRITICAL FIX: Enhanced empty results handling
- if (!data.emails || data.emails.length === 0) {
- console.log(`[DEBUG-EMPTY] No emails in response for page ${page}`);
- // If we're at a page > 1 and got no results, the paging is off, so try again with page 1
- if (page > 1 && !isLoadMore) {
- logEmailOp('EMPTY_RESULTS', `No emails returned for page ${page}, resetting to page 1`);
- dispatch({ type: 'SET_PAGE', payload: 1 });
- dispatch({ type: 'SET_LOADING', payload: false });
- return;
- }
-
- // If we're already at page 1, just update the state with no emails
- if (!isLoadMore) {
- logEmailOp('EMPTY_RESULTS', `No emails found in ${state.currentFolder}`);
- dispatch({ type: 'SET_EMAILS', payload: [] });
- dispatch({ type: 'SET_TOTAL_EMAILS', payload: 0 });
- dispatch({ type: 'SET_TOTAL_PAGES', payload: 0 });
- } else {
- // For load more, just set loading to false but keep existing emails
- dispatch({ type: 'SET_LOADING', payload: false });
- }
- return;
- }
-
- // Ensure all emails have proper account ID and folder format
- if (Array.isArray(data.emails)) {
- // Log email dates for debugging
- if (data.emails.length > 0) {
- logEmailOp('EMAIL_DATES', `First few email dates before processing:`,
- data.emails.slice(0, 5).map((e: any) => ({
- id: e.id.substring(0, 8),
- subject: e.subject?.substring(0, 20),
- date: e.date,
- dateObj: new Date(e.date),
- timestamp: new Date(e.date).getTime()
- }))
- );
- }
-
- data.emails.forEach((email: Email) => {
- // If email doesn't have an accountId, set it to the effective one
- if (!email.accountId) {
- email.accountId = effectiveAccountId;
- }
-
- // Ensure folder has the proper prefix format
- if (email.folder && !email.folder.includes(':')) {
- email.folder = `${email.accountId}:${email.folder}`;
- }
-
- // Ensure date is a valid Date object (handle strings or timestamps)
- if (email.date && !(email.date instanceof Date)) {
- try {
- // Convert to a proper Date object if it's a string or number
- const dateObj = new Date(email.date);
- // Verify it's a valid date
- if (!isNaN(dateObj.getTime())) {
- email.date = dateObj;
- }
- } catch (err) {
- // If conversion fails, log and use current date as fallback
- console.error(`Invalid date format for email ${email.id}: ${email.date}`);
- email.date = new Date();
- }
- }
- });
- }
-
- // CRITICAL FIX: Log what we're about to do
- console.log(`[DEBUG-DISPATCH] About to dispatch ${isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS'} with ${data.emails?.length || 0} emails`);
-
- // Update state with fetched data
+ // Dispatch appropriate action based on if we're loading more - DO NOT OVERRIDE isLoadMore!
dispatch({
type: isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS',
- payload: Array.isArray(data.emails) ? data.emails : []
+ payload: cachedEmails.emails
});
- // Double-check that we've updated the email list correctly after dispatch
- setTimeout(() => {
- console.log(`[DEBUG-AFTER-DISPATCH] Email count is now: ${state.emails.length}, should include the ${data.emails?.length || 0} new emails we just loaded`);
- }, 0);
-
- if (data.totalEmails) {
- dispatch({ type: 'SET_TOTAL_EMAILS', payload: data.totalEmails });
+ // Set pagination info from cache if available
+ if (cachedEmails.totalEmails) {
+ dispatch({ type: 'SET_TOTAL_EMAILS', payload: cachedEmails.totalEmails });
}
- if (data.totalPages) {
- dispatch({ type: 'SET_TOTAL_PAGES', payload: data.totalPages });
+ if (cachedEmails.totalPages) {
+ dispatch({ type: 'SET_TOTAL_PAGES', payload: cachedEmails.totalPages });
}
// Update available mailboxes if provided
- if (data.mailboxes && data.mailboxes.length > 0) {
- dispatch({ type: 'SET_MAILBOXES', payload: data.mailboxes });
+ if (cachedEmails.mailboxes && cachedEmails.mailboxes.length > 0) {
+ dispatch({ type: 'SET_MAILBOXES', payload: cachedEmails.mailboxes });
}
- } else {
- // If we can't extract a valid accountId, throw an error
- throw new Error("Cannot determine account ID for loading emails");
}
- } else {
- // Normal flow with valid accountId
- const { normalizedFolder, effectiveAccountId, prefixedFolder } =
- normalizeFolderAndAccount(state.currentFolder, accountId);
- logEmailOp('LOAD_EMAILS', `Loading emails for ${prefixedFolder} (account: ${effectiveAccountId}, isLoadMore: ${isLoadMore}, page: ${page})`);
-
- // Construct query parameters
- const queryParams = new URLSearchParams({
- folder: normalizedFolder,
- page: page.toString(),
- perPage: perPage.toString(),
- accountId: effectiveAccountId
- });
-
- // Debug log existing emails count
+ // CRITICAL FIX: If this was a loadMore operation, check the result after the dispatch
if (isLoadMore) {
- console.log(`[DEBUG-PAGINATION] Loading more emails. Current page: ${page}, existing emails: ${state.emails.length}`);
+ setTimeout(() => {
+ console.log(`[DEBUG-CACHE_HIT_APPEND] After ${isLoadMore ? 'APPEND' : 'SET'}, email count is now: ${state.emails.length}`);
+ }, 0);
}
- // Try to get cached emails first
- logEmailOp('CACHE_CHECK', `Checking cache for ${prefixedFolder}, page: ${page}`);
- const cachedEmails = await getCachedEmailsWithTimeout(
- session.user.id,
- prefixedFolder,
- page,
- perPage,
- 100,
- effectiveAccountId
- );
-
- if (cachedEmails) {
- logEmailOp('CACHE_HIT', `Using cached data for ${prefixedFolder}, page: ${page}, emails: ${cachedEmails.emails?.length || 0}, isLoadMore: ${isLoadMore}`);
-
- // Ensure cached data has emails array property
- if (Array.isArray(cachedEmails.emails)) {
- // CRITICAL FIX: Double check we're using the right action type based on isLoadMore param
- console.log(`[DEBUG-CACHE_HIT] Dispatching ${isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS'} with ${cachedEmails.emails.length} emails`);
-
- // Dispatch appropriate action based on if we're loading more - DO NOT OVERRIDE isLoadMore!
- dispatch({
- type: isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS',
- payload: cachedEmails.emails
- });
-
- // Set pagination info from cache if available
- if (cachedEmails.totalEmails) {
- dispatch({ type: 'SET_TOTAL_EMAILS', payload: cachedEmails.totalEmails });
- }
-
- if (cachedEmails.totalPages) {
- dispatch({ type: 'SET_TOTAL_PAGES', payload: cachedEmails.totalPages });
- }
-
- // Update available mailboxes if provided
- if (cachedEmails.mailboxes && cachedEmails.mailboxes.length > 0) {
- dispatch({ type: 'SET_MAILBOXES', payload: cachedEmails.mailboxes });
- }
- }
-
- // CRITICAL FIX: If this was a loadMore operation, check the result after the dispatch
- if (isLoadMore) {
- setTimeout(() => {
- console.log(`[DEBUG-CACHE_HIT_APPEND] After ${isLoadMore ? 'APPEND' : 'SET'}, email count is now: ${state.emails.length}`);
- }, 0);
- }
-
+ return;
+ }
+
+ // Fetch emails from API if no cache hit
+ logEmailOp('API_FETCH', `Fetching emails from API: ${queryParams.toString()}, isLoadMore: ${isLoadMore}`);
+ console.log(`[DEBUG-API_FETCH] Fetching from /api/courrier?${queryParams.toString()}`);
+ const response = await fetch(`/api/courrier?${queryParams.toString()}`);
+
+ if (!response.ok) {
+ // CRITICAL FIX: Try to recover from fetch errors by retrying with different pagination
+ if (isLoadMore && page > 1) {
+ logEmailOp('ERROR_RECOVERY', `Failed to fetch emails for page ${page}, attempting to recover by decrementing page`);
+ console.log(`[DEBUG-ERROR] API returned ${response.status} for page ${page}`);
+ // If we're loading more and there's an error, just decrement the page to avoid getting stuck
+ dispatch({ type: 'SET_PAGE', payload: page - 1 });
+ dispatch({ type: 'SET_LOADING', payload: false });
+ // Also reset total pages to try again
+ dispatch({ type: 'SET_TOTAL_PAGES', payload: page });
return;
}
- // Fetch emails from API if no cache hit
- logEmailOp('API_FETCH', `Fetching emails from API: ${queryParams.toString()}, isLoadMore: ${isLoadMore}`);
- console.log(`[DEBUG-API_FETCH] Fetching from /api/courrier?${queryParams.toString()}`);
- const response = await fetch(`/api/courrier?${queryParams.toString()}`);
-
- if (!response.ok) {
- // CRITICAL FIX: Try to recover from fetch errors by retrying with different pagination
- if (isLoadMore && page > 1) {
- logEmailOp('ERROR_RECOVERY', `Failed to fetch emails for page ${page}, attempting to recover by decrementing page`);
- console.log(`[DEBUG-ERROR] API returned ${response.status} for page ${page}`);
- // If we're loading more and there's an error, just decrement the page to avoid getting stuck
- dispatch({ type: 'SET_PAGE', payload: page - 1 });
- dispatch({ type: 'SET_LOADING', payload: false });
- // Also reset total pages to try again
- dispatch({ type: 'SET_TOTAL_PAGES', payload: page });
- return;
- }
-
- const errorData = await response.json();
- throw new Error(errorData.error || 'Failed to fetch emails');
- }
-
- const data = await response.json();
- console.log(`[DEBUG-API_RESPONSE] Got response with ${data.emails?.length || 0} emails, totalPages: ${data.totalPages}, totalEmails: ${data.totalEmails}, isLoadMore: ${isLoadMore}`);
-
- // CRITICAL FIX: Enhanced empty results handling
- if (!data.emails || data.emails.length === 0) {
- console.log(`[DEBUG-EMPTY] No emails in response for page ${page}`);
- // If we're at a page > 1 and got no results, the paging is off, so try again with page 1
- if (page > 1 && !isLoadMore) {
- logEmailOp('EMPTY_RESULTS', `No emails returned for page ${page}, resetting to page 1`);
- dispatch({ type: 'SET_PAGE', payload: 1 });
- dispatch({ type: 'SET_LOADING', payload: false });
- return;
- }
-
- // If we're already at page 1, just update the state with no emails
- if (!isLoadMore) {
- logEmailOp('EMPTY_RESULTS', `No emails found in ${state.currentFolder}`);
- dispatch({ type: 'SET_EMAILS', payload: [] });
- dispatch({ type: 'SET_TOTAL_EMAILS', payload: 0 });
- dispatch({ type: 'SET_TOTAL_PAGES', payload: 0 });
- } else {
- // For load more, just set loading to false but keep existing emails
- dispatch({ type: 'SET_LOADING', payload: false });
- }
+ const errorData = await response.json();
+ throw new Error(errorData.error || 'Failed to fetch emails');
+ }
+
+ const data = await response.json();
+ console.log(`[DEBUG-API_RESPONSE] Got response with ${data.emails?.length || 0} emails, totalPages: ${data.totalPages}, totalEmails: ${data.totalEmails}, isLoadMore: ${isLoadMore}`);
+
+ // CRITICAL FIX: Enhanced empty results handling
+ if (!data.emails || data.emails.length === 0) {
+ console.log(`[DEBUG-EMPTY] No emails in response for page ${page}`);
+ // If we're at a page > 1 and got no results, the paging is off, so try again with page 1
+ if (page > 1 && !isLoadMore) {
+ logEmailOp('EMPTY_RESULTS', `No emails returned for page ${page}, resetting to page 1`);
+ dispatch({ type: 'SET_PAGE', payload: 1 });
+ dispatch({ type: 'SET_LOADING', payload: false });
return;
}
- // Ensure all emails have proper account ID and folder format
- if (Array.isArray(data.emails)) {
- // Log email dates for debugging
- if (data.emails.length > 0) {
- logEmailOp('EMAIL_DATES', `First few email dates before processing:`,
- data.emails.slice(0, 5).map((e: any) => ({
- id: e.id.substring(0, 8),
- subject: e.subject?.substring(0, 20),
- date: e.date,
- dateObj: new Date(e.date),
- timestamp: new Date(e.date).getTime()
- }))
- );
+ // If we're already at page 1, just update the state with no emails
+ if (!isLoadMore) {
+ logEmailOp('EMPTY_RESULTS', `No emails found in ${state.currentFolder}`);
+ dispatch({ type: 'SET_EMAILS', payload: [] });
+ dispatch({ type: 'SET_TOTAL_EMAILS', payload: 0 });
+ dispatch({ type: 'SET_TOTAL_PAGES', payload: 0 });
+ } else {
+ // For load more, just set loading to false but keep existing emails
+ dispatch({ type: 'SET_LOADING', payload: false });
+ }
+ return;
+ }
+
+ // Ensure all emails have proper account ID and folder format
+ if (Array.isArray(data.emails)) {
+ // Log email dates for debugging
+ if (data.emails.length > 0) {
+ logEmailOp('EMAIL_DATES', `First few email dates before processing:`,
+ data.emails.slice(0, 5).map((e: any) => ({
+ id: e.id.substring(0, 8),
+ subject: e.subject?.substring(0, 20),
+ date: e.date,
+ dateObj: new Date(e.date),
+ timestamp: new Date(e.date).getTime()
+ }))
+ );
+ }
+
+ data.emails.forEach((email: Email) => {
+ // If email doesn't have an accountId, set it to the effective one
+ if (!email.accountId) {
+ email.accountId = effectiveAccountId;
}
- data.emails.forEach((email: Email) => {
- // If email doesn't have an accountId, set it to the effective one
- if (!email.accountId) {
- email.accountId = effectiveAccountId;
- }
-
- // Ensure folder has the proper prefix format
- if (email.folder && !email.folder.includes(':')) {
- email.folder = `${email.accountId}:${email.folder}`;
- }
-
- // Ensure date is a valid Date object (handle strings or timestamps)
- if (email.date && !(email.date instanceof Date)) {
- try {
- // Convert to a proper Date object if it's a string or number
- const dateObj = new Date(email.date);
- // Verify it's a valid date
- if (!isNaN(dateObj.getTime())) {
- email.date = dateObj;
- }
- } catch (err) {
- // If conversion fails, log and use current date as fallback
- console.error(`Invalid date format for email ${email.id}: ${email.date}`);
- email.date = new Date();
+ // Ensure folder has the proper prefix format
+ if (email.folder && !email.folder.includes(':')) {
+ email.folder = `${email.accountId}:${email.folder}`;
+ }
+
+ // Ensure date is a valid Date object (handle strings or timestamps)
+ if (email.date && !(email.date instanceof Date)) {
+ try {
+ // Convert to a proper Date object if it's a string or number
+ const dateObj = new Date(email.date);
+ // Verify it's a valid date
+ if (!isNaN(dateObj.getTime())) {
+ email.date = dateObj;
}
+ } catch (err) {
+ // If conversion fails, log and use current date as fallback
+ console.error(`Invalid date format for email ${email.id}: ${email.date}`);
+ email.date = new Date();
}
- });
- }
-
- // CRITICAL FIX: Log what we're about to do
- console.log(`[DEBUG-DISPATCH] About to dispatch ${isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS'} with ${data.emails?.length || 0} emails`);
-
- // Update state with fetched data
- dispatch({
- type: isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS',
- payload: Array.isArray(data.emails) ? data.emails : []
+ }
});
-
- // Double-check that we've updated the email list correctly after dispatch
- setTimeout(() => {
- console.log(`[DEBUG-AFTER-DISPATCH] Email count is now: ${state.emails.length}, should include the ${data.emails?.length || 0} new emails we just loaded`);
- }, 0);
-
- if (data.totalEmails) {
- dispatch({ type: 'SET_TOTAL_EMAILS', payload: data.totalEmails });
- }
-
- if (data.totalPages) {
- dispatch({ type: 'SET_TOTAL_PAGES', payload: data.totalPages });
- }
-
- // Update available mailboxes if provided
- if (data.mailboxes && data.mailboxes.length > 0) {
- dispatch({ type: 'SET_MAILBOXES', payload: data.mailboxes });
- }
+ }
+
+ // CRITICAL FIX: Log what we're about to do
+ console.log(`[DEBUG-DISPATCH] About to dispatch ${isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS'} with ${data.emails?.length || 0} emails`);
+
+ // Update state with fetched data
+ dispatch({
+ type: isLoadMore ? 'APPEND_EMAILS' : 'SET_EMAILS',
+ payload: Array.isArray(data.emails) ? data.emails : []
+ });
+
+ // Double-check that we've updated the email list correctly after dispatch
+ setTimeout(() => {
+ console.log(`[DEBUG-AFTER-DISPATCH] Email count is now: ${state.emails.length}, should include the ${data.emails?.length || 0} new emails we just loaded`);
+ }, 0);
+
+ if (data.totalEmails) {
+ dispatch({ type: 'SET_TOTAL_EMAILS', payload: data.totalEmails });
+ }
+
+ if (data.totalPages) {
+ dispatch({ type: 'SET_TOTAL_PAGES', payload: data.totalPages });
+ }
+
+ // Update available mailboxes if provided
+ if (data.mailboxes && data.mailboxes.length > 0) {
+ dispatch({ type: 'SET_MAILBOXES', payload: data.mailboxes });
}
} catch (err) {
logEmailOp('ERROR', `Failed to load emails: ${err instanceof Error ? err.message : String(err)}`);
@@ -646,11 +355,9 @@ export const useEmailState = () => {
if (existingEmail && existingEmail.contentFetched) {
// Use the existing email if it has content already
- // ENHANCEMENT: Apply content normalization before selecting the email
- const normalizedEmail = normalizeEmailContent(existingEmail);
dispatch({
type: 'SELECT_EMAIL',
- payload: { emailId, accountId, folder, email: normalizedEmail }
+ payload: { emailId, accountId, folder, email: existingEmail }
});
// Mark as read if not already
@@ -679,13 +386,10 @@ export const useEmailState = () => {
// Mark the email as read on the server
markEmailAsRead(emailId, true, effectiveAccountId);
- // ENHANCEMENT: Apply content normalization before selecting the email
- const normalizedEmailData = normalizeEmailContent(emailData);
-
// Select the email
dispatch({
type: 'SELECT_EMAIL',
- payload: { emailId, accountId: effectiveAccountId, folder, email: normalizedEmailData }
+ payload: { emailId, accountId: effectiveAccountId, folder, email: emailData }
});
} catch (error) {
logEmailOp('ERROR', `Failed to select email: ${error instanceof Error ? error.message : String(error)}`);
@@ -696,7 +400,7 @@ export const useEmailState = () => {
} finally {
dispatch({ type: 'SET_LOADING', payload: false });
}
- }, [state.emails, logEmailOp, normalizeEmailContent]);
+ }, [state.emails, logEmailOp]);
// Toggle email selection for multi-select
const toggleEmailSelection = useCallback((emailId: string) => {
diff --git a/lib/services/email-service.ts b/lib/services/email-service.ts
index 1ea56362..94fd30ab 100644
--- a/lib/services/email-service.ts
+++ b/lib/services/email-service.ts
@@ -718,32 +718,9 @@ export async function getEmailContent(
// Convert flags from Set to boolean checks
const flagsArray = Array.from(flags as Set);
- // Process the raw HTML with CID attachments
+ // Preserve the raw HTML exactly as it was in the original email
const rawHtml = parsedEmail.html || '';
- // Import processHtmlContent if needed
- const { processHtmlContent } = await import('../utils/email-content');
-
- // Process HTML content with attachments for CID image handling
- let processedHtml = rawHtml;
- let direction = 'ltr';
-
- if (rawHtml) {
- const processed = processHtmlContent(rawHtml, {
- sanitize: true,
- blockExternalContent: false,
- attachments: parsedEmail.attachments?.map(att => ({
- filename: att.filename || 'attachment',
- contentType: att.contentType,
- content: att.content?.toString('base64'), // Convert Buffer to base64 string
- contentId: att.contentId
- }))
- });
-
- processedHtml = processed.sanitizedContent;
- direction = processed.direction;
- }
-
const email: EmailMessage = {
id: emailId,
messageId: envelope.messageId,
@@ -776,15 +753,13 @@ export async function getEmailContent(
attachments: parsedEmail.attachments?.map(att => ({
filename: att.filename || 'attachment',
contentType: att.contentType,
- contentId: att.contentId,
- content: att.content?.toString('base64'),
size: att.size || 0
})),
content: {
text: parsedEmail.text || '',
- html: processedHtml || '',
- isHtml: !!processedHtml,
- direction
+ html: rawHtml || '',
+ isHtml: !!rawHtml,
+ direction: 'ltr' // Default to left-to-right
},
folder: normalizedFolder,
contentFetched: true,
diff --git a/lib/utils/dom-purify-config.ts b/lib/utils/dom-purify-config.ts
index 47842171..d7409634 100644
--- a/lib/utils/dom-purify-config.ts
+++ b/lib/utils/dom-purify-config.ts
@@ -11,103 +11,64 @@ import DOMPurify from 'isomorphic-dompurify';
// Reset any existing hooks to start with a clean slate
DOMPurify.removeAllHooks();
-/**
- * Configure DOMPurify with safe defaults for email content
- * This balances security with the need to display rich email content
- */
-export function configureDOMPurify() {
- // Enhanced configuration for email content
- DOMPurify.setConfig({
- ADD_TAGS: [
- // SVG elements for simple charts/logos that might be in emails
- 'svg', 'path', 'g', 'circle', 'rect', 'line', 'polygon', 'ellipse',
- // Common email-specific elements
- 'o:p', 'font',
- // Allow comments for conditional HTML in emails
- '!--...--'
- ],
- ADD_ATTR: [
- // SVG attributes
- 'viewbox', 'd', 'cx', 'cy', 'r', 'fill', 'stroke', 'stroke-width', 'x', 'y', 'width', 'height',
- // Additional HTML attributes commonly used in emails
- 'align', 'valign', 'bgcolor', 'color', 'cellpadding', 'cellspacing', 'colspan', 'rowspan',
- 'face', 'size', 'direction', 'role', 'aria-label', 'aria-hidden',
- // List attributes
- 'start', 'type', 'value',
- // Table attributes and styles
- 'border', 'frame', 'rules', 'summary', 'headers', 'scope', 'abbr',
- // Blockquote attributes
- 'cite', 'datetime',
- // Form elements attributes (read-only)
- 'readonly', 'disabled', 'selected', 'checked', 'multiple', 'wrap',
- // Additional attributes for forwarded emails
- 'style', 'class', 'id', 'dir', 'lang', 'title',
- // Table attributes commonly used in email clients
- 'background', 'bordercolor', 'width', 'height'
- ],
- FORBID_TAGS: [
- // Remove dangerous tags
- 'script', 'object', 'iframe', 'embed', 'applet', 'meta', 'link',
- // Form elements that could be used for phishing
- 'form', 'button', 'input', 'textarea', 'select', 'option'
- ],
- FORBID_ATTR: [
- // Remove JavaScript and dangerous attributes
- 'onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onmouseenter', 'onmouseleave',
- 'onkeydown', 'onkeypress', 'onkeyup', 'onchange', 'onsubmit', 'onreset', 'onselect', 'onblur',
- 'onfocus', 'onscroll', 'onbeforeunload', 'onunload', 'onhashchange', 'onpopstate', 'onpageshow',
- 'onpagehide', 'onabort', 'oncanplay', 'oncanplaythrough', 'ondurationchange', 'onemptied',
- 'onended', 'onloadeddata', 'onloadedmetadata', 'onloadstart', 'onpause', 'onplay', 'onplaying',
- 'onprogress', 'onratechange', 'onseeked', 'onseeking', 'onstalled', 'onsuspend', 'ontimeupdate',
- 'onvolumechange', 'onwaiting', 'animationend', 'animationiteration', 'animationstart',
- // Dangerous attributes
- 'formaction', 'xlink:href'
- ],
- ALLOW_DATA_ATTR: false, // Disable data-* attributes which can be used for XSS
- WHOLE_DOCUMENT: false, // Don't parse the entire document - just fragments
- SANITIZE_DOM: true, // Sanitize the DOM to prevent XSS
- KEEP_CONTENT: true, // Keep content of elements that are removed
- RETURN_DOM: false, // Return a DOM object rather than HTML string
- RETURN_DOM_FRAGMENT: false, // Return a DocumentFragment rather than HTML string
- FORCE_BODY: false, // Add a tag if one doesn't exist
- ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|data|irc):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
- ALLOW_UNKNOWN_PROTOCOLS: true, // Some email clients use custom protocols for images/attachments
- USE_PROFILES: { html: true } // Use the HTML profile for more permissive sanitization
- });
-
- return DOMPurify;
-}
-
-// Singleton instance of configured DOMPurify for the app
-export const purify = configureDOMPurify();
+// Configure DOMPurify with settings appropriate for email content
+DOMPurify.setConfig({
+ ADD_TAGS: [
+ 'html', 'head', 'body', 'style', 'link', 'meta', 'title',
+ 'table', 'caption', 'col', 'colgroup', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'th',
+ 'div', 'span', 'img', 'br', 'hr', 'section', 'article', 'header', 'footer',
+ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'pre', 'code',
+ 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'a', 'b', 'i', 'u', 'em',
+ 'strong', 'del', 'ins', 'mark', 'small', 'sub', 'sup', 'q', 'abbr',
+ 'font' // Allow legacy font tag often found in emails
+ ],
+ ADD_ATTR: [
+ 'style', 'class', 'id', 'name', 'href', 'src', 'alt', 'title', 'width', 'height',
+ 'border', 'cellspacing', 'cellpadding', 'bgcolor', 'background', 'color',
+ 'align', 'valign', 'dir', 'lang', 'target', 'rel', 'charset', 'media',
+ 'colspan', 'rowspan', 'scope', 'span', 'size', 'face', 'hspace', 'vspace',
+ 'data-*',
+ 'start', 'type', 'value', 'cite', 'datetime', 'wrap', 'summary'
+ ],
+ KEEP_CONTENT: true,
+ WHOLE_DOCUMENT: false,
+ ALLOW_DATA_ATTR: true,
+ ALLOW_UNKNOWN_PROTOCOLS: true, // Needed for some email clients
+ FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'select', 'textarea'],
+ FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout'],
+ FORCE_BODY: false,
+ USE_PROFILES: { html: true } // Use HTML profile for more permissive sanitization for emails
+});
/**
- * Sanitize HTML content using our email-specific configuration
+ * Sanitizes HTML content with the centralized DOMPurify configuration
+ * @param html HTML content to sanitize
+ * @returns Sanitized HTML
*/
-export function sanitizeHtml(content: string, options?: { preserveReplyFormat?: boolean }): string {
- if (!content) return '';
+export function sanitizeHtml(html: string): string {
+ if (!html) return '';
try {
- // Special handling for reply/forward emails to be less aggressive with sanitization
- const extraTags = options?.preserveReplyFormat
- ? ['style', 'blockquote', 'table', 'thead', 'tbody', 'tr', 'td', 'th']
- : ['style'];
-
- const extraAttrs = options?.preserveReplyFormat
- ? ['style', 'class', 'align', 'valign', 'bgcolor', 'colspan', 'rowspan', 'width', 'height', 'border']
- : ['style', 'class'];
-
- // Sanitize with our configured instance and options
- return purify.sanitize(content, {
- ADD_TAGS: extraTags,
- ADD_ATTR: extraAttrs
+ // Use DOMPurify with our central configuration
+ const clean = DOMPurify.sanitize(html, {
+ ADD_ATTR: ['style', 'class', 'id', 'align', 'valign', 'colspan', 'rowspan', 'cellspacing', 'cellpadding', 'bgcolor']
});
- } catch (error) {
- console.error('Failed to sanitize HTML content:', error);
- // Fallback to basic sanitization
- return content
+
+ // Fix common email rendering issues
+ const fixedHtml = clean
+ // Fix for Outlook WebVML content
+ .replace(/