@jhits/plugin-blog 0.0.19 → 0.0.20

package/src/state/EditorContext.tsx

@@ -1,283 +1,204 @@
 /**
  * Editor Context
- * React Context for managing editor state
- * Multi-Tenant: Accepts custom blocks from client applications
+ * Enhanced with language management and simplified state handling
  */
 
 '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 { EditorContextValue, EditorState, initialEditorState } from './types';
 import { Block } from '../types/block';
-import { BlogPost } from '../types/post';
+import { BlogPost, PostStatus } from '../types/post';
+import { apiToBlogPost } from '../lib/mappers/apiMapper';
 import { blockRegistry } from '../registry/BlockRegistry';
 import { ClientBlockDefinition } from '../types/block';
 import { registerLayoutBlocks } from '../lib/layouts/registerLayoutBlocks';
 
-// Create the context
+const API_BASE_URL = process.env.NEXT_PUBLIC_DASHBOARD_URL || 'http://localhost:3001';
 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, heroBlock?: Block | null) => 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;
-    };
+    backgroundColors?: { light: string; dark?: string };
+    translations?: Record<string, any>;
 }
 
-/**
- * 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
+    initialState, 
+    onSave, 
+    customBlocks = [], 
+    darkMode = false, 
+    backgroundColors,
+    translations 
 }: EditorProviderProps) {
-    // Register core layout blocks on mount
-    useEffect(() => {
-        registerLayoutBlocks();
-    }, []);
-
-    // Register client blocks on mount
-    useEffect(() => {
-        if (customBlocks && customBlocks.length > 0) {
-            try {
-                blockRegistry.registerClientBlocks(customBlocks);
-            } catch (error) {
-                console.error('[EditorContext] Failed to register custom blocks:', error);
-            }
-        }
-    }, [customBlocks]);
-
-    const [state, dispatch] = useReducer(
-        editorReducer,
-        { ...initialEditorState, ...initialState }
-    );
+    useEffect(() => { registerLayoutBlocks(); }, []);
+    useEffect(() => { if (customBlocks?.length) blockRegistry.registerClientBlocks(customBlocks); }, [customBlocks]);
 
-    // Use a ref to always have access to the latest state in callbacks
+    const [state, dispatch] = useReducer(editorReducer, { ...initialEditorState, ...initialState });
+    const [user, setUser] = useState<any>(null);
     const stateRef = useRef(state);
     stateRef.current = state;
 
-    // History state for undo/redo
+    // Language Management
+    const [availableLanguages, setAvailableLanguages] = useState<string[]>([]);
+    
+    useEffect(() => {
+        const fetchUser = async () => {
+            try {
+                const res = await fetch(`${API_BASE_URL}/api/me`);
+                if (res.ok) {
+                    const data = await res.json();
+                    if (data.user) setUser(data.user);
+                }
+            } catch (e) {}
+        };
+        fetchUser();
+    }, []);
+
+    // History logic (Simplified)
     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
+        if (isRestoringRef.current) { isRestoringRef.current = false; return; }
+        const timer = setTimeout(() => {
             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;
+                const next = prev.slice(0, historyIndex + 1);
+                next.push({ ...state });
+                return next.slice(-50);
             });
-        }, 300); // Debounce by 300ms
-
-        return () => {
-            if (historyTimeoutRef.current) {
-                clearTimeout(historyTimeoutRef.current);
+            setHistoryIndex(prev => Math.min(prev + 1, 49));
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [state.blocks, state.title, state.slug]);
+
+    const helpers = useMemo(() => ({
+        addBlock: (type: string, index?: number, containerId?: string) => {
+            const def = blockRegistry.get(type);
+            const block: Block = { 
+                id: `block-${Date.now()}`, 
+                type, 
+                data: { ...(def?.defaultData || {}) } 
+            };
+            dispatch({ type: 'ADD_BLOCK', payload: { block, index, containerId } });
+        },
+        updateBlock: (id: string, data: any) => 
+            dispatch({ type: 'UPDATE_BLOCK', payload: { id, data } }),
+        deleteBlock: (id: string) => 
+            dispatch({ type: 'DELETE_BLOCK', payload: { id } }),
+        duplicateBlock: (id: string) => 
+            dispatch({ type: 'DUPLICATE_BLOCK', payload: { id } }),
+        moveBlock: (id: string, newIndex: number, containerId?: string) => 
+            dispatch({ type: 'MOVE_BLOCK', payload: { id, newIndex, containerId } }),
+        loadPost: (post: BlogPost) => {
+
+            dispatch({ type: 'LOAD_POST', payload: post });
+            
+            // 1. Collect all unique language keys from the post data
+            const createdLangs = new Set<string>();
+            
+            // From availableLanguages array (source of truth from API)
+            if (post.availableLanguages) {
+                post.availableLanguages.forEach(l => createdLangs.add(l));
             }
-        };
-    }, [state.blocks, state.title, state.slug, state.seo, 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 => 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 (heroBlock?: Block | null) => {
-        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, heroBlock);
-            dispatch({ type: 'MARK_CLEAN' });
-        }
-    }, [onSave]);
-
-    // Helper: Undo
-    const undo = useCallback(() => {
-        if (historyIndex > 0 && history.length > 0) {
-            const previousState = history[historyIndex - 1];
-            if (previousState) {
+            
+            // From languages summary keys (backup)
+            if (post.languages) {
+                Object.keys(post.languages).forEach(l => createdLangs.add(l));
+            }
+            
+            // 2. Update state with the consolidated list
+            setAvailableLanguages(Array.from(createdLangs));
+        },
+        resetEditor: () => dispatch({ type: 'RESET_EDITOR' }),
+        save: async (heroBlock?: Block | null, statusOverride?: PostStatus) => {
+            if (onSave) {
+                const currentState = { ...stateRef.current };
+                if (statusOverride) currentState.status = statusOverride;
+                
+                await onSave(currentState, heroBlock);
+                dispatch({ type: 'MARK_CLEAN' });
+            }
+        },
+        undo: () => {
+            if (historyIndex > 0) {
                 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(),
-                } });
+                const prev = history[historyIndex - 1];
+                setHistoryIndex(i => i - 1);
+                dispatch({ type: 'LOAD_POST', payload: prev as any });
             }
-        }
-    }, [history, historyIndex, dispatch]);
-
-    // Helper: Redo
-    const redo = useCallback(() => {
-        if (historyIndex < history.length - 1) {
-            const nextState = history[historyIndex + 1];
-            if (nextState) {
+        },
+        redo: () => {
+            if (historyIndex < history.length - 1) {
                 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(),
-                } });
+                const next = history[historyIndex + 1];
+                setHistoryIndex(i => i + 1);
+                dispatch({ type: 'LOAD_POST', payload: next as any });
             }
-        }
-    }, [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,
+        switchLanguage: async (newLang: string, postId?: string) => {
+            // 1. Always update the current language in state first to show immediate UI feedback
+            dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: newLang });
+            
+            if (!postId) {
+                dispatch({ type: 'SET_STATUS', payload: 'draft' });
+                return;
+            }
+
+            // 2. Fetch the language version from the API
+            const fetchUrl = `${API_BASE_URL}/api/plugin-blog/${postId}?language=${newLang}&admin=true`;
+
+            const res = await fetch(fetchUrl);
+            if (res.ok) {
+                const data = await res.json();
+                const blogPost = apiToBlogPost(data);
+                
+                // Update the available languages list from the source of truth
+                if (data.availableLanguages) {
+                    setAvailableLanguages(data.availableLanguages);
+                }
+
+                // If this is a NEW translation (missing in the document),
+                // customize it so it's not a perfect clone of the primary language
+                if (data.isMissingTranslation) {
+                    blogPost.publication.status = 'draft';
+                    blogPost.title = `${blogPost.title} - ${newLang.toUpperCase()}`;
+                    // Important: Mark as dirty so it can be saved as a new version
+                    dispatch({ type: 'LOAD_POST', payload: blogPost });
+                    dispatch({ type: 'MARK_DIRTY' });
+                } else {
+                    dispatch({ type: 'LOAD_POST', payload: blogPost });
+                    dispatch({ type: 'MARK_CLEAN' });
+                }
+            }
+        }
+    }), [onSave, history, historyIndex, state.postId]);
+
+    const value = useMemo(() => ({
+        state,
+        dispatch,
+        darkMode,
+        backgroundColors,
+        translations,
+        user,
+        helpers,
+        availableLanguages,
+        canUndo: historyIndex > 0,
         canRedo: historyIndex < history.length - 1,
-        }),
-        [state, dispatch, darkMode, backgroundColors, addBlock, updateBlock, deleteBlock, duplicateBlock, moveBlock, loadPost, resetEditor, save, undo, redo, historyIndex, history.length]
-    );
+    }), [state, darkMode, backgroundColors, user, helpers, historyIndex, history.length, availableLanguages]);
 
     return <EditorContext.Provider value={value}>{children}</EditorContext.Provider>;
 }
 
-/**
- * Hook to access editor context
- * @throws Error if used outside EditorProvider
- */
-export function useEditor(): EditorContextValue {
+export function useEditor() {
     const context = useContext(EditorContext);
-    if (!context) {
-        throw new Error('useEditor must be used within an EditorProvider');
-    }
+    if (!context) throw new Error('useEditor must be used within EditorProvider');
     return context;
 }