@jhits/plugin-newsletter 0.0.4 → 0.0.6

package/src/lib/email/EmailRenderer.tsx

@@ -0,0 +1,425 @@
+/**
+ * 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

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

package/src/lib/mappers/apiMapper.ts

@@ -0,0 +1,57 @@
+/**
+ * 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

@@ -0,0 +1,71 @@
+/**
+ * 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;
+}

package/src/lib/utils/slugify.ts

@@ -0,0 +1,43 @@
+/**
+ * Slug Utilities
+ * Functions for generating and validating URL slugs
+ */
+
+/**
+ * Convert a string to a URL-friendly slug
+ */
+export function slugify(text: string): string {
+    return text
+        .toString()
+        .toLowerCase()
+        .trim()
+        .replace(/\s+/g, '-')           // Replace spaces with hyphens
+        .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
+        .replace(/\-\-+/g, '-')         // Replace multiple hyphens with single hyphen
+        .replace(/^-+/, '')             // Trim hyphens from start
+        .replace(/-+$/, '');            // Trim hyphens from end
+}
+
+/**
+ * Generate a slug from a title
+ * Automatically handles edge cases and ensures uniqueness
+ */
+export function generateSlugFromTitle(title: string, existingSlugs: string[] = []): string {
+    let baseSlug = slugify(title);
+    
+    // If slug is empty after processing, use a fallback
+    if (!baseSlug) {
+        baseSlug = 'untitled-newsletter';
+    }
+    
+    // Check for collisions and append number if needed
+    let finalSlug = baseSlug;
+    let counter = 1;
+    
+    while (existingSlugs.includes(finalSlug)) {
+        finalSlug = `${baseSlug}-${counter}`;
+        counter++;
+    }
+    
+    return finalSlug;
+}

package/src/registry/BlockRegistry.ts

@@ -0,0 +1,53 @@
+/**
+ * Block Registry for Newsletter Plugin
+ * Dynamic registry for all block types in system
+ * Multi-Tenant Architecture: Blocks are provided by client applications
+ * 
+ * The registry is a singleton that starts empty and is populated by client apps
+ */
+
+import {
+    BlockTypeDefinition,
+    ClientBlockDefinition
+} from '../types/block';
+
+// Local interface to avoid import issues
+interface IBlockRegistry {
+    register(definition: BlockTypeDefinition): void;
+    get(type: string): BlockTypeDefinition | undefined;
+    getAll(): BlockTypeDefinition[];
+    has(type: string): boolean;
+    clear(): void;
+}
+
+/** 
+ * Block Registry Implementation
+ * Singleton that manages all block types in the system
+ */
+class BlockRegistryImpl implements IBlockRegistry {
+    private blocks: Map<string, BlockTypeDefinition> = new Map();
+
+    register(definition: BlockTypeDefinition): void {
+        this.blocks.set(definition.type, definition);
+    }
+
+    get(type: string): BlockTypeDefinition | undefined {
+        return this.blocks.get(type);
+    }
+
+    getAll(): BlockTypeDefinition[] {
+        return Array.from(this.blocks.values());
+    }
+
+    has(type: string): boolean {
+        return this.blocks.has(type);
+    }
+
+    clear(): void {
+        this.blocks.clear();
+    }
+}
+
+// Export singleton instance
+export const BlockRegistry = new BlockRegistryImpl();
+export const blockRegistry = BlockRegistry;

package/src/registry/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Registry Exports
+ */
+
+export { blockRegistry } from './BlockRegistry';