@jhits/plugin-blog 0.0.5 → 0.0.7

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -1,37 +1,15 @@
 'use client';
 
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import {
-    Globe,
-    Image as ImageIcon, Library,
-    LayoutTemplate, Type,
-    Box,
-    Search,
-    AlertTriangle, X
-} from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useEditor } from '../../state/EditorContext';
-import { EditorBody } from './EditorBody';
-import { BlockWrapper } from './BlockWrapper';
 import { EditorHeader } from './EditorHeader';
-import { blockRegistry } from '../../registry/BlockRegistry';
-import { BlockRenderer } from '../../lib/blocks/BlockRenderer';
-import { Block } from '../../types/block';
-import { apiToBlogPost, type APIBlogDocument } from '../../lib/mappers/apiMapper';
-import {
-    LibraryItem,
-    CustomBlockItem,
-    FeaturedMediaSection,
-    PrivacySettingsSection
-} from './components';
-
-// 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)}`;
-}
-
+import { ErrorBanner } from './components/ErrorBanner';
+import { EditorLibrary } from './components/EditorLibrary';
+import { EditorCanvas } from './components/EditorCanvas';
+import { EditorSidebar } from './components/EditorSidebar';
+import { usePostLoader, useHeroBlock, useRegisteredBlocks, useKeyboardShortcuts, useUnsavedChanges } from './hooks';
+import type { Block } from '../../types/block';
+import type { SEOMetadata, PostMetadata } from '../../types/post';
 
 export interface CanvasEditorViewProps {
     postId?: string;
@@ -53,190 +31,90 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
     const [isSidebarOpen, setSidebarOpen] = useState(true);
     const [isLibraryOpen, setLibraryOpen] = useState(true);
     const [isPreviewMode, setIsPreviewMode] = useState(false);
-    const [isLoadingPost, setIsLoadingPost] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
     const [saveError, setSaveError] = useState<string | null>(null);
-    const titleRef = useRef<HTMLTextAreaElement>(null);
-
-    // Load post when postId (slug) is provided
-    useEffect(() => {
-        if (postId && !state.postId) {
-            const loadPost = async () => {
-                try {
-                    setIsLoadingPost(true);
-                    const response = await fetch(`/api/plugin-blog/${postId}`);
-                    if (!response.ok) {
-                        throw new Error('Failed to load post');
-                    }
-                    const apiDoc: APIBlogDocument = await response.json();
-                    console.log('[CanvasEditorView] Loaded API document:', {
-                        title: apiDoc.title,
-                        slug: apiDoc.slug,
-                        contentBlocksCount: apiDoc.contentBlocks?.length || 0,
-                        contentBlocks: apiDoc.contentBlocks?.map((b: any) => ({ id: b.id, type: b.type })) || [],
-                        hasContent: !!apiDoc.contentBlocks,
-                        hasLegacyContent: !!apiDoc.content,
-                    });
-                    const blogPost = apiToBlogPost(apiDoc);
-                    console.log('[CanvasEditorView] Converted to BlogPost:', {
-                        id: blogPost.id,
-                        title: blogPost.title,
-                        blocksCount: blogPost.blocks.length,
-                        blocks: blogPost.blocks.map(b => ({ id: b.id, type: b.type })),
-                    });
-                    helpers.loadPost(blogPost);
-                } catch (error) {
-                    console.error('Failed to load post:', error);
-                    alert('Failed to load post. Please try again.');
-                } finally {
-                    setIsLoadingPost(false);
-                }
-            };
-            loadPost();
-        }
-    }, [postId, state.postId, helpers]);
 
-    // Reactive state for registered blocks (updates when registry changes)
-    const [registeredBlocks, setRegisteredBlocks] = useState(() => {
-        const initial = blockRegistry.getAll();
-        console.log('[CanvasEditorView] Initial blocks:', initial.length, initial.map(b => b.type));
-        return initial;
-    });
+    // Get registered blocks
+    const registeredBlocks = useRegisteredBlocks();
+
+    // Hero block management
+    const { heroBlock, setHeroBlock, heroBlockDefinition } = useHeroBlock(state, registeredBlocks);
+
+    // Post loading
+    const { isLoadingPost } = usePostLoader(
+        postId,
+        state.postId,
+        (post) => {
+            helpers.loadPost(post);
+            // After loading, ensure we're marked as clean
+            // Use setTimeout to ensure this runs after the reducer has processed LOAD_POST
+            setTimeout(() => {
+                dispatch({ type: 'MARK_CLEAN' });
+            }, 0);
+        },
+        () => setHeroBlock(null)
+    );
 
-    // Watch for registry changes and update state
+    // Track if we just loaded a post to prevent marking as dirty during cleanup
+    const justLoadedRef = useRef(false);
+    const previousIsLoadingRef = useRef<boolean>(false);
+    const loadingCleanupTimerRef = useRef<NodeJS.Timeout | null>(null);
+    
+    // Mark when post loading completes and ensure it stays clean after all effects
     useEffect(() => {
-        // Check immediately
-        const checkBlocks = () => {
-            const currentBlocks = blockRegistry.getAll();
-            const hasChanged = currentBlocks.length !== registeredBlocks.length ||
-                currentBlocks.some((b, i) => b.type !== registeredBlocks[i]?.type) ||
-                registeredBlocks.some((b, i) => b.type !== currentBlocks[i]?.type);
-
-            if (hasChanged) {
-                console.log('[CanvasEditorView] Blocks updated:', currentBlocks.length, currentBlocks.map(b => `${b.type}(${b.category})`));
-                setRegisteredBlocks([...currentBlocks]);
-            }
-        };
-
-        // Initial check
-        checkBlocks();
-
-        // Poll for registry changes (blocks are registered asynchronously in useEffect)
-        // Use a shorter interval initially, then longer
-        let pollCount = 0;
-        const interval = setInterval(() => {
-            pollCount++;
-            checkBlocks();
-            // Stop polling after 5 seconds (25 checks at 200ms)
-            if (pollCount > 25) {
-                clearInterval(interval);
+        // Detect when loading just finished (was loading, now not loading, and we have a postId)
+        const loadingJustFinished = previousIsLoadingRef.current && !isLoadingPost && state.postId;
+        
+        if (loadingJustFinished) {
+            justLoadedRef.current = true;
+            
+            // Clear any existing cleanup timer
+            if (loadingCleanupTimerRef.current) {
+                clearTimeout(loadingCleanupTimerRef.current);
             }
-        }, 200);
-
-        // Also check after delays to catch initial registrations
-        const timeouts = [
-            setTimeout(checkBlocks, 50),
-            setTimeout(checkBlocks, 100),
-            setTimeout(checkBlocks, 300),
-            setTimeout(checkBlocks, 500),
-            setTimeout(checkBlocks, 1000),
-        ];
-
-        return () => {
-            clearInterval(interval);
-            timeouts.forEach(clearTimeout);
-        };
-    }, [registeredBlocks.length]);
-
-
-    // Get Hero block definition from registered blocks (REQUIRED)
-    const heroBlockDefinition = useMemo(() => {
-        return blockRegistry.get('hero');
-    }, [registeredBlocks]);
-
-    // Hero block state - separate from content blocks (statically positioned at top)
-    const [heroBlock, setHeroBlock] = useState<Block | null>(null);
-
-    // 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) {
-                    // Initialize hero block from editor state (if editing existing post) or use defaults
-                    const initialData = {
-                        ...heroData,
-                        title: state.title || heroData.title || '',
-                        summary: state.metadata.excerpt || heroData.summary || '',
-                        image: state.metadata.featuredImage ? {
-                            src: state.metadata.featuredImage.src,
-                            alt: state.metadata.featuredImage.alt,
-                            brightness: state.metadata.featuredImage.brightness,
-                            blur: state.metadata.featuredImage.blur,
-                        } : heroData.image,
-                    };
-                    return {
-                        id: generateBlockId(),
-                        type: 'hero',
-                        data: initialData,
-                    };
-                }
-                // Keep existing hero block data - let the Edit component manage it
-                return prev;
+            
+            // Wait for all effects to complete, then ensure we're marked as clean
+            // Use multiple animation frames + setTimeout to ensure all effects have run
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    loadingCleanupTimerRef.current = setTimeout(() => {
+                        // Force mark as clean after loading - this ensures cleanup effects don't leave us dirty
+                        console.log('[CanvasEditorView] Post loading complete - ensuring clean state');
+                        dispatch({ type: 'MARK_CLEAN' });
+                        justLoadedRef.current = false;
+                        loadingCleanupTimerRef.current = null;
+                    }, 500); // Delay to ensure all effects complete
+                });
             });
-        } else {
-            setHeroBlock(null);
         }
-    }, [heroBlockDefinition]);
-
-    // Sync hero block with editor state when post is loaded (for existing posts)
-    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 currentImage = (heroBlock.data as any)?.image;
-            const currentCategory = (heroBlock.data as any)?.category || '';
-
-            const stateTitle = state.title || '';
-            const stateSummary = state.metadata.excerpt || '';
-            const stateImage = state.metadata.featuredImage;
-            const stateCategory = state.metadata.categories?.[0] || '';
-
-            // Check if hero block is out of sync with editor state
-            const titleMismatch = currentTitle !== stateTitle;
-            const summaryMismatch = currentSummary !== stateSummary;
-            const imageMismatch = !currentImage && stateImage ||
-                currentImage?.src !== stateImage?.src ||
-                currentImage?.alt !== stateImage?.alt ||
-                currentImage?.brightness !== stateImage?.brightness ||
-                currentImage?.blur !== stateImage?.blur;
-            const categoryMismatch = currentCategory !== stateCategory;
-
-            // Only update if there's a mismatch and the editor state has data (post was loaded)
-            if ((titleMismatch || summaryMismatch || imageMismatch || categoryMismatch) && (stateTitle || stateSummary || stateImage || stateCategory)) {
-                setHeroBlock({
-                    ...heroBlock,
-                    data: {
-                        ...heroBlock.data,
-                        title: stateTitle || (heroBlock.data as any)?.title || '',
-                        summary: stateSummary || (heroBlock.data as any)?.summary || '',
-                        image: stateImage ? {
-                            src: stateImage.src,
-                            alt: stateImage.alt,
-                            brightness: stateImage.brightness,
-                            blur: stateImage.blur,
-                        } : (heroBlock.data as any)?.image,
-                        category: stateCategory || (heroBlock.data as any)?.category || '',
-                    },
-                });
+        
+        // Update ref
+        previousIsLoadingRef.current = isLoadingPost;
+        
+        return () => {
+            if (loadingCleanupTimerRef.current) {
+                clearTimeout(loadingCleanupTimerRef.current);
+                loadingCleanupTimerRef.current = null;
             }
-        }
-    }, [state.postId, state.title, state.metadata.excerpt, state.metadata.featuredImage, state.metadata.categories, heroBlockDefinition]);
+        };
+    }, [isLoadingPost, state.postId, dispatch]);
+
+    // Keyboard shortcuts
+    useKeyboardShortcuts(state, dispatch, canUndo, canRedo, helpers.undo, helpers.redo);
+
+    // Unsaved changes warning and auto-save
+    const { autoSaveEnabled, setAutoSaveEnabled, countdown, saveStatus } = useUnsavedChanges({
+        state,
+        isDirty: state.isDirty,
+        onSave: async () => {
+            // Preserve current status: if already published, keep it published
+            // Otherwise save as draft
+            const shouldPublish = state.status === 'published';
+            await handleSave(shouldPublish);
+        },
+        heroBlock,
+        postId: state.postId,
+    });
 
     // Listen for hero title updates from HeroBlock (if it dispatches events)
     useEffect(() => {
@@ -248,192 +126,129 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
     }, [dispatch]);
 
     // Remove any hero blocks from the content blocks array
+    // Note: This effect will mark as dirty, but the loading cleanup effect will fix it
     useEffect(() => {
         const heroBlocksInContent = state.blocks.filter(b => b.type === 'hero');
         if (heroBlocksInContent.length > 0) {
             heroBlocksInContent.forEach(block => {
                 dispatch({ type: 'DELETE_BLOCK', payload: { id: block.id } });
             });
+            // Don't mark as clean here - let the loading cleanup effect handle it
+            // This ensures we wait for all effects to complete before marking clean
         }
     }, [state.blocks, dispatch]);
 
     // Filter out hero blocks from content blocks
     const contentBlocks = state.blocks.filter(b => b.type !== 'hero');
 
-    // Get all registered blocks from state (excluding Hero block from sidebar)
-    const allBlocks = registeredBlocks.filter(block => block.type !== 'hero');
-    const textBlocks = allBlocks.filter(block => block.category === 'text');
-    const customBlocks = allBlocks.filter(block => block.category === 'custom');
-    const mediaBlocks = allBlocks.filter(block => block.category === 'media');
-    const layoutBlocks = allBlocks.filter(block => block.category === 'layout');
-
     // Handler to add block at the bottom when clicking (not dragging)
     const handleAddBlockAtBottom = (blockType: string) => {
         // Add at the end of content blocks (excluding hero)
         helpers.addBlock(blockType, contentBlocks.length, undefined);
     };
 
-    // Handle Title Auto-resize
-    useEffect(() => {
-        if (titleRef.current) {
-            titleRef.current.style.height = 'auto';
-            titleRef.current.style.height = `${titleRef.current.scrollHeight}px`;
-        }
-    }, [state.title]);
-
-    // Keyboard shortcuts: Ctrl+V to paste, Ctrl+Z to undo, Ctrl+Shift+Z/Ctrl+Y to redo
-    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) {
-                        helpers.undo();
-                    }
-                    return;
-                }
+    // Handle save
+    const handleSave = async (publish?: boolean) => {
+        setIsSaving(true);
+        setSaveError(null);
+        try {
+            // Status should already be set in EditorHeader, but verify and log
+            console.log('[CanvasEditorView] onSave called with publish:', publish, 'current status:', state.status);
+
+            // Only change status if explicitly requested (publish is true or false)
+            // If publish is undefined, preserve the current status (used for autosave)
+            if (publish === true && state.status !== 'published') {
+                console.warn('[CanvasEditorView] Status mismatch! Setting to published...');
+                dispatch({ type: 'SET_STATUS', payload: 'published' });
+                await new Promise(resolve => setTimeout(resolve, 100));
+            } else if (publish === false && state.status !== 'draft' && state.status !== 'published') {
+                // Only set to draft if not already published (preserve published status)
+                // This prevents autosave from changing published posts back to draft
+                console.warn('[CanvasEditorView] Status mismatch! Setting to draft...');
+                dispatch({ type: 'SET_STATUS', payload: 'draft' });
+                await new Promise(resolve => setTimeout(resolve, 100));
             }
 
-            // 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) {
-                        helpers.redo();
-                    }
-                    return;
-                }
+            console.log('[CanvasEditorView] Final status before save:', state.status);
+            
+            // Pass hero block to save function so it can be included in the saved data
+            await helpers.save(heroBlock);
+            setIsSaving(false);
+        } catch (error: any) {
+            console.error('[CanvasEditorView] Save error:', error);
+            // Extract and format user-friendly error message
+            let errorMessage = error.message || 'Failed to save post';
+
+            // Make error messages more user-friendly
+            if (errorMessage.includes('Missing required fields')) {
+                errorMessage = errorMessage.replace('Missing required fields for publishing:', 'To publish, please fill in:');
+            } else if (errorMessage.includes('All required fields')) {
+                errorMessage = 'To publish, please fill in all required fields: summary, featured image, category, and content.';
+            } else if (errorMessage.includes('Unauthorized')) {
+                errorMessage = 'You are not authorized to save this post. Please log in again.';
+            } else if (errorMessage.includes('Failed to save')) {
+                errorMessage = 'Unable to save the post. Please check your connection and try again.';
             }
 
-            // 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;
-
-                            // Generate a unique block ID
-                            const generateBlockId = (): string => {
-                                if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-                                    return crypto.randomUUID();
-                                }
-                                return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                            };
-
-                            // 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;
-                                }
-                            }
+            setSaveError(errorMessage);
+            setIsSaving(false); // Always reset saving state on error
+            throw error; // Re-throw so EditorHeader can handle it
+        }
+    };
 
-                            // 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);
-                        }
-                    }
+    // Handle hero block update
+    const handleHeroBlockUpdate = (data: Partial<Block['data']>) => {
+        if (!heroBlock) return;
+        
+        setHeroBlock({
+            ...heroBlock,
+            data: { ...heroBlock.data, ...data },
+        });
+        
+        // Sync title to editor state
+        if (data.title !== undefined && typeof data.title === 'string') {
+            dispatch({ type: 'SET_TITLE', payload: data.title });
+        }
+        
+        // Sync summary to editor state metadata
+        if (data.summary !== undefined && typeof data.summary === 'string') {
+            dispatch({
+                type: 'SET_METADATA',
+                payload: { excerpt: data.summary }
+            });
+        }
+        
+        // Hero image and featured image are completely independent
+        // Do NOT sync hero image to featured image
+        // The featured image is a separate thumbnail that the client adjusts independently
+        
+        // Sync category to editor state metadata
+        if (data.category !== undefined && typeof data.category === 'string') {
+            dispatch({
+                type: 'SET_METADATA',
+                payload: {
+                    categories: data.category.trim() ? [data.category.trim()] : []
                 }
-            }
-        };
+            });
+        }
+    };
 
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [state.blocks, state.selectedBlockId, dispatch]);
+    // Handle hero block delete/reset
+    const handleHeroBlockDelete = () => {
+        if (!heroBlock || !heroBlockDefinition) return;
+        const defaultData = heroBlockDefinition.defaultData || {};
+        setHeroBlock({
+            ...heroBlock,
+            data: { ...defaultData },
+        });
+    };
 
     return (
         <div className="h-full rounded-[2.5rem] w-full bg-dashboard-card text-dashboard-text flex flex-col font-sans transition-colors duration-300 overflow-hidden relative">
-
             <main className="flex flex-1 flex-col relative min-h-0">
                 {/* Error Banner */}
-                {saveError && (
-                    <div className="bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-3 flex items-center justify-between">
-                        <div className="flex items-center gap-3 flex-1">
-                            <AlertTriangle className="text-red-600 dark:text-red-400 flex-shrink-0" size={20} />
-                            <p className="text-red-800 dark:text-red-300 text-sm font-medium">
-                                {saveError}
-                            </p>
-                        </div>
-                        <button
-                            onClick={() => setSaveError(null)}
-                            className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 transition-colors"
-                            aria-label="Dismiss error"
-                        >
-                            <X size={18} />
-                        </button>
-                    </div>
-                )}
+                <ErrorBanner error={saveError} onDismiss={() => setSaveError(null)} />
+
                 <EditorHeader
                     isLibraryOpen={isLibraryOpen}
                     onLibraryToggle={() => setLibraryOpen(!isLibraryOpen)}
@@ -442,48 +257,7 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
                     isSidebarOpen={isSidebarOpen}
                     onSidebarToggle={() => setSidebarOpen(!isSidebarOpen)}
                     isSaving={isSaving}
-                    onSave={async (publish?: boolean) => {
-                        setIsSaving(true);
-                        setSaveError(null);
-                        try {
-                            // Status should already be set in EditorHeader, but verify and log
-                            console.log('[CanvasEditorView] onSave called with publish:', publish, 'current status:', state.status);
-
-                            // Double-check status is set correctly before saving
-                            if (publish === true && state.status !== 'published') {
-                                console.warn('[CanvasEditorView] Status mismatch! Setting to published...');
-                                dispatch({ type: 'SET_STATUS', payload: 'published' });
-                                await new Promise(resolve => setTimeout(resolve, 100));
-                            } else if (publish === false && state.status !== 'draft') {
-                                console.warn('[CanvasEditorView] Status mismatch! Setting to draft...');
-                                dispatch({ type: 'SET_STATUS', payload: 'draft' });
-                                await new Promise(resolve => setTimeout(resolve, 100));
-                            }
-
-                            console.log('[CanvasEditorView] Final status before save:', state.status);
-                            await helpers.save();
-                            setIsSaving(false);
-                        } catch (error: any) {
-                            console.error('[CanvasEditorView] Save error:', error);
-                            // Extract and format user-friendly error message
-                            let errorMessage = error.message || 'Failed to save post';
-
-                            // Make error messages more user-friendly
-                            if (errorMessage.includes('Missing required fields')) {
-                                errorMessage = errorMessage.replace('Missing required fields for publishing:', 'To publish, please fill in:');
-                            } else if (errorMessage.includes('All required fields')) {
-                                errorMessage = 'To publish, please fill in all required fields: summary, featured image, category, and content.';
-                            } else if (errorMessage.includes('Unauthorized')) {
-                                errorMessage = 'You are not authorized to save this post. Please log in again.';
-                            } else if (errorMessage.includes('Failed to save')) {
-                                errorMessage = 'Unable to save the post. Please check your connection and try again.';
-                            }
-
-                            setSaveError(errorMessage);
-                            setIsSaving(false); // Always reset saving state on error
-                            throw error; // Re-throw so EditorHeader can handle it
-                        }
-                    }}
+                    onSave={handleSave}
                     onSaveError={(error) => {
                         // Format error message for display
                         if (error) {
@@ -496,258 +270,48 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
                             setSaveError(null);
                         }
                     }}
+                    autoSaveEnabled={autoSaveEnabled}
+                    onAutoSaveToggle={setAutoSaveEnabled}
+                    isDirty={state.isDirty}
+                    autoSaveCountdown={countdown}
+                    autoSaveStatus={saveStatus}
                 />
 
                 {/* Editor Content Wrapper */}
                 <div className="flex flex-1 relative overflow-hidden min-h-0 flex-nowrap">
-
                     {/* LEFT SIDEBAR: COMPONENT LIBRARY */}
                     {!isPreviewMode && (
                         <aside
                             className={`transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] border-r border-dashboard-border bg-dashboard-sidebar overflow-y-auto overflow-x-hidden h-full ${isLibraryOpen ? 'w-72' : 'w-0 opacity-0 pointer-events-none'
                                 }`}
                         >
-                            <div className="p-6 w-72 min-w-0 max-w-full">
-                                {/* Text Blocks */}
-                                {textBlocks.length > 0 && (
-                                    <div className="mb-10">
-                                        <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Text</h3>
-                                        <div className="grid grid-cols-2 gap-3">
-                                            {textBlocks.map((block) => {
-                                                const IconComponent = block.icon || block.components.Icon || Type;
-                                                return (
-                                                    <LibraryItem
-                                                        key={block.type}
-                                                        icon={<IconComponent size={16} />}
-                                                        label={block.name}
-                                                        blockType={block.type}
-                                                        description={block.description}
-                                                        onAddBlock={handleAddBlockAtBottom}
-                                                    />
-                                                );
-                                            })}
-                                        </div>
-                                    </div>
-                                )}
-
-                                {/* Media Blocks */}
-                                {mediaBlocks.length > 0 && (
-                                    <div className="mb-10">
-                                        <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Media</h3>
-                                        <div className="grid grid-cols-2 gap-3">
-                                            {mediaBlocks.map((block) => {
-                                                const IconComponent = block.icon || block.components.Icon || ImageIcon;
-                                                return (
-                                                    <LibraryItem
-                                                        key={block.type}
-                                                        icon={<IconComponent size={16} />}
-                                                        label={block.name}
-                                                        blockType={block.type}
-                                                        description={block.description}
-                                                        onAddBlock={handleAddBlockAtBottom}
-                                                    />
-                                                );
-                                            })}
-                                        </div>
-                                    </div>
-                                )}
-
-                                {/* Layout Blocks */}
-                                {layoutBlocks.length > 0 && (
-                                    <div className="mb-10">
-                                        <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Layout</h3>
-                                        <div className="grid grid-cols-2 gap-3">
-                                            {layoutBlocks.map((block) => {
-                                                const IconComponent = block.icon || block.components.Icon || LayoutTemplate;
-                                                return (
-                                                    <LibraryItem
-                                                        key={block.type}
-                                                        icon={<IconComponent size={16} />}
-                                                        label={block.name}
-                                                        blockType={block.type}
-                                                        description={block.description}
-                                                        onAddBlock={handleAddBlockAtBottom}
-                                                    />
-                                                );
-                                            })}
-                                        </div>
-                                    </div>
-                                )}
-
-                                {/* Custom Blocks */}
-                                {customBlocks.length > 0 && (
-                                    <div>
-                                        <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Custom Blocks</h3>
-                                        <div className="space-y-3">
-                                            {customBlocks.map((block) => {
-                                                const IconComponent = block.icon || block.components.Icon || Box;
-                                                return (
-                                                    <CustomBlockItem
-                                                        key={block.type}
-                                                        blockType={block.type}
-                                                        name={block.name}
-                                                        description={block.description}
-                                                        icon={<IconComponent size={14} />}
-                                                        onAddBlock={handleAddBlockAtBottom}
-                                                    />
-                                                );
-                                            })}
-                                        </div>
-                                    </div>
-                                )}
-
-                                {/* Empty State */}
-                                {allBlocks.length === 0 && (
-                                    <div className="text-center py-12">
-                                        <Library size={32} className="mx-auto text-neutral-300 dark:text-neutral-700 mb-4" />
-                                        <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                                            No blocks registered yet.
-                                        </p>
-                                    </div>
-                                )}
-                            </div>
+                            <EditorLibrary
+                                registeredBlocks={registeredBlocks}
+                                onAddBlock={handleAddBlockAtBottom}
+                            />
                         </aside>
                     )}
 
                     {/* CENTER: THE WRITING CANVAS */}
-                    <div
-                        className="flex-1 overflow-y-auto overflow-x-hidden pb-40 px-6 custom-scrollbar selection:bg-primary/20 dark:selection:bg-primary/30 min-h-0"
-                        style={{
-                            backgroundColor: effectiveBackgroundColors
-                                ? (effectiveDarkMode && effectiveBackgroundColors.dark
-                                    ? effectiveBackgroundColors.dark
-                                    : effectiveBackgroundColors.light)
-                                : undefined,
-                        }}
-                    >
-                        <div className={`mx-auto transition-all duration-500 max-w-7xl w-full`}>
-                            {/* Hero Block - Only show editable version when NOT in preview mode */}
-                            {!isPreviewMode && heroBlockDefinition && heroBlock && (
-                                <div className="mb-12">
-                                    <BlockWrapper
-                                        block={heroBlock}
-                                        onUpdate={(data) => {
-                                            setHeroBlock({
-                                                ...heroBlock,
-                                                data: { ...heroBlock.data, ...data },
-                                            });
-                                            // Sync title to editor state
-                                            if (data.title !== undefined && typeof data.title === 'string') {
-                                                dispatch({ type: 'SET_TITLE', payload: data.title });
-                                            }
-                                            // Sync summary to editor state metadata
-                                            if (data.summary !== undefined && typeof data.summary === 'string') {
-                                                dispatch({
-                                                    type: 'SET_METADATA',
-                                                    payload: { excerpt: data.summary }
-                                                });
-                                            }
-                                            // Sync image to editor state metadata
-                                            if (data.image !== undefined) {
-                                                const imageData = data.image as any;
-                                                dispatch({
-                                                    type: 'SET_METADATA',
-                                                    payload: {
-                                                        featuredImage: imageData ? {
-                                                            src: imageData.src || '',
-                                                            alt: imageData.alt || '',
-                                                            brightness: imageData.brightness ?? 100,
-                                                            blur: imageData.blur ?? 0,
-                                                        } : undefined
-                                                    }
-                                                });
-                                            }
-                                            // Sync category to editor state metadata
-                                            if (data.category !== undefined && typeof data.category === 'string') {
-                                                dispatch({
-                                                    type: 'SET_METADATA',
-                                                    payload: {
-                                                        categories: data.category.trim() ? [data.category.trim()] : []
-                                                    }
-                                                });
-                                            }
-                                        }}
-                                        onDelete={() => {
-                                            const defaultData = heroBlockDefinition.defaultData || {};
-                                            setHeroBlock({
-                                                ...heroBlock,
-                                                data: { ...defaultData },
-                                            });
-                                        }}
-                                        onMoveUp={() => { }}
-                                        onMoveDown={() => { }}
-                                        allBlocks={[heroBlock]}
-                                    />
-                                </div>
-                            )}
-
-                            {isPreviewMode ? (
-                                <div className="space-y-8">
-                                    {heroBlockDefinition && heroBlock && (
-                                        <BlockRenderer
-                                            block={heroBlock}
-                                            context={{ siteId, locale }}
-                                        />
-                                    )}
-
-                                    {!heroBlockDefinition && state.title && (
-                                        <h1 className="text-5xl font-serif font-medium text-neutral-950 dark:text-white leading-tight mb-12">
-                                            {state.title}
-                                        </h1>
-                                    )}
-
-                                    {contentBlocks.length > 0 ? (
-                                        <div className="space-y-8">
-                                            {contentBlocks.map((block) => (
-                                                <BlockRenderer
-                                                    key={block.id}
-                                                    block={block}
-                                                    context={{ siteId, locale }}
-                                                />
-                                            ))}
-                                        </div>
-                                    ) : (
-                                        <div className="text-center py-20 text-neutral-400 dark:text-neutral-500">
-                                            <p className="text-sm">No content blocks yet. Switch to Edit mode to add blocks.</p>
-                                        </div>
-                                    )}
-                                </div>
-                            ) : (
-                                <>
-                                    {!heroBlockDefinition && (
-                                        <div className="mb-12">
-                                            <textarea
-                                                ref={titleRef}
-                                                rows={1}
-                                                value={state.title}
-                                                onChange={(e) => dispatch({ type: 'SET_TITLE', payload: e.target.value })}
-                                                placeholder="The title of your story..."
-                                                className="w-full bg-transparent border-none outline-none text-5xl font-serif font-medium placeholder:text-neutral-500 dark:placeholder:text-neutral-500 resize-none leading-tight transition-colors duration-300 text-neutral-950 dark:text-white"
-                                            />
-                                        </div>
-                                    )}
-
-                                    <EditorBody
-                                        blocks={contentBlocks}
-                                        darkMode={effectiveDarkMode}
-                                        backgroundColors={effectiveBackgroundColors}
-                                        onBlockAdd={(type, index, containerId) => {
-                                            helpers.addBlock(type, index, containerId);
-                                        }}
-                                        onBlockUpdate={(id, data) => {
-                                            helpers.updateBlock(id, data);
-                                        }}
-                                        onBlockDelete={(id) => {
-                                            helpers.deleteBlock(id);
-                                        }}
-                                        onBlockMove={(id, newIndex, containerId) => {
-                                            helpers.moveBlock(id, newIndex, containerId);
-                                        }}
-                                    />
-                                </>
-                            )}
-                        </div>
-                    </div>
+                    <EditorCanvas
+                        isPreviewMode={isPreviewMode}
+                        heroBlock={heroBlock}
+                        heroBlockDefinition={heroBlockDefinition}
+                        contentBlocks={contentBlocks}
+                        title={state.title}
+                        siteId={siteId}
+                        locale={locale}
+                        darkMode={effectiveDarkMode}
+                        backgroundColors={effectiveBackgroundColors}
+                        featuredImage={state.metadata.featuredImage}
+                        onTitleChange={(title: string) => dispatch({ type: 'SET_TITLE', payload: title })}
+                        onHeroBlockUpdate={handleHeroBlockUpdate}
+                        onHeroBlockDelete={handleHeroBlockDelete}
+                        onBlockAdd={(type: string, index: number, containerId?: string) => helpers.addBlock(type, index, containerId)}
+                        onBlockUpdate={(id: string, data: Partial<Block['data']>) => helpers.updateBlock(id, data)}
+                        onBlockDelete={(id: string) => helpers.deleteBlock(id)}
+                        onBlockMove={(id: string, newIndex: number, containerId?: string) => helpers.moveBlock(id, newIndex, containerId)}
+                    />
 
                     {/* RIGHT SIDEBAR: THE "DESK" (SETTINGS) */}
                     {!isPreviewMode && (
@@ -755,158 +319,15 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
                             className={`transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] border-l border-dashboard-border bg-dashboard-sidebar overflow-y-auto overflow-x-hidden h-full ${isSidebarOpen ? 'w-80' : 'w-0 opacity-0 pointer-events-none'
                                 }`}
                         >
-                            <div className="p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full">
-                                {/* SEO Section */}
-                                <section>
-                                    <div className="flex items-center gap-3 mb-6">
-                                        <Search size={14} className="text-neutral-500 dark:text-neutral-400" />
-                                        <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
-                                            SEO Settings
-                                        </label>
-                                    </div>
-                                    <div className="space-y-4">
-                                        <div>
-                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                                                SEO Title
-                                            </label>
-                                            <input
-                                                type="text"
-                                                value={state.seo.title || ''}
-                                                onChange={(e) => dispatch({ type: 'SET_SEO', payload: { title: e.target.value } })}
-                                                placeholder="SEO title (defaults to post title)"
-                                                className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
-                                            />
-                                            <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
-                                                {state.seo.title?.length || 0} / 60 characters
-                                            </p>
-                                        </div>
-                                        <div>
-                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                                                Meta Description
-                                            </label>
-                                            <textarea
-                                                value={state.seo.description || ''}
-                                                onChange={(e) => dispatch({ type: 'SET_SEO', payload: { description: e.target.value } })}
-                                                placeholder="Brief description for search engines"
-                                                rows={3}
-                                                className="w-full px-3 py-2 text-xs bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg outline-none focus:border-primary transition-all dark:text-neutral-100 resize-none"
-                                            />
-                                            <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
-                                                {state.seo.description?.length || 0} / 160 characters
-                                            </p>
-                                        </div>
-                                        <div>
-                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                                                Keywords (comma-separated)
-                                            </label>
-                                            <input
-                                                type="text"
-                                                value={state.seo.keywords?.join(', ') || ''}
-                                                onChange={(e) => {
-                                                    const keywords = e.target.value.split(',').map(k => k.trim()).filter(k => k);
-                                                    dispatch({ type: 'SET_SEO', payload: { keywords } });
-                                                }}
-                                                placeholder="keyword1, keyword2, keyword3"
-                                                className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
-                                            />
-                                        </div>
-                                        <div>
-                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                                                Open Graph Image URL
-                                            </label>
-                                            <input
-                                                type="url"
-                                                value={state.seo.ogImage || ''}
-                                                onChange={(e) => dispatch({ type: 'SET_SEO', payload: { ogImage: e.target.value } })}
-                                                placeholder="https://example.com/image.jpg"
-                                                className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
-                                            />
-                                        </div>
-                                    </div>
-                                </section>
-
-                                {/* Publishing Section */}
-                                <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
-                                    <div className="flex items-center gap-3 mb-6">
-                                        <Globe size={14} className="text-neutral-500 dark:text-neutral-400" />
-                                        <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
-                                            Publishing
-                                        </label>
-                                    </div>
-                                    <div className="bg-dashboard-bg p-5 rounded-2xl border border-dashboard-border">
-                                        <span className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-3">Slug / Permalink</span>
-                                        <div className="text-xs font-mono break-all text-neutral-600 dark:text-neutral-400 leading-relaxed">
-                                            /blog/<span className="text-neutral-950 dark:text-white bg-amber-50 dark:bg-amber-900/20 px-1 rounded">{state.slug || 'untitled-post'}</span>
-                                        </div>
-                                    </div>
-                                </section>
-
-                                {/* Category Section */}
-                                <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
-                                    <div className="flex items-center gap-3 mb-6">
-                                        <Box size={14} className="text-neutral-500 dark:text-neutral-400" />
-                                        <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
-                                            Category
-                                        </label>
-                                    </div>
-                                    <div className="space-y-4">
-                                        <div>
-                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                                                Category
-                                            </label>
-                                            <input
-                                                type="text"
-                                                value={state.metadata.categories?.[0] || ''}
-                                                onChange={(e) => {
-                                                    const category = e.target.value.trim();
-                                                    dispatch({
-                                                        type: 'SET_METADATA',
-                                                        payload: {
-                                                            categories: category ? [category] : []
-                                                        }
-                                                    });
-                                                }}
-                                                placeholder="Enter category (required for publishing)"
-                                                className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
-                                            />
-                                            <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
-                                                {state.metadata.categories?.[0] ? 'Category set' : 'No category set'}
-                                            </p>
-                                        </div>
-                                    </div>
-                                </section>
-
-                                {/* Featured Media Section */}
-                                <FeaturedMediaSection
-                                    featuredImage={state.metadata.featuredImage}
-                                    onUpdate={(image) => dispatch({ type: 'SET_METADATA', payload: { featuredImage: image } })}
-                                />
-
-                                {/* Privacy Settings Section */}
-                                <PrivacySettingsSection
-                                    privacy={state.metadata.privacy}
-                                    onUpdate={(privacy) => dispatch({ type: 'SET_METADATA', payload: { privacy } })}
-                                />
-
-                                {/* Post Status Section */}
-                                <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
-                                    <div className="flex items-center justify-between mb-4">
-                                        <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
-                                            Post Status
-                                        </label>
-                                        <span className="text-[10px] font-black text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2.5 py-1 rounded-full uppercase tracking-tighter">
-                                            {state.status}
-                                        </span>
-                                    </div>
-                                    <p className="text-[11px] text-neutral-500 dark:text-neutral-400 leading-relaxed italic">
-                                        {state.status === 'draft'
-                                            ? 'This post is private. Only you can see it until you hit publish.'
-                                            : state.status === 'published'
-                                                ? 'This post is live and visible to everyone.'
-                                                : 'This post is scheduled for publication.'}
-                                    </p>
-                                </section>
-                            </div>
+                            <EditorSidebar
+                                slug={state.slug}
+                                seo={state.seo}
+                                metadata={state.metadata}
+                                heroBlock={heroBlock}
+                                status={state.status}
+                                onSEOUpdate={(seo: Partial<SEOMetadata>) => dispatch({ type: 'SET_SEO', payload: seo })}
+                                onMetadataUpdate={(metadata: Partial<PostMetadata>) => dispatch({ type: 'SET_METADATA', payload: metadata })}
+                            />
                         </aside>
                     )}
                 </div>
@@ -914,4 +335,3 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
         </div>
     );
 }
-