@jhits/plugin-blog 0.0.18 → 0.0.20

package/dist/views/CanvasEditor/CanvasEditorView.js

@@ -1,341 +1,81 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } 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);
+import { EditorCanvas } from './components/EditorCanvas';
+import { JSONInspector } from './components/JSONInspector';
+import { useRegisteredBlocks } from './hooks/useRegisteredBlocks';
+import { useAutoSave } from '../../hooks/useAutoSave';
+import { usePostLoader } from './hooks/usePostLoader';
+import { RefreshCw } from 'lucide-react';
+export function CanvasEditorView({ postId, siteId, locale, initialData, availableLanguages = [], darkMode = false, backgroundColors, LayoutWrapper }) {
+    const { state, dispatch, helpers, availableLanguages: contextLanguages } = useEditor();
+    const registeredBlocks = useRegisteredBlocks();
     const [isLibraryOpen, setLibraryOpen] = useState(true);
+    const [isSidebarOpen, setSidebarOpen] = useState(true);
     const [isPreviewMode, setIsPreviewMode] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
     const [saveError, setSaveError] = useState(null);
-    // Language state for multilingual support
-    const [primaryLanguage, setPrimaryLanguage] = useState(locale || 'en');
-    const [isLoadingLanguage, setIsLoadingLanguage] = useState(true);
-    const [availableLanguages, setAvailableLanguages] = useState([locale || 'en']);
-    const [currentLanguage, setCurrentLanguage] = useState(locale || 'en');
-    // Get registered blocks
-    const registeredBlocks = useRegisteredBlocks();
-    // Hero block management
-    const { heroBlock, setHeroBlock, heroBlockDefinition } = useHeroBlock(state, registeredBlocks);
-    // Post loading - wait for language settings to be loaded first
-    const { isLoadingPost } = usePostLoader(postId, state.postId, (post) => {
-        helpers.loadPost(post);
-        // Don't reset current language when loading - preserve user's selection
-        // This allows switching to a new language even if no content exists yet
-        // Update available languages from post's languages object
-        if (post.languages && Object.keys(post.languages).length > 0) {
-            const langs = Object.keys(post.languages);
-            // Add current language to available if not already there
-            if (!langs.includes(currentLanguage)) {
-                langs.push(currentLanguage);
-            }
-            setAvailableLanguages(langs);
-        }
-        // 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), !isLoadingLanguage ? currentLanguage : undefined);
-    // Sync currentLanguage to editor state on mount so onSave always knows the active language
-    useEffect(() => {
-        dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: currentLanguage });
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
-    // Fetch primary language from settings (simulated - in real app would come from config)
+    // Ensure currentLanguage is always set from the locale prop
     useEffect(() => {
-        const fetchLanguageSettings = async () => {
-            try {
-                // Use the locale prop as the initial language
-                // Only set this once on initial load, don't override if user already selected a language
-                if (!currentLanguage || currentLanguage === 'en') {
-                    setPrimaryLanguage(locale || 'nl');
-                    if (!availableLanguages.includes(locale || 'nl')) {
-                        setAvailableLanguages([locale || 'nl']);
-                    }
-                    setCurrentLanguage(locale || 'nl');
-                    dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: locale || 'nl' });
-                }
-            }
-            catch (error) {
-                console.error('Failed to fetch language settings:', error);
-            }
-            finally {
-                setIsLoadingLanguage(false);
-            }
-        };
-        fetchLanguageSettings();
-    }, []); // Empty dependency - only run once on mount
-    // Handle language change
-    const handleLanguageChange = async (newLanguage) => {
-        // Save current content first if dirty
-        if (state.isDirty) {
-            const confirmed = window.confirm('You have unsaved changes. Do you want to save them first?');
-            if (confirmed) {
-                await handleSave();
-            }
-        }
-        setCurrentLanguage(newLanguage);
-        dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: newLanguage });
-        // Reload with new language
-        if (postId) {
-            try {
-                const response = await fetch(`/api/plugin-blog/${postId}?language=${newLanguage}`);
-                if (response && response.ok) {
-                    const apiDoc = await response.json();
-                    // Manually update state instead of going through loadPost
-                    // This avoids re-triggering the usePostLoader hook
-                    const blocks = apiDoc.contentBlocks || apiDoc.blocks || [];
-                    dispatch({ type: 'SET_TITLE', payload: apiDoc.title || '' });
-                    // Replace all blocks
-                    // First clear, then set new blocks via LOAD_POST-like behavior
-                    // We use a custom dispatch to update blocks without resetting postId
-                    dispatch({
-                        type: 'LOAD_POST',
-                        payload: {
-                            id: state.postId || apiDoc._id || apiDoc.id,
-                            title: apiDoc.title || '',
-                            slug: apiDoc.slug || state.slug,
-                            blocks: blocks,
-                            seo: apiDoc.seo || {},
-                            publication: {
-                                status: apiDoc.publicationData?.status === 'concept' ? 'draft' : (apiDoc.publicationData?.status || state.status),
-                                date: apiDoc.publicationData?.date,
-                                authorId: apiDoc.authorId,
-                            },
-                            metadata: {
-                                featuredImage: apiDoc.image ? {
-                                    id: apiDoc.image.id || apiDoc.image.src,
-                                    alt: apiDoc.image.alt,
-                                    isCustom: apiDoc.image.isCustom,
-                                } : state.metadata?.featuredImage,
-                                categories: apiDoc.categoryTags?.category ? [apiDoc.categoryTags.category] : [],
-                                tags: apiDoc.categoryTags?.tags || [],
-                                excerpt: apiDoc.summary || '',
-                                lang: newLanguage,
-                            },
-                            languages: apiDoc.languages,
-                            createdAt: apiDoc.createdAt || new Date().toISOString(),
-                            updatedAt: apiDoc.updatedAt || new Date().toISOString(),
-                        }
-                    });
-                    // Update available languages
-                    if (apiDoc.availableLanguages) {
-                        const langs = [...apiDoc.availableLanguages];
-                        if (!langs.includes(newLanguage)) {
-                            langs.push(newLanguage);
-                        }
-                        setAvailableLanguages(langs);
-                    }
-                    // Reset hero block so it re-initializes from new blocks
-                    setHeroBlock(null);
-                    setTimeout(() => {
-                        dispatch({ type: 'MARK_CLEAN' });
-                    }, 100);
-                }
-            }
-            catch (error) {
-                console.error('Failed to switch language:', error);
-            }
+        if (locale && !state.currentLanguage) {
+            dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: locale });
         }
-    };
-    // Handle adding a new language
-    const handleAddLanguage = async (newLanguage) => {
-        if (availableLanguages.includes(newLanguage))
-            return;
-        // Add the new language to the list
-        setAvailableLanguages([...availableLanguages, newLanguage]);
-        // Switch to the new language (it will copy from primary language)
-        await handleLanguageChange(newLanguage);
-    };
-    // 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,
+    }, [locale, state.currentLanguage, dispatch]);
+    // Initial post loading logic
+    const { isLoadingPost } = usePostLoader(postId, state.postId, helpers.loadPost, () => setHeroBlock(null), locale);
+    const { autoSaveEnabled, setAutoSaveEnabled, saveStatus, countdown } = useAutoSave(postId, state, async (data) => {
+        await helpers.save(heroBlock);
     });
-    // 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
+    // Initialize editor with post data (fallback if not using usePostLoader)
     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
+        if (initialData) {
+            const data = initialData.data || initialData;
+            if (data.blocks)
+                dispatch({ type: 'SET_BLOCKS', payload: data.blocks });
+            if (data.title)
+                dispatch({ type: 'SET_TITLE', payload: data.title });
+            if (data.slug)
+                dispatch({ type: 'SET_SLUG', payload: data.slug });
+            if (data.seo)
+                dispatch({ type: 'SET_SEO', payload: data.seo });
+            if (data.metadata)
+                dispatch({ type: 'SET_METADATA', payload: data.metadata });
+            if (data.status)
+                dispatch({ type: 'SET_STATUS', payload: data.status });
+            dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: locale });
         }
-    }, [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) => {
+    }, [initialData, locale, dispatch]);
+    const handleSave = async (publish = false) => {
         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);
+            await helpers.save(heroBlock, publish ? 'published' : 'draft');
         }
         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
+            setSaveError(error.message || 'Failed to save publication');
         }
-    };
-    // Handle hero block update
-    const handleHeroBlockUpdate = (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()] : []
-                }
-            });
+        finally {
+            setIsSaving(false);
         }
     };
-    // Handle hero block delete/reset
-    const handleHeroBlockDelete = () => {
-        if (!heroBlock || !heroBlockDefinition)
-            return;
-        const defaultData = heroBlockDefinition.defaultData || {};
-        setHeroBlock({
-            ...heroBlock,
-            data: { ...defaultData },
-        });
+    const handleHeroUpdate = (block) => {
+        setHeroBlock(block);
     };
-    return (_jsxs("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", children: [_jsx("header", { className: "overflow-visible flex-none shrink-0 z-10", children: _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, languages: availableLanguages, currentLanguage: currentLanguage, onLanguageChange: handleLanguageChange, onAddLanguage: handleAddLanguage }) }), _jsx(ErrorBanner, { error: saveError, onDismiss: () => setSaveError(null) }), _jsx("main", { className: "flex flex-1 flex-col relative min-h-0 overflow-hidden", children: _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 }) }) }))] }) })] }));
+    // Find hero block if it exists
+    const [heroBlock, setHeroBlock] = useState(null);
+    useEffect(() => {
+        const hero = state.blocks.find((b) => b.type === 'hero' || b.category === 'hero');
+        if (hero)
+            setHeroBlock(hero);
+    }, [state.blocks]);
+    const heroBlockDefinition = registeredBlocks.find(b => b.type === heroBlock?.type);
+    if (isLoadingPost) {
+        return (_jsx("div", { className: "absolute inset-0 w-full flex items-center justify-center bg-dashboard-bg/10 backdrop-blur-sm z-[100]", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(RefreshCw, { className: "size-10 text-primary animate-spin" }), _jsx("p", { className: "text-[10px] font-black uppercase tracking-[0.3em] text-primary", children: "Synchronizing_Node_Data..." })] }) }));
+    }
+    return (_jsxs("div", { className: "absolute inset-0 w-full flex flex-col overflow-hidden bg-dashboard-bg/10 backdrop-blur-sm", children: [_jsx(EditorHeader, { isLibraryOpen: isLibraryOpen, onLibraryToggle: () => setLibraryOpen(!isLibraryOpen), isPreviewMode: isPreviewMode, onPreviewToggle: () => setIsPreviewMode(!isPreviewMode), isSidebarOpen: isSidebarOpen, onSidebarToggle: () => setSidebarOpen(!isSidebarOpen), isSaving: isSaving, onSave: handleSave, onSaveError: setSaveError, autoSaveEnabled: autoSaveEnabled, onAutoSaveToggle: setAutoSaveEnabled, isDirty: state.isDirty, autoSaveCountdown: countdown, autoSaveStatus: saveStatus, languages: contextLanguages, currentLanguage: state.currentLanguage || locale, onLanguageChange: (lang) => helpers.switchLanguage(lang, postId), onAddLanguage: (lang) => helpers.switchLanguage(lang, postId) }), _jsx(ErrorBanner, { error: saveError, onDismiss: () => setSaveError(null) }), _jsxs("main", { className: "flex flex-1 relative overflow-hidden", children: [_jsx("aside", { className: `transition-all duration-500 bg-dashboard-sidebar/40 backdrop-blur-xl border-r border-dashboard-border/50 relative z-20 overflow-hidden ${isLibraryOpen ? 'w-72' : 'w-0'}`, children: _jsx("div", { className: "w-72 h-full opacity-100 transition-opacity duration-300", children: _jsx(EditorLibrary, { registeredBlocks: registeredBlocks, onAddBlock: (type) => helpers.addBlock(type) }) }) }), _jsx("div", { className: "flex-1 relative overflow-hidden bg-white/[0.01] flex flex-col", children: _jsx(EditorCanvas, { isPreviewMode: isPreviewMode, heroBlock: heroBlock, heroBlockDefinition: heroBlockDefinition, contentBlocks: state.blocks, title: state.title, siteId: siteId, locale: locale, darkMode: darkMode, backgroundColors: backgroundColors, featuredImage: state.metadata.featuredImage, LayoutWrapper: LayoutWrapper, onTitleChange: (title) => dispatch({ type: 'SET_TITLE', payload: title }), onHeroBlockUpdate: handleHeroUpdate, onHeroBlockDelete: () => setHeroBlock(null), onBlockAdd: helpers.addBlock, onBlockUpdate: helpers.updateBlock, onBlockDelete: helpers.deleteBlock, onBlockMove: helpers.moveBlock }) }), _jsx("aside", { className: `transition-all duration-500 bg-dashboard-sidebar/40 backdrop-blur-xl border-l border-dashboard-border/50 relative z-20 overflow-hidden ${isSidebarOpen ? 'w-80' : 'w-0'}`, children: _jsx("div", { className: "w-80 h-full opacity-100 transition-opacity duration-300", 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: (meta) => dispatch({ type: 'SET_METADATA', payload: meta }) }) }) })] }), _jsx(JSONInspector, { data: state })] }));
 }

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

@@ -6,17 +6,15 @@
 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 */
+    darkMode: boolean;
     backgroundColors?: {
         light: string;
         dark?: string;
     };
+    onBlockUpdate: (id: string, data: Partial<Block['data']>, containerId?: string) => void;
+    onBlockDelete: (id: string, containerId?: string) => void;
+    onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
+    onBlockAdd: (type: string, index: number, containerId?: string) => void;
 }
-export declare function EditorBody({ blocks, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, darkMode, backgroundColors, }: EditorBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorBody({ blocks, darkMode, backgroundColors, onBlockUpdate, onBlockDelete, onBlockMove, onBlockAdd, }: EditorBodyProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditorBody.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditorBody.d.ts","sourceRoot":"","sources":["../../../src/views/CanvasEditor/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"}
+{"version":3,"file":"EditorBody.d.ts","sourceRoot":"","sources":["../../../src/views/CanvasEditor/EditorBody.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAK1C,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxF,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3E;AAED,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,GACb,EAAE,eAAe,2CAuHjB"}