@jhits/plugin-newsletter 0.0.10 → 0.0.11

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

@@ -0,0 +1,120 @@
+'use client';
+
+import React from 'react';
+import { Library, Image as ImageIcon, LayoutTemplate, Type, Box } from 'lucide-react';
+import { LibraryItem, CustomBlockItem } from './index';
+import type { BlockTypeDefinition } from '../../../types/block';
+
+export interface EditorLibraryProps {
+    registeredBlocks: BlockTypeDefinition[];
+    onAddBlock: (type: string) => void;
+}
+
+export function EditorLibrary({ registeredBlocks, onAddBlock }: EditorLibraryProps) {
+    // Get all registered blocks (excluding Hero block for newsletters)
+    const allBlocks = registeredBlocks.filter(block => block.type !== 'hero');
+    const textBlocks = allBlocks.filter(block => block.category === 'text');
+    const customBlocks = allBlocks.filter(block => block.category === 'custom');
+    const mediaBlocks = allBlocks.filter(block => block.category === 'media');
+    const layoutBlocks = allBlocks.filter(block => block.category === 'layout');
+
+    return (
+        <div className="p-6 w-72 min-w-0 max-w-full">
+            {/* Text Blocks */}
+            {textBlocks.length > 0 && (
+                <div className="mb-10">
+                    <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Text</h3>
+                    <div className="grid grid-cols-2 gap-3">
+                        {textBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || Type;
+                            return (
+                                <LibraryItem
+                                    key={block.type}
+                                    icon={<IconComponent size={16} />}
+                                    label={block.name}
+                                    blockType={block.type}
+                                    description={block.description}
+                                    onAddBlock={onAddBlock}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Media Blocks */}
+            {mediaBlocks.length > 0 && (
+                <div className="mb-10">
+                    <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Media</h3>
+                    <div className="grid grid-cols-2 gap-3">
+                        {mediaBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || ImageIcon;
+                            return (
+                                <LibraryItem
+                                    key={block.type}
+                                    icon={<IconComponent size={16} />}
+                                    label={block.name}
+                                    blockType={block.type}
+                                    description={block.description}
+                                    onAddBlock={onAddBlock}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Layout Blocks */}
+            {layoutBlocks.length > 0 && (
+                <div className="mb-10">
+                    <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Layout</h3>
+                    <div className="grid grid-cols-2 gap-3">
+                        {layoutBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || LayoutTemplate;
+                            return (
+                                <LibraryItem
+                                    key={block.type}
+                                    icon={<IconComponent size={16} />}
+                                    label={block.name}
+                                    blockType={block.type}
+                                    description={block.description}
+                                    onAddBlock={onAddBlock}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Custom Blocks */}
+            {customBlocks.length > 0 && (
+                <div>
+                    <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Custom Blocks</h3>
+                    <div className="space-y-3">
+                        {customBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || Box;
+                            return (
+                                <CustomBlockItem
+                                    key={block.type}
+                                    blockType={block.type}
+                                    name={block.name}
+                                    description={block.description}
+                                    icon={<IconComponent size={16} />}
+                                    onAddBlock={onAddBlock}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {allBlocks.length === 0 && (
+                <div className="text-center py-12 text-neutral-400 dark:text-neutral-500">
+                    <Library size={32} className="mx-auto mb-4 opacity-50" />
+                    <p className="text-sm">No blocks available</p>
+                    <p className="text-xs mt-2">Register blocks in your app configuration</p>
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,139 @@
+'use client';
+
+import React from 'react';
+import { Mail, Globe, Users } from 'lucide-react';
+import type { NewsletterMetadata } from '../../../types/newsletter';
+
+export interface EditorSidebarProps {
+    metadata: NewsletterMetadata;
+    status: string;
+    onMetadataUpdate: (metadata: Partial<NewsletterMetadata>) => void;
+    defaultLanguage?: string;
+    isWelcomeEmail?: boolean;
+    languages?: string[];
+    currentLanguage?: string;
+    onLanguageChange?: (language: string) => void;
+}
+
+export function EditorSidebar({
+    metadata,
+    status,
+    onMetadataUpdate,
+    defaultLanguage = 'en',
+    isWelcomeEmail = false,
+    languages = ['en'],
+    currentLanguage = 'en',
+    onLanguageChange,
+}: EditorSidebarProps) {
+    return (
+        <div className="p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full">
+            {/* Newsletter Settings */}
+            <section>
+                <div className="flex items-center gap-3 mb-6">
+                    <Mail size={14} className="text-neutral-500 dark:text-neutral-400" />
+                    <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
+                        Newsletter Settings
+                    </label>
+                </div>
+                <div className="space-y-4">
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Email Subject
+                        </label>
+                        <input
+                            type="text"
+                            value={metadata.subject || ''}
+                            onChange={(e) => onMetadataUpdate({ subject: e.target.value })}
+                            placeholder="Enter email subject"
+                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                        />
+                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                            {metadata.subject?.length || 0} / 100 characters
+                        </p>
+                    </div>
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Preview Text
+                        </label>
+                        <textarea
+                            value={metadata.previewText || ''}
+                            onChange={(e) => onMetadataUpdate({ previewText: e.target.value })}
+                            placeholder="Preview text shown in email clients"
+                            rows={3}
+                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text resize-none"
+                        />
+                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                            {metadata.previewText?.length || 0} / 150 characters
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            {/* Recipient Filter */}
+            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="flex items-center gap-3 mb-6">
+                    <Users size={14} className="text-neutral-500 dark:text-neutral-400" />
+                    <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
+                        Recipients
+                    </label>
+                </div>
+                <div className="space-y-4">
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Filter Type
+                        </label>
+                        <select
+                            value={metadata.recipientFilter?.type || 'all'}
+                            onChange={(e) => onMetadataUpdate({
+                                recipientFilter: {
+                                    type: e.target.value as 'all' | 'language' | 'custom',
+                                    value: metadata.recipientFilter?.value,
+                                }
+                            })}
+                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                        >
+                            <option value="all">All Subscribers</option>
+                            <option value="language">By Language</option>
+                            <option value="custom">Custom Filter</option>
+                        </select>
+                    </div>
+                    {metadata.recipientFilter?.type === 'language' && (
+                        <div>
+                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                                Language
+                            </label>
+                            <select
+                                value={metadata.recipientFilter?.value || 'en'}
+                                onChange={(e) => onMetadataUpdate({
+                                    recipientFilter: {
+                                        type: 'language',
+                                        value: e.target.value,
+                                    }
+                                })}
+                                className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                            >
+                                <option value="en">English</option>
+                                <option value="nl">Dutch</option>
+                                <option value="sv">Swedish</option>
+                            </select>
+                        </div>
+                    )}
+                </div>
+            </section>
+
+            {/* Newsletter Info */}
+            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="space-y-3">
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Status
+                        </label>
+                        <div className="px-3 py-2 text-xs bg-dashboard-bg border border-dashboard-border rounded-lg">
+                            <span className="uppercase font-bold">{status}</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+}

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

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle, X } from 'lucide-react';
+
+export interface ErrorBannerProps {
+    error: string | null;
+    onDismiss: () => void;
+}
+
+export function ErrorBanner({ error, onDismiss }: ErrorBannerProps) {
+    if (!error) return null;
+
+    return (
+        <div className="bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-3 flex items-center justify-between">
+            <div className="flex items-center gap-3 flex-1">
+                <AlertTriangle className="text-red-600 dark:text-red-400 flex-shrink-0" size={20} />
+                <p className="text-red-800 dark:text-red-300 text-sm font-medium">
+                    {error}
+                </p>
+            </div>
+            <button
+                onClick={onDismiss}
+                className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 transition-colors"
+                aria-label="Dismiss error"
+            >
+                <X size={18} />
+            </button>
+        </div>
+    );
+}

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

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+
+export interface LibraryItemProps {
+    icon: React.ReactNode;
+    label: string;
+    blockType: string;
+    description?: string;
+    onAddBlock?: (blockType: string) => void;
+}
+
+export function LibraryItem({
+    icon,
+    label,
+    blockType,
+    description,
+    onAddBlock
+}: LibraryItemProps) {
+    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="flex flex-col items-center justify-center p-5 rounded-2xl border border-dashboard-border bg-dashboard-card hover:border-primary hover:shadow-xl hover:shadow-primary/5 transition-all cursor-pointer group"
+        >
+            <div className="text-neutral-400 dark:text-neutral-500 group-hover:text-primary dark:group-hover:text-primary mb-3 transition-colors duration-300">
+                {React.cloneElement(icon as React.ReactElement, { strokeWidth: 1.5 } as any)}
+            </div>
+            <span className="text-[9px] font-black uppercase tracking-[0.15em] text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors">
+                {label}
+            </span>
+        </div>
+    );
+}

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

@@ -0,0 +1,196 @@
+'use client';
+
+import React, { useEffect, useRef, useCallback } from 'react';
+import type { useSlashCommand } from '../hooks/useSlashCommand';
+
+export interface SlashCommandDetectorProps {
+    children: React.ReactElement;
+    blockId: string;
+    blockIndex: number;
+    blockType: string;
+    content: string;
+    onContentChange: (content: string) => void;
+    slashCommand?: ReturnType<typeof useSlashCommand>;
+    onAddBlockBelow?: (blockType: string) => void;
+}
+
+/**
+ * Detects "/" input and shows slash command menu
+ * Wraps block edit components to add slash command functionality
+ */
+export function SlashCommandDetector({
+    children,
+    blockId,
+    blockIndex,
+    blockType,
+    content,
+    onContentChange,
+    slashCommand,
+    onAddBlockBelow,
+}: SlashCommandDetectorProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const lastContentRef = useRef<string>('');
+    const slashIndexRef = useRef<number>(-1);
+
+    // Listen for input events on contentEditable elements
+    useEffect(() => {
+        if (!slashCommand || blockType !== 'paragraph') return;
+
+        const container = containerRef.current;
+        if (!container) return;
+
+        const handleInput = (e: Event) => {
+            const target = e.target as HTMLElement;
+            if (!target.isContentEditable) return;
+
+            const textContent = target.textContent || '';
+            const plainText = textContent.replace(/\u00A0/g, ' '); // Replace non-breaking spaces
+            const previousText = (lastContentRef.current || '').replace(/\u00A0/g, ' ');
+            
+            // Only allow "/" when paragraph is completely empty (no content before "/")
+            const wasEmpty = previousText.trim().length === 0;
+            const isNowEmpty = plainText.trim().length === 0;
+            
+            if (plainText.length > previousText.length) {
+                // Character was added
+                const lastChar = plainText[plainText.length - 1];
+                
+                // Check if "/" was typed and paragraph was empty before
+                if (lastChar === '/' && wasEmpty && plainText === '/') {
+                    slashIndexRef.current = 0;
+                    
+                    // Get cursor position
+                    const selection = window.getSelection();
+                    if (selection && selection.rangeCount > 0) {
+                        const range = selection.getRangeAt(0);
+                        const rect = range.getBoundingClientRect();
+                        
+                        slashCommand.openMenu({
+                            top: rect.bottom + 5,
+                            left: rect.left,
+                        }, blockId);
+                    }
+                } else if (slashCommand.isOpen && slashIndexRef.current >= 0) {
+                    // Update query if menu is open (only if still starts with "/")
+                    if (plainText.startsWith('/')) {
+                        const query = plainText.slice(1);
+                        slashCommand.updateQuery(query);
+                    } else {
+                        // If user typed something other than "/", close the menu
+                        slashCommand.closeMenu();
+                        slashIndexRef.current = -1;
+                    }
+                } else if (!wasEmpty || (plainText.trim().length > 0 && plainText !== '/')) {
+                    // If paragraph had content before or now has content that's not just "/", ensure menu is closed
+                    if (slashCommand.isOpen) {
+                        slashCommand.closeMenu();
+                        slashIndexRef.current = -1;
+                    }
+                }
+            } else if (plainText.length < previousText.length) {
+                // Content was deleted
+                if (slashCommand.isOpen) {
+                    if (plainText === '/') {
+                        // Still just "/", keep menu open
+                        slashIndexRef.current = 0;
+                    } else {
+                        // No longer just "/", close menu
+                        slashCommand.closeMenu();
+                        slashIndexRef.current = -1;
+                    }
+                }
+            }
+            
+            lastContentRef.current = textContent; // Store original with non-breaking spaces
+        };
+
+        // Listen for input events on contentEditable elements within container
+        container.addEventListener('input', handleInput);
+        
+        return () => {
+            container.removeEventListener('input', handleInput);
+        };
+    }, [blockType, slashCommand, blockId]);
+
+    // Handle keyboard events for slash command and Enter key
+    const handleKeyDown = useCallback((e: KeyboardEvent) => {
+        // Handle Enter key to create new paragraph when not in slash command mode
+        if (!slashCommand?.isOpen && e.key === 'Enter' && !e.shiftKey) {
+            const container = containerRef.current;
+            if (container) {
+                const contentEditable = container.querySelector('[contenteditable="true"]') as HTMLElement;
+                if (contentEditable && document.activeElement === contentEditable) {
+                    const selection = window.getSelection();
+                    if (selection && selection.rangeCount > 0) {
+                        const range = selection.getRangeAt(0);
+                        const textContent = contentEditable.textContent || '';
+                        const plainText = textContent.replace(/\u00A0/g, ' ');
+                        
+                        // Check if cursor is at the end of the content
+                        if (range.startOffset === plainText.length && range.endOffset === plainText.length) {
+                            // Create new paragraph below when Enter is pressed at end
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (onAddBlockBelow) {
+                                onAddBlockBelow('paragraph');
+                            }
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+        
+        if (!slashCommand?.isOpen) return;
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            slashCommand.moveSelection('down');
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            slashCommand.moveSelection('up');
+        } else if (e.key === 'Enter' || e.key === 'Tab') {
+            e.preventDefault();
+            e.stopPropagation();
+            const selectedBlock = slashCommand.filteredBlocks[slashCommand.selectedIndex];
+            if (selectedBlock) {
+                // Don't clear content here - the block replacement will handle it
+                // Just replace the block with selected type (this will replace the current paragraph)
+                slashCommand.selectCurrent(blockId);
+            }
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            // Clear the "/" from content - only clear if menu was open
+            if (slashCommand.isOpen) {
+                const container = containerRef.current;
+                if (container) {
+                    const contentEditable = container.querySelector('[contenteditable="true"]') as HTMLElement;
+                    if (contentEditable) {
+                        const textContent = contentEditable.textContent || '';
+                        const plainText = textContent.replace(/\u00A0/g, ' ');
+                        // Only clear if it's just "/"
+                        if (plainText === '/') {
+                            contentEditable.textContent = '';
+                            onContentChange('');
+                        }
+                    }
+                }
+            }
+            slashCommand.closeMenu();
+            slashIndexRef.current = -1;
+        }
+    }, [slashCommand, content, onContentChange, blockId, onAddBlockBelow]);
+
+    useEffect(() => {
+        // Always listen for keydown events (for both slash command and Enter key handling)
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [handleKeyDown]);
+
+    return (
+        <div ref={containerRef}>
+            {children}
+        </div>
+    );
+}