@jhits/plugin-blog 0.0.8 → 0.0.9

package/src/views/CanvasEditor/BlockWrapper.js

@@ -0,0 +1,276 @@
+/**
+ * Block Wrapper Component
+ * Provides hover controls (Delete, Move, Settings) for each block
+ */
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Plus, Trash2, ChevronUp, ChevronDown, Settings2, GripVertical, Copy } from 'lucide-react';
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { getChildBlocks, isContainerBlock } from '../../lib/utils/blockHelpers';
+import { useEditor } from '../../state/EditorContext';
+export function BlockWrapper({ block, onUpdate, onDelete, onMoveUp, onMoveDown, allBlocks = [], }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isControlsHovered, setIsControlsHovered] = useState(false);
+    const [showControls, setShowControls] = useState(false);
+    const [isSelectingText, setIsSelectingText] = useState(false);
+    const [showSettingsMenu, setShowSettingsMenu] = useState(false);
+    const hideTimeoutRef = useRef(null);
+    const settingsMenuRef = useRef(null);
+    const { helpers, state, dispatch } = useEditor();
+    const blockDefinition = blockRegistry.get(block.type);
+    // Check if this is a container block
+    const isContainer = isContainerBlock(block, blockRegistry);
+    // Get child blocks - if children are Block objects, use them directly
+    const childBlocks = isContainer && block.children && Array.isArray(block.children) && block.children.length > 0
+        ? (typeof block.children[0] === 'object'
+            ? block.children
+            : getChildBlocks(block, state.blocks))
+        : [];
+    // Handle delayed hide with timeout
+    useEffect(() => {
+        const shouldShow = isHovered || isControlsHovered;
+        if (shouldShow) {
+            // Clear any pending hide timeout
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+                hideTimeoutRef.current = null;
+            }
+            // Show immediately
+            setShowControls(true);
+        }
+        else {
+            // Delay hiding by 500ms
+            hideTimeoutRef.current = setTimeout(() => {
+                setShowControls(false);
+            }, 500);
+        }
+        return () => {
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+            }
+        };
+    }, [isHovered, isControlsHovered]);
+    if (!blockDefinition) {
+        return (_jsx("div", { className: "p-4 border border-red-300 dark:border-red-700 rounded-2xl bg-red-50 dark:bg-red-900/20", children: _jsxs("p", { className: "text-sm text-red-600 dark:text-red-400", children: ["Unknown block type: ", block.type] }) }));
+    }
+    const EditComponent = blockDefinition.components.Edit;
+    const handleDragStart = (e) => {
+        // Check if user is selecting text - if so, prevent dragging
+        const selection = window.getSelection();
+        if (selection && selection.toString().length > 0) {
+            e.preventDefault();
+            return;
+        }
+        // Prevent dragging if user was selecting text
+        if (isSelectingText) {
+            e.preventDefault();
+            return;
+        }
+        // Only allow dragging when the block is focused/selected (hovered)
+        if (!isHovered && !showControls) {
+            e.preventDefault();
+            return;
+        }
+        // Stop propagation to prevent parent containers from also handling the drag
+        e.stopPropagation();
+        console.log('[BlockWrapper] Drag Start:', {
+            blockId: block.id,
+            blockType: block.type,
+            blockData: block.data,
+            isContainer,
+            hasChildren: isContainer && childBlocks.length > 0,
+        });
+        e.dataTransfer.setData('block-id', block.id);
+        e.dataTransfer.setData('block-type', block.type);
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', ''); // Required for Firefox
+        // Store in a way that persists across components
+        if (typeof window !== 'undefined') {
+            window.__DRAGGED_BLOCK_ID__ = block.id;
+            console.log('[BlockWrapper] Stored global dragged block ID:', block.id);
+        }
+    };
+    // Track text selection
+    const handleMouseDown = (e) => {
+        // Check if clicking on an input, textarea, or contentEditable element
+        const target = e.target;
+        const isEditableElement = target.tagName === 'INPUT' ||
+            target.tagName === 'TEXTAREA' ||
+            target.isContentEditable ||
+            target.closest('input, textarea, [contenteditable="true"]');
+        if (isEditableElement) {
+            setIsSelectingText(true);
+            // Reset after mouse up
+            const handleMouseUp = () => {
+                setTimeout(() => {
+                    const selection = window.getSelection();
+                    if (!selection || selection.toString().length === 0) {
+                        setIsSelectingText(false);
+                    }
+                }, 100);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+    };
+    // For hero blocks, only show controls when hovering over the image container
+    const isHeroBlock = block.type === 'hero';
+    const wrapperRef = useRef(null);
+    const handleMouseMove = (e) => {
+        if (isHeroBlock) {
+            // For hero blocks, check if mouse is actually over the image container element
+            const target = e.target;
+            // Check if we're over the image container (using data attribute for more reliable detection)
+            const imageContainer = target.closest('[data-hero-image-container]');
+            // Check if we're over an Image component (from plugin-images)
+            const imageElement = target.closest('[data-image-id]');
+            // Check if we're directly over an img tag
+            const isImgTag = target.tagName === 'IMG';
+            const isOverImage = !!(imageContainer || imageElement || isImgTag);
+            setIsHovered(isOverImage);
+        }
+        else if (!isHeroBlock) {
+            setIsHovered(true);
+        }
+    };
+    const handleMouseEnter = (e) => {
+        if (!isHeroBlock) {
+            setIsHovered(true);
+        }
+        else {
+            // For hero blocks, check position on enter
+            handleMouseMove(e);
+        }
+    };
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+    // Close settings menu when clicking outside
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (settingsMenuRef.current && !settingsMenuRef.current.contains(event.target)) {
+                setShowSettingsMenu(false);
+            }
+        }
+        if (showSettingsMenu) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [showSettingsMenu]);
+    // Generate a unique block ID
+    const generateBlockId = () => {
+        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) => {
+        const cloned = Object.assign(Object.assign({}, blockToClone), { id: generateBlockId(), data: Object.assign({}, blockToClone.data), meta: blockToClone.meta ? Object.assign({}, blockToClone.meta) : undefined });
+        // Handle children if they exist
+        if (blockToClone.children) {
+            if (Array.isArray(blockToClone.children) && blockToClone.children.length > 0) {
+                // Check if children are Block objects or IDs
+                if (typeof blockToClone.children[0] === 'object') {
+                    cloned.children = blockToClone.children.map(cloneBlock);
+                }
+                else {
+                    // If children are IDs, we need to find and clone the actual blocks
+                    const childBlocks = getChildBlocks(blockToClone, allBlocks.length > 0 ? allBlocks : state.blocks);
+                    cloned.children = childBlocks.map(cloneBlock);
+                }
+            }
+        }
+        return cloned;
+    };
+    const handleCopy = () => {
+        const clonedBlock = cloneBlock(block);
+        // Store in localStorage for persistence across components
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('__BLOG_EDITOR_COPIED_BLOCK__', JSON.stringify(clonedBlock));
+        }
+        setShowSettingsMenu(false);
+    };
+    // Store block ID when hovering for paste context
+    useEffect(() => {
+        if (isHovered || showControls) {
+            if (typeof window !== 'undefined') {
+                window.__BLOG_EDITOR_HOVERED_BLOCK_ID__ = block.id;
+            }
+        }
+    }, [isHovered, showControls, block.id]);
+    return (_jsxs("div", { ref: wrapperRef, className: "group relative", onMouseEnter: handleMouseEnter, onMouseMove: isHeroBlock ? handleMouseMove : undefined, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, draggable: isHovered || showControls, onDragStart: handleDragStart, "data-block-wrapper": true, "data-block-id": block.id, children: [_jsxs("div", { className: `absolute -left-16 top-1/2 -translate-y-1/2 flex flex-col gap-2 transition-all duration-200 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'}`, onMouseEnter: () => setIsControlsHovered(true), onMouseLeave: () => setIsControlsHovered(false), children: [_jsx("button", { className: "p-2 text-neutral-500 dark:text-neutral-400 hover:text-primary dark:hover:text-primary bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-primary dark:hover:border-primary/50 transition-colors", title: "Add block above", children: _jsx(Plus, { size: 14 }) }), onMoveUp && (_jsx("button", { onClick: onMoveUp, className: "p-2 text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 transition-colors", title: "Move up", children: _jsx(ChevronUp, { size: 14 }) })), onMoveDown && (_jsx("button", { onClick: onMoveDown, className: "p-2 text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 transition-colors", title: "Move down", children: _jsx(ChevronDown, { size: 14 }) })), _jsx("button", { onClick: onDelete, className: "p-2 text-neutral-500 dark:text-neutral-400 hover:text-red-500 dark:hover:text-red-400 bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-red-500 dark:hover:border-red-500/50 transition-colors", title: "Delete block", children: _jsx(Trash2, { size: 14 }) })] }), _jsx("div", { className: `mb-2 transition-all relative ${isHovered || showControls || showSettingsMenu
+                    ? 'opacity-100 translate-y-0'
+                    : 'opacity-0 -translate-y-2 pointer-events-none'}`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 rounded-lg backdrop-blur-sm border bg-neutral-50/95 dark:bg-neutral-800/95 border-neutral-200 dark:border-neutral-800", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx(GripVertical, { size: 12, className: "cursor-grab active:cursor-grabbing shrink-0 text-neutral-400 dark:text-neutral-500" }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-wider shrink-0 text-neutral-500 dark:text-neutral-400", children: blockDefinition.name }), block.type === 'columns' && (() => {
+                                    const columnCount = block.data.columnCount;
+                                    const layout = block.data.layout;
+                                    // Determine number of columns
+                                    let numColumns;
+                                    if (columnCount !== undefined && columnCount > 0) {
+                                        numColumns = columnCount;
+                                    }
+                                    else if (layout) {
+                                        // Legacy layout system
+                                        const layoutMap = {
+                                            '50-50': 2,
+                                            '33-66': 2,
+                                            '66-33': 2,
+                                            '25-25-25-25': 4,
+                                            '25-75': 2,
+                                            '75-25': 2,
+                                        };
+                                        numColumns = layoutMap[layout] || 2;
+                                    }
+                                    else {
+                                        numColumns = 2;
+                                    }
+                                    // Get column widths
+                                    const storedWidths = block.data.columnWidths;
+                                    const columnWidths = storedWidths && storedWidths.length === numColumns
+                                        ? storedWidths
+                                        : Array(numColumns).fill(Math.floor(100 / numColumns));
+                                    return (_jsx("div", { className: "flex items-center gap-1.5 ml-4 flex-1 min-w-0", children: Array.from({ length: numColumns }).map((_, colIndex) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { type: "number", min: "10", max: "90", step: "1", value: columnWidths[colIndex] || 50, onChange: (e) => {
+                                                        const newWidth = parseInt(e.target.value) || 50;
+                                                        const newWidths = [...columnWidths];
+                                                        newWidths[colIndex] = Math.max(10, Math.min(90, newWidth));
+                                                        // Normalize remaining columns to sum to 100
+                                                        const remainingTotal = newWidths.reduce((sum, w, i) => i === colIndex ? sum : sum + w, 0);
+                                                        const remainingTarget = 100 - newWidths[colIndex];
+                                                        if (remainingTotal > 0 && remainingTarget > 0) {
+                                                            const scale = remainingTarget / remainingTotal;
+                                                            newWidths.forEach((w, i) => {
+                                                                if (i !== colIndex) {
+                                                                    newWidths[i] = Math.round(w * scale);
+                                                                }
+                                                            });
+                                                        }
+                                                        // Ensure sum is exactly 100
+                                                        const finalTotal = newWidths.reduce((sum, w) => sum + w, 0);
+                                                        if (finalTotal !== 100) {
+                                                            const diff = 100 - finalTotal;
+                                                            const lastIndex = newWidths.length - 1;
+                                                            newWidths[lastIndex] = Math.max(10, newWidths[lastIndex] + diff);
+                                                        }
+                                                        onUpdate(Object.assign(Object.assign({}, block.data), { columnWidths: newWidths, layout: undefined }));
+                                                    }, onClick: (e) => e.stopPropagation(), className: "w-12 text-[10px] font-bold bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 px-1.5 py-0.5 rounded outline-none focus:border-primary transition-all dark:text-neutral-100 text-center" }), _jsx("span", { className: "text-[9px] text-neutral-400 dark:text-neutral-500", children: "%" })] }, colIndex))) }));
+                                })()] }), _jsxs("div", { className: "relative shrink-0 z-20", ref: settingsMenuRef, children: [_jsx("button", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        setShowSettingsMenu(!showSettingsMenu);
+                                    }, className: "p-1 rounded transition-colors text-neutral-400 dark:text-neutral-500 hover:text-neutral-950 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 relative z-20", title: "Block settings", children: _jsx(Settings2, { size: 12 }) }), showSettingsMenu && (_jsx("div", { className: "absolute right-0 top-full mt-1 w-40 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl z-20 overflow-hidden", children: _jsxs("button", { onClick: (e) => {
+                                            e.stopPropagation();
+                                            handleCopy();
+                                        }, className: "w-full flex items-center gap-2 px-3 py-2 text-xs font-bold text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors", children: [_jsx(Copy, { size: 14 }), _jsx("span", { children: "Copy" })] }) }))] })] }) }), _jsx("div", { className: `relative rounded-xl border-2 transition-all ${showControls
+                    ? 'border-primary/60 dark:border-primary/40 bg-primary/5 dark:bg-primary/10'
+                    : 'border-neutral-200 dark:border-neutral-700 bg-transparent'}`, children: _jsx("div", { className: "relative", style: { userSelect: 'text' }, children: isContainer && (block.type === 'section' || block.type === 'columns') ? (_jsx(EditComponent, { block: block, onUpdate: onUpdate, onDelete: onDelete, isSelected: isHovered, childBlocks: childBlocks, onChildBlockAdd: (type, index, containerId) => {
+                            helpers.addBlock(type, index, containerId || block.id);
+                        }, onChildBlockUpdate: (id, data, containerId) => {
+                            helpers.updateBlock(id, data);
+                        }, onChildBlockDelete: (id, containerId) => {
+                            helpers.deleteBlock(id);
+                        }, onChildBlockMove: (id, newIndex, containerId) => {
+                            helpers.moveBlock(id, newIndex, containerId || block.id);
+                        } })) : (_jsx(EditComponent, { block: block, onUpdate: onUpdate, onDelete: onDelete, isSelected: isHovered })) }) })] }));
+}

package/src/views/CanvasEditor/CanvasEditorView.d.ts

@@ -0,0 +1,14 @@
+export interface CanvasEditorViewProps {
+    postId?: string;
+    siteId: string;
+    locale: string;
+    /** Enable dark mode for content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+}
+export declare function CanvasEditorView({ postId, darkMode, backgroundColors: propsBackgroundColors, siteId, locale }: CanvasEditorViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CanvasEditorView.d.ts.map

package/src/views/CanvasEditor/CanvasEditorView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasEditorView.d.ts","sourceRoot":"","sources":["CanvasEditorView.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAsTpI"}

package/src/views/CanvasEditor/CanvasEditorView.js

@@ -0,0 +1,209 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { useEditor } from '../../state/EditorContext';
+import { EditorHeader } from './EditorHeader';
+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';
+export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBackgroundColors, siteId, locale }) {
+    const { state, helpers, dispatch, darkMode: contextDarkMode, backgroundColors: contextBackgroundColors, canUndo, canRedo } = useEditor();
+    const effectiveDarkMode = darkMode !== undefined ? darkMode : contextDarkMode;
+    const effectiveBackgroundColors = propsBackgroundColors || contextBackgroundColors;
+    const [isSidebarOpen, setSidebarOpen] = useState(true);
+    const [isLibraryOpen, setLibraryOpen] = useState(true);
+    const [isPreviewMode, setIsPreviewMode] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    // 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));
+    // Track if we just loaded a post to prevent marking as dirty during cleanup
+    const justLoadedRef = useRef(false);
+    const previousIsLoadingRef = useRef(false);
+    const loadingCleanupTimerRef = useRef(null);
+    // Mark when post loading completes and ensure it stays clean after all effects
+    useEffect(() => {
+        // 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);
+            }
+            // 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
+                });
+            });
+        }
+        // Update ref
+        previousIsLoadingRef.current = isLoadingPost;
+        return () => {
+            if (loadingCleanupTimerRef.current) {
+                clearTimeout(loadingCleanupTimerRef.current);
+                loadingCleanupTimerRef.current = null;
+            }
+        };
+    }, [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(() => {
+        const handleHeroTitleUpdate = (e) => {
+            dispatch({ type: 'SET_TITLE', payload: e.detail });
+        };
+        window.addEventListener('hero-title-update', handleHeroTitleUpdate);
+        return () => window.removeEventListener('hero-title-update', handleHeroTitleUpdate);
+    }, [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');
+    // Handler to add block at the bottom when clicking (not dragging)
+    const handleAddBlockAtBottom = (blockType) => {
+        // Add at the end of content blocks (excluding hero)
+        helpers.addBlock(blockType, contentBlocks.length, undefined);
+    };
+    // Handle save
+    const handleSave = async (publish) => {
+        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));
+            }
+            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) {
+            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
+        }
+    };
+    // Handle hero block update
+    const handleHeroBlockUpdate = (data) => {
+        if (!heroBlock)
+            return;
+        setHeroBlock(Object.assign(Object.assign({}, heroBlock), { data: Object.assign(Object.assign({}, 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()] : []
+                }
+            });
+        }
+    };
+    // Handle hero block delete/reset
+    const handleHeroBlockDelete = () => {
+        if (!heroBlock || !heroBlockDefinition)
+            return;
+        const defaultData = heroBlockDefinition.defaultData || {};
+        setHeroBlock(Object.assign(Object.assign({}, heroBlock), { data: Object.assign({}, defaultData) }));
+    };
+    return (_jsx("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", children: _jsxs("main", { className: "flex flex-1 flex-col relative min-h-0", children: [_jsx(ErrorBanner, { error: saveError, onDismiss: () => setSaveError(null) }), _jsx(EditorHeader, { isLibraryOpen: isLibraryOpen, onLibraryToggle: () => setLibraryOpen(!isLibraryOpen), isPreviewMode: isPreviewMode, onPreviewToggle: () => setIsPreviewMode(!isPreviewMode), isSidebarOpen: isSidebarOpen, onSidebarToggle: () => setSidebarOpen(!isSidebarOpen), isSaving: isSaving, onSave: handleSave, onSaveError: (error) => {
+                        // Format error message for display
+                        if (error) {
+                            let formattedError = error;
+                            if (formattedError.includes('Missing required fields')) {
+                                formattedError = formattedError.replace('Missing required fields for publishing:', 'To publish, please fill in:');
+                            }
+                            setSaveError(formattedError);
+                        }
+                        else {
+                            setSaveError(null);
+                        }
+                    }, autoSaveEnabled: autoSaveEnabled, onAutoSaveToggle: setAutoSaveEnabled, isDirty: state.isDirty, autoSaveCountdown: countdown, autoSaveStatus: saveStatus }), _jsxs("div", { className: "flex flex-1 relative overflow-hidden min-h-0 flex-nowrap", children: [!isPreviewMode && (_jsx("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'}`, children: _jsx(EditorLibrary, { registeredBlocks: registeredBlocks, onAddBlock: handleAddBlockAtBottom }) })), _jsx(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) => dispatch({ type: 'SET_TITLE', payload: title }), onHeroBlockUpdate: handleHeroBlockUpdate, onHeroBlockDelete: handleHeroBlockDelete, 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) }), !isPreviewMode && (_jsx("aside", { 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'}`, children: _jsx(EditorSidebar, { slug: state.slug, seo: state.seo, metadata: state.metadata, heroBlock: heroBlock, status: state.status, onSEOUpdate: (seo) => dispatch({ type: 'SET_SEO', payload: seo }), onMetadataUpdate: (metadata) => dispatch({ type: 'SET_METADATA', payload: metadata }) }) }))] })] }) }));
+}

package/src/views/CanvasEditor/EditorBody.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Editor Body Component
+ * Primary root container for the editor canvas
+ * Acts as the main drop zone for blocks
+ */
+import { Block } from '../../types/block';
+export interface EditorBodyProps {
+    blocks: Block[];
+    onBlockAdd: (type: string, index: number, containerId?: string) => void;
+    onBlockUpdate: (id: string, data: Partial<Block['data']>) => void;
+    onBlockDelete: (id: string) => void;
+    onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
+    /** Enable dark mode for content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+}
+export declare function EditorBody({ blocks, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, darkMode, backgroundColors, }: EditorBodyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorBody.d.ts.map

package/src/views/CanvasEditor/EditorBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorBody.d.ts","sourceRoot":"","sources":["EditorBody.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,QAAe,EACf,gBAAgB,GACnB,EAAE,eAAe,2CAuhBjB"}