@jhits/plugin-newsletter 0.0.15 → 0.0.17

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

@@ -1,23 +1,33 @@
 'use client';
 
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
 import { BlockWrapper } from '../BlockWrapper';
 import { EditorBody } from '../EditorBody';
 import { BlockRenderer } from '../../../lib/blocks/BlockRenderer';
+import { useEditor } from '../../../state/EditorContext';
 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
+// Add email-like styling for editor blocks - Aligned with BotanicsAndYou brand styles
 const emailEditorStyles = `
+.email-editor-content {
+    /* Newsletter Brand Variable Overrides */
+    --content-text-color: #1a2e26;
+    --content-font-family: 'Georgia', serif;
+    --content-font-size: 18px;
+    --content-line-height: 1.625;
+    --content-heading-font: 'Georgia', serif;
+}
+
 .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;
+    font-size: var(--content-font-size);
+    line-height: var(--content-line-height);
+    color: var(--content-text-color);
+    margin: 0 0 1.5rem 0;
+    font-family: var(--content-font-family);
 }
 
 .email-editor-content h1,
@@ -26,52 +36,59 @@ const emailEditorStyles = `
 .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;
+    font-family: 'Georgia', serif;
+    font-weight: bold;
+    color: #1a2e26;
+    margin: 2.5rem 0 1rem 0;
+    line-height: 1.2;
 }
 
 .email-editor-content h1 {
-    font-size: 32px !important;
+    font-size: 48px;
+    letter-spacing: -0.02em;
 }
 
 .email-editor-content h2 {
-    font-size: 24px !important;
+    font-size: 36px;
+    letter-spacing: -0.01em;
 }
 
 .email-editor-content h3 {
-    font-size: 20px !important;
+    font-size: 30px;
+}
+
+.email-editor-content h4 {
+    font-size: 20px;
+    font-weight: 500;
 }
 
-.email-editor-content h4,
 .email-editor-content h5,
 .email-editor-content h6 {
-    font-size: 18px !important;
+    font-size: 18px;
+    font-weight: 500;
 }
 
 .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;
+    margin: 1.5rem 0;
+    padding-left: 1.5rem;
+    color: #1a2e26;
+    font-size: 18px;
+    line-height: 1.625;
+    font-family: 'Georgia', serif;
 }
 
 .email-editor-content li {
-    margin: 8px 0 !important;
-    padding-left: 5px !important;
-    line-height: 1.8 !important;
-    color: #1a2e26 !important;
+    margin: 0.75rem 0;
+    padding-left: 0.25rem;
 }
 
 .email-editor-content img {
-    max-width: 100% !important;
-    height: auto !important;
-    display: block !important;
-    margin: 20px 0 !important;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 2rem 0;
+    border-radius: 12px;
 }
 
 .email-block-wrapper {
@@ -79,15 +96,20 @@ const emailEditorStyles = `
     color: #1a2e26;
 }
 
-/* Ensure all blocks are visible */
+/* Ensure all blocks are visible and match brand font */
+.email-block-content {
+    font-family: 'Georgia', serif;
+}
+
 .email-block-content > * {
-    display: block !important;
-    visibility: visible !important;
-    opacity: 1 !important;
+    display: block;
+    visibility: visible;
+    opacity: 1;
 }
 
-/* Heading input styling to match preview */
-.email-block-content input[type="text"] {
+/* Heading/Text input styling to match brand preview */
+.email-block-content input[type="text"],
+.email-block-content textarea {
     font-family: 'Georgia', serif !important;
     color: #1a2e26 !important;
     background: transparent !important;
@@ -238,12 +260,45 @@ export function EditorCanvas({
     onBlockMove,
     slashCommand,
 }: EditorCanvasProps) {
+    const { emailConfig: contextEmailConfig, unsubscribeTranslations: contextUnsubscribeTranslations } = useEditor();
+    
+    // SMTP settings take priority over client config
+    const emailConfig = useMemo(() => {
+        let smtpLogoUrl = '';
+        let smtpUnsubscribeTranslations = {};
+
+        if (typeof window !== 'undefined') {
+            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__?.['plugin-newsletter'];
+            if (pluginProps?.emailConfig?.logoUrl) {
+                smtpLogoUrl = pluginProps.emailConfig.logoUrl;
+            }
+            if (pluginProps?.unsubscribeTranslations) {
+                smtpUnsubscribeTranslations = pluginProps.unsubscribeTranslations;
+            }
+        }
+        
+        return {
+            ...contextEmailConfig,
+            logoUrl: smtpLogoUrl || contextEmailConfig?.logoUrl,
+            unsubscribeTranslations: {
+                en: 'Unsubscribe',
+                nl: 'Afmelden',
+                sv: 'Avanmälan',
+                ...contextUnsubscribeTranslations,
+                ...smtpUnsubscribeTranslations
+            }
+        };
+    }, [contextEmailConfig, contextUnsubscribeTranslations]);
+
     const titleRef = useRef<HTMLTextAreaElement>(null);
 
     // Inject email-like styles for editor
     useEffect(() => {
         const styleId = 'email-editor-styles';
-        if (!document.getElementById(styleId)) {
+        const existingStyle = document.getElementById(styleId);
+        if (existingStyle) {
+            existingStyle.textContent = emailEditorStyles;
+        } else {
             const style = document.createElement('style');
             style.id = styleId;
             style.textContent = emailEditorStyles;
@@ -261,13 +316,13 @@ export function EditorCanvas({
 
     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"
+            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 h-full max-h-full"
             style={{
                 backgroundColor: backgroundColors
                     ? (darkMode && backgroundColors.dark
                         ? backgroundColors.dark
                         : backgroundColors.light)
-                    : '#faf9f6',
+                    : '#ffffff',
             }}
         >
             {isPreviewMode ? (
@@ -348,45 +403,34 @@ export function EditorCanvas({
                                 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;
-                                })()}
+                                {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',
+                                    lineHeight: '1.625',
+                                    fontSize: '18px',
                                     padding: '0 50px 40px 50px',
                                     minHeight: '400px',
                                     backgroundColor: '#ffffff',
@@ -414,9 +458,11 @@ export function EditorCanvas({
                                         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';
+                                        // Get unsubscribe text (Priority: metadata manual override > global SMTP translation > hardcoded localized default)
+                                        const globalTranslations = (emailConfig as any).unsubscribeTranslations || {};
+                                        const hardcodedDefaults: Record<string, string> = { en: 'Unsubscribe', nl: 'Afmelden', sv: 'Avanmälan' };
+                                        const defaultText = globalTranslations[locale] || hardcodedDefaults[locale] || hardcodedDefaults.en;
+                                        const unsubscribeText = metadata?.unsubscribeText || defaultText;
                                         
                                         return (
                                             <>
@@ -452,31 +498,20 @@ export function EditorCanvas({
                                 </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;
-                                })()}
+                                {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>
@@ -492,19 +527,40 @@ export function EditorCanvas({
  * 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 { emailConfig: contextEmailConfig, unsubscribeTranslations: contextUnsubscribeTranslations } = useEditor();
+    
+    // SMTP settings take priority over client config
+    const emailConfig = useMemo(() => {
+        let smtpLogoUrl = '';
+        let smtpUnsubscribeTranslations = {};
+
+        if (typeof window !== 'undefined') {
+            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__?.['plugin-newsletter'];
+            if (pluginProps?.emailConfig?.logoUrl) {
+                smtpLogoUrl = pluginProps.emailConfig.logoUrl;
+            }
+            if (pluginProps?.unsubscribeTranslations) {
+                smtpUnsubscribeTranslations = pluginProps.unsubscribeTranslations;
+            }
+        }
+        
+        return {
+            ...contextEmailConfig,
+            logoUrl: smtpLogoUrl || contextEmailConfig?.logoUrl,
+            unsubscribeTranslations: {
+                en: 'Unsubscribe',
+                nl: 'Afmelden',
+                sv: 'Avanmälan',
+                ...contextUnsubscribeTranslations,
+                ...smtpUnsubscribeTranslations
+            }
+        };
+    }, [contextEmailConfig, contextUnsubscribeTranslations]);
+
     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) => {
@@ -550,6 +606,12 @@ function EmailPreview({ title, blocks, siteId, locale, metadata }: { title: stri
             // Use placeholder email for preview
             const unsubscribeUrl = `${baseUrl}${slug}?email=subscriber@example.com`;
 
+            // Get unsubscribe text (Priority: metadata manual override > global SMTP translation > hardcoded localized default)
+            const globalTranslations = (emailConfig as any).unsubscribeTranslations || {};
+            const hardcodedDefaults: Record<string, string> = { en: 'Unsubscribe', nl: 'Afmelden', sv: 'Avanmälan' };
+            const defaultText = globalTranslations[locale] || hardcodedDefaults[locale] || hardcodedDefaults.en;
+            const unsubscribeText = metadata?.unsubscribeText || defaultText;
+
             // Generate email HTML with resolved image blocks
             const html = generateNewsletterEmailHtml(
                 resolvedBlocks,
@@ -558,10 +620,11 @@ function EmailPreview({ title, blocks, siteId, locale, metadata }: { title: stri
                     siteId,
                     locale,
                     baseUrl,
-                    logoUrl: emailConfig.logoUrl,
-                    logoAlt: emailConfig.logoAlt,
-                    footerText: emailConfig.footerText,
+                    logoUrl: emailConfig?.logoUrl,
+                    logoAlt: emailConfig?.logoAlt,
+                    footerText: emailConfig?.footerText,
                     unsubscribeUrl,
+                    unsubscribeText,
                 }
             );
             setEmailHtml(html);
@@ -579,7 +642,7 @@ function EmailPreview({ title, blocks, siteId, locale, metadata }: { title: stri
         };
 
         resolveImageBlocks();
-    }, [title, blocks, siteId, locale, metadata]);
+    }, [title, blocks, siteId, locale, metadata, emailConfig]);
 
     if (blocks.length === 0) {
         return (
@@ -664,7 +727,7 @@ function EmailPreview({ title, blocks, siteId, locale, metadata }: { title: stri
                                 maxHeight: '900px',
                                 display: 'block',
                             }}
-                            sandbox="allow-same-origin"
+                            sandbox="allow-same-origin allow-scripts"
                         />
                     </div>
                 </div>

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Mail, Globe, Users } from 'lucide-react';
+import { Mail, Globe, Users, Palette, Info } from 'lucide-react';
 import type { NewsletterMetadata } from '../../../types/newsletter';
 
 export interface EditorSidebarProps {
@@ -13,6 +13,8 @@ export interface EditorSidebarProps {
     languages?: string[];
     currentLanguage?: string;
     onLanguageChange?: (language: string) => void;
+    globalUnsubscribeText?: string;
+    onGlobalUnsubscribeUpdate?: (text: string) => void;
 }
 
 export function EditorSidebar({
@@ -24,6 +26,8 @@ export function EditorSidebar({
     languages = ['en'],
     currentLanguage = 'en',
     onLanguageChange,
+    globalUnsubscribeText = '',
+    onGlobalUnsubscribeUpdate,
 }: EditorSidebarProps) {
     return (
         <div className="p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full">
@@ -32,7 +36,7 @@ export function EditorSidebar({
                 <div className="flex items-center gap-3 mb-6">
                     <Mail size={14} className="text-neutral-500 dark:text-neutral-400" />
                     <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
-                        Newsletter Settings
+                        Campaign Settings
                     </label>
                 </div>
                 <div className="space-y-4">
@@ -69,6 +73,57 @@ export function EditorSidebar({
                 </div>
             </section>
 
+            {/* Global Branding Settings */}
+            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="flex items-center gap-3 mb-6">
+                    <Palette size={14} className="text-neutral-500 dark:text-neutral-400" />
+                    <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
+                        Global Branding
+                    </label>
+                </div>
+                <div className="space-y-4">
+                    <div className="bg-blue-50/50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/30 rounded-xl p-3 mb-4">
+                        <div className="flex gap-2 text-blue-600 dark:text-blue-400">
+                            <Info size={14} className="flex-shrink-0 mt-0.5" />
+                            <p className="text-[9px] leading-relaxed font-medium">
+                                Settings below apply to <span className="font-bold">ALL</span> newsletters sent in <span className="uppercase font-bold">{currentLanguage}</span>.
+                            </p>
+                        </div>
+                    </div>
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Default Unsubscribe Text
+                        </label>
+                        <input
+                            type="text"
+                            value={globalUnsubscribeText}
+                            onChange={(e) => onGlobalUnsubscribeUpdate?.(e.target.value)}
+                            placeholder="e.g. Unsubscribe from this list"
+                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text italic"
+                        />
+                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-2 leading-relaxed">
+                            This updates your primary configuration for this language.
+                        </p>
+                    </div>
+                    
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Local Campaign Override
+                        </label>
+                        <input
+                            type="text"
+                            value={metadata.unsubscribeText || ''}
+                            onChange={(e) => onMetadataUpdate({ unsubscribeText: e.target.value })}
+                            placeholder="Optional override for this email only"
+                            className="w-full px-3 py-2 text-xs bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                        />
+                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                            Only use this if you need a specific text for this single campaign.
+                        </p>
+                    </div>
+                </div>
+            </section>
+
             {/* Recipient Filter */}
             <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
                 <div className="flex items-center gap-3 mb-6">

package/src/views/CanvasEditor/hooks/useRegisteredBlocks.ts

@@ -1,54 +1,15 @@
 import { useState, useEffect } from 'react';
 import { blockRegistry } from '../../../registry/BlockRegistry';
+import { useEditor } from '../../../state/EditorContext';
 
 export function useRegisteredBlocks() {
-    const [registeredBlocks, setRegisteredBlocks] = useState(() => {
-        const initial = blockRegistry.getAll();
-        return initial;
-    });
+    const { registeredBlockTypes } = useEditor();
+    const [registeredBlocks, setRegisteredBlocks] = useState(() => blockRegistry.getAll());
 
-    // Watch for registry changes and update state
+    // Update local state whenever registeredBlockTypes changes in context
     useEffect(() => {
-        // Check immediately
-        const checkBlocks = () => {
-            const currentBlocks = blockRegistry.getAll();
-            const hasChanged = currentBlocks.length !== registeredBlocks.length ||
-                currentBlocks.some((b, i) => b.type !== registeredBlocks[i]?.type) ||
-                registeredBlocks.some((b, i) => b.type !== currentBlocks[i]?.type);
-
-            if (hasChanged) {
-                setRegisteredBlocks([...currentBlocks]);
-            }
-        };
-
-        // Initial check
-        checkBlocks();
-
-        // Poll for registry changes (blocks are registered asynchronously in useEffect)
-        let pollCount = 0;
-        const interval = setInterval(() => {
-            pollCount++;
-            checkBlocks();
-            // Stop polling after 5 seconds (25 checks at 200ms)
-            if (pollCount > 25) {
-                clearInterval(interval);
-            }
-        }, 200);
-
-        // Also check after delays to catch initial registrations
-        const timeouts = [
-            setTimeout(checkBlocks, 50),
-            setTimeout(checkBlocks, 100),
-            setTimeout(checkBlocks, 300),
-            setTimeout(checkBlocks, 500),
-            setTimeout(checkBlocks, 1000),
-        ];
-
-        return () => {
-            clearInterval(interval);
-            timeouts.forEach(clearTimeout);
-        };
-    }, [registeredBlocks.length]);
+        setRegisteredBlocks(blockRegistry.getAll());
+    }, [registeredBlockTypes]);
 
     return registeredBlocks;
 }