@jhits/plugin-blog 0.0.1

package/src/state/EditorContext.tsx

@@ -0,0 +1,277 @@
+/**
+ * Editor Context
+ * React Context for managing 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 { EditorContextValue, EditorState, EditorAction, initialEditorState } from './types';
+import { Block } from '../types/block';
+import { BlogPost } from '../types/post';
+import { blockRegistry } from '../registry/BlockRegistry';
+import { ClientBlockDefinition } from '../types/block';
+import { registerLayoutBlocks } from '../lib/layouts/registerLayoutBlocks';
+
+// 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) {
+    console.log('[EditorProvider] Rendering with darkMode:', darkMode);
+    
+    // Register core layout blocks on mount
+    useEffect(() => {
+        console.log('[EditorContext] Registering layout blocks...');
+        registerLayoutBlocks();
+        const layoutBlocks = blockRegistry.getByCategory('layout');
+        console.log('[EditorContext] Layout blocks registered:', layoutBlocks.length, layoutBlocks.map(b => b.type));
+    }, []);
+
+    // Register client blocks on mount
+    useEffect(() => {
+        if (customBlocks && customBlocks.length > 0) {
+            try {
+                console.log('[EditorContext] Registering custom blocks:', customBlocks.length, customBlocks.map(b => b.type));
+                blockRegistry.registerClientBlocks(customBlocks);
+                const allBlocks = blockRegistry.getAll();
+                console.log('[EditorContext] Total blocks after registration:', allBlocks.length, allBlocks.map(b => b.type));
+            } catch (error) {
+                console.error('[EditorContext] Failed to register custom blocks:', error);
+            }
+        } else {
+            console.log('[EditorContext] No custom blocks provided');
+        }
+    }, [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)
+    useEffect(() => {
+        if (isRestoringRef.current) {
+            isRestoringRef.current = false;
+            return;
+        }
+
+        // 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;
+        });
+    }, [state.blocks, state.title, state.slug, state.seo, state.metadata, state.status]);
+
+    // 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 => 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 post
+    const loadPost = useCallback((post: BlogPost) => {
+        dispatch({ type: 'LOAD_POST', payload: post });
+    }, []);
+
+    // 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
+            console.log('[EditorContext] save() called with status:', stateRef.current.status);
+            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_POST', payload: {
+                    id: previousState.postId || '',
+                    title: previousState.title,
+                    slug: previousState.slug,
+                    blocks: previousState.blocks,
+                    seo: previousState.seo,
+                    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_POST', payload: {
+                    id: nextState.postId || '',
+                    title: nextState.title,
+                    slug: nextState.slug,
+                    blocks: nextState.blocks,
+                    seo: nextState.seo,
+                    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,
+            loadPost,
+            resetEditor,
+            save,
+            undo,
+            redo,
+        },
+        canUndo: historyIndex > 0 && history.length > 0,
+        canRedo: historyIndex < history.length - 1,
+        }),
+        [state, dispatch, darkMode, backgroundColors, addBlock, updateBlock, deleteBlock, duplicateBlock, moveBlock, loadPost, 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,8 @@
+/**
+ * State management exports
+ */
+
+export * from './types';
+export * from './reducer';
+export * from './EditorContext';
+