@jhits/plugin-newsletter 0.0.15 → 0.0.17

package/src/api/handlers/settings.ts

@@ -120,6 +120,11 @@ export async function GET_SMTP_SETTINGS(
                 fromName: '',
                 primaryLanguage: 'en',
                 logoUrl: '',
+                unsubscribeTranslations: {
+                    en: 'Unsubscribe',
+                    nl: 'Afmelden',
+                    sv: 'Avanmälan',
+                },
             });
         }
 
@@ -132,6 +137,11 @@ export async function GET_SMTP_SETTINGS(
             fromName: smtpConfig.fromName || '',
             primaryLanguage: smtpConfig.primaryLanguage || 'en',
             logoUrl: smtpConfig.logoUrl || '',
+            unsubscribeTranslations: smtpConfig.unsubscribeTranslations || {
+                en: 'Unsubscribe',
+                nl: 'Afmelden',
+                sv: 'Avanmälan',
+            },
         });
     } catch (error: any) {
         console.error('[NewsletterAPI] GET_SMTP_SETTINGS error:', error);
@@ -178,6 +188,7 @@ export async function POST_SMTP_SETTINGS(
                     fromName: body.fromName || '',
                     primaryLanguage: body.primaryLanguage || 'en',
                     logoUrl: body.logoUrl || '',
+                    unsubscribeTranslations: body.unsubscribeTranslations || {},
                     updatedAt: new Date(),
                     updatedBy: userId,
                 },
@@ -217,6 +228,41 @@ function getSmtpConfigFromDb(config: NewsletterApiConfig): Promise<{ host: strin
     })();
 }
 
+async function resolveBaseUrl(config: NewsletterApiConfig, language: string): Promise<string> {
+    try {
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const settings = db.collection('settings');
+
+        // Try to get site config from plugin-website (stored in 'settings' collection with identifier 'site_config')
+        const siteConfig = await settings.findOne({ identifier: 'site_config' });
+
+        if (siteConfig && siteConfig.domainLocaleConfig && Array.isArray(siteConfig.domainLocaleConfig)) {
+            // Find domain for this locale
+            const localeConfig = siteConfig.domainLocaleConfig.find((c: any) => c.locale === language);
+            if (localeConfig && localeConfig.domain && localeConfig.domain !== 'undefined' && localeConfig.domain.trim() !== '') {
+                const domain = localeConfig.domain.trim();
+                // Add protocol if missing
+                if (!domain.startsWith('http')) {
+                    const protocol = domain.includes('localhost') ? 'http' : 'https';
+                    return `${protocol}://${domain}`;
+                }
+                return domain;
+            }
+        }
+    } catch (error) {
+        console.warn('[NewsletterAPI] Failed to resolve language-specific base URL:', error);
+    }
+
+    // Fallback to default, carefully checking for 'undefined' string
+    const fallback = process.env.NEXT_PUBLIC_SITE_URL;
+    if (fallback && fallback !== 'undefined' && fallback.trim() !== '') {
+        return fallback;
+    }
+
+    return 'https://botanicsandyou.com';
+}
+
 export async function POST_TEST_EMAIL(
     req: NextRequest,
     config: NewsletterApiConfig
@@ -267,8 +313,20 @@ export async function POST_TEST_EMAIL(
             logoExists = fs.existsSync(altPath);
         }
 
-        const baseUrl = config.baseUrl || 'http://localhost:3001';
-        
+        // Resolve base URL based on language settings from plugin-website
+        const baseUrl = await resolveBaseUrl(config, language);
+
+        // Final sanity check - if domain is STILL undefined, stop sending and ask user for domain
+        if (baseUrl.includes('undefined')) {
+            return NextResponse.json(
+                { 
+                    error: 'Domain not configured for this language. Please define your website domain first.',
+                    code: 'DOMAIN_MISSING'
+                },
+                { status: 400 }
+            );
+        }
+
         let logoAttachment: any = undefined;
         let logoSrc = smtpConfig.logoUrl || `${baseUrl}/logo_black.svg`;
         

package/src/index.tsx

@@ -15,6 +15,7 @@ import { SettingsView } from './views/SettingsView';
 import { NewsletterManagerView } from './views/NewsletterManager';
 import { NewsletterEditorView } from './views/NewsletterEditor';
 import { editorStateToAPI } from './lib/mappers/apiMapper';
+import { resolvePluginConfig } from './lib/utils/config-resolver';
 
 /**
  * Plugin Props Interface
@@ -35,109 +36,48 @@ export interface PluginProps {
         /** Background color for dark mode (optional) */
         dark?: string;
     };
+    /** Localized strings for modular blocks in the editor */
+    translations?: Record<string, any>;
+    /** Global translations for unsubscribe text */
+    unsubscribeTranslations?: Record<string, string>;
 }
 
+/**
+ * Client-facing configuration type
+ * Allows partial overrides of plugin behavior
+ */
+export type NewsletterPluginConfig = Partial<Omit<PluginProps, 'subPath' | 'siteId' | 'locale'>> & {
+    customBlocks?: ClientBlockDefinition[];
+    darkMode?: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    translations?: Record<string, any>;
+    unsubscribeTranslations?: Record<string, string>;
+    emailConfig?: {
+        logoUrl?: string;
+        logoAlt?: string;
+        footerText?: string;
+        primaryColor?: string;
+    };
+};
+
 /**
  * Main Router Component
  * Handles routing within the newsletter plugin
- * 
- * Client Handshake:
- * - Client apps can pass customBlocks via props
- * - Or via window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'].customBlocks
- * - The EditorProvider will automatically register these blocks
  */
 export default function NewsletterPlugin(props: PluginProps) {
-    const { subPath, siteId, locale, customBlocks: propsCustomBlocks, darkMode: propsDarkMode, backgroundColors: propsBackgroundColors } = props;
-    
-    // Get custom blocks from props or window global (client app injection point)
-    const customBlocks = useMemo(() => {
-        // First, try props
-        if (propsCustomBlocks && propsCustomBlocks.length > 0) {
-            return propsCustomBlocks;
-        }
-        
-        // Fallback to window global (for client app injection)
-        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-            if (pluginProps?.customBlocks) {
-                return pluginProps.customBlocks as ClientBlockDefinition[];
-            }
-        }
-        
-        return [];
-    }, [propsCustomBlocks]);
-    
-    // Get dark mode setting from props, localStorage (dev settings), or window global
-    // Priority: localStorage (dev) > props > window global > default
-    const darkMode = useMemo(() => {
-        // First, check localStorage for dev settings (highest priority for dev)
-        if (typeof window !== 'undefined') {
-            try {
-                const saved = localStorage.getItem('__JHITS_PLUGIN_NEWSLETTER_CONFIG__');
-                if (saved) {
-                    const config = JSON.parse(saved);
-                    if (config.darkMode !== undefined) {
-                        return config.darkMode as boolean;
-                    }
-                }
-            } catch (e) {
-                // Ignore localStorage errors
-            }
-        }
-        
-        // Then try props
-        if (propsDarkMode !== undefined) {
-            return propsDarkMode;
-        }
-        
-        // Fallback to window global if prop not provided
-        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-            if (pluginProps?.darkMode !== undefined) {
-                return pluginProps.darkMode as boolean;
-            }
-        }
-        
-        return true; // Default to dark mode enabled
-    }, [propsDarkMode]);
-    
-    // Get background colors from props, localStorage (dev settings), or window global
-    // Priority: localStorage (dev) > props > window global
-    const backgroundColors = useMemo(() => {
-        // First, check localStorage for dev settings (highest priority for dev)
-        if (typeof window !== 'undefined') {
-            try {
-                const saved = localStorage.getItem('__JHITS_PLUGIN_NEWSLETTER_CONFIG__');
-                if (saved) {
-                    const config = JSON.parse(saved);
-                    if (config.backgroundColors) {
-                        return config.backgroundColors;
-                    }
-                }
-            } catch (e) {
-                // Ignore localStorage errors
-            }
-        }
-        
-        // Then try props
-        if (propsBackgroundColors) {
-            return propsBackgroundColors;
-        }
-        
-        // Fallback to window global
-        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-            if (pluginProps?.backgroundColors) {
-                return pluginProps.backgroundColors as { light: string; dark?: string };
-            }
-        }
-        
-        return undefined;
-    }, [propsBackgroundColors]);
+    const { subPath, siteId, locale } = props;
     
+    // Resolve configuration from multiple sources (Props, Window, Storage)
+    const config = useMemo(() => resolvePluginConfig(props), [props]);
+    const { customBlocks, darkMode, backgroundColors, translations, emailConfig, unsubscribeTranslations } = config;
+
     const route = subPath[0] || 'newsletters';
-    
-    // Listen for config updates from settings screen
+    const newsletterId = subPath[1];
+
+    // Listen for config updates (e.g. from settings screen)
     useEffect(() => {
         if (typeof window === 'undefined') return;
         
@@ -158,12 +98,14 @@ export default function NewsletterPlugin(props: PluginProps) {
             return <NewsletterManagerView siteId={siteId} locale={locale} />;
         
         case 'editor':
-            const newsletterId = subPath[1];
             return (
                 <EditorProvider 
                     customBlocks={customBlocks} 
                     darkMode={darkMode} 
                     backgroundColors={backgroundColors}
+                    translations={translations}
+                    emailConfig={emailConfig}
+                    unsubscribeTranslations={unsubscribeTranslations}
                     onSave={async (state, extraData?: { language?: string }) => {
                         // Save to API - create new or update existing newsletter
                         const originalId = newsletterId || state.slug;
@@ -180,7 +122,6 @@ export default function NewsletterPlugin(props: PluginProps) {
                         
                         // If we have an id, try to update first
                         if (originalId) {
-                            console.log('[NewsletterPlugin] Attempting to update newsletter with id:', originalId);
                             const updateResponse = await fetch(`/api/plugin-newsletter/newsletters/${originalId}${langParam}`, {
                                 method: 'PUT',
                                 headers: { 'Content-Type': 'application/json' },
@@ -190,32 +131,15 @@ export default function NewsletterPlugin(props: PluginProps) {
                             
                             if (updateResponse.ok) {
                                 const result = await updateResponse.json();
-                                // If the id changed, update the URL
                                 if (result.id && result.id !== originalId) {
                                     window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.id}`);
                                 }
                                 return result;
                             }
-                            
-                            // If 404, newsletter doesn't exist, create a new one
-                            if (updateResponse.status === 404) {
-                                console.log('[NewsletterPlugin] Newsletter not found, creating new newsletter');
-                            } else {
-                                // Other error, throw it
-                                const error = await updateResponse.json();
-                                console.error('[NewsletterPlugin] Save failed:', {
-                                    status: updateResponse.status,
-                                    statusText: updateResponse.statusText,
-                                    error,
-                                });
-                                const errorMessage = error.message || error.error || 'Failed to save newsletter';
-                                throw new Error(errorMessage);
-                            }
                         }
                         
-                        // Create new newsletter (either no id or update returned 404)
-                        console.log('[NewsletterPlugin] Creating new newsletter');
-                        const createResponse = await fetch('/api/plugin-newsletter/newsletters/new', {
+                        // Create new newsletter
+                        const createResponse = await fetch(`/api/plugin-newsletter/newsletters/new${langParam}`, {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             credentials: 'include',
@@ -224,17 +148,11 @@ export default function NewsletterPlugin(props: PluginProps) {
                         
                         if (!createResponse.ok) {
                             const error = await createResponse.json();
-                            console.error('[NewsletterPlugin] Create failed:', {
-                                status: createResponse.status,
-                                statusText: createResponse.statusText,
-                                error,
-                            });
                             const errorMessage = error.message || error.error || 'Failed to create newsletter';
                             throw new Error(errorMessage);
                         }
                         
                         const result = await createResponse.json();
-                        // Update the URL to the new newsletter's id
                         if (result.id) {
                             window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.id}`);
                         }
@@ -251,11 +169,11 @@ export default function NewsletterPlugin(props: PluginProps) {
                     customBlocks={customBlocks} 
                     darkMode={darkMode} 
                     backgroundColors={backgroundColors}
+                    translations={translations}
+                    emailConfig={emailConfig}
+                    unsubscribeTranslations={unsubscribeTranslations}
                     onSave={async (state, extraData?: { language?: string }) => {
-                        // Save to API - create new newsletter
                         const apiData = editorStateToAPI(state);
-                        
-                        // Include language in metadata if provided
                         if (extraData?.language) {
                             apiData.metadata = apiData.metadata || {};
                             apiData.metadata.lang = extraData.language;
@@ -272,7 +190,6 @@ export default function NewsletterPlugin(props: PluginProps) {
                             throw new Error(error.message || 'Failed to create newsletter');
                         }
                         const result = await response.json();
-                        // Update the URL to the new newsletter's slug
                         if (result.slug) {
                             window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.slug}`);
                         }
@@ -292,6 +209,9 @@ export default function NewsletterPlugin(props: PluginProps) {
                     customBlocks={customBlocks} 
                     darkMode={darkMode} 
                     backgroundColors={backgroundColors}
+                    translations={translations}
+                    emailConfig={emailConfig}
+                    unsubscribeTranslations={unsubscribeTranslations}
                     isWelcomeEmail={true}
                     onSave={async (state, extraData?: { language?: string }) => {
                         const apiData = editorStateToAPI(state);
@@ -321,36 +241,10 @@ export default function NewsletterPlugin(props: PluginProps) {
     }
 }
 
-// Export for use as default
+// Export symbols as needed
 export { NewsletterPlugin as Index };
-
-// Export types for client applications
-export type {
-    Block,
-    BlockTypeDefinition,
-    ClientBlockDefinition,
-    RichTextFormattingConfig,
-    BlockEditProps,
-    BlockPreviewProps,
-    IBlockComponent,
-} from './types/block';
-
-// Export newsletter types
-export type {
-    Newsletter,
-    NewsletterStatus,
-    NewsletterMetadata,
-    NewsletterListItem,
-    NewsletterFilterOptions,
-} from './types/newsletter';
-
-// Export initialization utility for easy setup
+export type { Block, ClientBlockDefinition } from './types/block';
 export { initNewsletterPlugin } from './init';
-export type { NewsletterPluginConfig } from './init';
-
-// Export editor state management
-export { EditorProvider, useEditor } from './state/EditorContext';
-export type { EditorProviderProps, EditorState, EditorContextValue } from './state';
-
-// Export block registry
 export { blockRegistry } from './registry';
+export { EditorProvider, useEditor } from './state/EditorContext';
+export { BlockRenderer, BlocksRenderer } from './lib/blocks/BlockRenderer';

package/src/lib/blocks/BlockRenderer.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { Block, BlockPreviewProps } from '../../types/block';
 import { blockRegistry } from '../../registry/BlockRegistry';
 import { getChildBlocks } from '../utils/blockHelpers';
+import { useEditor } from '../../state/EditorContext';
 
 /**
  * Block Renderer Props
@@ -40,6 +41,13 @@ export function BlockRenderer({
     customRenderers,
     context = {}
 }: BlockRendererProps) {
+    // We access the context to ensure re-render when blocks are registered
+    try {
+        useEditor();
+    } catch (e) {
+        // Not in editor context (e.g. preview bridge)
+    }
+
     // Check for custom renderer override first
     if (customRenderers?.has(block.type)) {
         const CustomRenderer = customRenderers.get(block.type)!;
@@ -47,9 +55,15 @@ export function BlockRenderer({
     }
 
     // Get block definition from registry
-    const definition = blockRegistry.get(block.type);
+    let definition = blockRegistry.get(block.type);
+    
+    // If not found, try one last immediate re-check of the global window registry
+    if (!definition && typeof window !== 'undefined' && (window as any).__JHITS_NEWSLETTER_REGISTRY__) {
+        definition = (window as any).__JHITS_NEWSLETTER_REGISTRY__.get(block.type);
+    }
+
     if (!definition) {
-        console.warn(`Block type "${block.type}" not found in registry. Available types:`, 
+        console.warn(`[BlockRenderer] Unknown block type: ${block.type}. Registry contains:`, 
             blockRegistry.getAll().map(b => b.type).join(', '));
         return (
             <div className="p-4 border border-red-300 bg-red-50 rounded">

package/src/lib/email/EmailRenderer.tsx

@@ -13,7 +13,6 @@
 
 import { Block } from '../../types/block';
 import { blockRegistry } from '../../registry/BlockRegistry';
-import { getChildBlocks } from '../utils/blockHelpers';
 
 /**
  * Email rendering context
@@ -62,15 +61,25 @@ function renderBlockByType(block: Block, context: EmailRenderContext): string {
             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}>`;
+            
+            // Aligned with BotanicsAndYou heading sizes
+            let fontSize = '30px';
+            if (level === 1) fontSize = '48px';
+            if (level === 2) fontSize = '36px';
+            if (level === 3) fontSize = '30px';
+            if (level >= 4) fontSize = '20px';
+            
+            const fontWeight = level >= 4 ? '500' : 'bold';
+            
+            return `<${tag} style="font-family: 'Georgia', serif; font-size: ${fontSize}; font-weight: ${fontWeight}; color: #1a2e26; margin: 40px 0 15px 0; line-height: 1.2;">${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>`;
+            // Aligned with BotanicsAndYou paragraph style (text-lg = 18px)
+            return `<p style="font-family: 'Georgia', serif; font-size: 18px; line-height: 1.625; color: #1a2e26; margin: 0 0 24px 0;">${emailHtml}</p>`;
         }
 
         case 'image': {
@@ -146,7 +155,7 @@ function renderBlockByType(block: Block, context: EmailRenderContext): string {
 
             const imageStyleString = imageStyles.join('; ');
 
-            let html = `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0;">
+            let html = `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0;">
                 <tr>
                     <td align="center">
                         <img src="${imageUrl}" alt="${escapeHtml(alt)}" style="${imageStyleString}" />
@@ -155,7 +164,7 @@ function renderBlockByType(block: Block, context: EmailRenderContext): string {
             
             if (caption) {
                 html += `<tr>
-                    <td align="center" style="padding-top: 10px; font-size: 12px; color: #666; font-style: italic;">
+                    <td align="center" style="padding-top: 10px; font-size: 14px; color: #666; font-style: italic; font-family: 'Georgia', serif;">
                         ${escapeHtml(caption)}
                     </td>
                 </tr>`;
@@ -174,10 +183,10 @@ function renderBlockByType(block: Block, context: EmailRenderContext): string {
             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>`;
+                return `<li style="margin: 12px 0; padding-left: 5px; line-height: 1.625; 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}>`;
+            return `<${tag} style="font-family: 'Georgia', serif; margin: 24px 0; padding-left: 24px; color: #1a2e26; font-size: 18px; line-height: 1.625;">${itemsHtml}</${tag}>`;
         }
 
         case 'table': {
@@ -189,7 +198,7 @@ function renderBlockByType(block: Block, context: EmailRenderContext): string {
             }
 
             // 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%;">`;
+            let tableHtml = `<table width="100%" cellpadding="12" cellspacing="0" border="0" style="margin: 30px 0; border-collapse: collapse; width: 100%; font-family: 'Georgia', serif;">`;
             
             rows.forEach((row, rIdx) => {
                 const isHeaderRow = rIdx === 0 && useHeader;
@@ -201,7 +210,7 @@ function renderBlockByType(block: Block, context: EmailRenderContext): string {
                 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 += `<${tag} style="padding: 15px; border: 1px solid #e5e7eb; text-align: left; color: ${textColor}; font-size: 16px; line-height: 1.6; background-color: ${bgColor}; font-weight: ${fontWeight};">${cellHtml}</${tag}>`;
                 });
                 tableHtml += `</tr>`;
             });
@@ -211,7 +220,7 @@ function renderBlockByType(block: Block, context: EmailRenderContext): string {
         }
 
         case 'divider': {
-            return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0;">
+            return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 40px 0;">
                 <tr>
                     <td align="center">
                         <table width="40" cellpadding="0" cellspacing="0" border="0">
@@ -228,7 +237,7 @@ function renderBlockByType(block: Block, context: EmailRenderContext): string {
             // 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 `<p style="font-family: 'Georgia', serif; font-size: 18px; line-height: 1.625; color: #1a2e26; margin: 0 0 24px 0;">${escapeHtml(text)}</p>`;
             }
             return '';
     }
@@ -302,18 +311,20 @@ export function generateNewsletterEmailHtml(
     },
     context: EmailRenderContext & {
         unsubscribeUrl?: string;
+        unsubscribeText?: string;
         footerText?: string;
         logoUrl?: string;
         logoAlt?: string;
         locale?: string;
     }
 ): string {
-    const { baseUrl = '', unsubscribeUrl, footerText, logoUrl, logoAlt = 'Logo', locale = 'en' } = context;
+    const { baseUrl = '', unsubscribeUrl, unsubscribeText: propsUnsubscribeText, 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';
+    const defaultText = isDutch ? 'Afmelden' : 'Unsubscribe';
+    const unsubscribeText = propsUnsubscribeText || defaultText;
 
     // Build header HTML if logo is provided
     const headerHtml = logoUrl ? `
@@ -355,8 +366,8 @@ export function generateNewsletterEmailHtml(
         .content { 
             padding: 0 50px 40px 50px; 
             color: #1a2e26; 
-            line-height: 1.8; 
-            font-size: 15px; 
+            line-height: 1.625; 
+            font-size: 18px; 
         }
         .footer { 
             padding: 40px 50px; 
@@ -368,12 +379,12 @@ export function generateNewsletterEmailHtml(
             border-top: 1px solid #faf9f6; 
         }
         h1 { 
-            font-weight: normal; 
-            font-style: italic; 
-            font-size: 30px; 
+            font-weight: bold; 
+            font-size: 48px; 
             margin-bottom: 30px; 
             color: #1a2e26; 
-            text-align: center; 
+            text-align: left;
+            line-height: 1.2;
         }
         .divider { 
             height: 1px; 

package/src/lib/utils/config-resolver.ts

@@ -0,0 +1,71 @@
+/**
+ * Newsletter Plugin Configuration Resolver
+ * Centralizes the logic for resolving plugin settings from multiple sources
+ */
+
+import { ClientBlockDefinition } from '../../types/block';
+
+export interface ResolvedConfig {
+    customBlocks: ClientBlockDefinition[];
+    darkMode: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    translations?: Record<string, any>;
+    unsubscribeTranslations?: Record<string, string>;
+    emailConfig?: {
+        logoUrl?: string;
+        logoAlt?: string;
+        footerText?: string;
+    };
+}
+
+/**
+ * Resolves a specific configuration value from priority sources:
+ * 1. LocalStorage (Dev overrides)
+ * 2. Component Props
+ * 3. Window Global (__JHITS_PLUGIN_PROPS__)
+ * 4. Default Value
+ */
+export function resolveConfigValue<T>(
+    key: string,
+    propValue: T | undefined,
+    defaultValue: T,
+    pluginKey: string = 'plugin-newsletter'
+): T {
+    if (typeof window === 'undefined') return propValue ?? defaultValue;
+
+    // 1. Check LocalStorage (Dev priority)
+    try {
+        const saved = localStorage.getItem(`__JHITS_PLUGIN_NEWSLETTER_CONFIG__`);
+        if (saved) {
+            const config = JSON.parse(saved);
+            if (config[key] !== undefined) return config[key];
+        }
+    } catch (e) {}
+
+    // 2. Check Props
+    if (propValue !== undefined) return propValue;
+
+    // 3. Check Window Global
+    const globalProps = (window as any).__JHITS_PLUGIN_PROPS__?.[pluginKey] || (window as any).__JHITS_PLUGIN_PROPS__?.['newsletter'];
+    if (globalProps && globalProps[key] !== undefined) return globalProps[key];
+
+    // 4. Default
+    return defaultValue;
+}
+
+/**
+ * Resolves all plugin configuration
+ */
+export function resolvePluginConfig(props: any): ResolvedConfig {
+    return {
+        customBlocks: resolveConfigValue('customBlocks', props.customBlocks, []),
+        darkMode: resolveConfigValue('darkMode', props.darkMode, true),
+        backgroundColors: resolveConfigValue('backgroundColors', props.backgroundColors, undefined),
+        translations: resolveConfigValue('translations', props.translations, undefined),
+        unsubscribeTranslations: resolveConfigValue('unsubscribeTranslations', props.unsubscribeTranslations, undefined),
+        emailConfig: resolveConfigValue('emailConfig', props.emailConfig, undefined),
+    };
+}