@jhits/plugin-blog 0.0.14 → 0.0.16

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.tsx

@@ -0,0 +1,337 @@
+'use client';
+
+import React, { 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';
+import type { Block } from '../../types/block';
+import type { SEOMetadata, PostMetadata } from '../../types/post';
+
+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 function CanvasEditorView({ postId, darkMode, backgroundColors: propsBackgroundColors, siteId, locale }: CanvasEditorViewProps) {
+    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<string | null>(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<boolean>(false);
+    const loadingCleanupTimerRef = useRef<NodeJS.Timeout | null>(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: CustomEvent) => {
+            dispatch({ type: 'SET_TITLE', payload: e.detail });
+        };
+        window.addEventListener('hero-title-update', handleHeroTitleUpdate as EventListener);
+        return () => window.removeEventListener('hero-title-update', handleHeroTitleUpdate as EventListener);
+    }, [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: string) => {
+        // Add at the end of content blocks (excluding hero)
+        helpers.addBlock(blockType, contentBlocks.length, undefined);
+    };
+
+    // 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));
+            }
+
+            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.';
+            }
+
+            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: 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()] : []
+                }
+            });
+        }
+    };
+
+    // 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 */}
+                <ErrorBanner error={saveError} onDismiss={() => setSaveError(null)} />
+
+                <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}
+                />
+
+                {/* 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'
+                                }`}
+                        >
+                            <EditorLibrary
+                                registeredBlocks={registeredBlocks}
+                                onAddBlock={handleAddBlockAtBottom}
+                            />
+                        </aside>
+                    )}
+
+                    {/* CENTER: THE WRITING CANVAS */}
+                    <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 && (
+                        <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'
+                                }`}
+                        >
+                            <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>
+            </main>
+        </div>
+    );
+}

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"}