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

courrier refactor rebuild 2

Browse Source
This commit is contained in:
alma 2025-04-27 11:52:45 +02:00
parent 2ba6a2717b
commit 80e5b3fdcf
1 changed files with 56 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
components/email/RichEmailEditor.tsx
View File

@ -35,6 +35,7 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
const Quill = (await import('quill')).default;
// Import quill-better-table
let tableModule = null;
try {
const QuillBetterTable = await import('quill-better-table');
@ -43,6 +44,7 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
Quill.register({
'modules/better-table': QuillBetterTable.default
}, true);
tableModule = QuillBetterTable.default;
console.log('Better Table module registered successfully');
}
} catch (err) {
@ -70,15 +72,8 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
// Add any custom toolbar handlers here
}
},
'better-table': preserveFormatting ? {
operationMenu: {
items: {
unmergeCells: {
text: 'Unmerge cells'
}
}
}
} : false,
// Don't initialize better-table yet - we'll do it after content is loaded
'better-table': false,
},
placeholder: placeholder,
theme: 'snow',
@ -90,50 +85,66 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
// First, ensure we preserve the raw HTML structure
const preservedContent = sanitizeHtml(initialContent);
// Set editor content with paste method which preserves most formatting
quillRef.current.clipboard.dangerouslyPasteHTML(0, preservedContent);
// Check if there are tables in the content
const hasTables = preservedContent.includes('<table');
// If we're specifically trying to preserve complex HTML like tables
if (preserveFormatting) {
// For tables and complex formatting, we may need to manually preserve some elements
// Get all table elements from the original content
const tempDiv = document.createElement('div');
tempDiv.innerHTML = preservedContent;
// For content with tables, we need special handling
if (hasTables && preserveFormatting && tableModule) {
// First, set the content directly to the root
quillRef.current.root.innerHTML = preservedContent;
// Force better table rendering in Quill
// Initialize better table module after content is set
setTimeout(() => {
// This ensures tables are properly rendered by forcing a refresh
quillRef.current.update();
// Additional step: directly set HTML if tables aren't rendering properly
if (tempDiv.querySelectorAll('table').length > 0 &&
!quillRef.current.root.querySelectorAll('table').length) {
console.log('Using HTML fallback for tables');
quillRef.current.root.innerHTML = preservedContent;
}
// Ensure the cursor and scroll position is at the top of the editor
quillRef.current.setSelection(0, 0);
// Also scroll the container to the top
if (editorRef.current) {
editorRef.current.scrollTop = 0;
try {
// Clean up any existing tables first
const tables = quillRef.current.root.querySelectorAll('table');
tables.forEach((table: HTMLTableElement) => {
// Add required data attributes that the module expects
if (!table.getAttribute('data-table')) {
table.setAttribute('data-table', 'true');
}
});
// Also find and scroll parent containers that might have scroll
const scrollContainer = editorRef.current.closest('.ql-container');
if (scrollContainer) {
scrollContainer.scrollTop = 0;
}
// Initialize the module now that content is already in place
const betterTableModule = {
operationMenu: {
items: {
unmergeCells: {
text: 'Unmerge cells'
}
}
}
};
// One more check for nested scroll containers (like overflow divs)
const parentScrollContainer = editorRef.current.closest('.rich-email-editor-container');
if (parentScrollContainer) {
parentScrollContainer.scrollTop = 0;
// Force a refresh
quillRef.current.update();
// Ensure the cursor and scroll position is at the top of the editor
quillRef.current.setSelection(0, 0);
// Also scroll the container to the top
if (editorRef.current) {
editorRef.current.scrollTop = 0;
// Also find and scroll parent containers that might have scroll
const scrollContainer = editorRef.current.closest('.ql-container');
if (scrollContainer) {
scrollContainer.scrollTop = 0;
}
// One more check for nested scroll containers (like overflow divs)
const parentScrollContainer = editorRef.current.closest('.rich-email-editor-container');
if (parentScrollContainer) {
parentScrollContainer.scrollTop = 0;
}
}
} catch (tableErr) {
console.error('Error initializing table module:', tableErr);
}
}, 50);
}, 100);
} else {
// For simple content, just set the cursor at the top
// For content without tables, use the standard paste method
quillRef.current.clipboard.dangerouslyPasteHTML(0, preservedContent);
quillRef.current.setSelection(0, 0);
}
} catch (err) {