@jhits/plugin-blog 0.0.1

package/src/utils/client.ts

@@ -0,0 +1,122 @@
+/**
+ * Client Utilities
+ * Helper functions for fetching blog data in client applications
+ */
+
+import { apiToBlogPost, type APIBlogDocument } from '../lib/mappers/apiMapper';
+import { PostListItem, BlogPost } from '../types/post';
+
+export interface FetchBlogsOptions {
+    /** Maximum number of posts to fetch (default: 10) */
+    limit?: number;
+    /** Number of posts to skip (default: 0) */
+    skip?: number;
+    /** Filter by status (published, draft, concept) */
+    status?: string;
+    /** Whether to fetch all posts for admin (includes drafts) */
+    admin?: boolean;
+    /** API base URL (default: '/api/blogs') */
+    apiBaseUrl?: string;
+}
+
+export interface FetchBlogsResult {
+    /** Array of blog posts */
+    blogs: PostListItem[];
+    /** Total number of posts available */
+    total: number;
+}
+
+/**
+ * Fetch blog posts from the API
+ * 
+ * @example
+ * ```ts
+ * const { blogs, total } = await fetchBlogs({ limit: 5 });
+ * ```
+ */
+export async function fetchBlogs(options: FetchBlogsOptions = {}): Promise<FetchBlogsResult> {
+    const {
+        limit = 10,
+        skip = 0,
+        status,
+        admin = false,
+        apiBaseUrl = '/api/plugin-blog',
+    } = options;
+
+    const params = new URLSearchParams();
+    if (limit) params.set('limit', limit.toString());
+    if (skip) params.set('skip', skip.toString());
+    if (status) params.set('status', status);
+    if (admin) params.set('admin', 'true');
+
+    const url = `${apiBaseUrl}?${params.toString()}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+        throw new Error(`Failed to fetch blogs: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    // Handle error response
+    if (data.error) {
+        throw new Error(data.error || 'Failed to fetch blogs');
+    }
+
+    // Convert API format to PostListItem format
+    const blogsArray = Array.isArray(data.blogs) ? data.blogs : [];
+    const convertedBlogs: PostListItem[] = blogsArray.map((apiDoc: APIBlogDocument) => {
+        const blogPost = apiToBlogPost(apiDoc);
+        return {
+            id: blogPost.id,
+            title: blogPost.title,
+            slug: blogPost.slug,
+            excerpt: blogPost.metadata.excerpt || '',
+            status: blogPost.publication.status,
+            authorId: blogPost.publication.authorId || '',
+            updatedAt: blogPost.updatedAt,
+            featuredImage: blogPost.metadata.featuredImage,
+        };
+    });
+
+    return {
+        blogs: convertedBlogs,
+        total: data.total || convertedBlogs.length,
+    };
+}
+
+export interface FetchBlogOptions {
+    /** Blog post slug */
+    slug: string;
+    /** API base URL (default: '/api/blogs') */
+    apiBaseUrl?: string;
+}
+
+/**
+ * Fetch a single blog post by slug
+ * 
+ * @example
+ * ```ts
+ * const blog = await fetchBlog({ slug: 'my-blog-post' });
+ * ```
+ */
+export async function fetchBlog(options: FetchBlogOptions): Promise<BlogPost> {
+    const { slug, apiBaseUrl = '/api/plugin-blog' } = options;
+
+    if (!slug) {
+        throw new Error('Slug is required');
+    }
+
+    const response = await fetch(`${apiBaseUrl}/${slug}`);
+
+    if (!response.ok) {
+        if (response.status === 404) {
+            throw new Error('Blog post not found');
+        }
+        throw new Error(`Failed to fetch blog: ${response.status}`);
+    }
+
+    const apiDoc: APIBlogDocument = await response.json();
+    return apiToBlogPost(apiDoc);
+}
+

package/src/utils/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Utilities
+ * Helper functions and utilities for the blog plugin
+ */
+
+export * from './client';
+export * from './blockHelpers';
+export * from './slugify';
+

package/src/views/CanvasEditor/BlockWrapper.tsx

@@ -0,0 +1,459 @@
+/**
+ * Block Wrapper Component
+ * Provides hover controls (Delete, Move, Settings) for each block
+ */
+
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Plus, Trash2, ChevronUp, ChevronDown, Settings2, GripVertical, Copy } from 'lucide-react';
+import { Block } from '../../types/block';
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { getChildBlocks, isContainerBlock } from '../../lib/utils/blockHelpers';
+import { useEditor } from '../../state/EditorContext';
+
+export interface BlockWrapperProps {
+    block: Block;
+    onUpdate: (data: Partial<Block['data']>) => void;
+    onDelete: () => void;
+    onMoveUp?: () => void;
+    onMoveDown?: () => void;
+    /** All blocks in the editor (for resolving child block IDs) */
+    allBlocks?: Block[];
+}
+
+export function BlockWrapper({
+    block,
+    onUpdate,
+    onDelete,
+    onMoveUp,
+    onMoveDown,
+    allBlocks = [],
+}: BlockWrapperProps) {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isControlsHovered, setIsControlsHovered] = useState(false);
+    const [showControls, setShowControls] = useState(false);
+    const [isSelectingText, setIsSelectingText] = useState(false);
+    const [showSettingsMenu, setShowSettingsMenu] = useState(false);
+    const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const settingsMenuRef = useRef<HTMLDivElement>(null);
+    const { helpers, state, dispatch } = useEditor();
+    const blockDefinition = blockRegistry.get(block.type);
+
+    // Check if this is a container block
+    const isContainer = isContainerBlock(block, blockRegistry);
+    // Get child blocks - if children are Block objects, use them directly
+    const childBlocks = isContainer && block.children && Array.isArray(block.children) && block.children.length > 0
+        ? (typeof block.children[0] === 'object'
+            ? block.children as Block[]
+            : getChildBlocks(block, state.blocks))
+        : [];
+
+    // Handle delayed hide with timeout
+    useEffect(() => {
+        const shouldShow = isHovered || isControlsHovered;
+
+        if (shouldShow) {
+            // Clear any pending hide timeout
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+                hideTimeoutRef.current = null;
+            }
+            // Show immediately
+            setShowControls(true);
+        } else {
+            // Delay hiding by 500ms
+            hideTimeoutRef.current = setTimeout(() => {
+                setShowControls(false);
+            }, 500);
+        }
+
+        return () => {
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+            }
+        };
+    }, [isHovered, isControlsHovered]);
+
+    if (!blockDefinition) {
+        return (
+            <div className="p-4 border border-red-300 dark:border-red-700 rounded-2xl bg-red-50 dark:bg-red-900/20">
+                <p className="text-sm text-red-600 dark:text-red-400">
+                    Unknown block type: {block.type}
+                </p>
+            </div>
+        );
+    }
+
+    const EditComponent = blockDefinition.components.Edit;
+
+    const handleDragStart = (e: React.DragEvent) => {
+        // Check if user is selecting text - if so, prevent dragging
+        const selection = window.getSelection();
+        if (selection && selection.toString().length > 0) {
+            e.preventDefault();
+            return;
+        }
+
+        // Prevent dragging if user was selecting text
+        if (isSelectingText) {
+            e.preventDefault();
+            return;
+        }
+
+        // Only allow dragging when the block is focused/selected (hovered)
+        if (!isHovered && !showControls) {
+            e.preventDefault();
+            return;
+        }
+
+        // Stop propagation to prevent parent containers from also handling the drag
+        e.stopPropagation();
+
+        console.log('[BlockWrapper] Drag Start:', {
+            blockId: block.id,
+            blockType: block.type,
+            blockData: block.data,
+            isContainer,
+            hasChildren: isContainer && childBlocks.length > 0,
+        });
+
+        e.dataTransfer.setData('block-id', block.id);
+        e.dataTransfer.setData('block-type', block.type);
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', ''); // Required for Firefox
+
+        // Store in a way that persists across components
+        if (typeof window !== 'undefined') {
+            (window as any).__DRAGGED_BLOCK_ID__ = block.id;
+            console.log('[BlockWrapper] Stored global dragged block ID:', block.id);
+        }
+    };
+
+    // Track text selection
+    const handleMouseDown = (e: React.MouseEvent) => {
+        // Check if clicking on an input, textarea, or contentEditable element
+        const target = e.target as HTMLElement;
+        const isEditableElement = target.tagName === 'INPUT' ||
+            target.tagName === 'TEXTAREA' ||
+            target.isContentEditable ||
+            target.closest('input, textarea, [contenteditable="true"]');
+
+        if (isEditableElement) {
+            setIsSelectingText(true);
+            // Reset after mouse up
+            const handleMouseUp = () => {
+                setTimeout(() => {
+                    const selection = window.getSelection();
+                    if (!selection || selection.toString().length === 0) {
+                        setIsSelectingText(false);
+                    }
+                }, 100);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+    };
+
+    // For hero blocks, only show controls when hovering over the image container
+    const isHeroBlock = block.type === 'hero';
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+        if (isHeroBlock) {
+            // For hero blocks, check if mouse is actually over the image container element
+            const target = e.target as HTMLElement;
+            // Check if we're over the image container (using data attribute for more reliable detection)
+            const imageContainer = target.closest('[data-hero-image-container]');
+            // Check if we're over an Image component (from plugin-images)
+            const imageElement = target.closest('[data-image-id]');
+            // Check if we're directly over an img tag
+            const isImgTag = target.tagName === 'IMG';
+
+            const isOverImage = !!(imageContainer || imageElement || isImgTag);
+            setIsHovered(isOverImage);
+        } else if (!isHeroBlock) {
+            setIsHovered(true);
+        }
+    };
+
+    const handleMouseEnter = (e: React.MouseEvent) => {
+        if (!isHeroBlock) {
+            setIsHovered(true);
+        } else {
+            // For hero blocks, check position on enter
+            handleMouseMove(e);
+        }
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+
+    // Close settings menu when clicking outside
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (settingsMenuRef.current && !settingsMenuRef.current.contains(event.target as Node)) {
+                setShowSettingsMenu(false);
+            }
+        }
+
+        if (showSettingsMenu) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [showSettingsMenu]);
+
+    // Generate a unique block ID
+    const generateBlockId = (): string => {
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+        return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    };
+
+    // 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) {
+                // Check if children are Block objects or IDs
+                if (typeof blockToClone.children[0] === 'object') {
+                    cloned.children = (blockToClone.children as Block[]).map(cloneBlock);
+                } else {
+                    // If children are IDs, we need to find and clone the actual blocks
+                    const childBlocks = getChildBlocks(blockToClone, allBlocks.length > 0 ? allBlocks : state.blocks);
+                    cloned.children = childBlocks.map(cloneBlock);
+                }
+            }
+        }
+
+        return cloned;
+    };
+
+    const handleCopy = () => {
+        const clonedBlock = cloneBlock(block);
+        // Store in localStorage for persistence across components
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('__BLOG_EDITOR_COPIED_BLOCK__', JSON.stringify(clonedBlock));
+        }
+        setShowSettingsMenu(false);
+    };
+
+    // Store block ID when hovering for paste context
+    useEffect(() => {
+        if (isHovered || showControls) {
+            if (typeof window !== 'undefined') {
+                (window as any).__BLOG_EDITOR_HOVERED_BLOCK_ID__ = block.id;
+            }
+        }
+    }, [isHovered, showControls, block.id]);
+
+    return (
+        <div
+            ref={wrapperRef}
+            className="group relative"
+            onMouseEnter={handleMouseEnter}
+            onMouseMove={isHeroBlock ? handleMouseMove : undefined}
+            onMouseLeave={handleMouseLeave}
+            onMouseDown={handleMouseDown}
+            draggable={isHovered || showControls}
+            onDragStart={handleDragStart}
+            data-block-wrapper
+            data-block-id={block.id}
+        >
+            {/* Left Margin Controls - Visible on Hover */}
+            <div
+                className={`absolute -left-16 top-1/2 -translate-y-1/2 flex flex-col gap-2 transition-all duration-200 z-20 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                    }`}
+                onMouseEnter={() => setIsControlsHovered(true)}
+                onMouseLeave={() => setIsControlsHovered(false)}
+            >
+                {/* Add Block Above */}
+                <button
+                    className="p-2 text-neutral-500 dark:text-neutral-400 hover:text-primary dark:hover:text-primary bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-primary dark:hover:border-primary/50 transition-colors"
+                    title="Add block above"
+                >
+                    <Plus size={14} />
+                </button>
+
+                {/* Move Up */}
+                {onMoveUp && (
+                    <button
+                        onClick={onMoveUp}
+                        className="p-2 text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 transition-colors"
+                        title="Move up"
+                    >
+                        <ChevronUp size={14} />
+                    </button>
+                )}
+
+                {/* Move Down */}
+                {onMoveDown && (
+                    <button
+                        onClick={onMoveDown}
+                        className="p-2 text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 transition-colors"
+                        title="Move down"
+                    >
+                        <ChevronDown size={14} />
+                    </button>
+                )}
+
+                {/* Delete */}
+                <button
+                    onClick={onDelete}
+                    className="p-2 text-neutral-500 dark:text-neutral-400 hover:text-red-500 dark:hover:text-red-400 bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-red-500 dark:hover:border-red-500/50 transition-colors"
+                    title="Delete block"
+                >
+                    <Trash2 size={14} />
+                </button>
+            </div>
+
+            {/* Block Header - Positioned above the component */}
+            <div
+                className={`mb-2 transition-all relative z-[100] ${isHovered || showControls || showSettingsMenu
+                    ? 'opacity-100 translate-y-0'
+                    : 'opacity-0 -translate-y-2 pointer-events-none'
+                    }`}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+            >
+                <div className="flex items-center justify-between px-2 py-1.5 rounded-lg backdrop-blur-sm border bg-neutral-50/95 dark:bg-neutral-800/95 border-neutral-200 dark:border-neutral-800">
+                    <div className="flex items-center gap-2 flex-1 min-w-0">
+                        <GripVertical
+                            size={12}
+                            className="cursor-grab active:cursor-grabbing shrink-0 text-neutral-400 dark:text-neutral-500"
+                        />
+                        <span className="text-[10px] font-black uppercase tracking-wider shrink-0 text-neutral-500 dark:text-neutral-400">
+                            {blockDefinition.name}
+                        </span>
+
+                        {/* Layout Block Settings - Inline in header */}
+                        {block.type === 'section' && (
+                            <div className="flex items-center gap-2 ml-4 flex-1 min-w-0">
+                                <select
+                                    value={(block.data.padding as string) || 'md'}
+                                    onChange={(e) => onUpdate({ padding: e.target.value })}
+                                    onClick={(e) => e.stopPropagation()}
+                                    className="text-[10px] font-bold border px-2 py-1 rounded outline-none focus:border-primary transition-all bg-white dark:bg-neutral-900/50 border-neutral-300 dark:border-neutral-700 dark:text-neutral-100"
+                                >
+                                    <option value="sm">Small</option>
+                                    <option value="md">Medium</option>
+                                    <option value="lg">Large</option>
+                                </select>
+                                <select
+                                    value={(block.data.background as string) || 'DEFAULT'}
+                                    onChange={(e) => onUpdate({ background: e.target.value })}
+                                    onClick={(e) => e.stopPropagation()}
+                                    className="text-[10px] font-bold border px-2 py-1 rounded outline-none focus:border-primary transition-all bg-white dark:bg-neutral-900/50 border-neutral-300 dark:border-neutral-700 dark:text-neutral-100"
+                                >
+                                    <option value="DEFAULT">Default</option>
+                                    <option value="NEUTRAL">Neutral</option>
+                                    <option value="SAGE">Sage</option>
+                                    <option value="CREAM">Cream</option>
+                                </select>
+                            </div>
+                        )}
+
+                        {block.type === 'columns' && (
+                            <select
+                                value={(block.data.layout as string) || '50-50'}
+                                onChange={(e) => onUpdate({ layout: e.target.value })}
+                                onClick={(e) => e.stopPropagation()}
+                                className="text-[10px] font-bold bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 px-2 py-1 rounded outline-none focus:border-primary transition-all dark:text-neutral-100 ml-4"
+                            >
+                                <option value="50-50">50% / 50%</option>
+                                <option value="33-66">33% / 66%</option>
+                                <option value="66-33">66% / 33%</option>
+                                <option value="25-25-25-25">25% / 25% / 25% / 25%</option>
+                                <option value="25-75">25% / 75%</option>
+                                <option value="75-25">75% / 25%</option>
+                            </select>
+                        )}
+                    </div>
+                    <div className="relative shrink-0 z-[200]" ref={settingsMenuRef}>
+                        <button
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setShowSettingsMenu(!showSettingsMenu);
+                            }}
+                            className="p-1 rounded transition-colors text-neutral-400 dark:text-neutral-500 hover:text-neutral-950 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 relative z-[200]"
+                            title="Block settings"
+                        >
+                            <Settings2 size={12} />
+                        </button>
+
+                        {/* Settings Dropdown Menu */}
+                        {showSettingsMenu && (
+                            <div className="absolute right-0 top-full mt-1 w-40 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl z-[200] overflow-hidden">
+                                <button
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleCopy();
+                                    }}
+                                    className="w-full flex items-center gap-2 px-3 py-2 text-xs font-bold text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                                >
+                                    <Copy size={14} />
+                                    <span>Copy</span>
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Block Content Wrapper - Always visible border, minimal padding */}
+            <div
+                className={`relative rounded-xl border-2 transition-all ${showControls
+                    ? 'border-primary/60 dark:border-primary/40 bg-primary/5 dark:bg-primary/10'
+                    : 'border-neutral-200 dark:border-neutral-700 bg-transparent'
+                    }`}
+                style={{ zIndex: 1 }}
+            >
+                {/* Edit Component - No padding, let the component control its own spacing */}
+                <div className="relative" style={{ userSelect: 'text' }}>
+                    {/* For container blocks, pass child blocks and handlers */}
+                    {isContainer && (block.type === 'section' || block.type === 'columns') ? (
+                        <EditComponent
+                            block={block}
+                            onUpdate={onUpdate}
+                            onDelete={onDelete}
+                            isSelected={isHovered}
+                            childBlocks={childBlocks}
+                            onChildBlockAdd={(type, index, containerId) => {
+                                helpers.addBlock(type, index, containerId || block.id);
+                            }}
+                            onChildBlockUpdate={(id, data, containerId) => {
+                                helpers.updateBlock(id, data);
+                            }}
+                            onChildBlockDelete={(id, containerId) => {
+                                helpers.deleteBlock(id);
+                            }}
+                            onChildBlockMove={(id, newIndex, containerId) => {
+                                helpers.moveBlock(id, newIndex, containerId || block.id);
+                            }}
+                        />
+                    ) : (
+                        <EditComponent
+                            block={block}
+                            onUpdate={onUpdate}
+                            onDelete={onDelete}
+                            isSelected={isHovered}
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+