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