courrier refactor rebuild 2

2025-04-27 10:40:43 +02:00 · 2025-04-27 10:40:43 +02:00 · 02c9e7054d
commit 02c9e7054d
parent 19cff1ce7c
3 changed files with 170 additions and 31 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -97,15 +97,56 @@

 /* Tables */
 .email-content-display table {
-  width: 100%;
+  width: 100% !important;
  border-collapse: collapse;
  margin: 16px 0;
+  table-layout: fixed;
+  max-width: 100%;
+  overflow-x: auto;
+  display: block;
 }

 .email-content-display td, 
 .email-content-display th {
  padding: 8px;
  border: 1px solid #e5e7eb;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+  font-size: 13px;
+}
+
+/* Make sure quoted content tables are properly displayed */
+.email-content-display .quoted-content table,
+.email-content-display blockquote table {
+  font-size: 12px;
+  margin: 8px 0;
+}
+
+.email-content-display .quoted-content td,
+.email-content-display .quoted-content th,
+.email-content-display blockquote td,
+.email-content-display blockquote th {
+  padding: 4px;
+  font-size: 12px;
+}
+
+/* Fix for tables in Quill editor */
+.ql-editor table {
+  width: 100% !important;
+  border-collapse: collapse;
+  table-layout: fixed;
+  margin: 10px 0;
+}
+
+.ql-editor td, 
+.ql-editor th {
+  border: 1px solid #ccc;
+  padding: 4px 8px;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  min-width: 30px;
+  font-size: 13px;
 }

 /* Buttons */
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@ -331,14 +331,14 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
            </div>

            {/* Message Body */}
-            <div className="flex-1 min-h-[200px] flex flex-col">
+            <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
              <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
                <RichEmailEditor
                  initialContent={emailContent}
                  onChange={setEmailContent}
                  minHeight="200px"
-                  maxHeight="calc(100vh - 400px)"
+                  maxHeight="none"
                />
              </div>
            </div>
@ -617,14 +617,14 @@ function LegacyAdapter({
            </div>

            {/* Message Body */}
-            <div className="flex-1 min-h-[200px] flex flex-col">
+            <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
              <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
                <RichEmailEditor
                  initialContent={composeBody}
                  onChange={setComposeBody}
                  minHeight="200px"
-                  maxHeight="calc(100vh - 400px)"
+                  maxHeight="none"
                />
              </div>
            </div>
--- a/components/email/RichEmailEditor.tsx
+++ b/components/email/RichEmailEditor.tsx
@ -20,6 +20,7 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
  maxHeight = 'calc(100vh - 400px)',
 }) => {
  const editorRef = useRef<HTMLDivElement>(null);
+  const toolbarRef = useRef<HTMLDivElement>(null);
  const quillRef = useRef<any>(null);
  const [isReady, setIsReady] = useState(false);

@ -27,11 +28,11 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
  useEffect(() => {
    // Import Quill dynamically (client-side only)
    const initializeQuill = async () => {
-      if (!editorRef.current) return;
+      if (!editorRef.current || !toolbarRef.current) return;
      
      const Quill = (await import('quill')).default;
      
-      // Define custom formats/modules as needed for email
+      // Define custom formats/modules with table support
      const emailToolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'color': [] }, { 'background': [] }],
@ -42,11 +43,16 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
        ['clean'],
      ];

-      // Create new Quill instance with the DOM element
+      // Create new Quill instance with the DOM element and custom toolbar
      const editorElement = editorRef.current;
      quillRef.current = new Quill(editorElement, {
        modules: {
-          toolbar: emailToolbarOptions
+          toolbar: {
+            container: toolbarRef.current,
+            handlers: {
+              // Add any custom toolbar handlers here
+            }
+          },
        },
        placeholder: placeholder,
        theme: 'snow',
@ -54,7 +60,10 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({

      // Set initial content (sanitized)
      if (initialContent) {
-        quillRef.current.clipboard.dangerouslyPasteHTML(sanitizeHtml(initialContent));
+        // Properly handle table content in the sanitized HTML
+        const cleanContent = sanitizeHtml(initialContent);
+        // Use clipboard API to ensure tables and complex HTML are rendered correctly
+        quillRef.current.clipboard.dangerouslyPasteHTML(cleanContent);
      }

      // Add change listener
@ -63,10 +72,18 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
        onChange(html);
      });

+      // Improve editor layout
+      const editorContainer = editorElement.closest('.ql-container');
+      if (editorContainer) {
+        editorContainer.classList.add('email-editor-container');
+      }
+
      setIsReady(true);
    };

-    initializeQuill();
+    initializeQuill().catch(err => {
+      console.error('Failed to initialize Quill editor:', err);
+    });

    // Clean up on unmount
    return () => {
@ -81,49 +98,130 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
  useEffect(() => {
    if (quillRef.current && isReady) {
      const currentContent = quillRef.current.root.innerHTML;
+      // Only update if content changed to avoid editor position reset
      if (initialContent !== currentContent) {
+        // Preserve cursor position if possible
+        const selection = quillRef.current.getSelection();
        quillRef.current.clipboard.dangerouslyPasteHTML(sanitizeHtml(initialContent));
+        if (selection) {
+          quillRef.current.setSelection(selection);
+        }
      }
    }
  }, [initialContent, isReady]);

  return (
-    <div className="rich-email-editor-container">
-      {/* Quill container */}
-      <div 
-        ref={editorRef} 
-        className="quill-editor"
-        style={{ 
-          height: 'auto',
-          minHeight: minHeight,
-          maxHeight: maxHeight 
-        }}
-      />
+    <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>
      
-      {/* 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>
-      )}
+      {/* 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%;
-          border-radius: 6px;
-          overflow: hidden;
+          height: 100%;
+          overflow: auto;
          flex: 1;
+          position: relative;
        }
+        
        .quill-editor {
          width: 100%;
-          flex: 1;
+          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;
+        }
+        
+        /* Fix table rendering */
+        :global(.ql-editor table) {
+          width: 100%;
+          border-collapse: collapse;
+        }
+        
+        :global(.ql-editor td),
+        :global(.ql-editor th) {
+          border: 1px solid #ccc;
+          padding: 4px 8px;
+          min-width: 40px;
+        }
      `}</style>
    </div>
  );