@jhits/plugin-blog 0.0.7 → 0.0.9

package/src/state/EditorContext.js

@@ -0,0 +1,215 @@
+/**
+ * Editor Context
+ * React Context for managing editor state
+ * Multi-Tenant: Accepts custom blocks from client applications
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useReducer, useCallback, useMemo, useEffect, useRef, useState } from 'react';
+import { editorReducer } from './reducer';
+import { initialEditorState } from './types';
+import { blockRegistry } from '../registry/BlockRegistry';
+import { registerLayoutBlocks } from '../lib/layouts/registerLayoutBlocks';
+// Create the context
+const EditorContext = createContext(null);
+/**
+ * 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 }) {
+    // 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, Object.assign(Object.assign({}, 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([]);
+    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(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(Object.assign({}, 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.seo, state.metadata, state.status, historyIndex]);
+    // Helper: Add a new block (supports nested containers)
+    const addBlock = useCallback((type, index, containerId) => {
+        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 = {
+            id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            type,
+            data: Object.assign({}, blockDefinition.defaultData),
+        };
+        dispatch({ type: 'ADD_BLOCK', payload: { block: newBlock, index, containerId } });
+    }, []);
+    // Helper: Update a block
+    const updateBlock = useCallback((id, data) => {
+        dispatch({ type: 'UPDATE_BLOCK', payload: { id, data } });
+    }, []);
+    // Helper: Delete a block
+    const deleteBlock = useCallback((id) => {
+        dispatch({ type: 'DELETE_BLOCK', payload: { id } });
+    }, []);
+    // Helper: Duplicate a block
+    const duplicateBlock = useCallback((id) => {
+        dispatch({ type: 'DUPLICATE_BLOCK', payload: { id } });
+    }, []);
+    // Helper: Move a block (supports nested containers)
+    const moveBlock = useCallback((id, newIndex, containerId) => {
+        dispatch({ type: 'MOVE_BLOCK', payload: { id, newIndex, containerId } });
+    }, []);
+    // Helper: Load a post
+    const loadPost = useCallback((post) => {
+        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) => {
+        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) {
+                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(() => ({
+        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 _jsx(EditorContext.Provider, { value: value, children: children });
+}
+/**
+ * Hook to access editor context
+ * @throws Error if used outside EditorProvider
+ */
+export function useEditor() {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error('useEditor must be used within an EditorProvider');
+    }
+    return context;
+}

package/src/state/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * State management exports
+ */
+export * from './types';
+export * from './reducer';
+export * from './EditorContext';
+//# sourceMappingURL=index.d.ts.map

package/src/state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}

package/src/state/index.js

@@ -0,0 +1,6 @@
+/**
+ * State management exports
+ */
+export * from './types';
+export * from './reducer';
+export * from './EditorContext';

package/src/state/reducer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Editor Reducer
+ * Pure function that handles state transitions
+ */
+import { EditorState, EditorAction } from './types';
+/**
+ * Editor Reducer
+ * Handles all state transitions for the editor
+ */
+export declare function editorReducer(state: EditorState, action: EditorAction): EditorState;
+//# sourceMappingURL=reducer.d.ts.map

package/src/state/reducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["reducer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAsB,MAAM,SAAS,CAAC;AAqUxE;;;GAGG;AACH,wBAAgB,aAAa,CACzB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,GACrB,WAAW,CAmWb"}