@jhits/plugin-newsletter 0.0.6 → 0.0.8

package/src/lib/blocks/BlockRenderer.tsx

@@ -1,125 +0,0 @@
-/**
- * Block Renderer
- * Library component for rendering blocks (decoupled from editor)
- * This is the "headless" rendering layer
- * 
- * Multi-Tenant: Uses Preview components from client-provided blocks
- */
-
-'use client';
-
-import React from 'react';
-import { Block, BlockPreviewProps } from '../../types/block';
-import { blockRegistry } from '../../registry/BlockRegistry';
-import { getChildBlocks } from '../utils/blockHelpers';
-
-/**
- * Block Renderer Props
- */
-export interface BlockRendererProps {
-    /** Block to render */
-    block: Block;
-    
-    /** Custom renderers for specific block types (optional override) */
-    customRenderers?: Map<string, React.ComponentType<BlockPreviewProps>>;
-    
-    /** Additional context for rendering */
-    context?: {
-        siteId?: string;
-        locale?: string;
-        [key: string]: unknown;
-    };
-}
-
-/**
- * Block Renderer Component
- * Renders a single block using its Preview component from the registry
- */
-export function BlockRenderer({ 
-    block, 
-    customRenderers,
-    context = {}
-}: BlockRendererProps) {
-    // Check for custom renderer override first
-    if (customRenderers?.has(block.type)) {
-        const CustomRenderer = customRenderers.get(block.type)!;
-        return <CustomRenderer block={block} context={context} />;
-    }
-
-    // Get block definition from registry
-    const definition = blockRegistry.get(block.type);
-    if (!definition) {
-        console.warn(`Block type "${block.type}" not found in registry. Available types:`, 
-            blockRegistry.getAll().map(b => b.type).join(', '));
-        return (
-            <div className="p-4 border border-red-300 bg-red-50 rounded">
-                <p className="text-red-600">Unknown block type: {block.type}</p>
-                <p className="text-xs text-red-500 mt-1">
-                    Make sure this block type is registered via customBlocks prop
-                </p>
-            </div>
-        );
-    }
-
-    // Use the Preview component from the block definition
-    const PreviewComponent = definition.components.Preview;
-    
-    // Check if this is a container block with children
-    const isContainer = definition.isContainer === true;
-    const childBlocks = isContainer && block.children && Array.isArray(block.children) && block.children.length > 0
-        ? (typeof block.children[0] === 'object' 
-            ? block.children as Block[]
-            : [])
-        : [];
-    
-    // If container block, pass child blocks and render function
-    if (isContainer) {
-        return (
-            <PreviewComponent 
-                block={block} 
-                context={context}
-                childBlocks={childBlocks}
-                renderChild={(childBlock: Block) => (
-                    <BlockRenderer
-                        block={childBlock}
-                        customRenderers={customRenderers}
-                        context={context}
-                    />
-                )}
-            />
-        );
-    }
-    
-    return <PreviewComponent block={block} context={context} />;
-}
-
-/**
- * Blocks Renderer Component
- * Renders multiple blocks in sequence
- */
-export function BlocksRenderer({ 
-    blocks, 
-    customRenderers,
-    context = {}
-}: { 
-    blocks: Block[];
-    customRenderers?: Map<string, React.ComponentType<BlockPreviewProps>>;
-    context?: {
-        siteId?: string;
-        locale?: string;
-        [key: string]: unknown;
-    };
-}) {
-    return (
-        <>
-            {blocks.map((block) => (
-                <BlockRenderer
-                    key={block.id}
-                    block={block}
-                    customRenderers={customRenderers}
-                    context={context}
-                />
-            ))}
-        </>
-    );
-}

package/src/lib/email/EmailRenderer.tsx

@@ -1,425 +0,0 @@
-/**
- * Email Renderer
- * Converts blocks to email-safe HTML
- * 
- * Email constraints:
- * - Inline styles only (no CSS classes)
- * - Table-based layouts (no flexbox/grid)
- * - Max width ~600px
- * - Limited CSS support
- * - Images need absolute URLs
- * - No JavaScript
- */
-
-import { Block } from '../../types/block';
-import { blockRegistry } from '../../registry/BlockRegistry';
-import { getChildBlocks } from '../utils/blockHelpers';
-
-/**
- * Email rendering context
- */
-export interface EmailRenderContext {
-    siteId?: string;
-    locale?: string;
-    baseUrl?: string; // Base URL for images and links
-    logoUrl?: string; // Logo URL for email header
-    logoAlt?: string; // Logo alt text
-    [key: string]: unknown;
-}
-
-/**
- * Convert a block to email-safe HTML
- */
-export function renderBlockToEmail(block: Block, context: EmailRenderContext = {}): string {
-    const definition = blockRegistry.get(block.type);
-    
-    if (!definition) {
-        return `<p style="color: #666; font-size: 14px; padding: 10px;">Unknown block type: ${block.type}</p>`;
-    }
-
-    // Check if block has email-specific renderer (preferred)
-    if (definition.components.Email) {
-        const childBlocks = block.children && Array.isArray(block.children) && block.children.length > 0
-            ? (typeof block.children[0] === 'object' ? block.children as Block[] : [])
-            : [];
-        
-        return definition.components.Email({
-            block,
-            context,
-            childBlocks,
-            renderChild: (childBlock: Block) => renderBlockToEmail(childBlock, context),
-        });
-    }
-
-    // Fallback to converting Preview component output to email HTML
-    // For now, we'll create basic email-safe HTML based on block type
-    return renderBlockByType(block, context);
-}
-
-/**
- * Render block by type with email-safe HTML
- */
-function renderBlockByType(block: Block, context: EmailRenderContext): string {
-    const { baseUrl = '' } = context;
-
-    switch (block.type) {
-        case 'heading': {
-            const level = (block.data.level as number) || 1;
-            const text = (block.data.text as string) || '';
-            const tag = `h${Math.min(Math.max(level, 1), 6)}`;
-            const fontSize = level === 1 ? '32px' : level === 2 ? '24px' : level === 3 ? '20px' : '18px';
-            return `<${tag} style="font-size: ${fontSize}; font-weight: bold; color: #1a2e26; margin: 20px 0 10px 0; line-height: 1.3;">${escapeHtml(text)}</${tag}>`;
-        }
-
-        case 'paragraph': {
-            const html = (block.data.html as string) || (block.data.text as string) || '';
-            // Convert basic HTML tags to email-safe inline styles
-            const emailHtml = convertHtmlToEmailSafe(html);
-            return `<p style="font-size: 15px; line-height: 1.8; color: #1a2e26; margin: 0 0 15px 0;">${emailHtml}</p>`;
-        }
-
-        case 'image': {
-            const imageId = block.data.imageId as string;
-            const alt = (block.data.alt as string) || '';
-            const caption = (block.data.caption as string) || '';
-            const height = (block.data.height as number) || undefined;
-            const widthPercent = (block.data.widthPercent as number) || 100;
-            const brightness = (block.data.brightness as number) ?? 100;
-            const blur = (block.data.blur as number) ?? 0;
-            const borderRadius = (block.data.borderRadius as string) || 'none';
-            
-            if (!imageId) {
-                return '';
-            }
-
-            // Check if imageId is already a filename (has extension or starts with timestamp)
-            const hasFileExtension = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(imageId);
-            const looksLikeTimestamp = /^\d+-/.test(imageId);
-            const isFilename = hasFileExtension || looksLikeTimestamp;
-            
-            // Generate image URL
-            const imageUrl = isFilename 
-                ? `${baseUrl}/api/uploads/${encodeURIComponent(imageId)}`
-                : `${baseUrl}/api/uploads/${encodeURIComponent(imageId)}`; // Will be resolved in preview component
-
-            // Build image styles
-            const imageStyles: string[] = [
-                'display: block',
-                'max-width: 100%',
-            ];
-
-            // Apply width percentage
-            if (widthPercent !== 100) {
-                imageStyles.push(`width: ${widthPercent}%`);
-            }
-
-            // Apply height if specified
-            if (height) {
-                imageStyles.push(`height: ${height}px`);
-                imageStyles.push('object-fit: cover');
-            } else {
-                imageStyles.push('height: auto');
-            }
-
-            // Apply filters (brightness and blur) - supported in most email clients
-            const filters: string[] = [];
-            if (brightness !== 100) {
-                filters.push(`brightness(${brightness}%)`);
-            }
-            if (blur > 0) {
-                filters.push(`blur(${blur}px)`);
-            }
-            if (filters.length > 0) {
-                imageStyles.push(`filter: ${filters.join(' ')}`);
-            }
-
-            // Apply border radius
-            const borderRadiusMap: Record<string, string> = {
-                'none': '0',
-                'sm': '2px',
-                'md': '4px',
-                'lg': '8px',
-                'xl': '12px',
-                '2xl': '16px',
-                '3xl': '24px',
-                'full': '9999px',
-            };
-            const borderRadiusValue = borderRadiusMap[borderRadius] || '0';
-            if (borderRadiusValue !== '0') {
-                imageStyles.push(`border-radius: ${borderRadiusValue}`);
-            }
-
-            const imageStyleString = imageStyles.join('; ');
-
-            let html = `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0;">
-                <tr>
-                    <td align="center">
-                        <img src="${imageUrl}" alt="${escapeHtml(alt)}" style="${imageStyleString}" />
-                    </td>
-                </tr>`;
-            
-            if (caption) {
-                html += `<tr>
-                    <td align="center" style="padding-top: 10px; font-size: 12px; color: #666; font-style: italic;">
-                        ${escapeHtml(caption)}
-                    </td>
-                </tr>`;
-            }
-            
-            html += `</table>`;
-            return html;
-        }
-
-        case 'list': {
-            const items = (block.data.items as Array<string | { text: string; html?: string }>) || [];
-            const type = (block.data.type as string) || 'ul';
-            const isOrdered = type === 'ol';
-            const tag = isOrdered ? 'ol' : 'ul';
-            
-            const itemsHtml = items.map((item, idx) => {
-                const text = typeof item === 'string' ? item : (item.html || item.text || '');
-                const emailHtml = convertHtmlToEmailSafe(text);
-                return `<li style="margin: 8px 0; padding-left: 5px; line-height: 1.8; color: #1a2e26;">${emailHtml}</li>`;
-            }).join('');
-
-            return `<${tag} style="margin: 15px 0; padding-left: 25px; color: #1a2e26; font-size: 15px; line-height: 1.8;">${itemsHtml}</${tag}>`;
-        }
-
-        case 'table': {
-            const rows = (Array.isArray(block.data?.rows) ? block.data.rows : []) as Array<Array<{ text: string; html: string }>>;
-            const useHeader = block.data.useHeader ?? true;
-
-            if (!rows.length) {
-                return '';
-            }
-
-            // Build table HTML using email-safe table structure
-            let tableHtml = `<table width="100%" cellpadding="12" cellspacing="0" border="0" style="margin: 20px 0; border-collapse: collapse; width: 100%;">`;
-            
-            rows.forEach((row, rIdx) => {
-                const isHeaderRow = rIdx === 0 && useHeader;
-                const tag = isHeaderRow ? 'th' : 'td';
-                const bgColor = isHeaderRow ? '#1a2e26' : 'transparent';
-                const textColor = isHeaderRow ? '#ffffff' : '#1a2e26';
-                const fontWeight = isHeaderRow ? 'bold' : 'normal';
-                
-                tableHtml += `<tr>`;
-                row.forEach((cell) => {
-                    const cellHtml = convertHtmlToEmailSafe(cell.html || cell.text || '');
-                    tableHtml += `<${tag} style="padding: 12px; border: 1px solid #e5e7eb; text-align: left; color: ${textColor}; font-size: 15px; line-height: 1.8; background-color: ${bgColor}; font-weight: ${fontWeight};">${cellHtml}</${tag}>`;
-                });
-                tableHtml += `</tr>`;
-            });
-            
-            tableHtml += `</table>`;
-            return tableHtml;
-        }
-
-        case 'divider': {
-            return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0;">
-                <tr>
-                    <td align="center">
-                        <table width="40" cellpadding="0" cellspacing="0" border="0">
-                            <tr>
-                                <td height="1" bgcolor="#1a2e26" style="background-color: #1a2e2620; height: 1px;"></td>
-                            </tr>
-                        </table>
-                    </td>
-                </tr>
-            </table>`;
-        }
-
-        default:
-            // Generic fallback - try to extract text content
-            const text = extractTextFromBlock(block);
-            if (text) {
-                return `<p style="font-size: 15px; line-height: 1.8; color: #1a2e26; margin: 0 0 15px 0;">${escapeHtml(text)}</p>`;
-            }
-            return '';
-    }
-}
-
-/**
- * Convert HTML to email-safe HTML (inline styles)
- */
-function convertHtmlToEmailSafe(html: string): string {
-    if (!html) return '';
-
-    // Convert common HTML tags to email-safe versions with inline styles
-    let result = html
-        // Bold
-        .replace(/<strong\b[^>]*>(.*?)<\/strong>/gi, '<strong style="font-weight: bold;">$1</strong>')
-        .replace(/<b\b[^>]*>(.*?)<\/b>/gi, '<strong style="font-weight: bold;">$1</strong>')
-        // Italic
-        .replace(/<em\b[^>]*>(.*?)<\/em>/gi, '<em style="font-style: italic;">$1</em>')
-        .replace(/<i\b[^>]*>(.*?)<\/i>/gi, '<em style="font-style: italic;">$1</em>')
-        // Links
-        .replace(/<a\b[^>]*href=["']([^"']+)["'][^>]*>(.*?)<\/a>/gi, '<a href="$1" style="color: #1a2e26; text-decoration: underline;">$2</a>')
-        // Line breaks
-        .replace(/<br\s*\/?>/gi, '<br />');
-
-    return result;
-}
-
-/**
- * Extract text content from block data
- */
-function extractTextFromBlock(block: Block): string {
-    if (block.data.text) return String(block.data.text);
-    if (block.data.html) {
-        const html = String(block.data.html);
-        return html.replace(/<[^>]*>/g, '').trim();
-    }
-    if (block.data.title) return String(block.data.title);
-    return '';
-}
-
-/**
- * Escape HTML entities
- */
-function escapeHtml(text: string): string {
-    const map: Record<string, string> = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#039;',
-    };
-    return text.replace(/[&<>"']/g, (m) => map[m]);
-}
-
-/**
- * Render all blocks to email HTML
- */
-export function renderBlocksToEmail(blocks: Block[], context: EmailRenderContext = {}): string {
-    return blocks.map(block => renderBlockToEmail(block, context)).join('\n');
-}
-
-/**
- * Generate complete email HTML from newsletter
- * Uses the same styling as the welcome email template
- */
-export function generateNewsletterEmailHtml(
-    blocks: Block[],
-    metadata: {
-        subject: string;
-        previewText?: string;
-    },
-    context: EmailRenderContext & {
-        unsubscribeUrl?: string;
-        footerText?: string;
-        logoUrl?: string;
-        logoAlt?: string;
-        locale?: string;
-    }
-): string {
-    const { baseUrl = '', unsubscribeUrl, footerText, logoUrl, logoAlt = 'Logo', locale = 'en' } = context;
-    const contentHtml = renderBlocksToEmail(blocks, context);
-    
-    // Get unsubscribe text based on locale (matching welcome email)
-    const isDutch = locale === 'nl';
-    const unsubscribeText = isDutch ? 'Afmelden' : 'Unsubscribe';
-
-    // Build header HTML if logo is provided
-    const headerHtml = logoUrl ? `
-              <div class="header">
-                <img src="${logoUrl}" alt="${escapeHtml(logoAlt)}" class="logo">
-              </div>` : '';
-
-    return `<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="color-scheme" content="light">
-    <style>
-        body { 
-            background-color: #faf9f6; 
-            margin: 0; 
-            padding: 0; 
-            font-family: 'Georgia', serif; 
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-        }
-        .container { 
-            max-width: 600px; 
-            margin: 20px auto; 
-            background-color: #ffffff; 
-            border-radius: 40px; 
-            border: 1px solid #1a2e260d; 
-            overflow: hidden; 
-        }
-        .header { 
-            padding: 40px 0 20px 0; 
-            text-align: center; 
-        }
-        .logo { 
-            width: 180px; 
-            height: auto; 
-        }
-        .content { 
-            padding: 0 50px 40px 50px; 
-            color: #1a2e26; 
-            line-height: 1.8; 
-            font-size: 15px; 
-        }
-        .footer { 
-            padding: 40px 50px; 
-            text-align: center; 
-            font-family: sans-serif; 
-            font-size: 10px; 
-            color: #a1a1aa; 
-            letter-spacing: 1px; 
-            border-top: 1px solid #faf9f6; 
-        }
-        h1 { 
-            font-weight: normal; 
-            font-style: italic; 
-            font-size: 30px; 
-            margin-bottom: 30px; 
-            color: #1a2e26; 
-            text-align: center; 
-        }
-        .divider { 
-            height: 1px; 
-            width: 40px; 
-            background-color: #1a2e2620; 
-            margin: 30px auto; 
-        }
-        @media only screen and (max-width: 600px) {
-            .container {
-                width: 100% !important;
-                border-radius: 0 !important;
-            }
-            .content {
-                padding: 0 30px 30px 30px !important;
-            }
-            .footer {
-                padding: 30px !important;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        ${headerHtml}
-        <div class="content">
-            ${contentHtml}
-            ${unsubscribeUrl ? `
-            <div class="divider"></div>
-            <p style="text-align: center; font-size: 12px; color: #a1a1aa;">
-                <a href="${unsubscribeUrl}" style="color: #a1a1aa; text-decoration: none;">
-                    ${unsubscribeText}
-                </a>
-            </p>
-            ` : ''}
-        </div>
-        ${footerText ? `
-        <div class="footer">
-            ${footerText}
-        </div>
-        ` : ''}
-    </div>
-</body>
-</html>`;
-}

package/src/lib/email/index.ts

@@ -1,6 +0,0 @@
-/**
- * Email Rendering Exports
- */
-
-export { renderBlockToEmail, renderBlocksToEmail, generateNewsletterEmailHtml } from './EmailRenderer';
-export type { EmailRenderContext } from './EmailRenderer';

package/src/lib/mappers/apiMapper.ts

@@ -1,57 +0,0 @@
-/**
- * API Mapper
- * Converts editor state to API format and vice versa
- */
-
-import { EditorState } from '../../state/types';
-import { Newsletter, NewsletterPublicationData } from '../../types/newsletter';
-import { Block } from '../../types/block';
-
-/**
- * Convert editor state to API format
- */
-export function editorStateToAPI(state: EditorState): {
-    title: string;
-    slug: string;
-    blocks: Block[];
-    metadata: {
-        subject: string;
-        previewText?: string;
-        lang?: string;
-        recipientFilter?: {
-            type: 'all' | 'language' | 'custom';
-            value?: string;
-        };
-    };
-    publication: NewsletterPublicationData;
-} {
-    // For newsletters, use subject as title if title is empty
-    // This makes sense since email subject is the primary identifier
-    const newsletterTitle = state.title?.trim() || state.metadata?.subject?.trim() || '';
-    
-    return {
-        title: newsletterTitle,
-        slug: state.slug,
-        blocks: state.blocks,
-        metadata: state.metadata,
-        publication: {
-            status: state.status,
-            authorId: undefined, // Will be set by API handler
-            updatedAt: new Date().toISOString(),
-        },
-    };
-}
-
-/**
- * Convert API format to editor state
- */
-export function apiToEditorState(newsletter: Newsletter): Partial<EditorState> {
-    return {
-        blocks: newsletter.blocks,
-        title: newsletter.title,
-        slug: newsletter.slug,
-        metadata: newsletter.metadata,
-        status: newsletter.publication.status,
-        newsletterId: newsletter.id,
-    };
-}

package/src/lib/utils/blockHelpers.ts

@@ -1,71 +0,0 @@
-/**
- * Block Helper Utilities
- * Functions for working with blocks, including nested structures
- */
-
-import { Block } from '../../types/block';
-
-/**
- * Get child blocks from a container block
- * Handles both Block[] and string[] formats
- */
-export function getChildBlocks(block: Block, allBlocks: Block[] = []): Block[] {
-    if (!block.children || block.children.length === 0) {
-        return [];
-    }
-
-    // If children are Block objects, return them directly
-    if (block.children.length > 0 && typeof block.children[0] === 'object' && 'id' in block.children[0]) {
-        return block.children as Block[];
-    }
-
-    // If children are IDs, resolve them from allBlocks (recursively search nested blocks)
-    const childIds = block.children as string[];
-    const resolvedBlocks: Block[] = [];
-    
-    function findBlockRecursive(blocks: Block[], id: string): Block | null {
-        for (const b of blocks) {
-            if (b.id === id) return b;
-            if (b.children && Array.isArray(b.children) && b.children.length > 0) {
-                if (typeof b.children[0] === 'object') {
-                    const found = findBlockRecursive(b.children as Block[], id);
-                    if (found) return found;
-                }
-            }
-        }
-        return null;
-    }
-    
-    childIds.forEach(id => {
-        const found = findBlockRecursive(allBlocks, id);
-        if (found) resolvedBlocks.push(found);
-    });
-    
-    return resolvedBlocks;
-}
-
-/**
- * Check if a block is a container (has children or is marked as container)
- */
-export function isContainerBlock(block: Block, blockRegistry: { get: (type: string) => { isContainer?: boolean } | undefined }): boolean {
-    const definition = blockRegistry.get(block.type);
-    return definition?.isContainer === true || (block.children !== undefined && block.children.length > 0);
-}
-
-/**
- * Find a block by ID recursively (including nested blocks)
- */
-export function findBlockById(blocks: Block[], id: string): Block | null {
-    for (const block of blocks) {
-        if (block.id === id) {
-            return block;
-        }
-        if (block.children && Array.isArray(block.children) && block.children.length > 0) {
-            if (typeof block.children[0] === 'object') {
-                const found = findBlockById(block.children as Block[], id);
-                if (found) return found;
-            }
-        }
-    }
-    return null;
-}