@jhits/plugin-newsletter 0.0.6 → 0.0.8

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

@@ -1,674 +0,0 @@
-'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>
-    );
-}