courrier preview
This commit is contained in:
parent
bcd4c8cd54
commit
81ed21b6b4
@ -27,50 +27,6 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
|
||||
const toolbarRef = useRef<HTMLDivElement>(null);
|
||||
const quillRef = useRef<any>(null);
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
|
||||
// Utility function to safely handle tables in the content
|
||||
const prepareTablesForDisplay = (content: string): string => {
|
||||
if (!content || !content.includes('<table')) return content;
|
||||
|
||||
try {
|
||||
// First fix any broken table structures that might cause errors
|
||||
let fixedContent = content;
|
||||
|
||||
// Add width attributes to all tables to prevent layout issues
|
||||
fixedContent = fixedContent.replace(
|
||||
/<table(?![^>]*width)/g,
|
||||
'<table width="100%" style="width: 100%; table-layout: fixed; border-collapse: collapse;"'
|
||||
);
|
||||
|
||||
// Add width to table cells that don't have it to prevent the error
|
||||
fixedContent = fixedContent.replace(
|
||||
/<td(?![^>]*width)/g,
|
||||
'<td width="auto" style="width: auto; min-width: 30px; word-break: break-word;"'
|
||||
);
|
||||
|
||||
// Add standard styling to all table cells to ensure consistent display
|
||||
fixedContent = fixedContent.replace(
|
||||
/<td(?![^>]*style)/g,
|
||||
'<td style="border: 1px solid #ddd; padding: 6px 8px; overflow-wrap: break-word;"'
|
||||
);
|
||||
|
||||
// Wrap all tables in a div with proper styling to prevent layout issues
|
||||
fixedContent = fixedContent.replace(
|
||||
/<table/g,
|
||||
'<div class="table-wrapper" style="width:100%; overflow-x:auto;"><table'
|
||||
);
|
||||
|
||||
fixedContent = fixedContent.replace(
|
||||
/<\/table>/g,
|
||||
'</table></div>'
|
||||
);
|
||||
|
||||
return fixedContent;
|
||||
} catch (e) {
|
||||
console.warn('Error preparing tables:', e);
|
||||
return content;
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize Quill editor when component mounts
|
||||
useEffect(() => {
|
||||
@ -137,13 +93,9 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
|
||||
startsWithHtml: initialContent.trim().startsWith('<'),
|
||||
containsForwardedMessage: initialContent.includes('---------- Forwarded message ----------'),
|
||||
containsReplyIndicator: initialContent.includes('wrote:'),
|
||||
hasBlockquote: initialContent.includes('<blockquote'),
|
||||
hasTable: initialContent.includes('<table')
|
||||
hasBlockquote: initialContent.includes('<blockquote')
|
||||
});
|
||||
|
||||
// Check if content contains tables - if so, we need to be careful with table module
|
||||
const hasTable = initialContent.includes('<table');
|
||||
|
||||
// Detect text direction
|
||||
const direction = detectTextDirection(initialContent);
|
||||
|
||||
@ -154,38 +106,12 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
|
||||
initialContent.includes('<blockquote')
|
||||
);
|
||||
|
||||
// If content has tables AND is a forwarded/reply email, don't try to use the better-table module
|
||||
// as it can cause the "Cannot read properties of undefined (reading 'width')" error
|
||||
if (hasTable && isPreFormattedContent) {
|
||||
console.log('Pre-formatted content has tables - better-table module will be disabled');
|
||||
// Table module might cause errors when dealing with forwarded/replied tables
|
||||
// Don't initialize it for this session
|
||||
} else if (hasTable && !isPreFormattedContent && tableModule) {
|
||||
// Only initialize table module for regular emails with tables
|
||||
try {
|
||||
console.log('Initializing better-table module for regular content with tables');
|
||||
// Initialize the table module with safe defaults
|
||||
const betterTableModule = quillRef.current.getModule('better-table');
|
||||
if (betterTableModule && typeof betterTableModule.appendTo === 'function') {
|
||||
betterTableModule.appendTo(editorRef.current);
|
||||
}
|
||||
} catch (tableError) {
|
||||
console.error('Failed to initialize table module:', tableError);
|
||||
// Continue without table module
|
||||
}
|
||||
}
|
||||
|
||||
// Process HTML content using centralized utility or use as-is if pre-formatted
|
||||
let sanitizedContent;
|
||||
if (isPreFormattedContent) {
|
||||
console.log('Content appears to be pre-formatted as reply/forward, using as-is');
|
||||
// Just do basic sanitization without additional processing
|
||||
sanitizedContent = sanitizeHtml(initialContent);
|
||||
|
||||
// For pre-formatted content with tables, fix table attributes to prevent width errors
|
||||
if (hasTable) {
|
||||
sanitizedContent = prepareTablesForDisplay(sanitizedContent);
|
||||
}
|
||||
} else {
|
||||
// Full processing for regular content
|
||||
sanitizedContent = processHtmlContent(initialContent);
|
||||
@ -325,9 +251,6 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
|
||||
firstNChars: initialContent.substring(0, 100).replace(/\n/g, '\\n')
|
||||
});
|
||||
|
||||
// Check if content has tables
|
||||
const hasTable = initialContent.includes('<table');
|
||||
|
||||
// Detect text direction
|
||||
const direction = detectTextDirection(initialContent);
|
||||
|
||||
@ -338,33 +261,12 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
|
||||
initialContent.includes('<blockquote')
|
||||
);
|
||||
|
||||
// For forwarded/replied content with tables, make sure the table module is disabled
|
||||
// to prevent "Cannot read properties of undefined (reading 'width')" errors
|
||||
if (hasTable && isPreFormattedContent && quillRef.current) {
|
||||
console.log('Updated content has tables in forwarded/replied context - ensuring table module is disabled');
|
||||
// Ensure table module is not active
|
||||
try {
|
||||
const tableModule = quillRef.current.getModule('better-table');
|
||||
if (tableModule && typeof tableModule.destroy === 'function') {
|
||||
tableModule.destroy();
|
||||
}
|
||||
} catch (tableError) {
|
||||
console.warn('Error handling table module:', tableError);
|
||||
// Continue despite the error
|
||||
}
|
||||
}
|
||||
|
||||
// Process HTML content using centralized utility or use as-is if pre-formatted
|
||||
let sanitizedContent;
|
||||
if (isPreFormattedContent) {
|
||||
console.log('Content appears to be pre-formatted as reply/forward, using as-is');
|
||||
// Just do basic sanitization without additional processing
|
||||
sanitizedContent = sanitizeHtml(initialContent);
|
||||
|
||||
// For pre-formatted content with tables, fix table attributes to prevent width errors
|
||||
if (hasTable) {
|
||||
sanitizedContent = prepareTablesForDisplay(sanitizedContent);
|
||||
}
|
||||
} else {
|
||||
// Full processing for regular content
|
||||
sanitizedContent = processHtmlContent(initialContent);
|
||||
@ -606,13 +508,6 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
|
||||
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),
|
||||
@ -622,9 +517,7 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
|
||||
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 */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user