417 lines
14 KiB
TypeScript
417 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
import 'quill/dist/quill.snow.css';
|
|
import { sanitizeHtml } from '@/lib/utils/email-formatter';
|
|
|
|
interface RichEmailEditorProps {
|
|
initialContent: string;
|
|
onChange: (content: string) => void;
|
|
placeholder?: string;
|
|
minHeight?: string;
|
|
maxHeight?: string;
|
|
preserveFormatting?: boolean;
|
|
}
|
|
|
|
const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
|
|
initialContent,
|
|
onChange,
|
|
placeholder = 'Write your message here...',
|
|
minHeight = '200px',
|
|
maxHeight = 'calc(100vh - 400px)',
|
|
preserveFormatting = false,
|
|
}) => {
|
|
const editorRef = useRef<HTMLDivElement>(null);
|
|
const toolbarRef = useRef<HTMLDivElement>(null);
|
|
const quillRef = useRef<any>(null);
|
|
const [isReady, setIsReady] = useState(false);
|
|
|
|
// Initialize Quill editor when component mounts
|
|
useEffect(() => {
|
|
// Import Quill dynamically (client-side only)
|
|
const initializeQuill = async () => {
|
|
if (!editorRef.current || !toolbarRef.current) return;
|
|
|
|
const Quill = (await import('quill')).default;
|
|
|
|
// Import quill-better-table
|
|
let tableModule = null;
|
|
try {
|
|
const QuillBetterTable = await import('quill-better-table');
|
|
|
|
// Register the table module if available
|
|
if (QuillBetterTable && QuillBetterTable.default) {
|
|
Quill.register({
|
|
'modules/better-table': QuillBetterTable.default
|
|
}, true);
|
|
tableModule = QuillBetterTable.default;
|
|
console.log('Better Table module registered successfully');
|
|
}
|
|
} catch (err) {
|
|
console.warn('Table module not available:', err);
|
|
}
|
|
|
|
// Define custom formats/modules with table support
|
|
const emailToolbarOptions = [
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[{ 'color': [] }, { 'background': [] }],
|
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
|
[{ 'indent': '-1'}, { 'indent': '+1' }],
|
|
[{ 'align': [] }],
|
|
['link'],
|
|
['clean'],
|
|
];
|
|
|
|
// Create new Quill instance with the DOM element and custom toolbar
|
|
const editorElement = editorRef.current;
|
|
quillRef.current = new Quill(editorElement, {
|
|
modules: {
|
|
toolbar: {
|
|
container: toolbarRef.current,
|
|
handlers: {
|
|
// Add any custom toolbar handlers here
|
|
}
|
|
},
|
|
// Don't initialize better-table yet - we'll do it after content is loaded
|
|
'better-table': false,
|
|
},
|
|
placeholder: placeholder,
|
|
theme: 'snow',
|
|
});
|
|
|
|
// Set initial content (sanitized)
|
|
if (initialContent) {
|
|
try {
|
|
// First, ensure we preserve the raw HTML structure
|
|
const preservedContent = sanitizeHtml(initialContent);
|
|
|
|
// Check if there are tables in the content
|
|
const hasTables = preservedContent.includes('<table');
|
|
|
|
// 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;
|
|
|
|
// Initialize better table module after content is set
|
|
setTimeout(() => {
|
|
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');
|
|
}
|
|
});
|
|
|
|
// Initialize the module now that content is already in place
|
|
const betterTableModule = {
|
|
operationMenu: {
|
|
items: {
|
|
unmergeCells: {
|
|
text: 'Unmerge cells'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// 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);
|
|
}
|
|
}, 100);
|
|
} else {
|
|
// For content without tables, use the standard paste method
|
|
quillRef.current.clipboard.dangerouslyPasteHTML(0, preservedContent);
|
|
quillRef.current.setSelection(0, 0);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error setting initial content:', err);
|
|
// Fallback method if the above fails
|
|
quillRef.current.setText('');
|
|
quillRef.current.clipboard.dangerouslyPasteHTML(sanitizeHtml(initialContent));
|
|
quillRef.current.setSelection(0, 0);
|
|
}
|
|
}
|
|
|
|
// Add change listener
|
|
quillRef.current.on('text-change', () => {
|
|
const html = quillRef.current.root.innerHTML;
|
|
onChange(html);
|
|
});
|
|
|
|
// Improve editor layout
|
|
const editorContainer = editorElement.closest('.ql-container');
|
|
if (editorContainer) {
|
|
editorContainer.classList.add('email-editor-container');
|
|
}
|
|
|
|
setIsReady(true);
|
|
};
|
|
|
|
initializeQuill().catch(err => {
|
|
console.error('Failed to initialize Quill editor:', err);
|
|
});
|
|
|
|
// Clean up on unmount
|
|
return () => {
|
|
if (quillRef.current) {
|
|
// Clean up any event listeners or resources
|
|
quillRef.current.off('text-change');
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
// Update content from props if changed externally
|
|
useEffect(() => {
|
|
if (quillRef.current && isReady) {
|
|
const currentContent = quillRef.current.root.innerHTML;
|
|
// Only update if content changed to avoid editor position reset
|
|
if (initialContent !== currentContent) {
|
|
try {
|
|
// Preserve cursor position if possible
|
|
const selection = quillRef.current.getSelection();
|
|
|
|
// First clear the content
|
|
quillRef.current.root.innerHTML = '';
|
|
|
|
// Then insert the new content at position 0
|
|
quillRef.current.clipboard.dangerouslyPasteHTML(0, sanitizeHtml(initialContent));
|
|
|
|
// Force update
|
|
quillRef.current.update();
|
|
|
|
// Restore selection if possible
|
|
if (selection) {
|
|
setTimeout(() => quillRef.current.setSelection(selection), 10);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error updating content:', err);
|
|
// Fallback update method
|
|
quillRef.current.clipboard.dangerouslyPasteHTML(sanitizeHtml(initialContent));
|
|
}
|
|
}
|
|
}
|
|
}, [initialContent, isReady]);
|
|
|
|
return (
|
|
<div className="rich-email-editor-wrapper">
|
|
{/* Custom toolbar container */}
|
|
<div ref={toolbarRef} className="ql-toolbar ql-snow">
|
|
<span className="ql-formats">
|
|
<button className="ql-bold"></button>
|
|
<button className="ql-italic"></button>
|
|
<button className="ql-underline"></button>
|
|
<button className="ql-strike"></button>
|
|
</span>
|
|
<span className="ql-formats">
|
|
<select className="ql-color"></select>
|
|
<select className="ql-background"></select>
|
|
</span>
|
|
<span className="ql-formats">
|
|
<button className="ql-list" value="ordered"></button>
|
|
<button className="ql-list" value="bullet"></button>
|
|
</span>
|
|
<span className="ql-formats">
|
|
<button className="ql-indent" value="-1"></button>
|
|
<button className="ql-indent" value="+1"></button>
|
|
</span>
|
|
<span className="ql-formats">
|
|
<select className="ql-align"></select>
|
|
</span>
|
|
<span className="ql-formats">
|
|
<button className="ql-link"></button>
|
|
</span>
|
|
<span className="ql-formats">
|
|
<button className="ql-clean"></button>
|
|
</span>
|
|
</div>
|
|
|
|
{/* Editor container with improved scrolling */}
|
|
<div className="rich-email-editor-container">
|
|
<div
|
|
ref={editorRef}
|
|
className="quill-editor"
|
|
/>
|
|
|
|
{/* Loading indicator */}
|
|
{!isReady && (
|
|
<div className="flex items-center justify-center py-8">
|
|
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Custom styles for email context */}
|
|
<style jsx>{`
|
|
.rich-email-editor-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
flex: 1;
|
|
}
|
|
|
|
.rich-email-editor-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.quill-editor {
|
|
width: 100%;
|
|
min-height: ${minHeight};
|
|
max-height: ${maxHeight};
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Hide the editor until it's ready */
|
|
.quill-editor ${!isReady ? '{ display: none; }' : ''}
|
|
|
|
/* Hide duplicate toolbar */
|
|
:global(.ql-toolbar.ql-snow + .ql-toolbar.ql-snow) {
|
|
display: none !important;
|
|
}
|
|
|
|
:global(.ql-container) {
|
|
border: none !important;
|
|
height: auto !important;
|
|
min-height: ${minHeight};
|
|
max-height: none !important;
|
|
overflow: visible;
|
|
}
|
|
|
|
:global(.ql-editor) {
|
|
padding: 12px;
|
|
min-height: ${minHeight};
|
|
overflow-y: auto !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: #333 !important;
|
|
}
|
|
|
|
/* Ensure all text is visible */
|
|
:global(.ql-editor p),
|
|
:global(.ql-editor div),
|
|
:global(.ql-editor span),
|
|
:global(.ql-editor li) {
|
|
color: #333 !important;
|
|
}
|
|
|
|
/* Ensure placeholder text is visible but distinct */
|
|
:global(.ql-editor.ql-blank::before) {
|
|
color: #aaa !important;
|
|
font-style: italic !important;
|
|
}
|
|
|
|
/* Force blockquote styling */
|
|
:global(.ql-editor blockquote) {
|
|
border-left: 2px solid #ddd !important;
|
|
margin: 0 !important;
|
|
padding: 10px 0 10px 15px !important;
|
|
color: #505050 !important;
|
|
background-color: #f9f9f9 !important;
|
|
border-radius: 4px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
/* Fix table rendering */
|
|
:global(.ql-editor table) {
|
|
width: 100% !important;
|
|
border-collapse: collapse !important;
|
|
table-layout: fixed !important;
|
|
margin: 10px 0 !important;
|
|
border: 1px solid #ddd !important;
|
|
}
|
|
|
|
:global(.ql-editor td),
|
|
:global(.ql-editor th) {
|
|
border: 1px solid #ddd !important;
|
|
padding: 6px 8px !important;
|
|
overflow-wrap: break-word !important;
|
|
word-break: break-word !important;
|
|
min-width: 30px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
/* Status styles for email displays */
|
|
:global(.ql-editor td[class*="status"]),
|
|
:global(.ql-editor td[class*="Status"]) {
|
|
background-color: #f8f9fa !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* Amount styles */
|
|
:global(.ql-editor td[class*="amount"]),
|
|
:global(.ql-editor td[class*="Amount"]),
|
|
:global(.ql-editor td[class*="price"]),
|
|
:global(.ql-editor td[class*="Price"]) {
|
|
text-align: right !important;
|
|
font-family: monospace !important;
|
|
}
|
|
|
|
/* Header row styles */
|
|
:global(.ql-editor tr:first-child td),
|
|
:global(.ql-editor th) {
|
|
background-color: #f8f9fa !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* Improve table cells with specific content */
|
|
:global(.ql-editor td:has(div[class*="number"])),
|
|
:global(.ql-editor td:has(div[class*="Number"])),
|
|
:global(.ql-editor td:has(div[class*="invoice"])),
|
|
:global(.ql-editor td:has(div[class*="Invoice"])) {
|
|
font-family: monospace !important;
|
|
letter-spacing: 0.5px !important;
|
|
}
|
|
|
|
/* Fix quoted paragraphs */
|
|
:global(.ql-editor blockquote p) {
|
|
margin-bottom: 8px !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
/* Fix for reply headers */
|
|
:global(.ql-editor div[style*="font-weight: 400"]) {
|
|
margin-top: 20px !important;
|
|
margin-bottom: 8px !important;
|
|
color: #555 !important;
|
|
font-size: 13px !important;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RichEmailEditor;
|