@jhits/plugin-blog 0.0.5 → 0.0.6

package/src/views/CanvasEditor/components/FeaturedMediaSection.tsx

@@ -1,55 +1,181 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { Image as ImageIcon, Plus, X } from 'lucide-react';
-import NextImage from 'next/image';
-import { ImagePicker } from '@jhits/plugin-images';
+import { ImagePicker, Image } from '@jhits/plugin-images';
 import type { ImageMetadata } from '@jhits/plugin-images';
+import type { Block } from '../../../types/block';
 
 export interface FeaturedImage {
+    // Store only the semantic ID - plugin-images handles everything else
     id?: string;
-    src?: string;
     alt?: string;
+    // Transform values (stored locally for UI, but plugin-images API is source of truth)
     brightness?: number;
     blur?: number;
+    scale?: number;
+    positionX?: number;
+    positionY?: number;
+    // Indicates if this is a custom featured image (not synced from hero)
+    isCustom?: boolean;
 }
 
 export interface FeaturedMediaSectionProps {
     featuredImage?: FeaturedImage;
+    heroBlock?: Block | null; // Hero block to get default image from
+    slug?: string; // Blog post slug for semantic ID
     onUpdate: (image: FeaturedImage | undefined) => void;
 }
 
 /**
  * Featured Media Section Component
- * Handles featured image selection using ImagePicker
+ * Handles featured image selection - completely independent from hero image
+ * Featured image is a thumbnail used for blog post cards
+ * Hero image is separate and managed in the hero block
  */
 export function FeaturedMediaSection({
     featuredImage,
+    heroBlock,
+    slug,
     onUpdate,
 }: FeaturedMediaSectionProps) {
     const [showImagePicker, setShowImagePicker] = useState(false);
+    const [openEditorDirectly, setOpenEditorDirectly] = useState(false);
+    const [mounted, setMounted] = useState(false);
 
-    const imageSrc = featuredImage?.src
-        ? (featuredImage.src.startsWith('http') ? featuredImage.src : `/api/uploads/${featuredImage.src}`)
-        : null;
+    // Handle SSR - ensure we only render portal on client
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    // Create semantic ID for this featured image - plugin-images will handle everything
+    const semanticId = slug ? `blog-featured-${slug}` : `blog-featured-${Date.now()}`;
+    
+    // Use semantic ID from featuredImage if it exists, otherwise use generated one
+    // IMPORTANT: Always use the actual id from featuredImage if available, otherwise the semanticId
+    // This ensures the id is stable and doesn't change on re-renders
+    const imageId = featuredImage?.id || semanticId;
+    
+    // Ensure featuredImage always has an id when it exists
+    // This prevents the "missing featured image" issue on save
+    useEffect(() => {
+        if (featuredImage && !featuredImage.id) {
+            // If featuredImage exists but has no id, set it to the semanticId
+            onUpdate({
+                ...featuredImage,
+                id: semanticId,
+            });
+        }
+    }, [featuredImage, semanticId, onUpdate]);
+
+    // Get transform values from featuredImage or use defaults
     const brightness = featuredImage?.brightness ?? 100;
     const blur = featuredImage?.blur ?? 0;
+    const scale = featuredImage?.scale ?? 1.0;
+    const positionX = featuredImage?.positionX ?? 0;
+    const positionY = featuredImage?.positionY ?? 0;
 
-    const handleImageChange = (image: ImageMetadata | null) => {
+    // Handle image selection - just update blog metadata with semantic ID
+    // Plugin-images Image component will automatically resolve the semantic ID when it renders
+    // GlobalImageEditor will handle saving transform data when editing
+    // NO API CALLS HERE - plugin-images handles everything
+    const handleImageChange = useCallback((image: ImageMetadata | null) => {
         if (image) {
+            // Extract filename from image URL for reference (not saved to API)
             const isUploadedImage = image.url.startsWith('/api/uploads/');
-            const src = isUploadedImage ? image.filename : image.url;
+            const filename = isUploadedImage ? image.filename : image.url.split('/').pop()?.split('?')[0] || image.id;
+            
+            // Save initial mapping to plugin-images API via GlobalImageEditor when image is first edited
+            // For now, just update blog metadata with semantic ID
+            // The Image component will handle resolution, and GlobalImageEditor will save the mapping when user edits
             onUpdate({
-                src,
+                id: imageId,
                 alt: image.alt || image.filename,
-                brightness: featuredImage?.brightness ?? 100,
-                blur: featuredImage?.blur ?? 0,
-            });
+                brightness: 100,
+                blur: 0,
+                scale: 1.0,
+                positionX: 0,
+                positionY: 0,
+                isCustom: true,
+            } as FeaturedImage);
         } else {
+            // If removed, set to undefined
             onUpdate(undefined);
         }
         setShowImagePicker(false);
-    };
+    }, [imageId, onUpdate]);
+
+    // Handle editor save from ImagePicker - save to plugin-images API
+    const handleEditorSave = useCallback(async (
+        finalScale: number,
+        finalPositionX: number,
+        finalPositionY: number,
+        finalBrightness?: number,
+        finalBlur?: number
+    ) => {
+        if (!featuredImage?.id) return;
+
+        // Reset the auto-open flag immediately to prevent reopening
+        setOpenEditorDirectly(false);
+
+        // Get the actual filename from the API (resolve the semantic ID)
+        let filename = imageId; // Fallback to semantic ID
+        try {
+            const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(imageId)}`);
+            if (response.ok) {
+                const data = await response.json();
+                filename = data.filename || imageId;
+            }
+        } catch (error) {
+            console.error('Failed to resolve filename:', error);
+        }
+
+        // Normalize position values
+        const normalizedPositionX = finalPositionX === -50 ? 0 : finalPositionX;
+        const normalizedPositionY = finalPositionY === -50 ? 0 : finalPositionY;
+        const finalBrightnessValue = finalBrightness ?? brightness;
+        const finalBlurValue = finalBlur ?? blur;
+
+        // Save to plugin-images API
+        try {
+            const saveData = {
+                id: imageId,
+                filename: filename,
+                scale: finalScale,
+                positionX: normalizedPositionX,
+                positionY: normalizedPositionY,
+                brightness: finalBrightnessValue,
+                blur: finalBlurValue,
+            };
+            
+            const response = await fetch('/api/plugin-images/resolve', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(saveData),
+            });
+            
+            if (response.ok) {
+                // Update local featured image data - ensure id is preserved
+                onUpdate({
+                    ...featuredImage,
+                    id: featuredImage.id || imageId, // Ensure id is always preserved
+                    scale: finalScale,
+                    positionX: normalizedPositionX,
+                    positionY: normalizedPositionY,
+                    brightness: finalBrightnessValue,
+                    blur: finalBlurValue,
+                });
+                
+                // Dispatch event to notify Image components
+                window.dispatchEvent(new CustomEvent('image-mapping-updated', {
+                    detail: saveData
+                }));
+            }
+        } catch (error) {
+            console.error('Failed to save image transform:', error);
+        }
+    }, [imageId, featuredImage, brightness, blur, onUpdate]);
 
     return (
         <section>
@@ -59,36 +185,54 @@ export function FeaturedMediaSection({
                     Featured Media
                 </label>
             </div>
-            {imageSrc ? (
+            {featuredImage?.id ? (
                 <div className="relative group">
-                    <div
-                        className="relative aspect-[16/10] bg-dashboard-bg rounded-3xl overflow-hidden border border-dashboard-border cursor-pointer"
-                        onClick={() => setShowImagePicker(true)}
-                        onMouseEnter={(e) => e.currentTarget.classList.add('ring-2', 'ring-primary/50')}
-                        onMouseLeave={(e) => e.currentTarget.classList.remove('ring-2', 'ring-primary/50')}
-                    >
-                        <NextImage
-                            src={imageSrc}
+                    {/* Use Image component from plugin-images - it handles everything automatically */}
+                    {/* Blog component only handles the design/styling */}
+                    <div className="relative aspect-[16/10] bg-dashboard-bg rounded-3xl overflow-hidden border border-dashboard-border group/image">
+                        <Image
+                            id={imageId}
                             alt={featuredImage?.alt || 'Featured image'}
                             fill
-                            className="object-cover"
-                            style={{
-                                filter: `brightness(${brightness}%) blur(${blur}px)`
-                            }}
+                            className="object-cover w-full h-full"
+                            editable={false} // Disable Image component's overlay - we'll use our own
+                            {...({
+                                brightness,
+                                blur,
+                                scale,
+                                positionX,
+                                positionY,
+                            } as any)}
                         />
-                        <div className="absolute inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-[2px] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                            <div className="flex items-center gap-2 px-4 py-2.5 bg-dashboard-card text-dashboard-text rounded-full shadow-2xl border border-dashboard-border pointer-events-auto">
-                                <ImageIcon size={16} className="text-primary" />
-                                <span className="text-sm font-bold">Edit Image</span>
+                        {/* Custom edit overlay that opens ImagePicker editor */}
+                        <button
+                            onClick={() => {
+                                setOpenEditorDirectly(true);
+                                setShowImagePicker(true);
+                            }}
+                            className="absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-300 bg-neutral-900/40 dark:bg-neutral-900/60 backdrop-blur-[2px]"
+                        >
+                            <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-xl">
+                                <ImageIcon size={14} className="text-primary" />
+                                <span className="text-[10px] font-bold uppercase tracking-widest">Edit</span>
                             </div>
-                        </div>
+                        </button>
+                    </div>
+                    <div className="mt-2 flex items-center gap-3">
+                        <button
+                            onClick={() => setShowImagePicker(true)}
+                            className="text-[10px] text-neutral-600 dark:text-neutral-400 hover:text-primary font-bold uppercase tracking-wider"
+                        >
+                            Change Image
+                        </button>
+                        <span className="text-[10px] text-neutral-400">•</span>
+                        <button
+                            onClick={() => onUpdate(undefined)}
+                            className="text-[10px] text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 font-bold uppercase tracking-wider"
+                        >
+                            Remove Image
+                        </button>
                     </div>
-                    <button
-                        onClick={() => onUpdate(undefined)}
-                        className="mt-2 text-[10px] text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 font-bold uppercase tracking-wider"
-                    >
-                        Remove Image
-                    </button>
                 </div>
             ) : (
                 <div
@@ -101,28 +245,67 @@ export function FeaturedMediaSection({
             )}
 
             {/* Image Picker Modal */}
-            {showImagePicker && (
-                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={() => setShowImagePicker(false)}>
+            {showImagePicker && mounted && createPortal(
+                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={() => {
+                    setShowImagePicker(false);
+                    setOpenEditorDirectly(false); // Reset flag when closing
+                }}>
                     <div className="bg-dashboard-card rounded-2xl w-full max-w-2xl mx-4 p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
                         <div className="flex items-center justify-between mb-6">
                             <h3 className="text-lg font-bold text-neutral-900 dark:text-neutral-100">
-                                Select Featured Image
+                                {openEditorDirectly ? 'Edit Featured Image' : 'Select Featured Image'}
                             </h3>
                             <button
-                                onClick={() => setShowImagePicker(false)}
+                                onClick={() => {
+                                    setShowImagePicker(false);
+                                    setOpenEditorDirectly(false); // Reset flag when closing
+                                }}
                                 className="p-2 hover:bg-dashboard-bg rounded-lg transition-colors"
                             >
                                 <X size={20} />
                             </button>
                         </div>
                         <ImagePicker
-                            value={featuredImage?.src}
+                            value={imageId}
                             onChange={handleImageChange}
+                            brightness={brightness}
+                            blur={blur}
+                            {...({
+                                scale,
+                                positionX,
+                                positionY,
+                            } as any)}
+                            onBrightnessChange={(val) => {
+                                // Update local state only - don't trigger save
+                                if (featuredImage) {
+                                    onUpdate({
+                                        ...featuredImage,
+                                        id: featuredImage.id || imageId, // Ensure id is preserved
+                                        brightness: val,
+                                    });
+                                }
+                            }}
+                            onBlurChange={(val) => {
+                                // Update local state only - don't trigger save
+                                if (featuredImage) {
+                                    onUpdate({
+                                        ...featuredImage,
+                                        id: featuredImage.id || imageId, // Ensure id is preserved
+                                        blur: val,
+                                    });
+                                }
+                            }}
+                            onEditorSave={handleEditorSave}
                             darkMode={false}
-                            showEffects={true}
+                            showEffects={true} // Enable effects so editor can be used
+                            aspectRatio="16/10" // Thumbnail aspect ratio for blog cards
+                            borderRadius="rounded-3xl"
+                            objectFit="cover" // Cover for thumbnails
+                            objectPosition="center"
                         />
                     </div>
-                </div>
+                </div>,
+                document.body
             )}
         </section>
     );

package/src/views/CanvasEditor/components/index.ts

@@ -15,3 +15,14 @@ export type { FeaturedMediaSectionProps, FeaturedImage } from './FeaturedMediaSe
 export { PrivacySettingsSection } from './PrivacySettingsSection';
 export type { PrivacySettingsSectionProps, PrivacySettings } from './PrivacySettingsSection';
 
+export { ErrorBanner } from './ErrorBanner';
+export type { ErrorBannerProps } from './ErrorBanner';
+
+export { EditorLibrary } from './EditorLibrary';
+export type { EditorLibraryProps } from './EditorLibrary';
+
+export { EditorCanvas } from './EditorCanvas';
+export type { EditorCanvasProps } from './EditorCanvas';
+
+export { EditorSidebar } from './EditorSidebar';
+export type { EditorSidebarProps } from './EditorSidebar';

package/src/views/CanvasEditor/hooks/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Canvas Editor Hooks
+ * Exports all custom hooks used in the Canvas Editor
+ */
+
+export { usePostLoader } from './usePostLoader';
+export { useHeroBlock } from './useHeroBlock';
+export { useRegisteredBlocks } from './useRegisteredBlocks';
+export { useKeyboardShortcuts } from './useKeyboardShortcuts';
+export { useUnsavedChanges } from './useUnsavedChanges';

package/src/views/CanvasEditor/hooks/useHeroBlock.ts

@@ -0,0 +1,103 @@
+import { useState, useEffect, useMemo } from 'react';
+import { blockRegistry } from '../../../registry/BlockRegistry';
+import type { Block } from '../../../types/block';
+import type { EditorState } from '../../../state/types';
+
+// Generate a unique block ID
+function generateBlockId(): string {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+export function useHeroBlock(state: EditorState, registeredBlocks: any[]) {
+    const [heroBlock, setHeroBlock] = useState<Block | null>(null);
+
+    // Get Hero block definition from registered blocks (REQUIRED)
+    const heroBlockDefinition = useMemo(() => {
+        return blockRegistry.get('hero');
+    }, [registeredBlocks]);
+
+    // Initialize hero block if Hero block definition exists
+    useEffect(() => {
+        if (heroBlockDefinition) {
+            // Get default data from block definition
+            const heroData = heroBlockDefinition.defaultData || {};
+
+            // Initialize hero block only if it doesn't exist yet
+            setHeroBlock(prev => {
+                if (!prev) {
+                    // First, try to find hero block in contentBlocks (from loaded post)
+                    const heroBlockFromContent = state.blocks.find(block => block.type === 'hero');
+                    
+                    if (heroBlockFromContent) {
+                        return heroBlockFromContent;
+                    }
+                    
+                    // If no hero block in contentBlocks, initialize from defaults
+                    // Hero image and featured image are completely independent - no syncing
+                    const initialData = {
+                        ...heroData,
+                        title: state.title || heroData.title || '',
+                        summary: state.metadata.excerpt || heroData.summary || '',
+                        image: heroData.image, // Use default image, not featured image
+                    };
+                    return {
+                        id: generateBlockId(),
+                        type: 'hero',
+                        data: initialData,
+                    };
+                }
+                // Keep existing hero block data - let the Edit component manage it
+                return prev;
+            });
+        } else {
+            setHeroBlock(null);
+        }
+    }, [heroBlockDefinition, state.blocks, state.title, state.metadata.excerpt]);
+
+    // Sync hero block with editor state when post is loaded (for existing posts)
+    // BUT: Never sync image from featured image to hero - they are independent
+    // Only sync title, summary, and category
+    useEffect(() => {
+        if (heroBlock && heroBlockDefinition && state.postId) {
+            // Only update if the hero block data doesn't match the editor state
+            // This prevents overwriting user edits with stale data
+            const currentTitle = (heroBlock.data as any)?.title || '';
+            const currentSummary = (heroBlock.data as any)?.summary || '';
+            const currentCategory = (heroBlock.data as any)?.category || '';
+
+            const stateTitle = state.title || '';
+            const stateSummary = state.metadata.excerpt || '';
+            const stateCategory = state.metadata.categories?.[0] || '';
+
+            // Check if hero block is out of sync with editor state
+            // NOTE: We do NOT sync image anymore - hero and featured image are independent
+            const titleMismatch = currentTitle !== stateTitle;
+            const summaryMismatch = currentSummary !== stateSummary;
+            const categoryMismatch = currentCategory !== stateCategory;
+
+            // Only update title, summary, and category - NEVER update image
+            // The hero block image should come from contentBlocks, not from featured image
+            if ((titleMismatch || summaryMismatch || categoryMismatch) && (stateTitle || stateSummary || stateCategory)) {
+                setHeroBlock({
+                    ...heroBlock,
+                    data: {
+                        ...heroBlock.data,
+                        title: stateTitle || (heroBlock.data as any)?.title || '',
+                        summary: stateSummary || (heroBlock.data as any)?.summary || '',
+                        // DO NOT sync image - keep hero block's own image
+                        category: stateCategory || (heroBlock.data as any)?.category || '',
+                    },
+                });
+            }
+        }
+    }, [state.postId, state.title, state.metadata.excerpt, state.metadata.categories, heroBlockDefinition, heroBlock]);
+
+    return {
+        heroBlock,
+        setHeroBlock,
+        heroBlockDefinition,
+    };
+}

package/src/views/CanvasEditor/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,142 @@
+import { useEffect } from 'react';
+import type { Block } from '../../../types/block';
+import type { EditorState } from '../../../state/types';
+
+// Generate a unique block ID
+function generateBlockId(): string {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+export function useKeyboardShortcuts(
+    state: EditorState,
+    dispatch: (action: any) => void,
+    canUndo: boolean,
+    canRedo: boolean,
+    undo: () => void,
+    redo: () => void
+) {
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            // Don't handle shortcuts if user is typing in an input/textarea/contentEditable
+            const target = e.target as HTMLElement;
+            const isEditableElement = target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.isContentEditable ||
+                target.closest('input, textarea, [contenteditable="true"]');
+
+            // Check for Ctrl+Z / Cmd+Z (Undo)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                if (!isEditableElement) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (canUndo) {
+                        undo();
+                    }
+                    return;
+                }
+            }
+
+            // Check for Ctrl+Shift+Z / Cmd+Shift+Z or Ctrl+Y / Cmd+Y (Redo)
+            if (((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') || ((e.ctrlKey || e.metaKey) && e.key === 'y')) {
+                if (!isEditableElement) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (canRedo) {
+                        redo();
+                    }
+                    return;
+                }
+            }
+
+            // Check for Ctrl+V (Windows/Linux) or Cmd+V (Mac)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+                // Don't paste if user is typing in an input/textarea/contentEditable
+                const target = e.target as HTMLElement;
+                const isEditableElement = target.tagName === 'INPUT' ||
+                    target.tagName === 'TEXTAREA' ||
+                    target.isContentEditable ||
+                    target.closest('input, textarea, [contenteditable="true"]');
+
+                if (isEditableElement) {
+                    return; // Let the browser handle paste in editable elements
+                }
+
+                // Check if there's a copied block
+                if (typeof window !== 'undefined') {
+                    const copiedBlockJson = localStorage.getItem('__BLOG_EDITOR_COPIED_BLOCK__');
+                    if (copiedBlockJson) {
+                        try {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            const copiedBlock = JSON.parse(copiedBlockJson) as Block;
+
+                            // Clone a block with new IDs (recursive for nested blocks)
+                            const cloneBlock = (blockToClone: Block): Block => {
+                                const cloned: Block = {
+                                    ...blockToClone,
+                                    id: generateBlockId(),
+                                    data: { ...blockToClone.data },
+                                    meta: blockToClone.meta ? { ...blockToClone.meta } : undefined,
+                                };
+
+                                // Handle children if they exist
+                                if (blockToClone.children) {
+                                    if (Array.isArray(blockToClone.children) && blockToClone.children.length > 0) {
+                                        if (typeof blockToClone.children[0] === 'object') {
+                                            cloned.children = (blockToClone.children as Block[]).map(cloneBlock);
+                                        } else {
+                                            // If children are IDs, find and clone the actual blocks
+                                            const allBlocks = state.blocks;
+                                            const childIds = blockToClone.children as string[];
+                                            const childBlocks = childIds
+                                                .map((childId: string) => allBlocks.find(b => b.id === childId))
+                                                .filter((b): b is Block => b !== undefined);
+                                            cloned.children = childBlocks.map(cloneBlock);
+                                        }
+                                    }
+                                }
+
+                                return cloned;
+                            };
+
+                            const pastedBlock = cloneBlock(copiedBlock);
+
+                            // Find where to paste - use hovered block or selected block, or paste at end
+                            const hoveredBlockId = (window as any).__BLOG_EDITOR_HOVERED_BLOCK_ID__;
+                            const targetBlockId = hoveredBlockId || state.selectedBlockId;
+
+                            let pasteIndex: number | undefined;
+                            if (targetBlockId) {
+                                const targetIndex = state.blocks.findIndex(b => b.id === targetBlockId);
+                                if (targetIndex !== -1) {
+                                    pasteIndex = targetIndex + 1;
+                                }
+                            }
+
+                            // Dispatch ADD_BLOCK with the full block structure
+                            dispatch({
+                                type: 'ADD_BLOCK',
+                                payload: {
+                                    block: pastedBlock,
+                                    index: pasteIndex,
+                                    containerId: undefined
+                                }
+                            });
+                        } catch (error) {
+                            console.error('Failed to paste block:', error);
+                        }
+                    }
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [state.blocks, state.selectedBlockId, dispatch, canUndo, canRedo, undo, redo]);
+}

package/src/views/CanvasEditor/hooks/usePostLoader.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { apiToBlogPost, type APIBlogDocument } from '../../../lib/mappers/apiMapper';
+import type { BlogPost } from '../../../types/post';
+
+export function usePostLoader(
+    postId: string | undefined,
+    currentPostId: string | null,
+    loadPost: (post: BlogPost) => void,
+    resetHeroBlock: () => void
+) {
+    const [isLoadingPost, setIsLoadingPost] = useState(false);
+
+    useEffect(() => {
+        if (postId && !currentPostId) {
+            const loadPostData = async () => {
+                try {
+                    setIsLoadingPost(true);
+                    // Reset hero block before loading new post so it gets re-initialized from the new post's blocks
+                    resetHeroBlock();
+                    const response = await fetch(`/api/plugin-blog/${postId}`);
+                    if (!response.ok) {
+                        throw new Error('Failed to load post');
+                    }
+                    const apiDoc: APIBlogDocument = await response.json();
+                    const blogPost = apiToBlogPost(apiDoc);
+                    loadPost(blogPost);
+                } catch (error) {
+                    console.error('Failed to load post:', error);
+                    alert('Failed to load post. Please try again.');
+                } finally {
+                    setIsLoadingPost(false);
+                }
+            };
+            loadPostData();
+        }
+    }, [postId, currentPostId, loadPost, resetHeroBlock]);
+
+    return { isLoadingPost };
+}