681 lines
26 KiB
TypeScript
681 lines
26 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
import 'quill/dist/quill.snow.css';
|
|
import { sanitizeHtml } from '@/lib/utils/dom-purify-config';
|
|
import { detectTextDirection } from '@/lib/utils/text-direction';
|
|
import { processHtmlContent } from '@/lib/utils/email-content';
|
|
|
|
interface RichEmailEditorProps {
|
|
initialContent: string;
|
|
onChange: (content: string) => void;
|
|
placeholder?: string;
|
|
minHeight?: string;
|
|
maxHeight?: string;
|
|
preserveFormatting?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Clean up problematic table structures that cause issues with quill-better-table
|
|
*/
|
|
function cleanupTableStructures(htmlContent: string): string {
|
|
if (!htmlContent) return htmlContent;
|
|
|
|
try {
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = htmlContent;
|
|
|
|
// Find tables with problematic nested structures
|
|
const tables = tempDiv.querySelectorAll('table');
|
|
|
|
// Check if content looks like a forwarded email or reply content
|
|
const isForwardedEmail =
|
|
htmlContent.includes('---------- Forwarded message ----------') ||
|
|
htmlContent.includes('Forwarded message') ||
|
|
htmlContent.includes('forwarded message') ||
|
|
(htmlContent.includes('From:') && htmlContent.includes('Date:') && htmlContent.includes('Subject:'));
|
|
|
|
const isReplyEmail =
|
|
htmlContent.includes('wrote:') ||
|
|
htmlContent.includes('<blockquote') ||
|
|
htmlContent.includes('gmail_quote');
|
|
|
|
// Check if content has complex tables that might cause issues
|
|
const hasComplexTables = tables.length > 0 &&
|
|
(isForwardedEmail || isReplyEmail);
|
|
|
|
if (hasComplexTables) {
|
|
console.log(`Found ${tables.length} tables in complex email content`);
|
|
|
|
let convertedCount = 0;
|
|
tables.forEach(table => {
|
|
// Special handling for tables inside blockquotes (quoted content)
|
|
if (table.closest('blockquote') ||
|
|
(isReplyEmail && table.innerHTML.includes('wrote:'))) {
|
|
console.log('Preserving table inside quoted content');
|
|
// Apply minimal styling to ensure it renders correctly
|
|
table.setAttribute('style', 'border-collapse: collapse; width: 100%; max-width: 100%; margin: 8px 0;');
|
|
// Make sure all cells have some basic styling
|
|
const cells = table.querySelectorAll('td, th');
|
|
cells.forEach(cell => {
|
|
if (cell instanceof HTMLTableCellElement) {
|
|
cell.style.padding = '4px';
|
|
cell.style.textAlign = 'left';
|
|
cell.style.verticalAlign = 'top';
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Preserve the main forwarded email header table
|
|
if (isForwardedEmail &&
|
|
table.innerHTML.includes('From:') &&
|
|
table.innerHTML.includes('Date:') &&
|
|
table.innerHTML.includes('Subject:')) {
|
|
console.log('Preserving forwarded email header table');
|
|
// Ensure the table has proper styling
|
|
table.setAttribute('style', 'margin: 10px 0; border-collapse: collapse; font-size: 13px; color: #333;');
|
|
return;
|
|
}
|
|
|
|
// Skip simple tables that are likely to work fine with Quill
|
|
// Check more conditions to identify simple tables
|
|
const isSimpleTable =
|
|
table.rows.length <= 3 &&
|
|
table.querySelectorAll('td, th').length <= 6 &&
|
|
!table.querySelector('table') && // No nested tables
|
|
!table.innerHTML.includes('style=') && // No complex styling
|
|
!table.innerHTML.includes('rowspan') && // No rowspan
|
|
!table.innerHTML.includes('colspan'); // No colspan
|
|
|
|
if (isSimpleTable) {
|
|
console.log('Preserving simple table structure');
|
|
return;
|
|
}
|
|
|
|
// Convert complex tables to divs
|
|
const replacementDiv = document.createElement('div');
|
|
replacementDiv.className = 'converted-table';
|
|
replacementDiv.style.border = '1px solid #ddd';
|
|
replacementDiv.style.margin = '10px 0';
|
|
replacementDiv.style.padding = '10px';
|
|
|
|
// Copy the table's innerHTML
|
|
replacementDiv.innerHTML = table.innerHTML;
|
|
|
|
// Replace the table with the div
|
|
if (table.parentNode) {
|
|
table.parentNode.replaceChild(replacementDiv, table);
|
|
convertedCount++;
|
|
}
|
|
});
|
|
|
|
console.log(`Converted ${convertedCount} complex tables to divs to prevent Quill errors`);
|
|
return tempDiv.innerHTML;
|
|
}
|
|
|
|
return htmlContent;
|
|
} catch (error) {
|
|
console.error('Error cleaning up table structures:', error);
|
|
return htmlContent;
|
|
}
|
|
}
|
|
|
|
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': [] }],
|
|
[{ 'direction': 'rtl' }], // Add direction to toolbar
|
|
['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
|
|
}
|
|
},
|
|
clipboard: {
|
|
matchVisual: false // Disable clipboard matching for better HTML handling
|
|
},
|
|
// Don't initialize better-table yet - we'll do it after content is loaded
|
|
'better-table': false,
|
|
},
|
|
placeholder: placeholder,
|
|
theme: 'snow',
|
|
});
|
|
|
|
// Set initial content properly
|
|
if (initialContent) {
|
|
try {
|
|
console.log('Setting initial content in editor', {
|
|
length: initialContent.length,
|
|
startsWithHtml: initialContent.trim().startsWith('<'),
|
|
containsForwardedMessage: initialContent.includes('---------- Forwarded message ----------'),
|
|
containsReplyIndicator: initialContent.includes('wrote:'),
|
|
hasBlockquote: initialContent.includes('<blockquote')
|
|
});
|
|
|
|
// Check if content is reply or forward to use special handling
|
|
const isReplyOrForward =
|
|
initialContent.includes('wrote:') ||
|
|
initialContent.includes('<blockquote') ||
|
|
initialContent.includes('Forwarded message') ||
|
|
initialContent.includes('---------- Forwarded message ----------');
|
|
|
|
// Process HTML content using centralized utility with special settings for replies/forwards
|
|
const processed = processHtmlContent(initialContent, {
|
|
sanitize: true,
|
|
preserveReplyFormat: isReplyOrForward
|
|
});
|
|
const sanitizedContent = processed.sanitizedContent;
|
|
const direction = processed.direction; // Use direction from processed result
|
|
|
|
// Log sanitized content details for debugging
|
|
console.log('Sanitized content details:', {
|
|
length: sanitizedContent.length,
|
|
isEmpty: sanitizedContent.trim().length === 0,
|
|
startsWithDiv: sanitizedContent.trim().startsWith('<div'),
|
|
containsForwardedMessage: sanitizedContent.includes('---------- Forwarded message ----------'),
|
|
containsQuoteHeader: sanitizedContent.includes('wrote:'),
|
|
hasTable: sanitizedContent.includes('<table'),
|
|
hasBlockquote: sanitizedContent.includes('<blockquote'),
|
|
isReplyOrForward: isReplyOrForward,
|
|
firstNChars: sanitizedContent.substring(0, 100).replace(/\n/g, '\\n')
|
|
});
|
|
|
|
// Check if sanitized content is valid
|
|
if (sanitizedContent.trim().length === 0) {
|
|
console.warn('Sanitized content is empty after processing, using fallback approach');
|
|
// Try to extract text content if HTML processing failed
|
|
try {
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = initialContent;
|
|
const textContent = tempDiv.textContent || tempDiv.innerText || 'Empty content';
|
|
|
|
// Set text directly to ensure something displays
|
|
quillRef.current.setText(textContent);
|
|
} catch (e) {
|
|
console.error('Text extraction fallback failed:', e);
|
|
quillRef.current.setText('Error loading content');
|
|
}
|
|
} else {
|
|
// Special handling for reply or forwarded content
|
|
if (isReplyOrForward) {
|
|
console.log('Using special handling for reply/forward content');
|
|
|
|
// Clean up any problematic table structures, with special care for quoted content
|
|
const cleanedContent = cleanupTableStructures(sanitizedContent);
|
|
|
|
// Use direct innerHTML setting with minimal processing for reply/forward content
|
|
quillRef.current.root.innerHTML = cleanedContent;
|
|
} else {
|
|
// Use direct innerHTML setting for regular content
|
|
quillRef.current.root.innerHTML = sanitizedContent;
|
|
}
|
|
|
|
// Set the direction for the content
|
|
if (quillRef.current && quillRef.current.format) {
|
|
quillRef.current.format('direction', direction);
|
|
if (direction === 'rtl') {
|
|
quillRef.current.format('align', 'right');
|
|
}
|
|
} else {
|
|
console.warn('Cannot format content: editor not fully initialized');
|
|
}
|
|
}
|
|
|
|
// Set cursor at the beginning
|
|
quillRef.current.setSelection(0, 0);
|
|
|
|
// Ensure the cursor and scroll position is at the top of the editor
|
|
if (editorRef.current) {
|
|
editorRef.current.scrollTop = 0;
|
|
|
|
// Find and scroll parent containers that might have scroll
|
|
const scrollable = [
|
|
editorRef.current.closest('.ql-container'),
|
|
editorRef.current.closest('.rich-email-editor-container'),
|
|
editorRef.current.closest('.overflow-y-auto'),
|
|
document.querySelector('.overflow-y-auto')
|
|
];
|
|
|
|
scrollable.forEach(el => {
|
|
if (el instanceof HTMLElement) {
|
|
el.scrollTop = 0;
|
|
}
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error('Error setting initial content:', err);
|
|
|
|
// Enhanced fallback mechanism for complex content
|
|
try {
|
|
// First try to extract text from HTML
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = initialContent;
|
|
const textContent = tempDiv.textContent || tempDiv.innerText || '';
|
|
|
|
if (textContent.trim()) {
|
|
console.log('Using extracted text fallback, length:', textContent.length);
|
|
quillRef.current.setText(textContent);
|
|
} else {
|
|
// If text extraction fails or returns empty, provide a message
|
|
console.log('Using empty content fallback');
|
|
quillRef.current.setText('Unable to load original content');
|
|
}
|
|
} catch (e) {
|
|
console.error('All fallbacks failed:', e);
|
|
quillRef.current.setText('Error loading content');
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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 - using a simpler approach
|
|
useEffect(() => {
|
|
if (quillRef.current && isReady && initialContent) {
|
|
const currentContent = quillRef.current.root.innerHTML;
|
|
|
|
// Only update if content changed to avoid editor position reset
|
|
if (initialContent !== currentContent) {
|
|
try {
|
|
console.log('Updating content in editor:', {
|
|
contentLength: initialContent.length,
|
|
startsWithHtml: initialContent.trim().startsWith('<'),
|
|
containsForwardedMessage: initialContent.includes('---------- Forwarded message ----------'),
|
|
containsQuoteHeader: initialContent.includes('wrote:'),
|
|
hasBlockquote: initialContent.includes('<blockquote'),
|
|
hasTable: initialContent.includes('<table'),
|
|
firstNChars: initialContent.substring(0, 100).replace(/\n/g, '\\n')
|
|
});
|
|
|
|
// Check if content is reply or forward to use special handling
|
|
const isReplyOrForward =
|
|
initialContent.includes('wrote:') ||
|
|
initialContent.includes('<blockquote') ||
|
|
initialContent.includes('Forwarded message') ||
|
|
initialContent.includes('---------- Forwarded message ----------');
|
|
|
|
// Process HTML content using centralized utility
|
|
const processed = processHtmlContent(initialContent, {
|
|
sanitize: true,
|
|
preserveReplyFormat: isReplyOrForward
|
|
});
|
|
const sanitizedContent = processed.sanitizedContent;
|
|
const direction = processed.direction; // Use direction from processed result
|
|
|
|
// Log sanitized content details for debugging
|
|
console.log('Sanitized content details:', {
|
|
length: sanitizedContent.length,
|
|
isEmpty: sanitizedContent.trim().length === 0,
|
|
startsWithDiv: sanitizedContent.trim().startsWith('<div'),
|
|
containsForwardedMessage: sanitizedContent.includes('---------- Forwarded message ----------'),
|
|
containsQuoteHeader: sanitizedContent.includes('wrote:'),
|
|
hasTable: sanitizedContent.includes('<table'),
|
|
hasBlockquote: sanitizedContent.includes('<blockquote'),
|
|
isReplyOrForward: isReplyOrForward,
|
|
firstNChars: sanitizedContent.substring(0, 100).replace(/\n/g, '\\n')
|
|
});
|
|
|
|
// Check if content is valid HTML
|
|
if (sanitizedContent.trim().length === 0) {
|
|
console.warn('Sanitized content is empty, using original content');
|
|
// If sanitized content is empty, try to extract text from original
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = initialContent;
|
|
const textContent = tempDiv.textContent || tempDiv.innerText || '';
|
|
|
|
// Create simple HTML with text content
|
|
if (quillRef.current) {
|
|
quillRef.current.setText(textContent || 'No content available');
|
|
}
|
|
} else {
|
|
// SIMPLIFIED: Set content directly to the root element rather than using clipboard
|
|
if (quillRef.current && quillRef.current.root) {
|
|
// Special handling for reply or forward content
|
|
let contentToSet = sanitizedContent;
|
|
|
|
if (isReplyOrForward) {
|
|
console.log('Using special handling for reply/forward content update');
|
|
// Clean up tables with special care for quoted content
|
|
contentToSet = cleanupTableStructures(sanitizedContent);
|
|
}
|
|
|
|
// First set the content
|
|
quillRef.current.root.innerHTML = contentToSet;
|
|
|
|
// Then safely apply formatting only if quillRef is valid
|
|
try {
|
|
if (quillRef.current &&
|
|
quillRef.current.format &&
|
|
typeof quillRef.current.format === 'function' &&
|
|
quillRef.current.root &&
|
|
quillRef.current.root.innerHTML &&
|
|
quillRef.current.root.innerHTML.trim().length > 0) {
|
|
|
|
// Delay formatting to ensure Quill is fully ready
|
|
setTimeout(() => {
|
|
if (quillRef.current) {
|
|
try {
|
|
// Set the direction for the content
|
|
quillRef.current.format('direction', direction);
|
|
if (direction === 'rtl') {
|
|
quillRef.current.format('align', 'right');
|
|
}
|
|
|
|
// Force update
|
|
quillRef.current.update();
|
|
|
|
// Set selection to beginning
|
|
quillRef.current.setSelection(0, 0);
|
|
} catch (innerError) {
|
|
console.error('Error applying delayed formatting:', innerError);
|
|
}
|
|
}
|
|
}, 100); // Small delay to ensure editor is ready
|
|
} else {
|
|
console.warn('Skipping format - either editor not ready or content empty');
|
|
}
|
|
} catch (formatError) {
|
|
console.error('Error applying formatting:', formatError);
|
|
// Continue without formatting if there's an error
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Error updating content:', err);
|
|
// Safer fallback that avoids clipboard API
|
|
try {
|
|
// Extract basic text if everything else fails
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = initialContent;
|
|
const textContent = tempDiv.textContent || tempDiv.innerText || '';
|
|
|
|
if (quillRef.current) {
|
|
quillRef.current.setText(textContent || 'Error loading content');
|
|
}
|
|
} catch (e) {
|
|
console.error('All fallbacks failed:', e);
|
|
// Last resort
|
|
if (quillRef.current) {
|
|
quillRef.current.setText('Error loading content');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, [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-direction" value="rtl"></button>
|
|
</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;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Add RTL support styles */
|
|
:global([dir="rtl"] .ql-editor) {
|
|
text-align: right;
|
|
direction: rtl;
|
|
}
|
|
|
|
:global(.ql-editor[dir="rtl"]) {
|
|
text-align: right;
|
|
direction: rtl;
|
|
}
|
|
|
|
: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;
|
|
}
|
|
|
|
/* RTL blockquote styling */
|
|
:global(.ql-editor[dir="rtl"] blockquote),
|
|
:global([dir="rtl"] .ql-editor blockquote) {
|
|
border-left: none !important;
|
|
border-right: 2px solid #ddd !important;
|
|
padding: 10px 15px 10px 0 !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;
|
|
}
|
|
|
|
/* Email quote styling */
|
|
:global(.email-original-content) {
|
|
margin-top: 20px !important;
|
|
padding-top: 10px !important;
|
|
border-top: 1px solid #ddd !important;
|
|
color: #555 !important;
|
|
font-size: 13px !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;
|