@jhits/plugin-newsletter 0.0.6 → 0.0.8

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

@@ -1,120 +0,0 @@
-'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

@@ -1,156 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Mail, Globe, Users } from 'lucide-react';
-import type { NewsletterMetadata } from '../../../types/newsletter';
-
-export interface EditorSidebarProps {
-    slug: string;
-    metadata: NewsletterMetadata;
-    status: string;
-    onMetadataUpdate: (metadata: Partial<NewsletterMetadata>) => void;
-}
-
-export function EditorSidebar({
-    slug,
-    metadata,
-    status,
-    onMetadataUpdate,
-}: 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>
-                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
-                            Language
-                        </label>
-                        <select
-                            value={metadata.lang || 'en'}
-                            onChange={(e) => onMetadataUpdate({ lang: 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>
-
-            {/* 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">
-                            Slug
-                        </label>
-                        <input
-                            type="text"
-                            value={slug}
-                            readOnly
-                            className="w-full px-3 py-2 text-xs bg-dashboard-bg border border-dashboard-border rounded-lg text-dashboard-text opacity-60 cursor-not-allowed"
-                        />
-                    </div>
-                    <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

@@ -1,31 +0,0 @@
-'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

@@ -1,71 +0,0 @@
-'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

@@ -1,196 +0,0 @@
-'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>
-    );
-}