@jhits/plugin-newsletter 0.0.10 → 0.0.11

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useEditor } from '../../state/EditorContext';
+import { EditorHeader } from './EditorHeader';
+import { ErrorBanner } from './components/ErrorBanner';
+import { EditorCanvas } from './components/EditorCanvas';
+import { EditorSidebar } from './components/EditorSidebar';
+import { SlashCommandMenu } from './components/SlashCommandMenu';
+import { useSlashCommand } from './hooks/useSlashCommand';
+import { useNewsletterLoader, useRegisteredBlocks, useKeyboardShortcuts } from './hooks';
+import { blockRegistry } from '../../registry';
+import type { Block } from '../../types/block';
+import type { NewsletterMetadata } from '../../types/newsletter';
+
+export interface CanvasEditorViewProps {
+    newsletterId?: 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;
+    };
+    /** If true, this editor is for the welcome email */
+    isWelcomeEmail?: boolean;
+}
+
+export function CanvasEditorView({ newsletterId, darkMode, backgroundColors: propsBackgroundColors, siteId, locale, isWelcomeEmail }: 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 [isPreviewMode, setIsPreviewMode] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [saveError, setSaveError] = useState<string | null>(null);
+    
+    // Primary language from SMTP settings (used for welcome email)
+    const [primaryLanguage, setPrimaryLanguage] = useState<string>(locale || 'en');
+    const [isLoadingLanguage, setIsLoadingLanguage] = useState(true);
+    const [availableLanguages, setAvailableLanguages] = useState<string[]>([locale || 'en']);
+    const [currentLanguage, setCurrentLanguage] = useState<string>(locale || 'en');
+
+    // Get registered blocks
+    const registeredBlocks = useRegisteredBlocks();
+
+    // Newsletter loading - use current language for welcome email (wait until language settings are loaded)
+    const { isLoadingNewsletter } = useNewsletterLoader(
+        newsletterId,
+        state.newsletterId,
+        (newsletter) => {
+            helpers.loadNewsletter(newsletter);
+            // Set current language from loaded newsletter metadata
+            if (newsletter.metadata?.lang && !isWelcomeEmail) {
+                setCurrentLanguage(newsletter.metadata.lang);
+            }
+            setTimeout(() => {
+                dispatch({ type: 'MARK_CLEAN' });
+            }, 0);
+        },
+        isWelcomeEmail,
+        !isLoadingLanguage ? currentLanguage : undefined
+    );
+
+    // Fetch primary language and available languages from SMTP/welcome-email settings
+    useEffect(() => {
+        const fetchLanguageSettings = async () => {
+            try {
+                const [smtpResponse, welcomeResponse] = await Promise.all([
+                    fetch('/api/plugin-newsletter/smtp'),
+                    fetch('/api/plugin-newsletter/welcome-email/status')
+                ]);
+                
+                const smtpData = await smtpResponse.json();
+                const welcomeData = await welcomeResponse.json();
+                
+                const primary = smtpData.primaryLanguage || 'en';
+                const available = welcomeData.availableLanguages || [primary];
+                
+                if (!available.includes(primary)) {
+                    available.unshift(primary);
+                }
+                
+                setPrimaryLanguage(primary);
+                setAvailableLanguages(available);
+                setCurrentLanguage(primary);
+            } catch (error) {
+                console.error('Failed to fetch language settings:', error);
+            } finally {
+                setIsLoadingLanguage(false);
+            }
+        };
+        fetchLanguageSettings();
+    }, []);
+
+    // Handle language change for welcome email
+    const handleLanguageChange = async (newLanguage: string) => {
+        // 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);
+        
+        // Reload with new language
+        const response = await fetch(`/api/plugin-newsletter/welcome-email?language=${newLanguage}`);
+        if (response.ok) {
+            const newsletter = await response.json();
+            helpers.loadNewsletter(newsletter);
+            dispatch({ type: 'MARK_CLEAN' });
+        }
+    };
+
+    // Handle adding a new language
+    const handleAddLanguage = async (newLanguage: string) => {
+        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);
+    };
+
+    // Ensure at least one paragraph block exists when creating new newsletter
+    useEffect(() => {
+        if (!newsletterId && !isWelcomeEmail && state.blocks.length === 0 && !isLoadingNewsletter) {
+            helpers.addBlock('paragraph', 0, undefined);
+        }
+    }, [newsletterId, state.blocks.length, isLoadingNewsletter, helpers, isWelcomeEmail]);
+
+    // Track if we just loaded a newsletter 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 newsletter loading completes and ensure it stays clean after all effects
+    useEffect(() => {
+        const loadingJustFinished = previousIsLoadingRef.current && !isLoadingNewsletter && state.newsletterId;
+        
+        if (loadingJustFinished) {
+            justLoadedRef.current = true;
+            
+            if (loadingCleanupTimerRef.current) {
+                clearTimeout(loadingCleanupTimerRef.current);
+            }
+            
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    loadingCleanupTimerRef.current = setTimeout(() => {
+                        dispatch({ type: 'MARK_CLEAN' });
+                        justLoadedRef.current = false;
+                        loadingCleanupTimerRef.current = null;
+                    }, 500);
+                });
+            });
+        }
+        
+        previousIsLoadingRef.current = isLoadingNewsletter;
+        
+        return () => {
+            if (loadingCleanupTimerRef.current) {
+                clearTimeout(loadingCleanupTimerRef.current);
+                loadingCleanupTimerRef.current = null;
+            }
+        };
+    }, [isLoadingNewsletter, state.newsletterId, dispatch]);
+
+    // Keyboard shortcuts
+    useKeyboardShortcuts(state, dispatch, canUndo, canRedo, helpers.undo, helpers.redo);
+
+    // Slash command handler - always replaces the current paragraph block
+    const handleSlashCommandSelect = useCallback((blockType: string, replaceBlockId?: string) => {
+        if (replaceBlockId) {
+            // Replace existing block (the paragraph that triggered the slash command)
+            const blockIndex = state.blocks.findIndex(b => b.id === replaceBlockId);
+            if (blockIndex === -1) {
+                console.warn(`[CanvasEditorView] Block with ID "${replaceBlockId}" not found. Available blocks:`, state.blocks.map(b => b.id));
+                return;
+            }
+            
+            const blockDefinition = blockRegistry.get(blockType);
+            if (!blockDefinition) {
+                console.warn(`[CanvasEditorView] Block type "${blockType}" not found in registry`);
+                return;
+            }
+            
+            // Replace the block in place by updating the blocks array directly
+            // This preserves the position and ID
+            const newBlocks = state.blocks.map((block, idx) => {
+                if (idx === blockIndex) {
+                    // Replace this block with the new type
+                    return {
+                        ...block,
+                        type: blockType,
+                        data: { ...blockDefinition.defaultData },
+                    };
+                }
+                // Keep all other blocks unchanged
+                return block;
+            });
+            dispatch({ type: 'SET_BLOCKS', payload: newBlocks });
+        } else {
+            console.warn('[CanvasEditorView] No replaceBlockId provided to handleSlashCommandSelect');
+        }
+    }, [state.blocks, dispatch]);
+
+    // Slash command hook
+    const slashCommand = useSlashCommand(registeredBlocks, handleSlashCommandSelect);
+
+    // Handle save
+    const handleSave = async () => {
+        setIsSaving(true);
+        setSaveError(null);
+        try {
+            await helpers.save();
+            setIsSaving(false);
+        } catch (error: any) {
+            console.error('[CanvasEditorView] Save error:', error);
+            let errorMessage = error.message || 'Failed to save newsletter';
+            if (errorMessage.includes('Unauthorized')) {
+                errorMessage = 'You are not authorized to save. Please log in again.';
+            }
+            setSaveError(errorMessage);
+            setIsSaving(false);
+            throw error;
+        }
+    };
+
+    if (isLoadingNewsletter) {
+        return (
+            <div className="h-full w-full bg-dashboard-card text-dashboard-text flex items-center justify-center">
+                <div className="text-center">
+                    <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin mx-auto mb-4" />
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading newsletter...</p>
+                </div>
+            </div>
+        );
+    }
+
+    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">
+            {isLoadingLanguage ? (
+                <div className="h-full w-full flex items-center justify-center">
+                    <div className="text-center">
+                        <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+                        <p className="text-sm text-dashboard-text-secondary">Loading...</p>
+                    </div>
+                </div>
+            ) : (
+            <main className="flex flex-1 flex-col relative min-h-0">
+                {/* Error Banner */}
+                <ErrorBanner error={saveError} onDismiss={() => setSaveError(null)} />
+
+                <EditorHeader
+                    isPreviewMode={isPreviewMode}
+                    onPreviewToggle={() => setIsPreviewMode(!isPreviewMode)}
+                    isSidebarOpen={isSidebarOpen}
+                    onSidebarToggle={() => setSidebarOpen(!isSidebarOpen)}
+                    isSaving={isSaving}
+                    onSave={handleSave}
+                    onSaveError={(error) => {
+                        if (error) {
+                            setSaveError(error);
+                        } else {
+                            setSaveError(null);
+                        }
+                    }}
+                    isDirty={state.isDirty}
+                    isWelcomeEmail={isWelcomeEmail}
+                    languages={availableLanguages}
+                    currentLanguage={currentLanguage}
+                    onLanguageChange={handleLanguageChange}
+                    onAddLanguage={handleAddLanguage}
+                />
+
+                {/* Editor Content Wrapper */}
+                <div className="flex flex-1 relative overflow-hidden min-h-0 flex-nowrap">
+                    {/* CENTER: THE WRITING CANVAS */}
+                    <EditorCanvas
+                        isPreviewMode={isPreviewMode}
+                        contentBlocks={state.blocks}
+                        title={state.title}
+                        siteId={siteId}
+                        locale={locale}
+                        darkMode={effectiveDarkMode}
+                        backgroundColors={effectiveBackgroundColors}
+                        metadata={state.metadata}
+                        onTitleChange={(title: string) => dispatch({ type: 'SET_TITLE', payload: title })}
+                        onMetadataChange={(metadata) => dispatch({ type: 'SET_METADATA', payload: metadata })}
+                        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)}
+                        slashCommand={slashCommand}
+                    />
+
+                    {/* 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
+                                metadata={state.metadata}
+                                status={state.status}
+                                onMetadataUpdate={(metadata: Partial<NewsletterMetadata>) => dispatch({ type: 'SET_METADATA', payload: metadata })}
+                                defaultLanguage={primaryLanguage}
+                                isWelcomeEmail={isWelcomeEmail}
+                                languages={availableLanguages}
+                                currentLanguage={currentLanguage}
+                                onLanguageChange={handleLanguageChange}
+                            />
+                        </aside>
+                    )}
+                </div>
+
+                {/* Slash Command Menu */}
+                {slashCommand.isOpen && slashCommand.position && (
+                    <SlashCommandMenu
+                        blocks={slashCommand.filteredBlocks}
+                        query={slashCommand.query}
+                        selectedIndex={slashCommand.selectedIndex}
+                        onSelect={(replaceBlockId) => {
+                            // Use the replaceBlockId passed from the menu (which comes from state)
+                            // This ensures we use the correct block ID that was set when the menu opened
+                            slashCommand.selectCurrent(replaceBlockId);
+                        }}
+                        position={slashCommand.position}
+                        onClose={slashCommand.closeMenu}
+                        replaceBlockId={slashCommand.replaceBlockId}
+                    />
+                )}
+            </main>
+            )}
+        </div>
+    );
+}

package/src/views/CanvasEditor/EditorBody.tsx

@@ -0,0 +1,95 @@
+/**
+ * Editor Body Component
+ * Simplified Notion-style editor with single paragraph by default
+ */
+
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { Plus } from 'lucide-react';
+import { Block } from '../../types/block';
+import { BlockWrapper } from './BlockWrapper';
+import type { useSlashCommand } from './hooks/useSlashCommand';
+
+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;
+    };
+    /** Slash command handler */
+    slashCommand?: ReturnType<typeof useSlashCommand>;
+}
+
+export function EditorBody({
+    blocks,
+    onBlockAdd,
+    onBlockUpdate,
+    onBlockDelete,
+    onBlockMove,
+    darkMode = true,
+    backgroundColors,
+    slashCommand,
+}: EditorBodyProps) {
+    const handleDelete = (blockId: string, index: number) => {
+        onBlockDelete(blockId);
+        // If deleting the last block, ensure we still have at least one paragraph
+        if (blocks.length === 1) {
+            setTimeout(() => {
+                onBlockAdd('paragraph', 0);
+            }, 0);
+        }
+    };
+
+    return (
+        <div className="relative">
+            {blocks.map((block, index) => (
+                <React.Fragment key={block.id}>
+                    {/* Add Block Button Above */}
+                    <div className="relative h-2 group/add-button">
+                        <button
+                            onClick={() => onBlockAdd('paragraph', index)}
+                            className="absolute left-0 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center opacity-0 group-hover/add-button:opacity-100 transition-opacity hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded"
+                            title="Add block"
+                        >
+                            <Plus size={14} className="text-neutral-400 dark:text-neutral-500" />
+                        </button>
+                    </div>
+                    
+                    {/* Block */}
+                    <div className="relative">
+                        <BlockWrapper
+                            block={block}
+                            onUpdate={(data) => onBlockUpdate(block.id, data)}
+                            onDelete={() => handleDelete(block.id, index)}
+                            onMoveUp={index > 0 ? () => onBlockMove(block.id, index - 1) : undefined}
+                            onMoveDown={index < blocks.length - 1 ? () => onBlockMove(block.id, index + 1) : undefined}
+                            allBlocks={blocks}
+                            slashCommand={slashCommand}
+                            blockIndex={index}
+                            onAddBlockBelow={(blockType) => onBlockAdd(blockType, index + 1)}
+                        />
+                    </div>
+                </React.Fragment>
+            ))}
+            
+            {/* Add Block Button at Bottom */}
+            <div className="relative h-8 group/add-button-bottom mt-2">
+                <button
+                    onClick={() => onBlockAdd('paragraph', blocks.length)}
+                    className="absolute left-0 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center opacity-0 group-hover/add-button-bottom:opacity-100 transition-opacity hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded"
+                    title="Add block"
+                >
+                    <Plus size={14} className="text-neutral-400 dark:text-neutral-500" />
+                </button>
+            </div>
+        </div>
+    );
+}