@jhits/plugin-newsletter 0.0.15 → 0.0.17

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -29,7 +29,7 @@ export interface CanvasEditorViewProps {
 }
 
 export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: propsBackgroundColors, siteId, locale, isWelcomeEmail }: CanvasEditorViewProps) {
-    const { state, helpers, dispatch, darkMode: contextDarkMode, backgroundColors: contextBackgroundColors, canUndo, canRedo } = useEditor();
+    const { state, helpers, dispatch, darkMode: contextDarkMode, backgroundColors: contextBackgroundColors, emailConfig: contextEmailConfig, canUndo, canRedo } = useEditor();
     const effectiveDarkMode = darkMode !== undefined ? darkMode : contextDarkMode;
     const effectiveBackgroundColors = propsBackgroundColors || contextBackgroundColors;
     const [isSidebarOpen, setSidebarOpen] = useState(true);
@@ -42,6 +42,13 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
     const [isLoadingLanguage, setIsLoadingLanguage] = useState(true);
     const [availableLanguages, setAvailableLanguages] = useState<string[]>([locale || 'en']);
     const [currentLanguage, setCurrentLanguage] = useState<string>(locale || 'en');
+    
+    // Global branding settings from SMTP
+    const [globalUnsubscribeTranslations, setGlobalUnsubscribeTranslations] = useState<Record<string, string>>({
+        en: '',
+        nl: '',
+        sv: '',
+    });
 
     // Get registered blocks
     const registeredBlocks = useRegisteredBlocks();
@@ -97,6 +104,25 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
                 setPrimaryLanguage(primary);
                 setAvailableLanguages(available);
                 setCurrentLanguage(primary);
+
+                // Load global unsubscribe translations
+                if (smtpData.unsubscribeTranslations) {
+                    setGlobalUnsubscribeTranslations(smtpData.unsubscribeTranslations);
+                }
+
+                // Update emailConfig with logo from SMTP settings if available
+                if (smtpData.logoUrl) {
+                    if (typeof window !== 'undefined') {
+                        if (!(window as any).__JHITS_PLUGIN_PROPS__) (window as any).__JHITS_PLUGIN_PROPS__ = {};
+                        if (!(window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter']) (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'] = {};
+                        
+                        const currentConfig = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'].emailConfig || {};
+                        (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'].emailConfig = {
+                            ...currentConfig,
+                            logoUrl: smtpData.logoUrl
+                        };
+                    }
+                }
             } catch (error) {
                 console.error('Failed to fetch language settings:', error);
             } finally {
@@ -106,6 +132,41 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
         fetchLanguageSettings();
     }, []);
 
+    // Handle global unsubscribe text update
+    const handleGlobalUnsubscribeUpdate = async (text: string) => {
+        const newTranslations = {
+            ...globalUnsubscribeTranslations,
+            [currentLanguage]: text
+        };
+        
+        // Optimistic update
+        setGlobalUnsubscribeTranslations(newTranslations);
+        
+        // Update window props for immediate preview reflection
+        if (typeof window !== 'undefined') {
+            if (!(window as any).__JHITS_PLUGIN_PROPS__) (window as any).__JHITS_PLUGIN_PROPS__ = {};
+            if (!(window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter']) (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'] = {};
+            (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'].unsubscribeTranslations = newTranslations;
+        }
+
+        try {
+            // We need current SMTP settings to save along with the new translation
+            const smtpResponse = await fetch('/api/plugin-newsletter/smtp');
+            const smtpData = await smtpResponse.json();
+            
+            await fetch('/api/plugin-newsletter/smtp', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    ...smtpData,
+                    unsubscribeTranslations: newTranslations
+                }),
+            });
+        } catch (error) {
+            console.error('Failed to save global unsubscribe translation:', error);
+        }
+    };
+
     // Handle language change for welcome email
     const handleLanguageChange = async (newLanguage: string) => {
         // Save current content first if dirty
@@ -210,17 +271,14 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
             }
             
             // Replace the block in place by updating the blocks array directly
-            // This preserves the position and ID
             const newBlocks = state.blocks.map((block, idx) => {
                 if (idx === blockIndex) {
-                    // Replace this block with the new type
                     return {
                         ...block,
                         type: blockType,
                         data: { ...blockDefinition.defaultData },
                     };
                 }
-                // Keep all other blocks unchanged
                 return block;
             });
             dispatch({ type: 'SET_BLOCKS', payload: newBlocks });
@@ -232,12 +290,29 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
     // Slash command hook
     const slashCommand = useSlashCommand(registeredBlocks, handleSlashCommandSelect);
 
+    // Lock dashboard scroll when editor is active to ensure our internal scrolling works
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+        
+        const dashboardContainer = document.querySelector('.custom-scrollbar.overflow-y-auto');
+        const originalOverflow = dashboardContainer ? (dashboardContainer as HTMLElement).style.overflow : '';
+        
+        if (dashboardContainer) {
+            (dashboardContainer as HTMLElement).style.overflow = 'hidden';
+        }
+        
+        return () => {
+            if (dashboardContainer) {
+                (dashboardContainer as HTMLElement).style.overflow = originalOverflow;
+            }
+        };
+    }, []);
+
     // Handle save
     const handleSave = async () => {
         setIsSaving(true);
         setSaveError(null);
         try {
-            // Always pass language for saving (both welcome email and regular newsletters)
             await helpers.save({ language: currentLanguage });
             setIsSaving(false);
         } catch (error: any) {
@@ -264,7 +339,7 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
     }
 
     return (
-        <div className="h-full rounded-[2.5rem] w-full bg-dashboard-card text-dashboard-text flex flex-col font-sans transition-colors duration-300 overflow-hidden relative">
+        <div className="absolute inset-0 flex flex-col font-sans transition-colors duration-300 overflow-hidden bg-white dark:bg-neutral-950">
             {isLoadingLanguage ? (
                 <div className="h-full w-full flex items-center justify-center">
                     <div className="text-center">
@@ -273,58 +348,58 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
                     </div>
                 </div>
             ) : (
-            <main className="flex flex-1 flex-col relative min-h-0">
+            <main className="flex flex-1 flex-col relative min-h-0 overflow-hidden">
                 {/* Error Banner */}
                 <ErrorBanner error={saveError} onDismiss={() => setSaveError(null)} />
 
-                <EditorHeader
-                    isPreviewMode={isPreviewMode}
-                    onPreviewToggle={() => setIsPreviewMode(!isPreviewMode)}
-                    isSidebarOpen={isSidebarOpen}
-                    onSidebarToggle={() => setSidebarOpen(!isSidebarOpen)}
-                    isSaving={isSaving}
-                    onSave={handleSave}
-                    onSaveError={(error) => {
-                        if (error) {
-                            setSaveError(error);
-                        } else {
-                            setSaveError(null);
-                        }
-                    }}
-                    isDirty={state.isDirty}
-                    isWelcomeEmail={isWelcomeEmail}
-                    languages={availableLanguages}
-                    currentLanguage={currentLanguage}
-                    onLanguageChange={handleLanguageChange}
-                    onAddLanguage={handleAddLanguage}
-                />
-
-                {/* Editor Content Wrapper */}
-                <div className="flex flex-1 relative overflow-hidden min-h-0 flex-nowrap">
-                    {/* CENTER: THE WRITING CANVAS */}
-                    <EditorCanvas
+                {/* Sticky Header */}
+                <div className="flex-none z-30 border-b border-dashboard-border">
+                    <EditorHeader
                         isPreviewMode={isPreviewMode}
-                        contentBlocks={state.blocks}
-                        title={state.title}
-                        siteId={siteId}
-                        locale={locale}
-                        darkMode={effectiveDarkMode}
-                        backgroundColors={effectiveBackgroundColors}
-                        metadata={state.metadata}
-                        onTitleChange={(title: string) => dispatch({ type: 'SET_TITLE', payload: title })}
-                        onMetadataChange={(metadata) => dispatch({ type: 'SET_METADATA', payload: metadata })}
-                        onBlockAdd={(type: string, index: number, containerId?: string) => helpers.addBlock(type, index, containerId)}
-                        onBlockUpdate={(id: string, data: Partial<Block['data']>) => helpers.updateBlock(id, data)}
-                        onBlockDelete={(id: string) => helpers.deleteBlock(id)}
-                        onBlockMove={(id: string, newIndex: number, containerId?: string) => helpers.moveBlock(id, newIndex, containerId)}
-                        slashCommand={slashCommand}
+                        onPreviewToggle={() => setIsPreviewMode(!isPreviewMode)}
+                        isSidebarOpen={isSidebarOpen}
+                        onSidebarToggle={() => setSidebarOpen(!isSidebarOpen)}
+                        isSaving={isSaving}
+                        onSave={handleSave}
+                        onSaveError={(error) => setSaveError(error || null)}
+                        isDirty={state.isDirty}
+                        isWelcomeEmail={isWelcomeEmail}
+                        languages={availableLanguages}
+                        currentLanguage={currentLanguage}
+                        onLanguageChange={handleLanguageChange}
+                        onAddLanguage={handleAddLanguage}
                     />
+                </div>
+
+                {/* Editor Content Wrapper - Independently Scrollable Area */}
+                <div className="flex-1 flex relative overflow-hidden min-h-0 flex-nowrap">
+                    {/* CENTER: THE WRITING CANVAS */}
+                    <div className="flex-1 overflow-hidden h-full">
+                        <EditorCanvas
+                            isPreviewMode={isPreviewMode}
+                            contentBlocks={state.blocks}
+                            title={state.title}
+                            siteId={siteId}
+                            locale={currentLanguage}
+                            darkMode={effectiveDarkMode}
+                            backgroundColors={effectiveBackgroundColors}
+                            metadata={state.metadata}
+                            onTitleChange={(title: string) => dispatch({ type: 'SET_TITLE', payload: title })}
+                            onMetadataChange={(metadata) => dispatch({ type: 'SET_METADATA', payload: metadata })}
+                            onBlockAdd={(type: string, index: number, containerId?: string) => helpers.addBlock(type, index, containerId)}
+                            onBlockUpdate={(id: string, data: Partial<Block['data']>) => helpers.updateBlock(id, data)}
+                            onBlockDelete={(id: string) => helpers.deleteBlock(id)}
+                            onBlockMove={(id: string, newIndex: number, containerId?: string) => helpers.moveBlock(id, newIndex, containerId)}
+                            slashCommand={slashCommand}
+                        />
+                    </div>
 
                     {/* RIGHT SIDEBAR: THE "DESK" (SETTINGS) */}
                     {!isPreviewMode && (
                         <aside
-                            className={`transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] border-l border-dashboard-border bg-dashboard-sidebar overflow-y-auto overflow-x-hidden h-full ${isSidebarOpen ? 'w-80' : 'w-0 opacity-0 pointer-events-none'
-                                }`}
+                            className={`flex-none transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] border-l border-dashboard-border bg-dashboard-sidebar overflow-y-auto custom-scrollbar h-full ${
+                                isSidebarOpen ? 'w-80' : 'w-0 opacity-0 pointer-events-none border-l-0'
+                            }`}
                         >
                             <EditorSidebar
                                 metadata={state.metadata}
@@ -335,6 +410,8 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
                                 languages={availableLanguages}
                                 currentLanguage={currentLanguage}
                                 onLanguageChange={handleLanguageChange}
+                                globalUnsubscribeText={globalUnsubscribeTranslations[currentLanguage]}
+                                onGlobalUnsubscribeUpdate={handleGlobalUnsubscribeUpdate}
                             />
                         </aside>
                     )}
@@ -342,19 +419,23 @@ export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: pro
 
                 {/* Slash Command Menu */}
                 {slashCommand.isOpen && slashCommand.position && (
-                    <SlashCommandMenu
-                        blocks={slashCommand.filteredBlocks}
-                        query={slashCommand.query}
-                        selectedIndex={slashCommand.selectedIndex}
-                        onSelect={(replaceBlockId) => {
-                            // Use the replaceBlockId passed from the menu (which comes from state)
-                            // This ensures we use the correct block ID that was set when the menu opened
-                            slashCommand.selectCurrent(replaceBlockId);
+                    <div 
+                        className="fixed z-50 transition-all duration-200"
+                        style={{ 
+                            left: slashCommand.position.left, 
+                            top: slashCommand.position.top 
                         }}
-                        position={slashCommand.position}
-                        onClose={slashCommand.closeMenu}
-                        replaceBlockId={slashCommand.replaceBlockId}
-                    />
+                    >
+                        <SlashCommandMenu
+                            blocks={slashCommand.filteredBlocks}
+                            query={slashCommand.query}
+                            selectedIndex={slashCommand.selectedIndex}
+                            onSelect={(replaceBlockId) => slashCommand.selectCurrent(replaceBlockId)}
+                            position={slashCommand.position}
+                            onClose={slashCommand.closeMenu}
+                            replaceBlockId={slashCommand.replaceBlockId}
+                        />
+                    </div>
                 )}
             </main>
             )}

package/src/views/CanvasEditor/EditorBody.tsx

@@ -53,14 +53,18 @@ export function EditorBody({
             {blocks.map((block, index) => (
                 <React.Fragment key={block.id}>
                     {/* Add Block Button Above */}
-                    <div className="relative h-2 group/add-button">
-                        <button
-                            onClick={() => onBlockAdd('paragraph', index)}
-                            className="absolute left-0 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center opacity-0 group-hover/add-button:opacity-100 transition-opacity hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded"
-                            title="Add block"
-                        >
-                            <Plus size={14} className="text-neutral-400 dark:text-neutral-500" />
-                        </button>
+                    <div className="relative h-4 group/add-button">
+                        <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 flex items-center justify-center">
+                            <div className="w-full h-[1px] bg-neutral-100 dark:bg-neutral-800 opacity-0 group-hover/add-button:opacity-100 transition-opacity" />
+                            <button
+                                onClick={() => onBlockAdd('paragraph', index)}
+                                className="mx-4 flex-shrink-0 w-6 h-6 flex items-center justify-center opacity-0 group-hover/add-button:opacity-100 transition-all hover:bg-primary hover:text-white bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 shadow-sm rounded-full z-10"
+                                title="Add block here"
+                            >
+                                <Plus size={14} />
+                            </button>
+                            <div className="w-full h-[1px] bg-neutral-100 dark:bg-neutral-800 opacity-0 group-hover/add-button:opacity-100 transition-opacity" />
+                        </div>
                     </div>
                     
                     {/* Block */}
@@ -80,14 +84,14 @@ export function EditorBody({
                 </React.Fragment>
             ))}
             
-            {/* Add Block Button at Bottom */}
-            <div className="relative h-8 group/add-button-bottom mt-2">
+            {/* Add Block Button at Bottom - Subtle Plus on the left */}
+            <div className="relative h-12 mt-4 group/add-bottom">
                 <button
                     onClick={() => onBlockAdd('paragraph', blocks.length)}
-                    className="absolute left-0 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center opacity-0 group-hover/add-button-bottom:opacity-100 transition-opacity hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded"
-                    title="Add block"
+                    className="absolute left-0 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center opacity-20 group-hover/add-bottom:opacity-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full transition-all text-neutral-500"
+                    title="Add block at the end"
                 >
-                    <Plus size={14} className="text-neutral-400 dark:text-neutral-500" />
+                    <Plus size={18} />
                 </button>
             </div>
         </div>