@jhits/plugin-blog 0.0.1

package/src/state/reducer.ts

@@ -0,0 +1,694 @@
+/**
+ * Editor Reducer
+ * Pure function that handles state transitions
+ */
+
+import { EditorState, EditorAction, initialEditorState } from './types';
+import { Block } from '../types/block';
+
+/**
+ * Generate a unique block ID
+ */
+function generateBlockId(): string {
+    // Use crypto.randomUUID if available, otherwise fallback to timestamp-based
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * Clone a block with a new ID
+ */
+function cloneBlock(block: Block): Block {
+    return {
+        ...block,
+        id: generateBlockId(),
+        data: { ...block.data },
+        meta: block.meta ? { ...block.meta } : undefined,
+        children: block.children ? (Array.isArray(block.children[0]) 
+            ? (block.children as Block[]).map(cloneBlock)
+            : [...(block.children as string[])]) : undefined,
+    };
+}
+
+/**
+ * Find a block by ID recursively (including nested blocks)
+ */
+function findBlockById(blocks: Block[], id: string): Block | null {
+    for (const block of blocks) {
+        if (block.id === id) {
+            return block;
+        }
+        if (block.children && Array.isArray(block.children) && block.children.length > 0) {
+            // Check if children are Block objects or IDs
+            if (typeof block.children[0] === 'object') {
+                const found = findBlockById(block.children as Block[], id);
+                if (found) return found;
+            }
+        }
+    }
+    return null;
+}
+
+/**
+ * Update blocks recursively to add a block to a container
+ */
+function addBlockToContainer(
+    blocks: Block[],
+    containerId: string,
+    newBlock: Block,
+    index?: number
+): Block[] {
+    return blocks.map(block => {
+        // Check if this is the container (exact match or column container like "block-123-col-0")
+        const isContainer = block.id === containerId;
+        const isColumnContainer = containerId.startsWith(`${block.id}-col-`);
+        
+        if (isContainer) {
+            // Direct container match
+            const currentChildren = Array.isArray(block.children) 
+                ? (typeof block.children[0] === 'object' 
+                    ? block.children as Block[]
+                    : []) 
+                : [];
+            const updatedChildren = [...currentChildren];
+            if (index !== undefined && index >= 0 && index <= updatedChildren.length) {
+                updatedChildren.splice(index, 0, newBlock);
+            } else {
+                updatedChildren.push(newBlock);
+            }
+            return {
+                ...block,
+                children: updatedChildren,
+            };
+        } else if (isColumnContainer) {
+            // Column container - extract column index and store in block meta
+            const columnIndex = parseInt(containerId.split('-col-')[1] || '0', 10);
+            newBlock.meta = {
+                ...newBlock.meta,
+                columnIndex,
+            };
+            
+            const currentChildren = Array.isArray(block.children) 
+                ? (typeof block.children[0] === 'object' 
+                    ? block.children as Block[]
+                    : []) 
+                : [];
+            const updatedChildren = [...currentChildren];
+            if (index !== undefined && index >= 0 && index <= updatedChildren.length) {
+                updatedChildren.splice(index, 0, newBlock);
+            } else {
+                updatedChildren.push(newBlock);
+            }
+            return {
+                ...block,
+                children: updatedChildren,
+            };
+        }
+        
+        // Recursively search nested blocks
+        if (block.children && Array.isArray(block.children) && block.children.length > 0) {
+            if (typeof block.children[0] === 'object') {
+                return {
+                    ...block,
+                    children: addBlockToContainer(block.children as Block[], containerId, newBlock, index),
+                };
+            }
+        }
+        return block;
+    });
+}
+
+/**
+ * Update blocks recursively to update a nested block
+ */
+function updateNestedBlock(
+    blocks: Block[],
+    id: string,
+    data: Partial<Block['data']>
+): Block[] {
+    return blocks.map(block => {
+        if (block.id === id) {
+            return {
+                ...block,
+                data: { ...block.data, ...data },
+            };
+        }
+        if (block.children && Array.isArray(block.children) && block.children.length > 0) {
+            if (typeof block.children[0] === 'object') {
+                return {
+                    ...block,
+                    children: updateNestedBlock(block.children as Block[], id, data),
+                };
+            }
+        }
+        return block;
+    });
+}
+
+/**
+ * Update blocks recursively to delete a nested block
+ */
+function deleteNestedBlock(blocks: Block[], id: string): Block[] {
+    return blocks
+        .filter(block => block.id !== id)
+        .map(block => {
+            if (block.children && Array.isArray(block.children) && block.children.length > 0) {
+                if (typeof block.children[0] === 'object') {
+                    return {
+                        ...block,
+                        children: deleteNestedBlock(block.children as Block[], id),
+                    };
+                }
+            }
+            return block;
+        });
+}
+
+/**
+ * Find and remove a block from wherever it is (root or nested)
+ */
+function removeBlockFromTree(blocks: Block[], blockId: string): { updatedBlocks: Block[]; removedBlock: Block | null } {
+    let removedBlock: Block | null = null;
+    
+    console.log('[removeBlockFromTree] Searching for block:', {
+        blockId,
+        rootBlocks: blocks.map(b => ({ id: b.id, type: b.type })),
+    });
+    
+    // First check root level
+    const rootIndex = blocks.findIndex(b => b.id === blockId);
+    if (rootIndex !== -1) {
+        removedBlock = blocks[rootIndex];
+        console.log('[removeBlockFromTree] Found at root level:', {
+            blockId,
+            index: rootIndex,
+            block: { id: removedBlock.id, type: removedBlock.type },
+        });
+        return {
+            updatedBlocks: blocks.filter((_, i) => i !== rootIndex),
+            removedBlock,
+        };
+    }
+    
+    // Then check nested blocks
+    const updatedBlocks = blocks.map(block => {
+        if (block.children && Array.isArray(block.children) && block.children.length > 0) {
+            if (typeof block.children[0] === 'object') {
+                const children = block.children as Block[];
+                const childIndex = children.findIndex(b => b.id === blockId);
+                if (childIndex !== -1) {
+                    removedBlock = children[childIndex];
+                    console.log('[removeBlockFromTree] Found in nested container:', {
+                        blockId,
+                        containerId: block.id,
+                        containerType: block.type,
+                        childIndex,
+                        block: { id: removedBlock.id, type: removedBlock.type },
+                    });
+                    return {
+                        ...block,
+                        children: children.filter((_, i) => i !== childIndex),
+                    };
+                }
+                // Recursively search nested children
+                const { updatedBlocks: updatedChildren, removedBlock: foundBlock } = removeBlockFromTree(children, blockId);
+                if (foundBlock) {
+                    removedBlock = foundBlock;
+                    console.log('[removeBlockFromTree] Found in deeper nesting:', {
+                        blockId,
+                        containerId: block.id,
+                        block: { id: removedBlock.id, type: removedBlock.type },
+                    });
+                    return {
+                        ...block,
+                        children: updatedChildren,
+                    };
+                }
+            }
+        }
+        return block;
+    });
+    
+    if (!removedBlock) {
+        console.warn('[removeBlockFromTree] Block not found in tree:', { blockId });
+    }
+    
+    return { updatedBlocks, removedBlock };
+}
+
+/**
+ * Update blocks recursively to move a nested block within the same container
+ */
+function moveNestedBlock(
+    blocks: Block[],
+    containerId: string,
+    blockId: string,
+    newIndex: number
+): Block[] {
+    return blocks.map(block => {
+        if (block.id === containerId && block.children && Array.isArray(block.children)) {
+            const children = typeof block.children[0] === 'object' 
+                ? block.children as Block[]
+                : [];
+            const currentIndex = children.findIndex(b => b.id === blockId);
+            
+            if (currentIndex !== -1 && newIndex >= 0 && newIndex < children.length) {
+                const updatedChildren = [...children];
+                const [movedBlock] = updatedChildren.splice(currentIndex, 1);
+                updatedChildren.splice(newIndex, 0, movedBlock);
+                return {
+                    ...block,
+                    children: updatedChildren,
+                };
+            }
+        }
+        if (block.children && Array.isArray(block.children) && block.children.length > 0) {
+            if (typeof block.children[0] === 'object') {
+                return {
+                    ...block,
+                    children: moveNestedBlock(block.children as Block[], containerId, blockId, newIndex),
+                };
+            }
+        }
+        return block;
+    });
+}
+
+/**
+ * Move a block to a container (handles cross-container moves)
+ */
+function moveBlockToContainer(
+    blocks: Block[],
+    blockId: string,
+    containerId: string,
+    newIndex: number
+): Block[] {
+    console.log('[moveBlockToContainer] Starting move:', {
+        blockId,
+        containerId,
+        newIndex,
+    });
+    
+    // First, find and remove the block from wherever it is
+    const { updatedBlocks, removedBlock } = removeBlockFromTree(blocks, blockId);
+    
+    if (!removedBlock) {
+        // Block not found, return unchanged
+        console.warn('[moveBlockToContainer] Block not found, cannot move');
+        return blocks;
+    }
+    
+    console.log('[moveBlockToContainer] Block removed, now adding to container:', {
+        removedBlock: { id: removedBlock.id, type: removedBlock.type },
+        containerId,
+        newIndex,
+    });
+    
+    // Handle column containers
+    const isColumnContainer = containerId.includes('-col-');
+    if (isColumnContainer) {
+        const [parentId, columnPart] = containerId.split('-col-');
+        const columnIndex = parseInt(columnPart || '0', 10);
+        removedBlock.meta = {
+            ...removedBlock.meta,
+            columnIndex,
+        };
+        console.log('[moveBlockToContainer] Setting column index:', { columnIndex });
+    }
+    
+    // Now add the block to the target container
+    const result = addBlockToContainer(updatedBlocks, containerId, removedBlock, newIndex);
+    
+    console.log('[moveBlockToContainer] Move complete:', {
+        resultBlocks: result.map(b => ({ id: b.id, type: b.type })),
+    });
+    
+    return result;
+}
+
+/**
+ * Editor Reducer
+ * Handles all state transitions for the editor
+ */
+export function editorReducer(
+    state: EditorState,
+    action: EditorAction
+): EditorState {
+    switch (action.type) {
+        case 'SET_BLOCKS':
+            return {
+                ...state,
+                blocks: action.payload,
+                isDirty: true,
+            };
+
+        case 'ADD_BLOCK': {
+            const { block, index, containerId } = action.payload;
+            const newBlock: Block = {
+                ...block,
+                id: block.id || generateBlockId(),
+            };
+            
+            // If containerId is provided, add to container's children
+            if (containerId) {
+                const updatedBlocks = addBlockToContainer(state.blocks, containerId, newBlock, index);
+                return {
+                    ...state,
+                    blocks: updatedBlocks,
+                    selectedBlockId: newBlock.id,
+                    isDirty: true,
+                };
+            }
+            
+            // Otherwise, add to root level
+            const newBlocks = [...state.blocks];
+            if (index !== undefined && index >= 0 && index <= newBlocks.length) {
+                newBlocks.splice(index, 0, newBlock);
+            } else {
+                newBlocks.push(newBlock);
+            }
+            
+            return {
+                ...state,
+                blocks: newBlocks,
+                selectedBlockId: newBlock.id,
+                isDirty: true,
+            };
+        }
+
+        case 'UPDATE_BLOCK': {
+            const { id, data } = action.payload;
+            // Check if block is at root level
+            const rootBlock = state.blocks.find(block => block.id === id);
+            if (rootBlock) {
+                const newBlocks = state.blocks.map(block =>
+                    block.id === id
+                        ? {
+                              ...block,
+                              data: { ...block.data, ...data },
+                          }
+                        : block
+                );
+                return {
+                    ...state,
+                    blocks: newBlocks,
+                    isDirty: true,
+                };
+            }
+            
+            // Otherwise, update nested block
+            const newBlocks = updateNestedBlock(state.blocks, id, data);
+            return {
+                ...state,
+                blocks: newBlocks,
+                isDirty: true,
+            };
+        }
+
+        case 'DELETE_BLOCK': {
+            const { id } = action.payload;
+            // Check if block is at root level
+            const rootBlock = state.blocks.find(block => block.id === id);
+            if (rootBlock) {
+                const newBlocks = state.blocks.filter(block => block.id !== id);
+                const wasSelected = state.selectedBlockId === id;
+                return {
+                    ...state,
+                    blocks: newBlocks,
+                    selectedBlockId: wasSelected ? null : state.selectedBlockId,
+                    isDirty: true,
+                };
+            }
+            
+            // Otherwise, delete nested block
+            const newBlocks = deleteNestedBlock(state.blocks, id);
+            const wasSelected = state.selectedBlockId === id;
+            return {
+                ...state,
+                blocks: newBlocks,
+                selectedBlockId: wasSelected ? null : state.selectedBlockId,
+                isDirty: true,
+            };
+        }
+
+        case 'DUPLICATE_BLOCK': {
+            const { id } = action.payload;
+            const blockIndex = state.blocks.findIndex(block => block.id === id);
+            
+            if (blockIndex === -1) {
+                return state;
+            }
+            
+            const blockToDuplicate = state.blocks[blockIndex];
+            const duplicatedBlock = cloneBlock(blockToDuplicate);
+            
+            const newBlocks = [...state.blocks];
+            newBlocks.splice(blockIndex + 1, 0, duplicatedBlock);
+            
+            return {
+                ...state,
+                blocks: newBlocks,
+                selectedBlockId: duplicatedBlock.id,
+                isDirty: true,
+            };
+        }
+
+        case 'MOVE_BLOCK': {
+            const { id, newIndex, containerId: rawContainerId } = action.payload;
+            
+            // Normalize 'root' string to undefined
+            const containerId = rawContainerId === 'root' || rawContainerId === undefined ? undefined : rawContainerId;
+            
+            console.log('[Reducer] MOVE_BLOCK action:', {
+                blockId: id,
+                newIndex,
+                rawContainerId,
+                normalizedContainerId: containerId || 'root',
+                currentRootBlocks: state.blocks.map(b => ({ id: b.id, type: b.type, hasChildren: !!b.children })),
+            });
+            
+            // If containerId is provided (and not 'root'), move to/within container
+            if (containerId) {
+                // First check if block is already in this container
+                const containerBlock = findBlockById(state.blocks, containerId);
+                console.log('[Reducer] Container lookup:', {
+                    containerId,
+                    found: !!containerBlock,
+                    hasChildren: containerBlock?.children ? Array.isArray(containerBlock.children) : false,
+                });
+                
+                if (containerBlock && containerBlock.children && Array.isArray(containerBlock.children)) {
+                    const children = typeof containerBlock.children[0] === 'object' 
+                        ? containerBlock.children as Block[]
+                        : [];
+                    const currentIndex = children.findIndex(b => b.id === id);
+                    
+                    console.log('[Reducer] Block in container check:', {
+                        blockId: id,
+                        currentIndex,
+                        containerChildren: children.map(b => ({ id: b.id, type: b.type })),
+                    });
+                    
+                    if (currentIndex !== -1) {
+                        // Block is already in this container - move within container
+                        console.log('[Reducer] Moving within container');
+                        const newBlocks = moveNestedBlock(state.blocks, containerId, id, newIndex);
+                        console.log('[Reducer] After move within container:', {
+                            newRootBlocks: newBlocks.map(b => ({ id: b.id, type: b.type })),
+                        });
+                        return {
+                            ...state,
+                            blocks: newBlocks,
+                            isDirty: true,
+                        };
+                    }
+                }
+                
+                // Block is not in this container - move it from wherever it is (root or nested)
+                console.log('[Reducer] Moving block to container from elsewhere');
+                const newBlocks = moveBlockToContainer(state.blocks, id, containerId, newIndex);
+                console.log('[Reducer] After move to container:', {
+                    newRootBlocks: newBlocks.map(b => ({ id: b.id, type: b.type })),
+                });
+                return {
+                    ...state,
+                    blocks: newBlocks,
+                    isDirty: true,
+                };
+            }
+            
+            // Moving to root level (containerId is undefined)
+            const currentIndex = state.blocks.findIndex(block => block.id === id);
+            
+            console.log('[Reducer] Moving to root level:', {
+                blockId: id,
+                currentIndex,
+                isInRoot: currentIndex !== -1,
+                newIndex,
+                rootBlocksCount: state.blocks.length,
+            });
+            
+            if (currentIndex !== -1) {
+                // Block is already at root level - move within root
+                if (newIndex < 0 || newIndex >= state.blocks.length) {
+                    console.warn('[Reducer] Invalid newIndex for root move:', { newIndex, blocksLength: state.blocks.length });
+                    return state;
+                }
+                
+                console.log('[Reducer] Moving within root level');
+                const newBlocks = [...state.blocks];
+                const [movedBlock] = newBlocks.splice(currentIndex, 1);
+                newBlocks.splice(newIndex, 0, movedBlock);
+                
+                console.log('[Reducer] After move within root:', {
+                    newRootBlocks: newBlocks.map(b => ({ id: b.id, type: b.type })),
+                });
+                
+                return {
+                    ...state,
+                    blocks: newBlocks,
+                    isDirty: true,
+                };
+            }
+            
+            // Block is nested somewhere - move it to root level
+            console.log('[Reducer] Block is nested, removing from tree and adding to root');
+            const { updatedBlocks, removedBlock } = removeBlockFromTree(state.blocks, id);
+            
+            console.log('[Reducer] Block removal result:', {
+                removedBlock: removedBlock ? { id: removedBlock.id, type: removedBlock.type } : null,
+                updatedBlocksCount: updatedBlocks.length,
+            });
+            
+            if (removedBlock) {
+                // Clear any nested metadata (like columnIndex)
+                const cleanedBlock = {
+                    ...removedBlock,
+                    meta: removedBlock.meta ? {
+                        ...removedBlock.meta,
+                        columnIndex: undefined,
+                    } : undefined,
+                };
+                
+                const newBlocks = [...updatedBlocks];
+                if (newIndex >= 0 && newIndex <= newBlocks.length) {
+                    newBlocks.splice(newIndex, 0, cleanedBlock);
+                } else {
+                    newBlocks.push(cleanedBlock);
+                }
+                
+                console.log('[Reducer] After move nested to root:', {
+                    newRootBlocks: newBlocks.map(b => ({ id: b.id, type: b.type })),
+                    insertedAt: newIndex >= 0 && newIndex <= updatedBlocks.length ? newIndex : newBlocks.length - 1,
+                });
+                
+                return {
+                    ...state,
+                    blocks: newBlocks,
+                    isDirty: true,
+                };
+            }
+            
+            console.warn('[Reducer] Block not found in tree:', { blockId: id });
+            return state;
+        }
+
+        case 'SET_TITLE':
+            return {
+                ...state,
+                title: action.payload,
+                isDirty: true,
+            };
+
+        case 'SET_SLUG':
+            return {
+                ...state,
+                slug: action.payload,
+                isDirty: true,
+            };
+
+        case 'SET_SEO':
+            return {
+                ...state,
+                seo: { ...state.seo, ...action.payload },
+                isDirty: true,
+            };
+
+        case 'SET_METADATA':
+            return {
+                ...state,
+                metadata: { ...state.metadata, ...action.payload },
+                isDirty: true,
+            };
+
+        case 'SET_STATUS':
+            return {
+                ...state,
+                status: action.payload,
+                isDirty: true,
+            };
+
+        case 'SET_FOCUS_MODE':
+            return {
+                ...state,
+                focusMode: action.payload,
+            };
+
+        case 'SELECT_BLOCK':
+            return {
+                ...state,
+                selectedBlockId: action.payload,
+            };
+
+        case 'SET_DRAGGED_BLOCK':
+            return {
+                ...state,
+                draggedBlockId: action.payload,
+            };
+
+        case 'LOAD_POST': {
+            const post = action.payload;
+            return {
+                ...state,
+                blocks: post.blocks,
+                title: post.title,
+                slug: post.slug,
+                seo: post.seo,
+                metadata: post.metadata,
+                status: post.publication.status,
+                postId: post.id,
+                isDirty: false,
+                selectedBlockId: null,
+            };
+        }
+
+        case 'RESET_EDITOR':
+            return {
+                ...initialEditorState,
+            };
+
+        case 'MARK_CLEAN':
+            return {
+                ...state,
+                isDirty: false,
+            };
+
+        case 'MARK_DIRTY':
+            return {
+                ...state,
+                isDirty: true,
+            };
+
+        case 'UNDO':
+        case 'REDO':
+        case 'SAVE_HISTORY':
+            // These are handled by the context, not the reducer
+            return state;
+
+        default:
+            return state;
+    }
+}
+