@jhits/plugin-newsletter 0.0.6 → 0.0.8

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -1,249 +0,0 @@
-'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 {
-    newsletterSlug?: 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({ newsletterSlug, 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 [isPreviewMode, setIsPreviewMode] = useState(false);
-    const [isSaving, setIsSaving] = useState(false);
-    const [saveError, setSaveError] = useState<string | null>(null);
-
-    // Get registered blocks
-    const registeredBlocks = useRegisteredBlocks();
-
-    // Newsletter loading
-    const { isLoadingNewsletter } = useNewsletterLoader(
-        newsletterSlug,
-        state.newsletterId,
-        (newsletter) => {
-            helpers.loadNewsletter(newsletter);
-            setTimeout(() => {
-                dispatch({ type: 'MARK_CLEAN' });
-            }, 0);
-        }
-    );
-
-    // Ensure at least one paragraph block exists when creating new newsletter
-    useEffect(() => {
-        if (!newsletterSlug && state.blocks.length === 0 && !isLoadingNewsletter) {
-            helpers.addBlock('paragraph', 0, undefined);
-        }
-    }, [newsletterSlug, state.blocks.length, isLoadingNewsletter, helpers]);
-
-    // 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(() => {
-                        console.log('[CanvasEditorView] Newsletter loading complete - ensuring clean state');
-                        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">
-            <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}
-                />
-
-                {/* 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
-                                slug={state.slug}
-                                metadata={state.metadata}
-                                status={state.status}
-                                onMetadataUpdate={(metadata: Partial<NewsletterMetadata>) => dispatch({ type: 'SET_METADATA', payload: metadata })}
-                            />
-                        </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

@@ -1,95 +0,0 @@
-/**
- * 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>
-    );
-}

package/src/views/CanvasEditor/EditorHeader.tsx

@@ -1,139 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { ArrowLeft, Settings2, Save, Edit, Eye } from 'lucide-react';
-import { useEditor } from '../../state/EditorContext';
-
-export interface EditorHeaderProps {
-    isPreviewMode: boolean;
-    onPreviewToggle: () => void;
-    isSidebarOpen: boolean;
-    onSidebarToggle: () => void;
-    isSaving: boolean;
-    onSave: () => Promise<void>;
-    onSaveError: (error: string | null) => void;
-    isDirty?: boolean;
-}
-
-export function EditorHeader({
-    isPreviewMode,
-    onPreviewToggle,
-    isSidebarOpen,
-    onSidebarToggle,
-    isSaving,
-    onSave,
-    onSaveError,
-    isDirty = false,
-}: EditorHeaderProps) {
-    const { state } = useEditor();
-    const [saveError, setSaveError] = useState<string | null>(null);
-
-    const handleSave = async () => {
-        try {
-            setSaveError(null);
-            await onSave();
-        } catch (error: any) {
-            console.error('[EditorHeader] Failed to save newsletter:', 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);
-            onSaveError(errorMessage);
-        }
-    };
-
-    return (
-        <header className="flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md border-b border-dashboard-border flex-none shrink-0">
-            <div className="flex items-center gap-6">
-                <button
-                    onClick={() => {
-                        if (isDirty) {
-                            const confirmed = window.confirm(
-                                'You have unsaved changes. Are you sure you want to leave? Your changes will be lost.'
-                            );
-                            if (!confirmed) {
-                                return;
-                            }
-                        }
-                        window.location.href = '/dashboard/newsletter';
-                    }}
-                    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>
-
-            <div className="flex items-center gap-4">
-                {/* Edit/Preview Toggle */}
-                <div className="flex items-center bg-dashboard-bg border border-dashboard-border rounded-full p-1 gap-1">
-                    <button
-                        onClick={() => {
-                            if (isPreviewMode) {
-                                onPreviewToggle();
-                            }
-                        }}
-                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${
-                            !isPreviewMode
-                                ? 'bg-primary text-white shadow-sm'
-                                : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                        }`}
-                        title="Edit mode"
-                    >
-                        <Edit size={12} strokeWidth={2.5} />
-                        <span>Edit</span>
-                    </button>
-                    <button
-                        onClick={() => {
-                            if (!isPreviewMode) {
-                                onPreviewToggle();
-                            }
-                        }}
-                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${
-                            isPreviewMode
-                                ? 'bg-primary text-white shadow-sm'
-                                : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                        }`}
-                        title="Preview mode"
-                    >
-                        <Eye size={12} strokeWidth={2.5} />
-                        <span>Preview</span>
-                    </button>
-                </div>
-
-                {/* Settings Toggle */}
-                <button
-                    onClick={onSidebarToggle}
-                    className={`flex items-center gap-2 text-[10px] uppercase tracking-widest font-black transition-all ${isSidebarOpen ? 'text-dashboard-text' : 'text-neutral-500 dark:text-neutral-400'
-                        }`}
-                >
-                    <Settings2 size={16} strokeWidth={1.5} />
-                    Settings
-                </button>
-
-                {/* Save Button */}
-                <button
-                    onClick={handleSave}
-                    disabled={isSaving || !isDirty}
-                    className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg ${
-                        isSaving || !isDirty
-                            ? 'bg-neutral-400 text-white cursor-not-allowed'
-                            : 'bg-primary text-white hover:bg-primary/90'
-                    }`}
-                >
-                    {isSaving ? (
-                        <>
-                            <div className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                            Saving...
-                        </>
-                    ) : (
-                        <>
-                            <Save size={14} />
-                            {isDirty ? 'Save Changes' : 'Saved'}
-                        </>
-                    )}
-                </button>
-            </div>
-        </header>
-    );
-}

package/src/views/CanvasEditor/components/CustomBlockItem.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import React, { useState, useRef } from 'react';
-import { GripVertical } from 'lucide-react';
-
-export interface CustomBlockItemProps {
-    blockType: string;
-    name: string;
-    description?: string;
-    icon: React.ReactNode;
-    onAddBlock?: (blockType: string) => void;
-}
-
-export function CustomBlockItem({
-    blockType,
-    name,
-    description,
-    icon,
-    onAddBlock
-}: CustomBlockItemProps) {
-    const [hasDragged, setHasDragged] = useState(false);
-    const mouseDownRef = useRef<{ x: number; y: number } | null>(null);
-
-    const handleDragStart = (e: React.DragEvent) => {
-        e.dataTransfer.setData('block-type', blockType);
-        e.dataTransfer.effectAllowed = 'move';
-        setHasDragged(true);
-    };
-
-    const handleMouseDown = (e: React.MouseEvent) => {
-        mouseDownRef.current = { x: e.clientX, y: e.clientY };
-        setHasDragged(false);
-    };
-
-    const handleMouseMove = (e: React.MouseEvent) => {
-        if (mouseDownRef.current) {
-            const dx = Math.abs(e.clientX - mouseDownRef.current.x);
-            const dy = Math.abs(e.clientY - mouseDownRef.current.y);
-            if (dx > 5 || dy > 5) {
-                setHasDragged(true);
-            }
-        }
-    };
-
-    const handleClick = (e: React.MouseEvent) => {
-        if (!hasDragged && onAddBlock) {
-            e.preventDefault();
-            e.stopPropagation();
-            onAddBlock(blockType);
-        }
-        mouseDownRef.current = null;
-        setTimeout(() => setHasDragged(false), 100);
-    };
-
-    return (
-        <div
-            draggable
-            onDragStart={handleDragStart}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onClick={handleClick}
-            className="p-4 rounded-xl border border-dashboard-border bg-dashboard-bg hover:border-primary cursor-pointer transition-all group"
-            title={description}
-        >
-            <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-2">
-                    <div className="text-neutral-500 dark:text-neutral-400 group-hover:text-primary dark:group-hover:text-primary transition-colors">
-                        {icon}
-                    </div>
-                    <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors">
-                        {name}
-                    </span>
-                </div>
-                <GripVertical size={12} className="text-neutral-400 dark:text-neutral-500 group-hover:text-neutral-600 dark:group-hover:text-neutral-400" />
-            </div>
-            {description && (
-                <p className="text-[9px] text-neutral-500 dark:text-neutral-400 leading-relaxed line-clamp-2">
-                    {description}
-                </p>
-            )}
-        </div>
-    );
-}