@jhits/plugin-newsletter 0.0.4 → 0.0.5

package/src/index.tsx

@@ -1,33 +1,313 @@
 /**
  * Plugin Newsletter - Client Entry Point
  * Main newsletter management interface for the dashboard
+ * Block-Based Newsletter Management System
+ * Multi-Tenant Architecture: Accepts custom blocks from client applications
  */
 
 'use client';
 
-import React from 'react';
+import React, { useMemo, useEffect } from 'react';
+import { EditorProvider } from './state/EditorContext';
+import { ClientBlockDefinition } from './types/block';
 import { SubscribersView } from './views/SubscribersView';
 import { SettingsView } from './views/SettingsView';
+import { NewsletterManagerView } from './views/NewsletterManager';
+import { NewsletterEditorView } from './views/NewsletterEditor';
+import { editorStateToAPI } from './lib/mappers/apiMapper';
 
+/**
+ * Plugin Props Interface
+ * Matches the PluginProps from @jhits/jhits-dashboard
+ */
 export interface PluginProps {
     subPath: string[];
     siteId: string;
     locale: string;
+    /** Custom blocks from client application (optional, can also come from window.__JHITS_PLUGIN_PROPS__) */
+    customBlocks?: ClientBlockDefinition[];
+    /** Enable dark mode for content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        /** Background color for light mode (REQUIRED) */
+        light: string;
+        /** Background color for dark mode (optional) */
+        dark?: string;
+    };
 }
 
-export default function NewsletterPlugin({ subPath, siteId, locale }: PluginProps) {
-    const route = subPath[0] || 'subscribers';
+/**
+ * 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 route = subPath[0] || 'newsletters';
+    
+    // Listen for config updates from settings screen
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+        
+        const handleConfigUpdate = () => {
+            // Reload page to apply changes (simplest way to ensure all components pick up new values)
+            window.location.reload();
+        };
+        
+        window.addEventListener('newsletter-plugin-config-updated', handleConfigUpdate as EventListener);
+        return () => {
+            window.removeEventListener('newsletter-plugin-config-updated', handleConfigUpdate as EventListener);
+        };
+    }, []);
 
+    // Route to appropriate view
     switch (route) {
+        case 'newsletters':
+            return <NewsletterManagerView siteId={siteId} locale={locale} />;
+        
+        case 'editor':
+            const newsletterSlug = subPath[1];
+            return (
+                <EditorProvider 
+                    customBlocks={customBlocks} 
+                    darkMode={darkMode} 
+                    backgroundColors={backgroundColors}
+                    onSave={async (state) => {
+                        // Save to API - create new or update existing newsletter
+                        const originalSlug = newsletterSlug || state.slug;
+                        const apiData = editorStateToAPI(state);
+                        
+                        // If we have a slug, try to update first
+                        if (originalSlug) {
+                            console.log('[NewsletterPlugin] Attempting to update newsletter with slug:', originalSlug);
+                            const updateResponse = await fetch(`/api/plugin-newsletter/newsletters/${originalSlug}`, {
+                                method: 'PUT',
+                                headers: { 'Content-Type': 'application/json' },
+                                credentials: 'include',
+                                body: JSON.stringify(apiData),
+                            });
+                            
+                            if (updateResponse.ok) {
+                                const result = await updateResponse.json();
+                                // If the slug changed, update the URL
+                                if (result.slug && result.slug !== originalSlug) {
+                                    window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.slug}`);
+                                }
+                                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 slug or update returned 404)
+                        console.log('[NewsletterPlugin] Creating new newsletter');
+                        const createResponse = await fetch('/api/plugin-newsletter/newsletters/new', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            credentials: 'include',
+                            body: JSON.stringify(apiData),
+                        });
+                        
+                        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 slug
+                        if (result.slug) {
+                            window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.slug}`);
+                        }
+                        return result;
+                    }}
+                >
+                    <NewsletterEditorView newsletterSlug={newsletterSlug} siteId={siteId} locale={locale} darkMode={darkMode} backgroundColors={backgroundColors} />
+                </EditorProvider>
+            );
+        
+        case 'new':
+            return (
+                <EditorProvider 
+                    customBlocks={customBlocks} 
+                    darkMode={darkMode} 
+                    backgroundColors={backgroundColors}
+                    onSave={async (state) => {
+                        // Save to API - create new newsletter
+                        const apiData = editorStateToAPI(state);
+                        const response = await fetch('/api/plugin-newsletter/newsletters/new', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            credentials: 'include',
+                            body: JSON.stringify(apiData),
+                        });
+                        if (!response.ok) {
+                            const error = await response.json();
+                            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}`);
+                        }
+                        return result;
+                    }}
+                >
+                    <NewsletterEditorView siteId={siteId} locale={locale} darkMode={darkMode} backgroundColors={backgroundColors} />
+                </EditorProvider>
+            );
+        
         case 'subscribers':
             return <SubscribersView siteId={siteId} locale={locale} />;
+        
         case 'settings':
             return <SettingsView siteId={siteId} locale={locale} />;
+        
         default:
-            return <SubscribersView siteId={siteId} locale={locale} />;
+            return <NewsletterManagerView siteId={siteId} locale={locale} />;
     }
 }
 
 // Export for use as default
 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 { 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';

package/src/index.tsx.patch

@@ -0,0 +1,98 @@
+--- a/packages/plugin-newsletter/src/index.tsx
++++ b/packages/plugin-newsletter/src/index.tsx
+@@ -165,7 +165,50 @@ export default function NewsletterPlugin(props: PluginProps) {
+                     onSave={async (state) => {
+-                        // Save to API - update existing newsletter
++                        // Save to API - create new or update existing newsletter
+                         const originalSlug = newsletterSlug || state.slug;
+-                        if (!originalSlug) {
+-                            throw new Error('Cannot save: no newsletter identifier available. Please reload the page.');
+-                        }
+-                        console.log('[NewsletterPlugin] Saving newsletter with slug:', originalSlug);
+                         const apiData = editorStateToAPI(state);
+-                        const response = await fetch(`/api/plugin-newsletter/newsletters/${originalSlug}`, {
+-                            method: 'PUT',
+-                            headers: { 'Content-Type': 'application/json' },
+-                            credentials: 'include',
+-                            body: JSON.stringify(apiData),
+-                        });
+-                        if (!response.ok) {
+-                            const error = await response.json();
+-                            console.error('[NewsletterPlugin] Save failed:', {
+-                                status: response.status,
+-                                statusText: response.statusText,
+-                                error,
+-                            });
+-                            const errorMessage = error.message || error.error || 'Failed to save newsletter';
+-                            throw new Error(errorMessage);
+-                        }
+-                        const result = await response.json();
+-                        // If the slug changed, update the URL
+-                        if (result.slug && result.slug !== originalSlug) {
+-                            window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.slug}`);
+-                        }
+-                        return result;
++                        
++                        // If we have a slug, try to update first
++                        if (originalSlug) {
++                            console.log('[NewsletterPlugin] Attempting to update newsletter with slug:', originalSlug);
++                            const updateResponse = await fetch(`/api/plugin-newsletter/newsletters/${originalSlug}`, {
++                                method: 'PUT',
++                                headers: { 'Content-Type': 'application/json' },
++                                credentials: 'include',
++                                body: JSON.stringify(apiData),
++                            });
++                            
++                            if (updateResponse.ok) {
++                                const result = await updateResponse.json();
++                                // If the slug changed, update the URL
++                                if (result.slug && result.slug !== originalSlug) {
++                                    window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.slug}`);
++                                }
++                                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 slug or update returned 404)
++                        console.log('[NewsletterPlugin] Creating new newsletter');
++                        const createResponse = await fetch('/api/plugin-newsletter/newsletters/new', {
++                            method: 'POST',
++                            headers: { 'Content-Type': 'application/json' },
++                            credentials: 'include',
++                            body: JSON.stringify(apiData),
++                        });
++                        
++                        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 slug
++                        if (result.slug) {
++                            window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.slug}`);
++                        }
++                        return result;
+                     }}
+                 >

package/src/init.tsx

@@ -0,0 +1,72 @@
+/**
+ * Newsletter Plugin Initialization Utility
+ * 
+ * Simple function to initialize the newsletter plugin with client configuration.
+ * Call this once in your app (e.g., in a script tag or root layout) to configure
+ * the newsletter plugin without needing a React component.
+ * 
+ * @example
+ * ```typescript
+ * import { initNewsletterPlugin } from '@jhits/plugin-newsletter/init';
+ * import { newsletterConfig } from '@/plugins/newsletter-config';
+ * 
+ * // Call once when your app loads
+ * initNewsletterPlugin(newsletterConfig);
+ * ```
+ */
+
+'use client';
+
+import React from 'react';
+import type { ClientBlockDefinition } from './types/block';
+
+export interface NewsletterPluginConfig {
+    /** Custom blocks available in the editor */
+    customBlocks?: ClientBlockDefinition[];
+    /** Dark mode setting for the editor content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        /** Background color for light mode (REQUIRED) - CSS color value (hex, rgb, or named color) */
+        light: string;
+        /** Background color for dark mode (optional) - CSS color value (hex, rgb, or named color) */
+        dark?: string;
+    };
+    /** Email configuration */
+    emailConfig?: {
+        /** Logo URL to display in email header (absolute URL) */
+        logoUrl?: string;
+        /** Logo alt text */
+        logoAlt?: string;
+        /** Footer text for emails */
+        footerText?: string;
+    };
+}
+
+/**
+ * Initialize the newsletter plugin with client configuration
+ * 
+ * This function sets up the window global that the plugin reads from automatically.
+ * Call this once when your app loads, before the plugin is rendered.
+ * 
+ * @param config - Newsletter plugin configuration (customBlocks, darkMode, etc.)
+ */
+export function initNewsletterPlugin(config: NewsletterPluginConfig): void {
+    if (typeof window === 'undefined') {
+        // Server-side: no-op
+        return;
+    }
+
+    // Initialize the global plugin props object if it doesn't exist
+    if (!(window as any).__JHITS_PLUGIN_PROPS__) {
+        (window as any).__JHITS_PLUGIN_PROPS__ = {};
+    }
+
+    // Set newsletter plugin configuration
+    (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'] = {
+        customBlocks: config.customBlocks || [],
+        darkMode: config.darkMode !== undefined ? config.darkMode : true, // Default to true
+        backgroundColors: config.backgroundColors || undefined,
+        emailConfig: config.emailConfig || undefined,
+    };
+}

package/src/lib/blocks/BlockRenderer.tsx

@@ -0,0 +1,125 @@
+/**
+ * Block Renderer
+ * Library component for rendering blocks (decoupled from editor)
+ * This is the "headless" rendering layer
+ * 
+ * Multi-Tenant: Uses Preview components from client-provided blocks
+ */
+
+'use client';
+
+import React from 'react';
+import { Block, BlockPreviewProps } from '../../types/block';
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { getChildBlocks } from '../utils/blockHelpers';
+
+/**
+ * Block Renderer Props
+ */
+export interface BlockRendererProps {
+    /** Block to render */
+    block: Block;
+    
+    /** Custom renderers for specific block types (optional override) */
+    customRenderers?: Map<string, React.ComponentType<BlockPreviewProps>>;
+    
+    /** Additional context for rendering */
+    context?: {
+        siteId?: string;
+        locale?: string;
+        [key: string]: unknown;
+    };
+}
+
+/**
+ * Block Renderer Component
+ * Renders a single block using its Preview component from the registry
+ */
+export function BlockRenderer({ 
+    block, 
+    customRenderers,
+    context = {}
+}: BlockRendererProps) {
+    // Check for custom renderer override first
+    if (customRenderers?.has(block.type)) {
+        const CustomRenderer = customRenderers.get(block.type)!;
+        return <CustomRenderer block={block} context={context} />;
+    }
+
+    // Get block definition from registry
+    const definition = blockRegistry.get(block.type);
+    if (!definition) {
+        console.warn(`Block type "${block.type}" not found in registry. Available types:`, 
+            blockRegistry.getAll().map(b => b.type).join(', '));
+        return (
+            <div className="p-4 border border-red-300 bg-red-50 rounded">
+                <p className="text-red-600">Unknown block type: {block.type}</p>
+                <p className="text-xs text-red-500 mt-1">
+                    Make sure this block type is registered via customBlocks prop
+                </p>
+            </div>
+        );
+    }
+
+    // Use the Preview component from the block definition
+    const PreviewComponent = definition.components.Preview;
+    
+    // Check if this is a container block with children
+    const isContainer = definition.isContainer === true;
+    const childBlocks = isContainer && block.children && Array.isArray(block.children) && block.children.length > 0
+        ? (typeof block.children[0] === 'object' 
+            ? block.children as Block[]
+            : [])
+        : [];
+    
+    // If container block, pass child blocks and render function
+    if (isContainer) {
+        return (
+            <PreviewComponent 
+                block={block} 
+                context={context}
+                childBlocks={childBlocks}
+                renderChild={(childBlock: Block) => (
+                    <BlockRenderer
+                        block={childBlock}
+                        customRenderers={customRenderers}
+                        context={context}
+                    />
+                )}
+            />
+        );
+    }
+    
+    return <PreviewComponent block={block} context={context} />;
+}
+
+/**
+ * Blocks Renderer Component
+ * Renders multiple blocks in sequence
+ */
+export function BlocksRenderer({ 
+    blocks, 
+    customRenderers,
+    context = {}
+}: { 
+    blocks: Block[];
+    customRenderers?: Map<string, React.ComponentType<BlockPreviewProps>>;
+    context?: {
+        siteId?: string;
+        locale?: string;
+        [key: string]: unknown;
+    };
+}) {
+    return (
+        <>
+            {blocks.map((block) => (
+                <BlockRenderer
+                    key={block.id}
+                    block={block}
+                    customRenderers={customRenderers}
+                    context={context}
+                />
+            ))}
+        </>
+    );
+}