@jhits/plugin-newsletter 0.0.4 → 0.0.5

package/src/state/EditorContext.tsx

@@ -0,0 +1,279 @@
+/**
+ * Newsletter Editor Context
+ * React Context for managing newsletter editor state
+ * Multi-Tenant: Accepts custom blocks from client applications
+ */
+
+'use client';
+
+import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect, useRef, useState } from 'react';
+import { editorReducer } from './reducer';
+import { EditorState, EditorAction, initialEditorState, EditorContextValue } from './types';
+import { Block } from '../types/block';
+import { Newsletter } from '../types/newsletter';
+import { ClientBlockDefinition } from '../types/block';
+import { BlockRegistry } from '../registry/BlockRegistry';
+
+// Create the context
+const EditorContext = createContext<EditorContextValue | null>(null);
+
+/**
+ * Editor Provider Props
+ */
+export interface EditorProviderProps {
+    children: React.ReactNode;
+    /** Initial state (optional) */
+    initialState?: Partial<EditorState>;
+    /** Callback when save is triggered */
+    onSave?: (state: EditorState) => Promise<void>;
+    /** 
+     * Custom blocks from client application
+     * These blocks will be registered in the BlockRegistry on mount
+     */
+    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;
+    };
+}
+
+/**
+ * Editor Provider
+ * Provides editor state and actions to child components
+ * Automatically registers client-provided blocks on mount
+ */
+export function EditorProvider({
+    children,
+    initialState,
+    onSave,
+    customBlocks = [],
+    darkMode = true,
+    backgroundColors
+}: EditorProviderProps) {
+    // Register client blocks on mount
+    useEffect(() => {
+        if (customBlocks && customBlocks.length > 0) {
+            try {
+                customBlocks.forEach(block => BlockRegistry.register(block));
+            } catch (error) {
+                console.error('[NewsletterEditorContext] Failed to register custom blocks:', error);
+            }
+        }
+    }, [customBlocks]);
+
+    const [state, dispatch] = useReducer(
+        editorReducer,
+        { ...initialEditorState, ...initialState }
+    );
+
+    // Use a ref to always have access to the latest state in callbacks
+    const stateRef = useRef(state);
+    stateRef.current = state;
+
+    // History state for undo/redo
+    const [history, setHistory] = useState<EditorState[]>([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    const isRestoringRef = useRef(false);
+    const MAX_HISTORY = 50; // Limit history to prevent memory issues
+
+    // Save current state to history after state changes (but not during undo/redo)
+    // Debounce history updates to avoid excessive re-renders
+    const historyTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        if (isRestoringRef.current) {
+            isRestoringRef.current = false;
+            return;
+        }
+
+        // Clear existing timeout
+        if (historyTimeoutRef.current) {
+            clearTimeout(historyTimeoutRef.current);
+        }
+
+        // Debounce history updates to reduce re-renders
+        historyTimeoutRef.current = setTimeout(() => {
+            // Save current state to history
+            setHistory(prev => {
+                const newHistory = [...prev];
+                // Remove any future history if we're not at the end
+                if (historyIndex < newHistory.length - 1) {
+                    newHistory.splice(historyIndex + 1);
+                }
+                // Add current state
+                newHistory.push({ ...state });
+                // Limit history size
+                if (newHistory.length > MAX_HISTORY) {
+                    newHistory.shift();
+                    return newHistory;
+                }
+                return newHistory;
+            });
+            setHistoryIndex(prev => {
+                const newIndex = prev + 1;
+                return newIndex >= MAX_HISTORY ? MAX_HISTORY - 1 : newIndex;
+            });
+        }, 300); // Debounce by 300ms
+
+        return () => {
+            if (historyTimeoutRef.current) {
+                clearTimeout(historyTimeoutRef.current);
+            }
+        };
+    }, [state.blocks, state.title, state.slug, state.metadata, state.status, historyIndex]);
+
+    // Helper: Add a new block (supports nested containers)
+    const addBlock = useCallback((type: string, index?: number, containerId?: string) => {
+        const blockDefinition = BlockRegistry.get(type);
+        if (!blockDefinition) {
+            console.warn(`Block type "${type}" not found in registry. Available types:`,
+                BlockRegistry.getAll().map((b: any) => b.type).join(', '));
+            return;
+        }
+
+        const newBlock: Block = {
+            id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            type,
+            data: { ...blockDefinition.defaultData },
+        };
+
+        dispatch({ type: 'ADD_BLOCK', payload: { block: newBlock, index, containerId } });
+    }, []);
+
+    // Helper: Update a block
+    const updateBlock = useCallback((id: string, data: Partial<Block['data']>) => {
+        dispatch({ type: 'UPDATE_BLOCK', payload: { id, data } });
+    }, []);
+
+    // Helper: Delete a block
+    const deleteBlock = useCallback((id: string) => {
+        dispatch({ type: 'DELETE_BLOCK', payload: { id } });
+    }, []);
+
+    // Helper: Duplicate a block
+    const duplicateBlock = useCallback((id: string) => {
+        dispatch({ type: 'DUPLICATE_BLOCK', payload: { id } });
+    }, []);
+
+    // Helper: Move a block (supports nested containers)
+    const moveBlock = useCallback((id: string, newIndex: number, containerId?: string) => {
+        dispatch({ type: 'MOVE_BLOCK', payload: { id, newIndex, containerId } });
+    }, []);
+
+    // Helper: Load a newsletter
+    const loadNewsletter = useCallback((newsletter: Newsletter) => {
+        dispatch({ type: 'LOAD_NEWSLETTER', payload: newsletter });
+    }, []);
+
+    // Helper: Reset editor
+    const resetEditor = useCallback(() => {
+        dispatch({ type: 'RESET_EDITOR' });
+    }, []);
+
+    // Helper: Save
+    // Uses stateRef to always get the latest state, avoiding stale closure issues
+    const save = useCallback(async () => {
+        if (onSave) {
+            // Use stateRef.current to get the absolute latest state
+            // This ensures we don't have stale closure issues with React state updates
+            await onSave(stateRef.current);
+            dispatch({ type: 'MARK_CLEAN' });
+        }
+    }, [onSave]);
+
+    // Helper: Undo
+    const undo = useCallback(() => {
+        if (historyIndex > 0 && history.length > 0) {
+            const previousState = history[historyIndex - 1];
+            if (previousState) {
+                isRestoringRef.current = true;
+                setHistoryIndex(prev => prev - 1);
+                dispatch({
+                    type: 'LOAD_NEWSLETTER', payload: {
+                        id: previousState.newsletterId || '',
+                        title: previousState.title,
+                        slug: previousState.slug,
+                        blocks: previousState.blocks,
+                        publication: {
+                            status: previousState.status,
+                            authorId: undefined,
+                        },
+                        metadata: previousState.metadata,
+                        createdAt: new Date().toISOString(),
+                        updatedAt: new Date().toISOString(),
+                    }
+                });
+            }
+        }
+    }, [history, historyIndex, dispatch]);
+
+    // Helper: Redo
+    const redo = useCallback(() => {
+        if (historyIndex < history.length - 1) {
+            const nextState = history[historyIndex + 1];
+            if (nextState) {
+                isRestoringRef.current = true;
+                setHistoryIndex(prev => prev + 1);
+                dispatch({
+                    type: 'LOAD_NEWSLETTER', payload: {
+                        id: nextState.newsletterId || '',
+                        title: nextState.title,
+                        slug: nextState.slug,
+                        blocks: nextState.blocks,
+                        publication: {
+                            status: nextState.status,
+                            authorId: undefined,
+                        },
+                        metadata: nextState.metadata,
+                        createdAt: new Date().toISOString(),
+                        updatedAt: new Date().toISOString(),
+                    }
+                });
+            }
+        }
+    }, [history, historyIndex, dispatch]);
+
+    // Memoize the context value
+    const value = useMemo<EditorContextValue>(
+        () => ({
+            state,
+            dispatch,
+            darkMode,
+            backgroundColors,
+            helpers: {
+                addBlock,
+                updateBlock,
+                deleteBlock,
+                duplicateBlock,
+                moveBlock,
+                loadNewsletter,
+                resetEditor,
+                save,
+                undo,
+                redo,
+            },
+            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]
+    );
+
+    return <EditorContext.Provider value={value}>{children}</EditorContext.Provider>;
+}
+
+/**
+ * Hook to access editor context
+ * @throws Error if used outside EditorProvider
+ */
+export function useEditor(): EditorContextValue {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error('useEditor must be used within an EditorProvider');
+    }
+    return context;
+}

package/src/state/index.ts

@@ -0,0 +1,10 @@
+/**
+ * State Exports
+ */
+
+export { EditorProvider, useEditor } from './EditorContext';
+export type { EditorProviderProps } from './EditorContext';
+export type { EditorContextValue } from './types';
+export { editorReducer } from './reducer';
+export type { EditorState, EditorAction } from './types';
+export { initialEditorState } from './types';