@jhits/plugin-newsletter 0.0.15 → 0.0.17

package/src/registry/BlockRegistry.tsx

@@ -0,0 +1,255 @@
+/**
+ * Block Registry for Newsletter Plugin
+ * Dynamic registry for all block types in system
+ * Multi-Tenant Architecture: Blocks are provided by client applications
+ * 
+ * The registry is a singleton that starts empty and is populated by client apps
+ */
+
+import React from 'react';
+import {
+    BlockTypeDefinition,
+    ClientBlockDefinition,
+    BlockEditProps,
+    BlockPreviewProps
+} from '../types/block';
+import { 
+    Type, 
+    Heading as HeadingIcon, 
+    List, 
+    Image as ImageIcon, 
+    Table as TableIcon, 
+    Minus 
+} from 'lucide-react';
+
+// --- Default Block Components ---
+
+// Paragraph
+const DefaultParagraphEdit: React.FC<BlockEditProps> = ({ block, onUpdate }) => (
+    <textarea
+        value={(block.data.text as string) || ''}
+        onChange={(e) => onUpdate({ text: e.target.value })}
+        onInput={(e) => {
+            const target = e.target as HTMLTextAreaElement;
+            target.style.height = 'auto';
+            target.style.height = `${target.scrollHeight}px`;
+        }}
+        placeholder="Type your text..."
+        className="w-full bg-transparent border-none outline-none focus:ring-0 p-0 resize-none min-h-[1.5em] font-serif text-[18px] leading-[1.625] text-[#1a2e26] overflow-hidden"
+    />
+);
+const DefaultParagraphPreview: React.FC<BlockPreviewProps> = ({ block }) => (
+    <p 
+        className="font-serif text-[18px] leading-[1.625] text-[#1a2e26]"
+        dangerouslySetInnerHTML={{ __html: (block.data.html as string) || (block.data.text as string) || '' }}
+    />
+);
+
+// Heading
+const DefaultHeadingEdit: React.FC<BlockEditProps> = ({ block, onUpdate }) => {
+    const level = (block.data.level as number) || 2;
+    const fontSize = level === 1 ? '48px' : level === 2 ? '36px' : level === 3 ? '30px' : '20px';
+    return (
+        <input
+            type="text"
+            value={(block.data.text as string) || ''}
+            onChange={(e) => onUpdate({ text: e.target.value })}
+            placeholder="Heading..."
+            style={{ fontSize, lineHeight: '1.2' }}
+            className="w-full bg-transparent border-none outline-none focus:ring-0 p-0 font-serif font-bold text-[#1a2e26]"
+        />
+    );
+};
+const DefaultHeadingPreview: React.FC<BlockPreviewProps> = ({ block }) => {
+    const level = (block.data.level as number) || 2;
+    const fontSize = level === 1 ? '48px' : level === 2 ? '36px' : level === 3 ? '30px' : '20px';
+    const Tag = `h${level}` as keyof React.JSX.IntrinsicElements;
+    return (
+        <Tag 
+            style={{ fontSize, lineHeight: '1.2' }}
+            className="font-serif font-bold text-[#1a2e26]"
+            dangerouslySetInnerHTML={{ __html: (block.data.text as string) || '' }}
+        />
+    );
+};
+
+// List
+const DefaultListEdit: React.FC<BlockEditProps> = ({ block, onUpdate }) => {
+    const items = Array.isArray(block.data.items) ? block.data.items : [''];
+    return (
+        <div className="space-y-2">
+            {items.map((item, i) => (
+                <div key={i} className="flex gap-2">
+                    <span className="text-neutral-400">•</span>
+                    <input
+                        type="text"
+                        value={typeof item === 'string' ? item : item.text || ''}
+                        onChange={(e) => {
+                            const newItems = [...items];
+                            newItems[i] = e.target.value;
+                            onUpdate({ items: newItems });
+                        }}
+                        className="flex-1 bg-transparent border-none outline-none focus:ring-0 p-0 text-[18px] leading-[1.625] font-serif"
+                    />
+                </div>
+            ))}
+            <button 
+                type="button"
+                onClick={() => onUpdate({ items: [...items, ''] })}
+                className="text-xs text-primary font-bold hover:underline"
+            >
+                + Add Item
+            </button>
+        </div>
+    );
+};
+const DefaultListPreview: React.FC<BlockPreviewProps> = ({ block }) => {
+    const items = Array.isArray(block.data.items) ? block.data.items : [];
+    const Tag = block.data.type === 'ol' ? 'ol' : 'ul';
+    return (
+        <Tag className="list-disc pl-5 space-y-1 font-serif text-[18px] leading-[1.625] text-[#1a2e26]">
+            {items.map((item, i) => (
+                <li key={i}>{typeof item === 'string' ? item : item.text || ''}</li>
+            ))}
+        </Tag>
+    );
+};
+
+// Local interface to avoid import issues
+interface IBlockRegistry {
+    register(definition: BlockTypeDefinition): void;
+    registerClientBlocks(definitions: ClientBlockDefinition[]): void;
+    get(type: string): BlockTypeDefinition | undefined;
+    getAll(): BlockTypeDefinition[];
+    has(type: string): boolean;
+    clear(): void;
+}
+
+/** 
+ * Block Registry Implementation
+ * Singleton that manages all block types in the system
+ */
+class BlockRegistryImpl implements IBlockRegistry {
+    private blocks: Map<string, BlockTypeDefinition> = new Map();
+
+    constructor() {
+        // Register default blocks on instantiation (server & client)
+        this.registerDefaultBlocks();
+    }
+
+    private registerDefaultBlocks(): void {
+        const defaults: BlockTypeDefinition[] = [
+            {
+                type: 'paragraph',
+                name: 'Paragraph',
+                description: 'Simple text paragraph',
+                icon: Type,
+                category: 'text',
+                defaultData: { text: '' },
+                components: { Edit: DefaultParagraphEdit, Preview: DefaultParagraphPreview, Icon: Type }
+            },
+            {
+                type: 'heading',
+                name: 'Heading',
+                description: 'Section heading',
+                icon: HeadingIcon,
+                category: 'text',
+                defaultData: { text: '', level: 2 },
+                components: { Edit: DefaultHeadingEdit, Preview: DefaultHeadingPreview, Icon: HeadingIcon }
+            },
+            {
+                type: 'list',
+                name: 'List',
+                description: 'Bullet or numbered list',
+                icon: List,
+                category: 'text',
+                defaultData: { items: [''], type: 'ul' },
+                components: { Edit: DefaultListEdit, Preview: DefaultListPreview, Icon: List }
+            },
+            {
+                type: 'divider',
+                name: 'Divider',
+                description: 'Horizontal separator',
+                icon: Minus,
+                category: 'layout',
+                defaultData: {},
+                components: { 
+                    Edit: () => <hr className="my-4 border-t border-neutral-200" />, 
+                    Preview: () => <hr className="my-4 border-t border-neutral-200" />, 
+                    Icon: Minus 
+                }
+            }
+        ];
+
+        for (const def of defaults) {
+            // Use register to ensure it's also added to window
+            this.register(def);
+        }
+    }
+
+    register(definition: BlockTypeDefinition): void {
+        this.blocks.set(definition.type, definition);
+        
+        // Also attach to window for cross-context access
+        if (typeof window !== 'undefined') {
+            if (!(window as any).__JHITS_NEWSLETTER_REGISTRY__) {
+                (window as any).__JHITS_NEWSLETTER_REGISTRY__ = new Map();
+            }
+            (window as any).__JHITS_NEWSLETTER_REGISTRY__.set(definition.type, definition);
+        }
+    }
+
+    /**
+     * Register multiple client blocks at once
+     * This is the primary method for client applications to register their blocks
+     */
+    registerClientBlocks(definitions: ClientBlockDefinition[]): void {
+        for (const def of definitions) {
+            if (!def.type || !def.name || !def.components) continue;
+            if (!def.components.Edit || !def.components.Preview) continue;
+
+            const blockDefinition: BlockTypeDefinition = {
+                type: def.type,
+                name: def.name,
+                description: def.description,
+                icon: def.icon || def.components.Icon,
+                defaultData: def.defaultData,
+                validate: def.validate,
+                isContainer: def.isContainer,
+                allowedChildren: def.allowedChildren,
+                category: def.category || 'custom',
+                components: def.components,
+            };
+
+            this.register(blockDefinition);
+        }
+    }
+
+    get(type: string): BlockTypeDefinition | undefined {
+        const block = this.blocks.get(type);
+        if (block) return block;
+        
+        if (typeof window !== 'undefined' && (window as any).__JHITS_NEWSLETTER_REGISTRY__) {
+            return (window as any).__JHITS_NEWSLETTER_REGISTRY__.get(type);
+        }
+        
+        return undefined;
+    }
+
+    getAll(): BlockTypeDefinition[] {
+        return Array.from(this.blocks.values());
+    }
+
+    has(type: string): boolean {
+        return this.blocks.has(type);
+    }
+
+    clear(): void {
+        this.blocks.clear();
+        this.registerDefaultBlocks(); // Re-add defaults after clear
+    }
+}
+
+// Export singleton instance
+export const BlockRegistry = new BlockRegistryImpl();
+export const blockRegistry = BlockRegistry;

package/src/state/EditorContext.tsx

@@ -40,8 +40,18 @@ export interface EditorProviderProps {
         /** Background color for dark mode (optional) */
         dark?: string;
     };
+    /** Localized strings for modular blocks in the editor */
+    translations?: Record<string, any>;
     /** If true, this editor is for the welcome email */
     isWelcomeEmail?: boolean;
+    /** Email configuration (logo, footer, etc.) */
+    emailConfig?: {
+        logoUrl?: string;
+        logoAlt?: string;
+        footerText?: string;
+    };
+    /** Global translations for unsubscribe text */
+    unsubscribeTranslations?: Record<string, string>;
 }
 
 /**
@@ -56,23 +66,44 @@ export function EditorProvider({
     customBlocks = [],
     darkMode = true,
     backgroundColors,
-    isWelcomeEmail
+    translations,
+    isWelcomeEmail,
+    emailConfig,
+    unsubscribeTranslations
 }: EditorProviderProps) {
-    // Register client blocks on mount
+    const [state, dispatch] = useReducer(
+        editorReducer,
+        { ...initialEditorState, ...initialState }
+    );
+
+    // Track registered blocks in state to trigger re-renders
+    const [registeredBlockTypes, setRegisteredBlockBlocks] = useState<string[]>(() => 
+        BlockRegistry.getAll().map(b => b.type)
+    );
+
+    // Register client blocks on mount or when they change
     useEffect(() => {
         if (customBlocks && customBlocks.length > 0) {
             try {
-                customBlocks.forEach(block => BlockRegistry.register(block));
+                BlockRegistry.registerClientBlocks(customBlocks);
+                // Update state to trigger re-render
+                setRegisteredBlockBlocks(BlockRegistry.getAll().map(b => b.type));
             } catch (error) {
                 console.error('[NewsletterEditorContext] Failed to register custom blocks:', error);
             }
         }
     }, [customBlocks]);
 
-    const [state, dispatch] = useReducer(
-        editorReducer,
-        { ...initialEditorState, ...initialState }
-    );
+    // Periodically check for new blocks in global registry (fallback for late loads)
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const currentTypes = BlockRegistry.getAll().map(b => b.type);
+            if (currentTypes.length !== registeredBlockTypes.length) {
+                setRegisteredBlockBlocks(currentTypes);
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [registeredBlockTypes.length]);
 
     // Use a ref to always have access to the latest state in callbacks
     const stateRef = useRef(state);
@@ -244,6 +275,10 @@ export function EditorProvider({
             dispatch,
             darkMode,
             backgroundColors,
+            translations,
+            emailConfig,
+            unsubscribeTranslations,
+            registeredBlockTypes,
             helpers: {
                 addBlock,
                 updateBlock,
@@ -259,7 +294,7 @@ export function EditorProvider({
             canUndo: historyIndex > 0 && history.length > 0,
             canRedo: historyIndex < history.length - 1,
         }),
-        [state, dispatch, darkMode, backgroundColors, addBlock, updateBlock, deleteBlock, duplicateBlock, moveBlock, loadNewsletter, resetEditor, save, undo, redo, historyIndex, history.length]
+        [state, dispatch, darkMode, backgroundColors, translations, emailConfig, unsubscribeTranslations, registeredBlockTypes, addBlock, updateBlock, deleteBlock, duplicateBlock, moveBlock, loadNewsletter, resetEditor, save, undo, redo, historyIndex, history.length]
     );
 
     return <EditorContext.Provider value={value}>{children}</EditorContext.Provider>;

package/src/state/types.ts

@@ -90,6 +90,22 @@ export interface EditorContextValue {
         dark?: string;
     };
     
+    /** Localized strings for modular blocks in the editor */
+    translations?: Record<string, any>;
+
+    /** Email configuration (logo, footer, etc.) */
+    emailConfig?: {
+        logoUrl?: string;
+        logoAlt?: string;
+        footerText?: string;
+    };
+
+    /** Global translations for unsubscribe text */
+    unsubscribeTranslations?: Record<string, string>;
+
+    /** List of registered block types (used to trigger re-renders) */
+    registeredBlockTypes: string[];
+    
     /** Helper functions for common operations */
     helpers: {
         /** Add a new block (supports nested containers via containerId) */

package/src/types/block.ts

@@ -70,6 +70,16 @@ export interface BlockEditProps {
     
     /** Focus mode state */
     focusMode?: boolean;
+
+    /** Additional rendering context */
+    context?: {
+        /** Site ID */
+        siteId?: string;
+        /** Locale */
+        locale?: string;
+        /** Custom render props (e.g. translations) */
+        [key: string]: unknown;
+    };
     
     /** Child blocks (for container blocks like Section, Columns) */
     childBlocks?: Block[];

package/src/types/newsletter.ts

@@ -79,6 +79,9 @@ export interface NewsletterMetadata {
     /** Preview text */
     previewText?: string;
     
+    /** Unsubscribe text (localized) */
+    unsubscribeText?: string;
+    
     /** Language code */
     lang?: string;
     
@@ -160,6 +163,8 @@ export interface NewsletterListItem {
     recipientCount?: number;
     hidden?: boolean;
     sendHistory?: SendHistoryEntry[];
+    availableLanguages?: string[];
+    languages?: NewsletterLanguages;
 }
 
 /**

package/src/views/CanvasEditor/BlockWrapper.tsx

@@ -42,7 +42,10 @@ export function BlockWrapper({
     onAddBlockBelow,
 }: BlockWrapperProps) {
     const [isHovered, setIsHovered] = useState(false);
-    const { state } = useEditor();
+    const { state, translations, registeredBlockTypes } = useEditor();
+    
+    // We use the block definition from registry
+    // The component will re-render when registeredBlockTypes changes
     const blockDefinition = blockRegistry.get(block.type);
 
     // Check if this is a container block
@@ -65,6 +68,20 @@ export function BlockWrapper({
 
     const EditComponent = blockDefinition.components.Edit;
 
+    // Helper to check if block is empty (for easier deletion)
+    const isBlockEmpty = () => {
+        if (block.type === 'paragraph' || block.type === 'heading') {
+            const text = (block.data.text as string) || '';
+            const html = (block.data.html as string) || '';
+            return text.trim() === '' && html.trim() === '';
+        }
+        if (block.type === 'list') {
+            const items = (block.data.items as any[]) || [];
+            return items.length === 0 || (items.length === 1 && (typeof items[0] === 'string' ? items[0].trim() === '' : items[0].text?.trim() === ''));
+        }
+        return false;
+    };
+
     // Store block ID when hovering for paste context
     useEffect(() => {
         if (isHovered) {
@@ -103,6 +120,10 @@ export function BlockWrapper({
                                 onDelete={onDelete}
                                 isSelected={state.selectedBlockId === block.id}
                                 childBlocks={childBlocks}
+                                context={{
+                                    locale: state.metadata.lang || 'en',
+                                    translations
+                                }}
                             />
                         </div>
                     </SlashCommandDetector>
@@ -114,6 +135,10 @@ export function BlockWrapper({
                             onDelete={onDelete}
                             isSelected={state.selectedBlockId === block.id}
                             childBlocks={childBlocks}
+                            context={{
+                                locale: state.metadata.lang || 'en',
+                                translations
+                            }}
                         />
                     </div>
                 )}
@@ -128,7 +153,7 @@ export function BlockWrapper({
                 <button
                     onClick={(e) => {
                         e.stopPropagation();
-                        if (confirm('Delete this block?')) {
+                        if (isBlockEmpty() || confirm('Delete this block?')) {
                             onDelete();
                         }
                     }}