@jhits/plugin-newsletter 0.0.15 → 0.0.17

package/dist/views/CanvasEditor/components/EditorCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/EditorCanvas.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAiMhE,MAAM,WAAW,iBAAiB;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,KAAK,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACnE,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;CACrD;AAED,wBAAgB,YAAY,CAAC,EACzB,aAAa,EACb,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,YAAY,GACf,EAAE,iBAAiB,2CAuPnB"}
+{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/EditorCanvas.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAsNhE,MAAM,WAAW,iBAAiB;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,KAAK,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACnE,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;CACrD;AAED,wBAAgB,YAAY,CAAC,EACzB,aAAa,EACb,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,YAAY,GACf,EAAE,iBAAiB,2CAoQnB"}

package/dist/views/CanvasEditor/components/EditorCanvas.js

@@ -1,17 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect, useState, useMemo } from 'react';
 import { EditorBody } from '../EditorBody';
+import { useEditor } from '../../../state/EditorContext';
 import { generateNewsletterEmailHtml } from '../../../lib/email/EmailRenderer';
-// 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,
@@ -20,52 +30,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 {
@@ -73,15 +90,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;
@@ -194,11 +216,41 @@ const emailEditorStyles = `
 }
 `;
 export function EditorCanvas({ isPreviewMode, contentBlocks, title, siteId, locale, darkMode, backgroundColors, metadata, onTitleChange, onMetadataChange, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, slashCommand, }) {
+    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.__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(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;
@@ -212,12 +264,12 @@ export function EditorCanvas({ isPreviewMode, contentBlocks, title, siteId, loca
             titleRef.current.style.height = `${titleRef.current.scrollHeight}px`;
         }
     }, [title]);
-    return (_jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden pb-40 custom-scrollbar selection:bg-primary/20 dark:selection:bg-primary/30 min-h-0", style: {
+    return (_jsx("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 h-full max-h-full", style: {
             backgroundColor: backgroundColors
                 ? (darkMode && backgroundColors.dark
                     ? backgroundColors.dark
                     : backgroundColors.light)
-                : '#faf9f6',
+                : '#ffffff',
         }, children: isPreviewMode ? (_jsx("div", { className: "mx-auto transition-all duration-500 max-w-[800px] px-6 py-6 w-full", children: _jsx(EmailPreview, { title: title, blocks: contentBlocks, siteId: siteId, locale: locale, metadata: metadata }) })) : (_jsx("div", { className: "mx-auto transition-all duration-500 max-w-[800px] px-6 py-6 w-full", children: _jsx("div", { className: "bg-gradient-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-700 shadow-xl", children: _jsxs("div", { className: "bg-white dark:bg-neutral-800 rounded-lg shadow-2xl overflow-hidden", children: [_jsxs("div", { className: "bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "px-4 py-2 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded", title: "Close", children: _jsx("svg", { className: "w-4 h-4 text-neutral-600 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("button", { className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded", title: "Minimize", children: _jsx("svg", { className: "w-4 h-4 text-neutral-600 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) }) }), _jsx("button", { className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded", title: "Fullscreen", children: _jsx("svg", { className: "w-4 h-4 text-neutral-600 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) }) })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium", children: "Compose Email" }) })] }), _jsx("div", { className: "px-4 py-3 border-b border-neutral-100 dark:border-neutral-700", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0", children: "To:" }), _jsx("input", { type: "text", value: "All Subscribers", readOnly: true, className: "flex-1 text-sm bg-transparent border-none outline-none text-neutral-700 dark:text-neutral-300 placeholder:text-neutral-400" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium w-16 flex-shrink-0", children: "Subject:" }), _jsx("input", { type: "text", value: metadata?.subject || '', onChange: (e) => onMetadataChange?.({
                                                             subject: e.target.value,
                                                             previewText: metadata?.previewText,
@@ -225,33 +277,23 @@ export function EditorCanvas({ isPreviewMode, contentBlocks, title, siteId, loca
                                                             recipientFilter: metadata?.recipientFilter,
                                                         }), placeholder: "Enter email subject...", className: "flex-1 text-sm bg-transparent border-none outline-none text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 font-medium" })] })] }) })] }), _jsxs("div", { className: "bg-white dark:bg-neutral-800", style: {
                                 backgroundColor: '#ffffff',
-                            }, children: [(() => {
-                                    // Get email config from window global (set by initNewsletterPlugin)
-                                    let emailConfig = {};
-                                    if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
-                                        const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-                                        if (pluginProps?.emailConfig) {
-                                            emailConfig = pluginProps.emailConfig;
-                                        }
-                                    }
-                                    return emailConfig.logoUrl ? (_jsx("div", { style: {
-                                            padding: '40px 0 20px 0',
-                                            textAlign: 'center',
-                                            backgroundColor: '#ffffff',
-                                            display: 'flex',
-                                            justifyContent: 'center',
-                                            alignItems: 'center',
-                                        }, children: _jsx("img", { src: emailConfig.logoUrl, alt: emailConfig.logoAlt || 'Logo', style: {
-                                                width: '180px',
-                                                height: 'auto',
-                                                display: 'block',
-                                                margin: '0 auto',
-                                            } }) })) : null;
-                                })(), _jsxs("div", { className: "email-editor-content", style: {
+                            }, children: [emailConfig?.logoUrl ? (_jsx("div", { style: {
+                                        padding: '40px 0 20px 0',
+                                        textAlign: 'center',
+                                        backgroundColor: '#ffffff',
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                    }, children: _jsx("img", { src: emailConfig.logoUrl, alt: emailConfig.logoAlt || 'Logo', style: {
+                                            width: '180px',
+                                            height: 'auto',
+                                            display: 'block',
+                                            margin: '0 auto',
+                                        } }) })) : null, _jsxs("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',
@@ -265,9 +307,11 @@ export function EditorCanvas({ isPreviewMode, contentBlocks, title, siteId, loca
                                             };
                                             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.unsubscribeTranslations || {};
+                                            const hardcodedDefaults = { en: 'Unsubscribe', nl: 'Afmelden', sv: 'Avanmälan' };
+                                            const defaultText = globalTranslations[locale] || hardcodedDefaults[locale] || hardcodedDefaults.en;
+                                            const unsubscribeText = metadata?.unsubscribeText || defaultText;
                                             return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                                                             height: '1px',
                                                             width: '40px',
@@ -282,26 +326,16 @@ export function EditorCanvas({ isPreviewMode, contentBlocks, title, siteId, loca
                                                                 color: '#a1a1aa',
                                                                 textDecoration: 'none',
                                                             }, onClick: (e) => e.preventDefault(), children: unsubscribeText }) })] }));
-                                        })()] }), (() => {
-                                    // Get email config from window global
-                                    let emailConfig = {};
-                                    if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
-                                        const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-                                        if (pluginProps?.emailConfig) {
-                                            emailConfig = pluginProps.emailConfig;
-                                        }
-                                    }
-                                    return emailConfig.footerText ? (_jsx("div", { style: {
-                                            padding: '40px 50px',
-                                            textAlign: 'center',
-                                            fontFamily: 'sans-serif',
-                                            fontSize: '10px',
-                                            color: '#a1a1aa',
-                                            letterSpacing: '1px',
-                                            borderTop: '1px solid #faf9f6',
-                                            backgroundColor: '#ffffff',
-                                        }, children: emailConfig.footerText })) : null;
-                                })()] })] }) }) })) }));
+                                        })()] }), emailConfig?.footerText ? (_jsx("div", { style: {
+                                        padding: '40px 50px',
+                                        textAlign: 'center',
+                                        fontFamily: 'sans-serif',
+                                        fontSize: '10px',
+                                        color: '#a1a1aa',
+                                        letterSpacing: '1px',
+                                        borderTop: '1px solid #faf9f6',
+                                        backgroundColor: '#ffffff',
+                                    }, children: emailConfig.footerText })) : null] })] }) }) })) }));
 }
 /**
  * Email Preview Component
@@ -309,17 +343,35 @@ export function EditorCanvas({ isPreviewMode, contentBlocks, title, siteId, loca
  * Matches the editor view structure for consistency
  */
 function EmailPreview({ title, blocks, siteId, locale, metadata }) {
+    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.__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('');
     const iframeRef = useRef(null);
     useEffect(() => {
-        // Get email config from window global (set by initNewsletterPlugin)
-        let emailConfig = {};
-        if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = window.__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) => {
@@ -362,15 +414,21 @@ function EmailPreview({ title, blocks, siteId, locale, metadata }) {
             const slug = slugs[locale] || slugs.en;
             // 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.unsubscribeTranslations || {};
+            const hardcodedDefaults = { 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, { subject: metadata?.subject || '', previewText: metadata?.previewText || '' }, {
                 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);
             // Update iframe content
@@ -385,7 +443,7 @@ function EmailPreview({ title, blocks, siteId, locale, metadata }) {
             }
         };
         resolveImageBlocks();
-    }, [title, blocks, siteId, locale, metadata]);
+    }, [title, blocks, siteId, locale, metadata, emailConfig]);
     if (blocks.length === 0) {
         return (_jsx("div", { className: "bg-gradient-to-b from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-800 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-700 shadow-xl", children: _jsx("div", { className: "bg-white dark:bg-neutral-800 rounded-lg shadow-2xl overflow-hidden", children: _jsxs("div", { className: "text-center py-20 text-neutral-400 dark:text-neutral-500", children: [_jsx("p", { className: "text-sm", children: "No content blocks yet. Switch to Edit mode to add blocks." }), _jsx("p", { className: "text-xs mt-2 text-neutral-500 dark:text-neutral-600", children: "Email preview will appear here once you add blocks." })] }) }) }));
     }
@@ -393,5 +451,5 @@ function EmailPreview({ title, blocks, siteId, locale, metadata }) {
                                 minHeight: '500px',
                                 maxHeight: '900px',
                                 display: 'block',
-                            }, sandbox: "allow-same-origin" }) })] }) }) }));
+                            }, sandbox: "allow-same-origin allow-scripts" }) })] }) }) }));
 }

package/dist/views/CanvasEditor/components/EditorSidebar.d.ts

@@ -8,6 +8,8 @@ export interface EditorSidebarProps {
     languages?: string[];
     currentLanguage?: string;
     onLanguageChange?: (language: string) => void;
+    globalUnsubscribeText?: string;
+    onGlobalUnsubscribeUpdate?: (text: string) => void;
 }
-export declare function EditorSidebar({ metadata, status, onMetadataUpdate, defaultLanguage, isWelcomeEmail, languages, currentLanguage, onLanguageChange, }: EditorSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorSidebar({ metadata, status, onMetadataUpdate, defaultLanguage, isWelcomeEmail, languages, currentLanguage, onLanguageChange, globalUnsubscribeText, onGlobalUnsubscribeUpdate, }: EditorSidebarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditorSidebar.d.ts.map

package/dist/views/CanvasEditor/components/EditorSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorSidebar.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/EditorSidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,aAAa,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,eAAsB,EACtB,cAAsB,EACtB,SAAkB,EAClB,eAAsB,EACtB,gBAAgB,GACnB,EAAE,kBAAkB,2CAgHpB"}
+{"version":3,"file":"EditorSidebar.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/EditorSidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,yBAAyB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,aAAa,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,eAAsB,EACtB,cAAsB,EACtB,SAAkB,EAClB,eAAsB,EACtB,gBAAgB,EAChB,qBAA0B,EAC1B,yBAAyB,GAC5B,EAAE,kBAAkB,2CAmKpB"}

package/dist/views/CanvasEditor/components/EditorSidebar.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Mail, Users } from 'lucide-react';
-export function EditorSidebar({ metadata, status, onMetadataUpdate, defaultLanguage = 'en', isWelcomeEmail = false, languages = ['en'], currentLanguage = 'en', onLanguageChange, }) {
-    return (_jsxs("div", { className: "p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full", children: [_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(Mail, { size: 14, className: "text-neutral-500 dark:text-neutral-400" }), _jsx("label", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black", children: "Newsletter Settings" })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Email Subject" }), _jsx("input", { type: "text", value: metadata.subject || '', onChange: (e) => onMetadataUpdate({ subject: e.target.value }), placeholder: "Enter email subject", 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" }), _jsxs("p", { className: "text-[9px] text-neutral-400 dark:text-neutral-500 mt-1", children: [metadata.subject?.length || 0, " / 100 characters"] })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Preview Text" }), _jsx("textarea", { value: metadata.previewText || '', onChange: (e) => onMetadataUpdate({ previewText: e.target.value }), placeholder: "Preview text shown in email clients", rows: 3, 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 resize-none" }), _jsxs("p", { className: "text-[9px] text-neutral-400 dark:text-neutral-500 mt-1", children: [metadata.previewText?.length || 0, " / 150 characters"] })] })] })] }), _jsxs("section", { className: "pt-8 border-t border-neutral-200 dark:border-neutral-800", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(Users, { size: 14, className: "text-neutral-500 dark:text-neutral-400" }), _jsx("label", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black", children: "Recipients" })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Filter Type" }), _jsxs("select", { value: metadata.recipientFilter?.type || 'all', onChange: (e) => onMetadataUpdate({
+import { Mail, Users, Palette, Info } from 'lucide-react';
+export function EditorSidebar({ metadata, status, onMetadataUpdate, defaultLanguage = 'en', isWelcomeEmail = false, languages = ['en'], currentLanguage = 'en', onLanguageChange, globalUnsubscribeText = '', onGlobalUnsubscribeUpdate, }) {
+    return (_jsxs("div", { className: "p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full", children: [_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(Mail, { size: 14, className: "text-neutral-500 dark:text-neutral-400" }), _jsx("label", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black", children: "Campaign Settings" })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Email Subject" }), _jsx("input", { type: "text", value: metadata.subject || '', onChange: (e) => onMetadataUpdate({ subject: e.target.value }), placeholder: "Enter email subject", 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" }), _jsxs("p", { className: "text-[9px] text-neutral-400 dark:text-neutral-500 mt-1", children: [metadata.subject?.length || 0, " / 100 characters"] })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Preview Text" }), _jsx("textarea", { value: metadata.previewText || '', onChange: (e) => onMetadataUpdate({ previewText: e.target.value }), placeholder: "Preview text shown in email clients", rows: 3, 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 resize-none" }), _jsxs("p", { className: "text-[9px] text-neutral-400 dark:text-neutral-500 mt-1", children: [metadata.previewText?.length || 0, " / 150 characters"] })] })] })] }), _jsxs("section", { className: "pt-8 border-t border-neutral-200 dark:border-neutral-800", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(Palette, { size: 14, className: "text-neutral-500 dark:text-neutral-400" }), _jsx("label", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black", children: "Global Branding" })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("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", children: _jsxs("div", { className: "flex gap-2 text-blue-600 dark:text-blue-400", children: [_jsx(Info, { size: 14, className: "flex-shrink-0 mt-0.5" }), _jsxs("p", { className: "text-[9px] leading-relaxed font-medium", children: ["Settings below apply to ", _jsx("span", { className: "font-bold", children: "ALL" }), " newsletters sent in ", _jsx("span", { className: "uppercase font-bold", children: currentLanguage }), "."] })] }) }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Default Unsubscribe Text" }), _jsx("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" }), _jsx("p", { className: "text-[9px] text-neutral-400 dark:text-neutral-500 mt-2 leading-relaxed", children: "This updates your primary configuration for this language." })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Local Campaign Override" }), _jsx("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" }), _jsx("p", { className: "text-[9px] text-neutral-400 dark:text-neutral-500 mt-1", children: "Only use this if you need a specific text for this single campaign." })] })] })] }), _jsxs("section", { className: "pt-8 border-t border-neutral-200 dark:border-neutral-800", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(Users, { size: 14, className: "text-neutral-500 dark:text-neutral-400" }), _jsx("label", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black", children: "Recipients" })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Filter Type" }), _jsxs("select", { value: metadata.recipientFilter?.type || 'all', onChange: (e) => onMetadataUpdate({
                                             recipientFilter: {
                                                 type: e.target.value,
                                                 value: metadata.recipientFilter?.value,

package/dist/views/CanvasEditor/hooks/useRegisteredBlocks.d.ts

@@ -1,2 +1,2 @@
-export declare function useRegisteredBlocks(): import("../../..").BlockTypeDefinition[];
+export declare function useRegisteredBlocks(): import("../../../types/block").BlockTypeDefinition[];
 //# sourceMappingURL=useRegisteredBlocks.d.ts.map

package/dist/views/CanvasEditor/hooks/useRegisteredBlocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRegisteredBlocks.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/useRegisteredBlocks.ts"],"names":[],"mappings":"AAGA,wBAAgB,mBAAmB,6CAkDlC"}
+{"version":3,"file":"useRegisteredBlocks.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/useRegisteredBlocks.ts"],"names":[],"mappings":"AAIA,wBAAgB,mBAAmB,yDAUlC"}

package/dist/views/CanvasEditor/hooks/useRegisteredBlocks.js

@@ -1,46 +1,12 @@
 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;
-    });
-    // Watch for registry changes and update state
+    const { registeredBlockTypes } = useEditor();
+    const [registeredBlocks, setRegisteredBlocks] = useState(() => blockRegistry.getAll());
+    // 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;
 }

package/dist/views/NewsletterManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewsletterManager.d.ts","sourceRoot":"","sources":["../../src/views/NewsletterManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAWH,MAAM,WAAW,0BAA0B;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAiBD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,0BAA0B,2CAydnF"}
+{"version":3,"file":"NewsletterManager.d.ts","sourceRoot":"","sources":["../../src/views/NewsletterManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAaH,MAAM,WAAW,0BAA0B;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAiBD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,0BAA0B,2CAqnBnF"}