@jhits/plugin-newsletter 0.0.6 → 0.0.8

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

@@ -1,131 +0,0 @@
-'use client';
-
-import React, { useEffect, useRef, useState } from 'react';
-import { Search } from 'lucide-react';
-import type { BlockTypeDefinition } from '../../../types/block';
-
-export interface SlashCommandMenuProps {
-    /** Registered blocks to show in menu */
-    blocks: BlockTypeDefinition[];
-    /** Current search query */
-    query: string;
-    /** Selected index */
-    selectedIndex: number;
-    /** Callback when a block is selected - receives replaceBlockId if replacing */
-    onSelect: (replaceBlockId?: string) => void;
-    /** Position for the menu */
-    position: { top: number; left: number } | null;
-    /** Callback to close the menu */
-    onClose: () => void;
-    /** Block ID to replace (if replacing existing block) */
-    replaceBlockId?: string;
-}
-
-export function SlashCommandMenu({
-    blocks,
-    query,
-    selectedIndex,
-    onSelect,
-    position,
-    onClose,
-    replaceBlockId,
-}: SlashCommandMenuProps) {
-    const menuRef = useRef<HTMLDivElement>(null);
-
-    // Handle keyboard navigation
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                // Selection is handled by parent
-            } else if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                // Selection is handled by parent
-            } else if (e.key === 'Enter' || e.key === 'Tab') {
-                e.preventDefault();
-                if (blocks[selectedIndex]) {
-                    onSelect(replaceBlockId);
-                }
-            } else if (e.key === 'Escape') {
-                e.preventDefault();
-                onClose();
-            }
-        };
-
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [blocks, selectedIndex, onSelect, onClose, replaceBlockId]);
-
-    // Scroll selected item into view
-    useEffect(() => {
-        if (menuRef.current && selectedIndex >= 0) {
-            const selectedElement = menuRef.current.children[selectedIndex] as HTMLElement;
-            if (selectedElement) {
-                selectedElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-            }
-        }
-    }, [selectedIndex]);
-
-    if (!position || blocks.length === 0) {
-        return null;
-    }
-
-    return (
-        <div
-            ref={menuRef}
-            className="fixed z-50 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-2xl overflow-hidden"
-            style={{
-                top: `${position.top}px`,
-                left: `${position.left}px`,
-                width: '280px',
-                maxHeight: '320px',
-                overflowY: 'auto',
-            }}
-        >
-            <div className="p-2 border-b border-neutral-200 dark:border-neutral-700 flex items-center gap-2">
-                <Search size={14} className="text-neutral-400" />
-                <input
-                    type="text"
-                    value={query}
-                    readOnly
-                    placeholder="Search blocks..."
-                    className="flex-1 bg-transparent border-none outline-none text-sm text-neutral-600 dark:text-neutral-300 placeholder:text-neutral-400"
-                />
-            </div>
-            <div className="py-1">
-                {blocks.map((block, index) => {
-                    const IconComponent = block.icon || block.components.Icon;
-                    const isSelected = index === selectedIndex;
-                    
-                    return (
-                        <button
-                            key={block.type}
-                            onClick={() => onSelect(replaceBlockId)}
-                            className={`w-full px-3 py-2 flex items-center gap-3 text-left transition-colors ${
-                                isSelected
-                                    ? 'bg-primary/10 text-primary dark:bg-primary/20'
-                                    : 'hover:bg-neutral-100 dark:hover:bg-neutral-700 text-neutral-700 dark:text-neutral-300'
-                            }`}
-                        >
-                            {IconComponent && (
-                                <div className={`flex-shrink-0 ${isSelected ? 'text-primary' : 'text-neutral-400'}`}>
-                                    <IconComponent />
-                                </div>
-                            )}
-                            <div className="flex-1 min-w-0">
-                                <div className={`text-sm font-medium ${isSelected ? 'text-primary' : 'text-neutral-900 dark:text-neutral-100'}`}>
-                                    {block.name}
-                                </div>
-                                {block.description && (
-                                    <div className="text-xs text-neutral-500 dark:text-neutral-400 truncate">
-                                        {block.description}
-                                    </div>
-                                )}
-                            </div>
-                        </button>
-                    );
-                })}
-            </div>
-        </div>
-    );
-}

package/src/views/CanvasEditor/components/index.ts

@@ -1,16 +0,0 @@
-/**
- * Newsletter Editor Components Exports
- */
-
-export { ErrorBanner } from './ErrorBanner';
-export type { ErrorBannerProps } from './ErrorBanner';
-export { LibraryItem } from './LibraryItem';
-export type { LibraryItemProps } from './LibraryItem';
-export { CustomBlockItem } from './CustomBlockItem';
-export type { CustomBlockItemProps } from './CustomBlockItem';
-export { EditorLibrary } from './EditorLibrary';
-export type { EditorLibraryProps } from './EditorLibrary';
-export { EditorCanvas } from './EditorCanvas';
-export type { EditorCanvasProps } from './EditorCanvas';
-export { EditorSidebar } from './EditorSidebar';
-export type { EditorSidebarProps } from './EditorSidebar';

package/src/views/CanvasEditor/hooks/index.ts

@@ -1,7 +0,0 @@
-/**
- * Newsletter Editor Hooks
- */
-
-export { useRegisteredBlocks } from './useRegisteredBlocks';
-export { useNewsletterLoader } from './useNewsletterLoader';
-export { useKeyboardShortcuts } from './useKeyboardShortcuts';

package/src/views/CanvasEditor/hooks/useKeyboardShortcuts.ts

@@ -1,136 +0,0 @@
-import { useEffect } from 'react';
-import type { Block } from '../../../types/block';
-import type { EditorState } from '../../../state/types';
-
-// Generate a unique block ID
-function generateBlockId(): string {
-    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-        return crypto.randomUUID();
-    }
-    return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-}
-
-export function useKeyboardShortcuts(
-    state: EditorState,
-    dispatch: (action: any) => void,
-    canUndo: boolean,
-    canRedo: boolean,
-    undo: () => void,
-    redo: () => void
-) {
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            // Don't handle shortcuts if user is typing in an input/textarea/contentEditable
-            const target = e.target as HTMLElement;
-            const isEditableElement = target.tagName === 'INPUT' ||
-                target.tagName === 'TEXTAREA' ||
-                target.isContentEditable ||
-                target.closest('input, textarea, [contenteditable="true"]');
-
-            // Check for Ctrl+Z / Cmd+Z (Undo)
-            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
-                if (!isEditableElement) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (canUndo) {
-                        undo();
-                    }
-                    return;
-                }
-            }
-
-            // Check for Ctrl+Shift+Z / Cmd+Shift+Z or Ctrl+Y / Cmd+Y (Redo)
-            if (((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') || ((e.ctrlKey || e.metaKey) && e.key === 'y')) {
-                if (!isEditableElement) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (canRedo) {
-                        redo();
-                    }
-                    return;
-                }
-            }
-
-            // Check for Ctrl+V (Windows/Linux) or Cmd+V (Mac)
-            if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
-                // Don't paste if user is typing in an input/textarea/contentEditable
-                if (isEditableElement) {
-                    return; // Let the browser handle paste in editable elements
-                }
-
-                // Check if there's a copied block
-                if (typeof window !== 'undefined') {
-                    const copiedBlockJson = localStorage.getItem('__NEWSLETTER_EDITOR_COPIED_BLOCK__');
-                    if (copiedBlockJson) {
-                        try {
-                            e.preventDefault();
-                            e.stopPropagation();
-
-                            const copiedBlock = JSON.parse(copiedBlockJson) as Block;
-
-                            // Clone a block with new IDs (recursive for nested blocks)
-                            const cloneBlock = (blockToClone: Block): Block => {
-                                const cloned: Block = {
-                                    ...blockToClone,
-                                    id: generateBlockId(),
-                                    data: { ...blockToClone.data },
-                                    meta: blockToClone.meta ? { ...blockToClone.meta } : undefined,
-                                };
-
-                                // Handle children if they exist
-                                if (blockToClone.children) {
-                                    if (Array.isArray(blockToClone.children) && blockToClone.children.length > 0) {
-                                        if (typeof blockToClone.children[0] === 'object') {
-                                            cloned.children = (blockToClone.children as Block[]).map(cloneBlock);
-                                        } else {
-                                            // If children are IDs, find and clone the actual blocks
-                                            const allBlocks = state.blocks;
-                                            const childIds = blockToClone.children as string[];
-                                            const childBlocks = childIds
-                                                .map((childId: string) => allBlocks.find(b => b.id === childId))
-                                                .filter((b): b is Block => b !== undefined);
-                                            cloned.children = childBlocks.map(cloneBlock);
-                                        }
-                                    }
-                                }
-
-                                return cloned;
-                            };
-
-                            const pastedBlock = cloneBlock(copiedBlock);
-
-                            // Find where to paste - use hovered block or selected block, or paste at end
-                            const hoveredBlockId = (window as any).__NEWSLETTER_EDITOR_HOVERED_BLOCK_ID__;
-                            const targetBlockId = hoveredBlockId || state.selectedBlockId;
-
-                            let pasteIndex: number | undefined;
-                            if (targetBlockId) {
-                                const targetIndex = state.blocks.findIndex(b => b.id === targetBlockId);
-                                if (targetIndex !== -1) {
-                                    pasteIndex = targetIndex + 1;
-                                }
-                            }
-
-                            // Dispatch ADD_BLOCK with the full block structure
-                            dispatch({
-                                type: 'ADD_BLOCK',
-                                payload: {
-                                    block: pastedBlock,
-                                    index: pasteIndex,
-                                    containerId: undefined
-                                }
-                            });
-                        } catch (error) {
-                            console.error('Failed to paste block:', error);
-                        }
-                    }
-                }
-            }
-        };
-
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [state.blocks, state.selectedBlockId, dispatch, canUndo, canRedo, undo, redo]);
-}

package/src/views/CanvasEditor/hooks/useNewsletterLoader.ts

@@ -1,34 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Newsletter } from '../../../types/newsletter';
-
-export function useNewsletterLoader(
-    newsletterSlug: string | undefined,
-    currentNewsletterId: string | null,
-    loadNewsletter: (newsletter: Newsletter) => void
-) {
-    const [isLoadingNewsletter, setIsLoadingNewsletter] = useState(false);
-
-    useEffect(() => {
-        if (newsletterSlug && !currentNewsletterId) {
-            const loadNewsletterData = async () => {
-                try {
-                    setIsLoadingNewsletter(true);
-                    const response = await fetch(`/api/plugin-newsletter/newsletters/${newsletterSlug}`);
-                    if (!response.ok) {
-                        throw new Error('Failed to load newsletter');
-                    }
-                    const newsletter: Newsletter = await response.json();
-                    loadNewsletter(newsletter);
-                } catch (error) {
-                    console.error('Failed to load newsletter:', error);
-                    alert('Failed to load newsletter. Please try again.');
-                } finally {
-                    setIsLoadingNewsletter(false);
-                }
-            };
-            loadNewsletterData();
-        }
-    }, [newsletterSlug, currentNewsletterId, loadNewsletter]);
-
-    return { isLoadingNewsletter };
-}

package/src/views/CanvasEditor/hooks/useRegisteredBlocks.ts

@@ -1,54 +0,0 @@
-import { useState, useEffect } from 'react';
-import { blockRegistry } from '../../../registry/BlockRegistry';
-
-export function useRegisteredBlocks() {
-    const [registeredBlocks, setRegisteredBlocks] = useState(() => {
-        const initial = blockRegistry.getAll();
-        return initial;
-    });
-
-    // Watch for registry changes and update state
-    useEffect(() => {
-        // Check immediately
-        const checkBlocks = () => {
-            const currentBlocks = blockRegistry.getAll();
-            const hasChanged = currentBlocks.length !== registeredBlocks.length ||
-                currentBlocks.some((b, i) => b.type !== registeredBlocks[i]?.type) ||
-                registeredBlocks.some((b, i) => b.type !== currentBlocks[i]?.type);
-
-            if (hasChanged) {
-                setRegisteredBlocks([...currentBlocks]);
-            }
-        };
-
-        // Initial check
-        checkBlocks();
-
-        // Poll for registry changes (blocks are registered asynchronously in useEffect)
-        let pollCount = 0;
-        const interval = setInterval(() => {
-            pollCount++;
-            checkBlocks();
-            // Stop polling after 5 seconds (25 checks at 200ms)
-            if (pollCount > 25) {
-                clearInterval(interval);
-            }
-        }, 200);
-
-        // Also check after delays to catch initial registrations
-        const timeouts = [
-            setTimeout(checkBlocks, 50),
-            setTimeout(checkBlocks, 100),
-            setTimeout(checkBlocks, 300),
-            setTimeout(checkBlocks, 500),
-            setTimeout(checkBlocks, 1000),
-        ];
-
-        return () => {
-            clearInterval(interval);
-            timeouts.forEach(clearTimeout);
-        };
-    }, [registeredBlocks.length]);
-
-    return registeredBlocks;
-}

package/src/views/CanvasEditor/hooks/useSlashCommand.ts

@@ -1,106 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import type { BlockTypeDefinition } from '../../../types/block';
-
-export interface SlashCommandState {
-    isOpen: boolean;
-    query: string;
-    selectedIndex: number;
-    position: { top: number; left: number } | null;
-    replaceBlockId?: string;
-}
-
-export function useSlashCommand(
-    blocks: BlockTypeDefinition[],
-    onSelectBlock: (blockType: string, replaceBlockId?: string) => void
-) {
-    const [state, setState] = useState<SlashCommandState>({
-        isOpen: false,
-        query: '',
-        selectedIndex: 0,
-        position: null,
-    });
-
-    // Filter blocks based on query
-    const filteredBlocks = blocks.filter(block => {
-        if (!state.query) return true;
-        const lowerQuery = state.query.toLowerCase();
-        const name = block.name.toLowerCase();
-        const description = block.description?.toLowerCase() || '';
-        const type = block.type.toLowerCase();
-        return name.includes(lowerQuery) || description.includes(lowerQuery) || type.includes(lowerQuery);
-    });
-
-    const openMenu = useCallback((position: { top: number; left: number }, replaceBlockId?: string) => {
-        setState({
-            isOpen: true,
-            query: '',
-            selectedIndex: 0,
-            position,
-            replaceBlockId,
-        });
-    }, []);
-
-    const closeMenu = useCallback(() => {
-        setState({
-            isOpen: false,
-            query: '',
-            selectedIndex: 0,
-            position: null,
-            replaceBlockId: undefined,
-        });
-    }, []);
-
-    const updateQuery = useCallback((query: string) => {
-        setState(prev => ({
-            ...prev,
-            query,
-            selectedIndex: 0, // Reset selection when query changes
-        }));
-    }, []);
-
-    const moveSelection = useCallback((direction: 'up' | 'down') => {
-        setState(prev => {
-            if (!prev.isOpen || filteredBlocks.length === 0) return prev;
-            
-            let newIndex = prev.selectedIndex;
-            if (direction === 'down') {
-                newIndex = (prev.selectedIndex + 1) % filteredBlocks.length;
-            } else {
-                newIndex = prev.selectedIndex === 0 ? filteredBlocks.length - 1 : prev.selectedIndex - 1;
-            }
-            
-            return {
-                ...prev,
-                selectedIndex: newIndex,
-            };
-        });
-    }, [filteredBlocks.length]);
-
-    const selectCurrent = useCallback((replaceBlockId?: string) => {
-        if (state.isOpen && filteredBlocks[state.selectedIndex]) {
-            // Always use the replaceBlockId from state (set when menu was opened)
-            // The parameter is ignored to ensure we use the correct block ID
-            const blockIdToReplace = state.replaceBlockId;
-            if (!blockIdToReplace) {
-                console.warn('[useSlashCommand] No replaceBlockId in state when selecting block');
-                return;
-            }
-            onSelectBlock(filteredBlocks[state.selectedIndex].type, blockIdToReplace);
-            closeMenu();
-        }
-    }, [state.isOpen, state.selectedIndex, state.replaceBlockId, filteredBlocks, onSelectBlock, closeMenu]);
-
-    return {
-        isOpen: state.isOpen,
-        query: state.query,
-        selectedIndex: state.selectedIndex,
-        position: state.position,
-        replaceBlockId: state.replaceBlockId,
-        filteredBlocks,
-        openMenu,
-        closeMenu,
-        updateQuery,
-        moveSelection,
-        selectCurrent,
-    };
-}

package/src/views/CanvasEditor/index.ts

@@ -1,12 +0,0 @@
-/**
- * Newsletter Canvas Editor Exports
- */
-
-export { CanvasEditorView } from './CanvasEditorView';
-export type { CanvasEditorViewProps } from './CanvasEditorView';
-export { EditorBody } from './EditorBody';
-export type { EditorBodyProps } from './EditorBody';
-export { BlockWrapper } from './BlockWrapper';
-export type { BlockWrapperProps } from './BlockWrapper';
-export { EditorHeader } from './EditorHeader';
-export type { EditorHeaderProps } from './EditorHeader';

package/src/views/NewsletterEditor.tsx

@@ -1,38 +0,0 @@
-/**
- * Newsletter Editor View
- * Block-based editor for creating and editing newsletters
- */
-
-'use client';
-
-import React from 'react';
-import { CanvasEditorView } from './CanvasEditor';
-
-export interface NewsletterEditorViewProps {
-    newsletterSlug?: string;
-    siteId: string;
-    locale: string;
-    darkMode?: boolean;
-    backgroundColors?: {
-        light: string;
-        dark?: string;
-    };
-}
-
-export function NewsletterEditorView({ 
-    newsletterSlug, 
-    siteId, 
-    locale,
-    darkMode,
-    backgroundColors 
-}: NewsletterEditorViewProps) {
-    return (
-        <CanvasEditorView
-            newsletterSlug={newsletterSlug}
-            siteId={siteId}
-            locale={locale}
-            darkMode={darkMode}
-            backgroundColors={backgroundColors}
-        />
-    );
-}