@jhits/plugin-blog 0.0.1

package/src/views/CanvasEditor/EditorBody.tsx

@@ -0,0 +1,475 @@
+/**
+ * Editor Body Component
+ * Primary root container for the editor canvas
+ * Acts as the main drop zone for blocks
+ */
+
+'use client';
+
+import React, { useState, useRef, Fragment, useEffect } from 'react';
+import { Plus } from 'lucide-react';
+import { Block } from '../../types/block';
+import { BlockWrapper } from './BlockWrapper';
+
+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 function EditorBody({
+    blocks,
+    onBlockAdd,
+    onBlockUpdate,
+    onBlockDelete,
+    onBlockMove,
+    darkMode = true,
+    backgroundColors,
+}: EditorBodyProps) {
+    // Debug: Log darkMode value
+    useEffect(() => {
+        console.log('[EditorBody] darkMode:', darkMode);
+    }, [darkMode]);
+
+    const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [draggedBlockId, setDraggedBlockId] = useState<string | null>(null);
+    const [dropIndicatorPosition, setDropIndicatorPosition] = useState<{ top: number; left: number; width: number } | null>(null);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    // Listen for clear-drop-indicator events from nested containers
+    React.useEffect(() => {
+        const handleClearIndicator = () => {
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+        };
+
+        const container = containerRef.current;
+        if (container) {
+            container.addEventListener('clear-drop-indicator', handleClearIndicator);
+            return () => {
+                container.removeEventListener('clear-drop-indicator', handleClearIndicator);
+            };
+        }
+    }, []);
+
+    // Global drag end handler - clear all indicators when drag ends
+    React.useEffect(() => {
+        const handleGlobalDragEnd = () => {
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+            setIsDragging(false);
+            setDraggedBlockId(null);
+        };
+
+        document.addEventListener('dragend', handleGlobalDragEnd);
+        return () => {
+            document.removeEventListener('dragend', handleGlobalDragEnd);
+        };
+    }, []);
+    // Store refs for all blocks - use callback refs to avoid hook violations
+    const blockRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
+
+    const setBlockRef = (blockId: string) => (el: HTMLDivElement | null) => {
+        if (el) {
+            blockRefs.current.set(blockId, el);
+        } else {
+            blockRefs.current.delete(blockId);
+        }
+    };
+
+    const handleDragStart = (e: React.DragEvent) => {
+        // This is called when dragging starts from the container
+        // The actual block drag start is handled in BlockWrapper
+        setIsDragging(true);
+    };
+
+    const handleDragOver = (e: React.DragEvent, index: number, element?: HTMLElement) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Check if we're dragging over a nested container - if so, clear our indicator
+        const target = e.target as HTMLElement;
+        const nestedContainer = target.closest('[data-layout-container]');
+        if (nestedContainer && nestedContainer !== containerRef.current) {
+            // We're over a nested container, clear our indicator
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+            return;
+        }
+
+        setDragOverIndex(index);
+
+        // Calculate position for absolute drop indicator using mouse position
+        const container = containerRef.current;
+        if (container) {
+            requestAnimationFrame(() => {
+                // Double-check refs are still valid inside RAF callback
+                if (!containerRef.current) return;
+
+                const containerRect = containerRef.current.getBoundingClientRect();
+                // Use mouse Y position relative to container for accurate positioning
+                const mouseY = e.clientY;
+                const relativeTop = mouseY - containerRect.top;
+
+                // Determine if we should show above or below the element
+                let finalTop = relativeTop;
+                if (element) {
+                    const elementRect = element.getBoundingClientRect();
+                    const elementTop = elementRect.top - containerRect.top;
+                    const elementCenter = elementTop + elementRect.height / 2;
+
+                    // If mouse is in upper half of element, show above; otherwise show below
+                    if (relativeTop < elementCenter) {
+                        finalTop = elementTop;
+                    } else {
+                        finalTop = elementTop + elementRect.height;
+                    }
+                }
+
+                // Calculate width - use container width minus padding (32px on each side)
+                const padding = 32;
+                const width = containerRect.width - (padding * 2);
+
+                setDropIndicatorPosition({
+                    top: finalTop,
+                    left: padding,
+                    width: width,
+                });
+            });
+        }
+    };
+
+    const handleDragLeave = (e: React.DragEvent) => {
+        // Only clear if we're actually leaving the container
+        // Check if we're moving to a child element (nested container)
+        const relatedTarget = e.relatedTarget as Node;
+        if (!e.currentTarget.contains(relatedTarget)) {
+            // Check if relatedTarget is inside a nested LayoutContainer
+            const isMovingToNested = relatedTarget && (relatedTarget as HTMLElement).closest('[data-layout-container]');
+            if (!isMovingToNested) {
+                setDragOverIndex(null);
+                setDropIndicatorPosition(null);
+            }
+        }
+    };
+
+    const handleDrop = (e: React.DragEvent, index: number, containerId?: string) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const dataTransferBlockId = e.dataTransfer.getData('block-id');
+        const globalBlockId = typeof window !== 'undefined' ? (window as any).__DRAGGED_BLOCK_ID__ : null;
+        const blockId = dataTransferBlockId || globalBlockId;
+        const blockType = e.dataTransfer.getData('block-type');
+
+        console.log('[EditorBody] Drop Event:', {
+            index,
+            containerId,
+            dataTransferBlockId,
+            globalBlockId,
+            resolvedBlockId: blockId,
+            blockType,
+            currentBlocks: blocks.map(b => ({ id: b.id, type: b.type })),
+            rootBlockIds: blocks.map(b => b.id),
+        });
+
+        // Clear the global dragged block ID
+        if (typeof window !== 'undefined') {
+            (window as any).__DRAGGED_BLOCK_ID__ = null;
+        }
+
+        if (blockId) {
+            // Moving existing block - check if it's in root or nested
+            const currentIndex = blocks.findIndex(b => b.id === blockId);
+            console.log('[EditorBody] Block location check:', {
+                blockId,
+                currentIndex,
+                isInRoot: currentIndex !== -1,
+                targetIndex: index,
+                containerId,
+            });
+
+            if (currentIndex !== -1) {
+                // Block is in root level - move to container or within root
+                if (containerId) {
+                    // Moving from root to container
+                    console.log('[EditorBody] Moving from root to container:', { blockId, index, containerId });
+                    onBlockMove(blockId, index, containerId);
+                } else if (currentIndex !== index) {
+                    // Moving within root level
+                    const targetIndex = currentIndex < index ? index - 1 : index;
+                    console.log('[EditorBody] Moving within root:', { blockId, currentIndex, targetIndex });
+                    onBlockMove(blockId, targetIndex);
+                } else {
+                    console.log('[EditorBody] Block already at target position, no move needed');
+                }
+            } else {
+                // Block is nested somewhere - need to move it to this location
+                console.log('[EditorBody] Moving nested block to root:', { blockId, index, containerId: containerId || 'root' });
+                // Pass undefined containerId to move to root
+                onBlockMove(blockId, index, undefined);
+            }
+        } else if (blockType) {
+            // Adding new block from library
+            console.log('[EditorBody] Adding new block from library:', { blockType, index, containerId });
+            onBlockAdd(blockType, index, containerId);
+        } else {
+            console.warn('[EditorBody] Drop event with no block ID or type!');
+        }
+
+        setDragOverIndex(null);
+        setIsDragging(false);
+        setDraggedBlockId(null);
+        setDropIndicatorPosition(null);
+    };
+
+    const handleBodyDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Check if we're dragging over a nested container - if so, clear our indicator
+        const target = e.target as HTMLElement;
+        const nestedContainer = target.closest('[data-layout-container]');
+        if (nestedContainer && nestedContainer !== containerRef.current) {
+            // We're over a nested container, clear our indicator
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+            setIsDragging(false);
+            return;
+        }
+
+        setIsDragging(true);
+
+        // Calculate drop indicator position for body drop zone (at the end)
+        const container = containerRef.current;
+        if (container) {
+            requestAnimationFrame(() => {
+                if (!containerRef.current) return;
+
+                const containerRect = containerRef.current.getBoundingClientRect();
+                // Position at the bottom of the container
+                const relativeTop = containerRect.height;
+                const padding = 32;
+                const width = containerRect.width - (padding * 2);
+
+                setDropIndicatorPosition({
+                    top: relativeTop,
+                    left: padding,
+                    width: width,
+                });
+            });
+        }
+    };
+
+    const handleBodyDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const dataTransferBlockId = e.dataTransfer.getData('block-id');
+        const globalBlockId = typeof window !== 'undefined' ? (window as any).__DRAGGED_BLOCK_ID__ : null;
+        const blockId = dataTransferBlockId || globalBlockId;
+        const blockType = e.dataTransfer.getData('block-type');
+
+        console.log('[EditorBody] Body Drop Event:', {
+            dataTransferBlockId,
+            globalBlockId,
+            resolvedBlockId: blockId,
+            blockType,
+            currentBlocksCount: blocks.length,
+            rootBlockIds: blocks.map(b => b.id),
+        });
+
+        // Clear the global dragged block ID
+        if (typeof window !== 'undefined') {
+            (window as any).__DRAGGED_BLOCK_ID__ = null;
+        }
+
+        if (blockId) {
+            // Moving existing block to end of root level
+            const currentIndex = blocks.findIndex(b => b.id === blockId);
+            console.log('[EditorBody] Body drop - block location:', {
+                blockId,
+                currentIndex,
+                isInRoot: currentIndex !== -1,
+                targetIndex: blocks.length,
+            });
+
+            if (currentIndex !== -1) {
+                // Already in root, move to end
+                console.log('[EditorBody] Moving within root to end:', { blockId, targetIndex: blocks.length - 1 });
+                onBlockMove(blockId, blocks.length - 1);
+            } else {
+                // Block is nested - move it to root level at the end
+                console.log('[EditorBody] Moving nested block to root end:', { blockId, targetIndex: blocks.length });
+                onBlockMove(blockId, blocks.length, undefined);
+            }
+        } else if (blockType) {
+            // Adding new block to end
+            console.log('[EditorBody] Adding new block to end:', { blockType, index: blocks.length });
+            onBlockAdd(blockType, blocks.length);
+        } else {
+            console.warn('[EditorBody] Body drop with no block ID or type!');
+        }
+
+        setIsDragging(false);
+        setDragOverIndex(null);
+        setDraggedBlockId(null);
+        setDropIndicatorPosition(null);
+    };
+
+    return (
+        <div
+            ref={containerRef}
+            className={`relative w-full rounded-[2.5rem] border shadow-lg min-h-[400px] transition-all bg-transparent ${darkMode
+                ? 'border-neutral-200 dark:border-neutral-800 shadow-neutral-200/50 dark:shadow-neutral-900/50'
+                : 'border-neutral-200 shadow-neutral-200/50'
+                }`}
+            onDragOver={handleBodyDragOver}
+            onDrop={handleBodyDrop}
+            onDragLeave={handleDragLeave}
+            onDragStart={handleDragStart}
+            onDragEnd={() => {
+                setDropIndicatorPosition(null);
+                setDragOverIndex(null);
+                setIsDragging(false);
+                setDraggedBlockId(null);
+            }}
+        >
+            {/* Enhanced Drop Indicator - Visual drop zone */}
+            {dropIndicatorPosition && (
+                <div
+                    className="absolute z-50 pointer-events-none"
+                    style={{
+                        top: `${dropIndicatorPosition.top - 12}px`,
+                        left: `${dropIndicatorPosition.left}px`,
+                        width: `${dropIndicatorPosition.width}px`,
+                        height: '24px',
+                    }}
+                >
+                    {/* Drop zone background */}
+                    <div className={`absolute inset-0 rounded-lg border border-dashed backdrop-blur-sm ${darkMode
+                        ? 'bg-primary/10 dark:bg-primary/20 border-primary dark:border-primary/60'
+                        : 'bg-primary/10 border-primary'
+                        }`} />
+
+                    {/* Center line indicator */}
+                    <div className={`absolute top-1/2 left-0 right-0 h-0.5 rounded-full transform -translate-y-1/2 ${darkMode ? 'bg-primary dark:bg-primary/80' : 'bg-primary'
+                        }`} />
+
+                    {/* Drop icon indicator */}
+                    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                        <div className={`w-6 h-6 rounded-full flex items-center justify-center shadow-lg shadow-primary/30 ${darkMode ? 'bg-primary dark:bg-primary/90' : 'bg-primary'
+                            }`}>
+                            <div className={`w-2 h-2 rounded-full ${darkMode ? 'bg-white dark:bg-neutral-900' : 'bg-white'
+                                }`} />
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <div className="flex flex-col p-8">
+                {blocks.length === 0 ? (
+                    /* Empty State - Drop Zone */
+                    <div
+                        className={`flex flex-col items-center justify-center py-20 px-8 rounded-2xl border border-dashed transition-all ${darkMode
+                            ? isDragging
+                                ? 'border-primary/30 bg-primary/5 dark:bg-primary/10'
+                                : 'border-gray-200/50 dark:border-neutral-700/50 bg-neutral-50/50 dark:bg-neutral-800/30'
+                            : isDragging
+                                ? 'border-primary/30 bg-primary/5'
+                                : 'border-gray-200/50 bg-neutral-50/50'
+                            }`}
+                    >
+                        <div
+                            className={`p-4 rounded-full mb-4 transition-colors ${darkMode
+                                ? isDragging
+                                    ? 'bg-primary/10 dark:bg-primary/20'
+                                    : 'bg-neutral-100 dark:bg-neutral-800'
+                                : isDragging
+                                    ? 'bg-primary/10'
+                                    : 'bg-neutral-100'
+                                }`}
+                        >
+                            <Plus
+                                size={24}
+                                className={`transition-colors ${darkMode
+                                    ? isDragging
+                                        ? 'text-primary'
+                                        : 'text-neutral-400 dark:text-neutral-500'
+                                    : isDragging
+                                        ? 'text-primary'
+                                        : 'text-neutral-400'
+                                    }`}
+                            />
+                        </div>
+                        <p
+                            className={`text-sm font-black uppercase tracking-wider transition-colors ${darkMode
+                                ? isDragging
+                                    ? 'text-primary'
+                                    : 'text-neutral-500 dark:text-neutral-400'
+                                : isDragging
+                                    ? 'text-primary'
+                                    : 'text-neutral-500'
+                                }`}
+                        >
+                            {isDragging ? 'Drop Block Here' : 'Drop a component here'}
+                        </p>
+                        <p className={`text-xs mt-2 ${darkMode ? 'text-neutral-400 dark:text-neutral-500' : 'text-neutral-400'
+                            }`}>
+                            Drag blocks from the library to get started
+                        </p>
+                    </div>
+                ) : (
+                    /* Blocks with visual drop zones between them */
+                    blocks.map((block, index) => (
+                        <Fragment key={block.id}>
+                            {/* Visual Drop Zone - appears between blocks when dragging */}
+                            {index > 0 && (
+                                <div
+                                    className={`h-6 transition-all duration-200 ${isDragging && dragOverIndex === index
+                                        ? 'bg-primary/5 border-y border-dashed border-primary/20 rounded-lg'
+                                        : 'bg-transparent'
+                                        }`}
+                                />
+                            )}
+
+                            {/* Block Container */}
+                            <div
+                                ref={setBlockRef(block.id)}
+                                onDragOver={(e) => {
+                                    const blockEl = blockRefs.current.get(block.id);
+                                    if (blockEl) {
+                                        handleDragOver(e, index, blockEl);
+                                    }
+                                }}
+                                onDragLeave={handleDragLeave}
+                                onDrop={(e) => handleDrop(e, index)}
+                                className="relative mb-6 last:mb-0"
+                            >
+                                <BlockWrapper
+                                    block={block}
+                                    onUpdate={(data) => onBlockUpdate(block.id, data)}
+                                    onDelete={() => onBlockDelete(block.id)}
+                                    onMoveUp={index > 0 ? () => onBlockMove(block.id, index - 1) : undefined}
+                                    onMoveDown={index < blocks.length - 1 ? () => onBlockMove(block.id, index + 1) : undefined}
+                                    allBlocks={blocks}
+                                />
+                            </div>
+                        </Fragment>
+                    ))
+                )}
+            </div>
+        </div>
+    );
+}
+

package/src/views/CanvasEditor/EditorHeader.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import React, { useState } from 'react';
+import { ArrowLeft, Library, Settings2 } from 'lucide-react';
+import { useEditor } from '../../state/EditorContext';
+import { SaveConfirmationModal } from './SaveConfirmationModal';
+
+export interface EditorHeaderProps {
+    isLibraryOpen: boolean;
+    onLibraryToggle: () => void;
+    isPreviewMode: boolean;
+    onPreviewToggle: () => void;
+    isSidebarOpen: boolean;
+    onSidebarToggle: () => void;
+    isSaving: boolean;
+    onSave: (publish?: boolean) => Promise<void>;
+    onSaveError: (error: string | null) => void;
+}
+
+export function EditorHeader({
+    isLibraryOpen,
+    onLibraryToggle,
+    isPreviewMode,
+    onPreviewToggle,
+    isSidebarOpen,
+    onSidebarToggle,
+    isSaving,
+    onSave,
+    onSaveError,
+}: EditorHeaderProps) {
+    const { state, dispatch } = useEditor();
+    const [showConfirmModal, setShowConfirmModal] = useState(false);
+    const [saveAsDraft, setSaveAsDraft] = useState(false);
+    const [saveError, setSaveError] = useState<string | null>(null);
+
+    const handleSaveDraftClick = () => {
+        setSaveAsDraft(true);
+        setSaveError(null); // Clear any previous errors
+        setShowConfirmModal(true);
+    };
+
+    const handlePublishClick = () => {
+        setSaveAsDraft(false);
+        setSaveError(null); // Clear any previous errors
+        setShowConfirmModal(true);
+    };
+
+    const handleConfirmSave = async () => {
+        try {
+            const targetStatus = saveAsDraft ? 'draft' : 'published';
+            console.log('[EditorHeader] Starting save process...', { saveAsDraft, targetStatus, currentStatus: state.status });
+            
+            // Set status before saving - ensure state is updated
+            if (saveAsDraft) {
+                dispatch({ type: 'SET_STATUS', payload: 'draft' });
+            } else {
+                dispatch({ type: 'SET_STATUS', payload: 'published' });
+            }
+            
+            // Wait longer to ensure state update propagates through the reducer and context
+            // React state updates are asynchronous, so we need to wait for the state to actually update
+            await new Promise(resolve => setTimeout(resolve, 150));
+            
+            // Verify status was updated
+            console.log('[EditorHeader] Status after update:', state.status, 'Expected:', targetStatus);
+            
+            await onSave(!saveAsDraft);
+            console.log('[EditorHeader] Post saved successfully');
+            // Clear any previous errors
+            setSaveError(null);
+            // Modal will show success message and close automatically
+        } catch (error: any) {
+            console.error('[EditorHeader] Failed to save post:', error);
+            // Extract user-friendly error message
+            let errorMessage = error.message || 'Failed to save post';
+            
+            // Make error messages more user-friendly
+            if (errorMessage.includes('Missing required fields')) {
+                // Keep the detailed message about missing 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);
+            onSaveError(errorMessage);
+            // Re-throw the error so the modal knows it failed and doesn't show success
+            throw error;
+        }
+    };
+
+    return (
+        <header className="flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md z-10 border-b border-dashboard-border flex-none shrink-0">
+            <div className="flex items-center gap-6">
+                <button
+                    onClick={() => window.location.href = '/dashboard/blog'}
+                    className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white transition-colors"
+                >
+                    <ArrowLeft size={20} strokeWidth={1.5} />
+                </button>
+                <div className="h-4 w-[1px] bg-neutral-300 dark:border-neutral-700" />
+                <button
+                    onClick={onLibraryToggle}
+                    className={`flex items-center gap-2 text-[10px] uppercase tracking-widest font-black transition-all ${isLibraryOpen ? 'text-dashboard-text' : 'text-neutral-500 dark:text-neutral-400'
+                        }`}
+                >
+                    <Library size={16} strokeWidth={1.5} />
+                    Library
+                </button>
+            </div>
+
+            <div className="flex items-center gap-4">
+                <button
+                    onClick={onPreviewToggle}
+                    className={`text-[10px] uppercase tracking-widest font-bold transition-colors ${isPreviewMode
+                        ? 'text-primary dark:text-primary'
+                        : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
+                        }`}
+                >
+                    {isPreviewMode ? 'Edit' : 'Preview'}
+                </button>
+                {/* Save Draft Button - Always visible for drafts and new posts */}
+                {(state.status === 'draft' || !state.postId) && (
+                    <button
+                        onClick={handleSaveDraftClick}
+                        disabled={isSaving}
+                        className={`px-4 py-2 border-2 border-dashboard-border text-dashboard-text rounded-full text-[10px] font-bold uppercase tracking-widest transition-all ${isSaving
+                            ? 'opacity-50 cursor-not-allowed'
+                            : 'hover:bg-dashboard-bg'
+                            }`}
+                    >
+                        {isSaving ? 'Saving...' : 'Save Draft'}
+                    </button>
+                )}
+                {/* Publish/Update Button */}
+                <button
+                    onClick={handlePublishClick}
+                    disabled={isSaving}
+                    className={`px-6 py-2 bg-primary text-white rounded-full text-[10px] font-bold uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${isSaving
+                        ? 'opacity-50 cursor-not-allowed'
+                        : 'hover:bg-primary/90'
+                        }`}
+                >
+                    {isSaving ? 'Saving...' : state.status === 'published' ? 'Update Post' : 'Publish Post'}
+                </button>
+                <button
+                    onClick={onSidebarToggle}
+                    className={`p-2 rounded-full transition-colors ${isSidebarOpen
+                        ? 'bg-dashboard-bg text-dashboard-text'
+                        : 'text-neutral-500 dark:text-neutral-400 hover:bg-dashboard-bg'
+                        }`}
+                >
+                    <Settings2 size={18} />
+                </button>
+            </div>
+
+            {/* Save Confirmation Modal */}
+            <SaveConfirmationModal
+                isOpen={showConfirmModal}
+                onClose={() => {
+                    setShowConfirmModal(false);
+                    setSaveAsDraft(false);
+                    setSaveError(null);
+                }}
+                onConfirm={handleConfirmSave}
+                isSaving={isSaving}
+                postTitle={state.title || undefined}
+                isPublished={state.status === 'published'}
+                saveAsDraft={saveAsDraft}
+                error={saveError}
+            />
+        </header>
+    );
+}
+