@jhits/plugin-newsletter 0.0.10 → 0.0.11

package/src/views/CanvasEditor/components/EditorCanvas.tsx

@@ -0,0 +1,674 @@
+'use client';
+
+import React, { useRef, useEffect, useState } from 'react';
+import { BlockWrapper } from '../BlockWrapper';
+import { EditorBody } from '../EditorBody';
+import { BlockRenderer } from '../../../lib/blocks/BlockRenderer';
+import { renderBlocksToEmail, generateNewsletterEmailHtml } from '../../../lib/email/EmailRenderer';
+import type { Block } from '../../../types/block';
+import type { NewsletterMetadata } from '../../../types/newsletter';
+import type { useSlashCommand } from '../hooks/useSlashCommand';
+
+// Add email-like styling for editor blocks
+const emailEditorStyles = `
+.email-editor-content p,
+.email-editor-content .text-md {
+    font-size: 15px !important;
+    line-height: 1.8 !important;
+    color: #1a2e26 !important;
+    margin: 0 0 15px 0 !important;
+    font-family: 'Georgia', serif !important;
+}
+
+.email-editor-content h1,
+.email-editor-content h2,
+.email-editor-content h3,
+.email-editor-content h4,
+.email-editor-content h5,
+.email-editor-content h6 {
+    font-family: 'Georgia', serif !important;
+    font-weight: bold !important;
+    color: #1a2e26 !important;
+    margin: 20px 0 10px 0 !important;
+    line-height: 1.3 !important;
+}
+
+.email-editor-content h1 {
+    font-size: 32px !important;
+}
+
+.email-editor-content h2 {
+    font-size: 24px !important;
+}
+
+.email-editor-content h3 {
+    font-size: 20px !important;
+}
+
+.email-editor-content h4,
+.email-editor-content h5,
+.email-editor-content h6 {
+    font-size: 18px !important;
+}
+
+.email-editor-content ul,
+.email-editor-content ol {
+    margin: 15px 0 !important;
+    padding-left: 25px !important;
+    color: #1a2e26 !important;
+    font-size: 15px !important;
+    line-height: 1.8 !important;
+}
+
+.email-editor-content li {
+    margin: 8px 0 !important;
+    padding-left: 5px !important;
+    line-height: 1.8 !important;
+    color: #1a2e26 !important;
+}
+
+.email-editor-content img {
+    max-width: 100% !important;
+    height: auto !important;
+    display: block !important;
+    margin: 20px 0 !important;
+}
+
+.email-block-wrapper {
+    font-family: 'Georgia', serif;
+    color: #1a2e26;
+}
+
+/* Ensure all blocks are visible */
+.email-block-content > * {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Heading input styling to match preview */
+.email-block-content input[type="text"] {
+    font-family: 'Georgia', serif !important;
+    color: #1a2e26 !important;
+    background: transparent !important;
+    border: none !important;
+    outline: none !important;
+    width: 100% !important;
+    padding: 0 !important;
+}
+
+.email-block-content input[type="text"]::placeholder {
+    color: #a1a1aa !important;
+}
+
+/* Table block styling */
+.email-block-content table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    margin: 20px 0 !important;
+    display: table !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+.email-block-content table th,
+.email-block-content table td {
+    padding: 12px !important;
+    border: 1px solid #e5e7eb !important;
+    text-align: left !important;
+    color: #1a2e26 !important;
+    font-size: 15px !important;
+    line-height: 1.8 !important;
+    background-color: transparent !important;
+}
+
+.email-block-content table th {
+    background-color: #f9fafb !important;
+    font-weight: bold !important;
+}
+
+/* Table container styling */
+.email-block-content div[class*="overflow-hidden"],
+.email-block-content div[class*="rounded"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* List block styling */
+.email-block-content ul,
+.email-block-content ol {
+    display: block !important;
+    margin: 15px 0 !important;
+    padding-left: 25px !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+.email-block-content li {
+    display: list-item !important;
+    margin: 8px 0 !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* List container styling */
+.email-block-content div[class*="bg-white"][class*="rounded"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    background-color: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+}
+
+/* Recipe block styling */
+.email-block-content div[class*="recipe"],
+.email-block-content div[class*="Recipe"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Ensure all container divs are visible */
+.email-block-content > div {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+.email-block-content div[class*="bg-white"],
+.email-block-content div[class*="border"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Ensure buttons and inputs are visible */
+.email-block-content button,
+.email-block-content input {
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Override any hidden or invisible states */
+.email-block-content [style*="display: none"],
+.email-block-content [style*="visibility: hidden"],
+.email-block-content [style*="opacity: 0"] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+`;
+
+export interface EditorCanvasProps {
+    isPreviewMode: boolean;
+    contentBlocks: Block[];
+    title: string;
+    siteId: string;
+    locale: string;
+    darkMode: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    metadata?: NewsletterMetadata;
+    onTitleChange: (title: string) => void;
+    onMetadataChange?: (metadata: Partial<NewsletterMetadata>) => void;
+    onBlockAdd: (type: string, index: number, containerId?: string) => void;
+    onBlockUpdate: (id: string, data: Partial<Block['data']>) => void;
+    onBlockDelete: (id: string) => void;
+    onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
+    slashCommand?: ReturnType<typeof useSlashCommand>;
+}
+
+export function EditorCanvas({
+    isPreviewMode,
+    contentBlocks,
+    title,
+    siteId,
+    locale,
+    darkMode,
+    backgroundColors,
+    metadata,
+    onTitleChange,
+    onMetadataChange,
+    onBlockAdd,
+    onBlockUpdate,
+    onBlockDelete,
+    onBlockMove,
+    slashCommand,
+}: EditorCanvasProps) {
+    const titleRef = useRef<HTMLTextAreaElement>(null);
+
+    // Inject email-like styles for editor
+    useEffect(() => {
+        const styleId = 'email-editor-styles';
+        if (!document.getElementById(styleId)) {
+            const style = document.createElement('style');
+            style.id = styleId;
+            style.textContent = emailEditorStyles;
+            document.head.appendChild(style);
+        }
+    }, []);
+
+    // Handle Title Auto-resize
+    useEffect(() => {
+        if (titleRef.current) {
+            titleRef.current.style.height = 'auto';
+            titleRef.current.style.height = `${titleRef.current.scrollHeight}px`;
+        }
+    }, [title]);
+
+    return (
+        <div
+            className="flex-1 overflow-y-auto overflow-x-hidden pb-40 custom-scrollbar selection:bg-primary/20 dark:selection:bg-primary/30 min-h-0"
+            style={{
+                backgroundColor: backgroundColors
+                    ? (darkMode && backgroundColors.dark
+                        ? backgroundColors.dark
+                        : backgroundColors.light)
+                    : '#faf9f6',
+            }}
+        >
+            {isPreviewMode ? (
+                <div className="mx-auto transition-all duration-500 max-w-[800px] px-6 py-6 w-full">
+                    <EmailPreview
+                        title={title}
+                        blocks={contentBlocks}
+                        siteId={siteId}
+                        locale={locale}
+                        metadata={metadata}
+                    />
+                </div>
+            ) : (
+                <div className="mx-auto transition-all duration-500 max-w-[800px] px-6 py-6 w-full">
+                    {/* Email Client Window - Gmail/Outlook Style */}
+                    <div className="bg-gradient-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-700 shadow-xl">
+                        {/* Email Client Window */}
+                        <div className="bg-white dark:bg-neutral-800 rounded-lg shadow-2xl overflow-hidden">
+                            {/* Email Client Header - Gmail Style */}
+                            <div className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
+                                {/* Toolbar */}
+                                <div className="px-4 py-2 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-700">
+                                    <div className="flex items-center gap-2">
+                                        <button className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded" title="Close">
+                                            <svg className="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                            </svg>
+                                        </button>
+                                        <button className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded" title="Minimize">
+                                            <svg className="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+                                            </svg>
+                                        </button>
+                                        <button className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded" title="Fullscreen">
+                                            <svg className="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
+                                            </svg>
+                                        </button>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-xs text-neutral-500 dark:text-neutral-400 font-medium">Compose Email</span>
+                                    </div>
+                                </div>
+                                
+                                {/* Email Headers */}
+                                <div className="px-4 py-3 border-b border-neutral-100 dark:border-neutral-700">
+                                    <div className="space-y-3">
+                                        <div className="flex items-center gap-2">
+                                            <label className="text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0">To:</label>
+                                            <input
+                                                type="text"
+                                                value="All Subscribers"
+                                                readOnly
+                                                className="flex-1 text-sm bg-transparent border-none outline-none text-neutral-700 dark:text-neutral-300 placeholder:text-neutral-400"
+                                            />
+                                        </div>
+                                        <div className="flex items-center gap-2">
+                                            <label className="text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0">Subject:</label>
+                                            <input
+                                                type="text"
+                                                value={metadata?.subject || ''}
+                                                onChange={(e) => onMetadataChange?.({ 
+                                                    subject: e.target.value, 
+                                                    previewText: metadata?.previewText,
+                                                    lang: metadata?.lang,
+                                                    recipientFilter: metadata?.recipientFilter,
+                                                })}
+                                                placeholder="Enter email subject..."
+                                                className="flex-1 text-sm bg-transparent border-none outline-none text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 font-medium"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            {/* Email Content Container - Matches email HTML structure */}
+                            <div className="bg-white dark:bg-neutral-800" style={{
+                                backgroundColor: '#ffffff',
+                            }}>
+                                {/* Email Header with Logo - Centered like in email */}
+                                {(() => {
+                                    // Get email config from window global (set by initNewsletterPlugin)
+                                    let emailConfig: { logoUrl?: string; logoAlt?: string } = {};
+                                    if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
+                                        const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
+                                        if (pluginProps?.emailConfig) {
+                                            emailConfig = pluginProps.emailConfig;
+                                        }
+                                    }
+                                    
+                                    return emailConfig.logoUrl ? (
+                                        <div style={{
+                                            padding: '40px 0 20px 0',
+                                            textAlign: 'center',
+                                            backgroundColor: '#ffffff',
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                        }}>
+                                            <img 
+                                                src={emailConfig.logoUrl} 
+                                                alt={emailConfig.logoAlt || 'Logo'} 
+                                                style={{
+                                                    width: '180px',
+                                                    height: 'auto',
+                                                    display: 'block',
+                                                    margin: '0 auto',
+                                                }}
+                                            />
+                                        </div>
+                                    ) : null;
+                                })()}
+                                
+                                {/* Email Content Area */}
+                                <div className="email-editor-content" style={{
+                                    fontFamily: "'Georgia', serif",
+                                    color: '#1a2e26',
+                                    lineHeight: '1.8',
+                                    fontSize: '15px',
+                                    padding: '0 50px 40px 50px',
+                                    minHeight: '400px',
+                                    backgroundColor: '#ffffff',
+                                }}>
+                                    <EditorBody
+                                        blocks={contentBlocks}
+                                        darkMode={darkMode}
+                                        backgroundColors={backgroundColors}
+                                        onBlockAdd={onBlockAdd}
+                                        onBlockUpdate={onBlockUpdate}
+                                        onBlockDelete={onBlockDelete}
+                                        onBlockMove={onBlockMove}
+                                        slashCommand={slashCommand}
+                                    />
+                                    
+                                    {/* Unsubscribe Link - Matching email preview */}
+                                    {(() => {
+                                        // Generate unsubscribe URL (similar to welcome email)
+                                        const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
+                                        const slugs: Record<string, string> = {
+                                            sv: '/avmälla',
+                                            nl: '/afmelden',
+                                            en: '/unsubscribe',
+                                        };
+                                        const slug = slugs[locale] || slugs.en;
+                                        const unsubscribeUrl = `${baseUrl}${slug}?email=subscriber@example.com`;
+                                        
+                                        // Get unsubscribe text based on locale
+                                        const isDutch = locale === 'nl';
+                                        const unsubscribeText = isDutch ? 'Afmelden' : 'Unsubscribe';
+                                        
+                                        return (
+                                            <>
+                                                {/* Divider */}
+                                                <div style={{
+                                                    height: '1px',
+                                                    width: '40px',
+                                                    backgroundColor: '#1a2e2620',
+                                                    margin: '30px auto',
+                                                }}></div>
+                                                
+                                                {/* Unsubscribe Link */}
+                                                <p style={{
+                                                    textAlign: 'center',
+                                                    fontSize: '12px',
+                                                    color: '#a1a1aa',
+                                                    margin: 0,
+                                                }}>
+                                                    <a 
+                                                        href={unsubscribeUrl}
+                                                        style={{
+                                                            color: '#a1a1aa',
+                                                            textDecoration: 'none',
+                                                        }}
+                                                        onClick={(e) => e.preventDefault()}
+                                                    >
+                                                        {unsubscribeText}
+                                                    </a>
+                                                </p>
+                                            </>
+                                        );
+                                    })()}
+                                </div>
+                                
+                                {/* Email Footer - Centered like in email */}
+                                {(() => {
+                                    // Get email config from window global
+                                    let emailConfig: { footerText?: string } = {};
+                                    if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
+                                        const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
+                                        if (pluginProps?.emailConfig) {
+                                            emailConfig = pluginProps.emailConfig;
+                                        }
+                                    }
+                                    
+                                    return emailConfig.footerText ? (
+                                        <div style={{
+                                            padding: '40px 50px',
+                                            textAlign: 'center',
+                                            fontFamily: 'sans-serif',
+                                            fontSize: '10px',
+                                            color: '#a1a1aa',
+                                            letterSpacing: '1px',
+                                            borderTop: '1px solid #faf9f6',
+                                            backgroundColor: '#ffffff',
+                                        }}>
+                                            {emailConfig.footerText}
+                                        </div>
+                                    ) : null;
+                                })()}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Email Preview Component
+ * Shows how the newsletter will look in email clients
+ * Matches the editor view structure for consistency
+ */
+function EmailPreview({ title, blocks, siteId, locale, metadata }: { title: string; blocks: Block[]; siteId: string; locale: string; metadata?: NewsletterMetadata }) {
+    const [emailHtml, setEmailHtml] = useState<string>('');
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+
+    useEffect(() => {
+        // Get email config from window global (set by initNewsletterPlugin)
+        let emailConfig: { logoUrl?: string; logoAlt?: string; footerText?: string } = {};
+        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
+            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
+            if (pluginProps?.emailConfig) {
+                emailConfig = pluginProps.emailConfig;
+            }
+        }
+
+        // Resolve image IDs to filenames before generating HTML
+        const resolveImageBlocks = async () => {
+            const resolvedBlocks = await Promise.all(blocks.map(async (block) => {
+                if (block.type === 'image' && block.data.imageId) {
+                    const imageId = block.data.imageId as string;
+                    // Check if already a filename
+                    const hasFileExtension = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(imageId);
+                    const looksLikeTimestamp = /^\d+-/.test(imageId);
+                    
+                    if (hasFileExtension || looksLikeTimestamp) {
+                        // Already a filename, use it directly
+                        return block;
+                    }
+                    
+                    // Need to resolve semantic ID to filename
+                    try {
+                        const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(imageId)}`);
+                        if (response.ok) {
+                            const data = await response.json();
+                            return {
+                                ...block,
+                                data: {
+                                    ...block.data,
+                                    imageId: data.filename || imageId, // Use resolved filename
+                                },
+                            };
+                        }
+                    } catch (error) {
+                        console.warn(`Failed to resolve image ID ${imageId}:`, error);
+                    }
+                }
+                return block;
+            }));
+
+            // Generate unsubscribe URL (similar to welcome email)
+            const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
+            const slugs: Record<string, string> = {
+                sv: '/avmälla',
+                nl: '/afmelden',
+                en: '/unsubscribe',
+            };
+            const slug = slugs[locale] || slugs.en;
+            // Use placeholder email for preview
+            const unsubscribeUrl = `${baseUrl}${slug}?email=subscriber@example.com`;
+
+            // Generate email HTML with resolved image blocks
+            const html = generateNewsletterEmailHtml(
+                resolvedBlocks,
+                { subject: metadata?.subject || '', previewText: metadata?.previewText || '' },
+                {
+                    siteId,
+                    locale,
+                    baseUrl,
+                    logoUrl: emailConfig.logoUrl,
+                    logoAlt: emailConfig.logoAlt,
+                    footerText: emailConfig.footerText,
+                    unsubscribeUrl,
+                }
+            );
+            setEmailHtml(html);
+
+            // Update iframe content
+            if (iframeRef.current) {
+                const iframe = iframeRef.current;
+                const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+                if (iframeDoc) {
+                    iframeDoc.open();
+                    iframeDoc.write(html);
+                    iframeDoc.close();
+                }
+            }
+        };
+
+        resolveImageBlocks();
+    }, [title, blocks, siteId, locale, metadata]);
+
+    if (blocks.length === 0) {
+        return (
+            <div className="bg-gradient-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-700 shadow-xl">
+                <div className="bg-white dark:bg-neutral-800 rounded-lg shadow-2xl overflow-hidden">
+                    <div className="text-center py-20 text-neutral-400 dark:text-neutral-500">
+                        <p className="text-sm">No content blocks yet. Switch to Edit mode to add blocks.</p>
+                        <p className="text-xs mt-2 text-neutral-500 dark:text-neutral-600">
+                            Email preview will appear here once you add blocks.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            {/* Email Client Window - Gmail/Outlook Style - Same as Editor */}
+            <div className="bg-gradient-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-700 shadow-xl">
+                {/* Email Client Window */}
+                <div className="bg-white dark:bg-neutral-800 rounded-lg shadow-2xl overflow-hidden">
+                    {/* Email Client Header - Gmail Style */}
+                    <div className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
+                        {/* Toolbar */}
+                        <div className="px-4 py-2 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-700">
+                            <div className="flex items-center gap-2">
+                                <button className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded" title="Close">
+                                    <svg className="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                    </svg>
+                                </button>
+                                <button className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded" title="Minimize">
+                                    <svg className="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+                                    </svg>
+                                </button>
+                                <button className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded" title="Fullscreen">
+                                    <svg className="w-4 h-4 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
+                                    </svg>
+                                </button>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <span className="text-xs text-neutral-500 dark:text-neutral-400 font-medium">Email Preview</span>
+                            </div>
+                        </div>
+                        
+                        {/* Email Headers */}
+                        <div className="px-4 py-3 border-b border-neutral-100 dark:border-neutral-700">
+                            <div className="space-y-3">
+                                <div className="flex items-center gap-2">
+                                    <label className="text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0">To:</label>
+                                    <input
+                                        type="text"
+                                        value="All Subscribers"
+                                        readOnly
+                                        className="flex-1 text-sm bg-transparent border-none outline-none text-neutral-700 dark:text-neutral-300 placeholder:text-neutral-400"
+                                    />
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <label className="text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0">Subject:</label>
+                                    <input
+                                        type="text"
+                                        value={metadata?.subject || 'Newsletter Subject'}
+                                        readOnly
+                                        className="flex-1 text-sm bg-transparent border-none outline-none text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 font-medium"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    {/* Email Content - iframe showing actual email */}
+                    <div className="bg-white dark:bg-neutral-800">
+                        <iframe
+                            ref={iframeRef}
+                            title="Email Preview"
+                            className="w-full border-0 bg-white"
+                            style={{ 
+                                minHeight: '500px',
+                                maxHeight: '900px',
+                                display: 'block',
+                            }}
+                            sandbox="allow-same-origin"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}