@jhits/plugin-blog 0.0.9 → 0.0.11

package/src/views/CanvasEditor/BlockWrapper.tsx

@@ -1,522 +0,0 @@
-/**
- * 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 ${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 ${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' && (() => {
-                            const columnCount = block.data.columnCount as number | undefined;
-                            const layout = block.data.layout as string | undefined;
-                            
-                            // Determine number of columns
-                            let numColumns: number;
-                            if (columnCount !== undefined && columnCount > 0) {
-                                numColumns = columnCount;
-                            } else if (layout) {
-                                // Legacy layout system
-                                const layoutMap: Record<string, number> = {
-                                    '50-50': 2,
-                                    '33-66': 2,
-                                    '66-33': 2,
-                                    '25-25-25-25': 4,
-                                    '25-75': 2,
-                                    '75-25': 2,
-                                };
-                                numColumns = layoutMap[layout] || 2;
-                            } else {
-                                numColumns = 2;
-                            }
-                            
-                            // Get column widths
-                            const storedWidths = block.data.columnWidths as number[] | undefined;
-                            const columnWidths = storedWidths && storedWidths.length === numColumns
-                                ? storedWidths
-                                : Array(numColumns).fill(Math.floor(100 / numColumns));
-                            
-                            return (
-                                <div className="flex items-center gap-1.5 ml-4 flex-1 min-w-0">
-                                    {Array.from({ length: numColumns }).map((_, colIndex) => (
-                                        <div key={colIndex} className="flex items-center gap-1">
-                                            <input
-                                                type="number"
-                                                min="10"
-                                                max="90"
-                                                step="1"
-                                                value={columnWidths[colIndex] || 50}
-                                                onChange={(e) => {
-                                                    const newWidth = parseInt(e.target.value) || 50;
-                                                    const newWidths = [...columnWidths];
-                                                    newWidths[colIndex] = Math.max(10, Math.min(90, newWidth));
-                                                    
-                                                    // Normalize remaining columns to sum to 100
-                                                    const remainingTotal = newWidths.reduce((sum, w, i) => i === colIndex ? sum : sum + w, 0);
-                                                    const remainingTarget = 100 - newWidths[colIndex];
-                                                    if (remainingTotal > 0 && remainingTarget > 0) {
-                                                        const scale = remainingTarget / remainingTotal;
-                                                        newWidths.forEach((w, i) => {
-                                                            if (i !== colIndex) {
-                                                                newWidths[i] = Math.round(w * scale);
-                                                            }
-                                                        });
-                                                    }
-                                                    
-                                                    // Ensure sum is exactly 100
-                                                    const finalTotal = newWidths.reduce((sum, w) => sum + w, 0);
-                                                    if (finalTotal !== 100) {
-                                                        const diff = 100 - finalTotal;
-                                                        const lastIndex = newWidths.length - 1;
-                                                        newWidths[lastIndex] = Math.max(10, newWidths[lastIndex] + diff);
-                                                    }
-                                                    
-                                                    onUpdate({
-                                                        ...block.data,
-                                                        columnWidths: newWidths,
-                                                        layout: undefined, // Clear layout when using custom widths
-                                                    });
-                                                }}
-                                                onClick={(e) => e.stopPropagation()}
-                                                className="w-12 text-[10px] font-bold bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 px-1.5 py-0.5 rounded outline-none focus:border-primary transition-all dark:text-neutral-100 text-center"
-                                            />
-                                            <span className="text-[9px] text-neutral-400 dark:text-neutral-500">%</span>
-                                        </div>
-                                    ))}
-                                </div>
-                            );
-                        })()}
-                    </div>
-                    <div className="relative shrink-0 z-20" 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-20"
-                            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-20 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'
-                    }`}
-            >
-                {/* 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>
-    );
-}
-

package/src/views/CanvasEditor/CanvasEditorView.d.ts

@@ -1,14 +0,0 @@
-export interface CanvasEditorViewProps {
-    postId?: string;
-    siteId: string;
-    locale: string;
-    /** Enable dark mode for content area and wrappers (default: true) */
-    darkMode?: boolean;
-    /** Background colors for the editor */
-    backgroundColors?: {
-        light: string;
-        dark?: string;
-    };
-}
-export declare function CanvasEditorView({ postId, darkMode, backgroundColors: propsBackgroundColors, siteId, locale }: CanvasEditorViewProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=CanvasEditorView.d.ts.map

package/src/views/CanvasEditor/CanvasEditorView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasEditorView.d.ts","sourceRoot":"","sources":["CanvasEditorView.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAsTpI"}