@jhits/plugin-blog 0.0.14 → 0.0.16

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

@@ -0,0 +1,80 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+
+export interface LibraryItemProps {
+    icon: React.ReactNode;
+    label: string;
+    blockType: string;
+    description?: string;
+    onAddBlock?: (blockType: string) => void;
+}
+
+/**
+ * Reusable Library Item Component
+ * Makes blocks draggable from the library and clickable to add at bottom
+ */
+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); // Mark as dragged when drag starts
+    };
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        // Track mouse position on mousedown
+        mouseDownRef.current = { x: e.clientX, y: e.clientY };
+        setHasDragged(false); // Reset drag state
+    };
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+        // If mouse moved more than 5px, consider it a drag
+        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) => {
+        // Only add block if we didn't drag
+        if (!hasDragged && onAddBlock) {
+            e.preventDefault();
+            e.stopPropagation();
+            onAddBlock(blockType);
+        }
+        // Reset state
+        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/PrivacySettingsSection.d.ts

@@ -0,0 +1,15 @@
+export interface PrivacySettings {
+    isPrivate?: boolean;
+    password?: string;
+    sharedWithUsers?: string[];
+}
+export interface PrivacySettingsSectionProps {
+    privacy?: PrivacySettings;
+    onUpdate: (privacy: PrivacySettings) => void;
+}
+/**
+ * Privacy Settings Section Component
+ * Handles privacy settings: private, password-protected, share with users
+ */
+export declare function PrivacySettingsSection({ privacy, onUpdate, }: PrivacySettingsSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PrivacySettingsSection.d.ts.map

package/src/views/CanvasEditor/components/PrivacySettingsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrivacySettingsSection.d.ts","sourceRoot":"","sources":["PrivacySettingsSection.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,2BAA2B;IACxC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACnC,OAAO,EACP,QAAQ,GACX,EAAE,2BAA2B,2CA2L7B"}

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

@@ -0,0 +1,212 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Shield, Key, Users } from 'lucide-react';
+
+export interface PrivacySettings {
+    isPrivate?: boolean;
+    password?: string;
+    sharedWithUsers?: string[];
+}
+
+export interface PrivacySettingsSectionProps {
+    privacy?: PrivacySettings;
+    onUpdate: (privacy: PrivacySettings) => void;
+}
+
+/**
+ * Privacy Settings Section Component
+ * Handles privacy settings: private, password-protected, share with users
+ */
+export function PrivacySettingsSection({
+    privacy,
+    onUpdate,
+}: PrivacySettingsSectionProps) {
+    const [users, setUsers] = useState<Array<{ _id: string; name: string; email: string }>>([]);
+    const [loadingUsers, setLoadingUsers] = useState(false);
+    const [showPasswordInput, setShowPasswordInput] = useState(false);
+    const [passwordValue, setPasswordValue] = useState(privacy?.password || '');
+    const [showUserSelector, setShowUserSelector] = useState(false);
+
+    // Fetch users from plugin-users
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                setLoadingUsers(true);
+                const res = await fetch('/api/users');
+                const data = await res.json();
+                if (Array.isArray(data)) {
+                    setUsers(data);
+                }
+            } catch (err) {
+                console.error('Failed to load users', err);
+            } finally {
+                setLoadingUsers(false);
+            }
+        };
+        fetchUsers();
+    }, []);
+
+    const handlePrivacyToggle = (isPrivate: boolean) => {
+        onUpdate({
+            ...privacy,
+            isPrivate,
+            // Clear password and shared users if making public
+            ...(isPrivate ? {} : { password: undefined, sharedWithUsers: undefined }),
+        });
+    };
+
+    const handlePasswordChange = (password: string) => {
+        setPasswordValue(password);
+        onUpdate({
+            ...privacy,
+            password: password || undefined,
+        });
+    };
+
+    const handleUserToggle = (userId: string) => {
+        const currentUsers = privacy?.sharedWithUsers || [];
+        const newUsers = currentUsers.includes(userId)
+            ? currentUsers.filter(id => id !== userId)
+            : [...currentUsers, userId];
+        onUpdate({
+            ...privacy,
+            sharedWithUsers: newUsers.length > 0 ? newUsers : undefined,
+        });
+    };
+
+    return (
+        <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+            <div className="flex items-center gap-3 mb-6">
+                <Shield 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">
+                    Privacy Settings
+                </label>
+            </div>
+            <div className="space-y-4">
+                {/* Private Toggle */}
+                <div className="flex items-center justify-between">
+                    <div>
+                        <label className="text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1">
+                            Make Private
+                        </label>
+                        <p className="text-[9px] text-neutral-500 dark:text-neutral-400">
+                            Hide from public view
+                        </p>
+                    </div>
+                    <button
+                        onClick={() => handlePrivacyToggle(!privacy?.isPrivate)}
+                        className={`relative w-12 h-6 rounded-full transition-colors ${privacy?.isPrivate ? 'bg-primary' : 'bg-neutral-300 dark:bg-neutral-700'
+                            }`}
+                    >
+                        <div className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${privacy?.isPrivate ? 'translate-x-6' : 'translate-x-0'
+                            }`} />
+                    </button>
+                </div>
+
+                {/* Password Protection */}
+                {privacy?.isPrivate && (
+                    <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <label className="text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1">
+                                    Password Protection
+                                </label>
+                                <p className="text-[9px] text-neutral-500 dark:text-neutral-400">
+                                    Require password to view
+                                </p>
+                            </div>
+                            <button
+                                onClick={() => {
+                                    setShowPasswordInput(!showPasswordInput);
+                                    if (!showPasswordInput && !privacy.password) {
+                                        setPasswordValue('');
+                                    }
+                                }}
+                                className={`p-1.5 rounded-lg transition-colors ${privacy.password || showPasswordInput
+                                    ? 'bg-primary/10 text-primary'
+                                    : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-400'
+                                    }`}
+                            >
+                                <Key size={14} />
+                            </button>
+                        </div>
+                        {(showPasswordInput || privacy.password) && (
+                            <input
+                                type="password"
+                                value={passwordValue}
+                                onChange={(e) => handlePasswordChange(e.target.value)}
+                                placeholder="Enter password"
+                                className="w-full px-3 py-2 text-xs bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg outline-none focus:border-primary transition-all dark:text-neutral-100"
+                            />
+                        )}
+                    </div>
+                )}
+
+                {/* Share with Users */}
+                {privacy?.isPrivate && (
+                    <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <label className="text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1">
+                                    Share with Users
+                                </label>
+                                <p className="text-[9px] text-neutral-500 dark:text-neutral-400">
+                                    Grant access to specific users
+                                </p>
+                            </div>
+                            <button
+                                onClick={() => setShowUserSelector(!showUserSelector)}
+                                className={`p-1.5 rounded-lg transition-colors ${(privacy.sharedWithUsers?.length || 0) > 0 || showUserSelector
+                                    ? 'bg-primary/10 text-primary'
+                                    : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-400'
+                                    }`}
+                            >
+                                <Users size={14} />
+                            </button>
+                        </div>
+                        {showUserSelector && (
+                            <div className="bg-dashboard-bg rounded-lg p-3 border border-dashboard-border max-h-48 overflow-y-auto">
+                                {loadingUsers ? (
+                                    <p className="text-[10px] text-neutral-500 dark:text-neutral-400">Loading users...</p>
+                                ) : users.length === 0 ? (
+                                    <p className="text-[10px] text-neutral-500 dark:text-neutral-400">No users found</p>
+                                ) : (
+                                    <div className="space-y-2">
+                                        {users.map((user) => (
+                                            <label
+                                                key={user._id}
+                                                className="flex items-center gap-2 cursor-pointer hover:bg-dashboard-bg p-2 rounded transition-colors"
+                                            >
+                                                <input
+                                                    type="checkbox"
+                                                    checked={privacy.sharedWithUsers?.includes(user._id) || false}
+                                                    onChange={() => handleUserToggle(user._id)}
+                                                    className="rounded border-neutral-300 dark:border-neutral-700 text-primary focus:ring-primary"
+                                                />
+                                                <div className="flex-1 min-w-0">
+                                                    <p className="text-[10px] font-bold text-neutral-700 dark:text-neutral-300 truncate">
+                                                        {user.name}
+                                                    </p>
+                                                    <p className="text-[9px] text-neutral-500 dark:text-neutral-400 truncate">
+                                                        {user.email}
+                                                    </p>
+                                                </div>
+                                            </label>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                        {privacy.sharedWithUsers && privacy.sharedWithUsers.length > 0 && (
+                            <p className="text-[9px] text-neutral-500 dark:text-neutral-400">
+                                Shared with {privacy.sharedWithUsers.length} user{privacy.sharedWithUsers.length !== 1 ? 's' : ''}
+                            </p>
+                        )}
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}
+

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

@@ -0,0 +1,21 @@
+/**
+ * Canvas Editor Components
+ * Exports all components used in the Canvas Editor
+ */
+export { LibraryItem } from './LibraryItem';
+export type { LibraryItemProps } from './LibraryItem';
+export { CustomBlockItem } from './CustomBlockItem';
+export type { CustomBlockItemProps } from './CustomBlockItem';
+export { FeaturedMediaSection } from './FeaturedMediaSection';
+export type { FeaturedMediaSectionProps, FeaturedImage } from './FeaturedMediaSection';
+export { PrivacySettingsSection } from './PrivacySettingsSection';
+export type { PrivacySettingsSectionProps, PrivacySettings } from './PrivacySettingsSection';
+export { ErrorBanner } from './ErrorBanner';
+export type { ErrorBannerProps } from './ErrorBanner';
+export { EditorLibrary } from './EditorLibrary';
+export type { EditorLibraryProps } from './EditorLibrary';
+export { EditorCanvas } from './EditorCanvas';
+export type { EditorCanvasProps } from './EditorCanvas';
+export { EditorSidebar } from './EditorSidebar';
+export type { EditorSidebarProps } from './EditorSidebar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvF,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE7F,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,28 @@
+/**
+ * Canvas Editor Components
+ * Exports all components used in the Canvas Editor
+ */
+
+export { LibraryItem } from './LibraryItem';
+export type { LibraryItemProps } from './LibraryItem';
+
+export { CustomBlockItem } from './CustomBlockItem';
+export type { CustomBlockItemProps } from './CustomBlockItem';
+
+export { FeaturedMediaSection } from './FeaturedMediaSection';
+export type { FeaturedMediaSectionProps, FeaturedImage } from './FeaturedMediaSection';
+
+export { PrivacySettingsSection } from './PrivacySettingsSection';
+export type { PrivacySettingsSectionProps, PrivacySettings } from './PrivacySettingsSection';
+
+export { ErrorBanner } from './ErrorBanner';
+export type { ErrorBannerProps } from './ErrorBanner';
+
+export { EditorLibrary } from './EditorLibrary';
+export type { EditorLibraryProps } from './EditorLibrary';
+
+export { EditorCanvas } from './EditorCanvas';
+export type { EditorCanvasProps } from './EditorCanvas';
+
+export { EditorSidebar } from './EditorSidebar';
+export type { EditorSidebarProps } from './EditorSidebar';

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

@@ -0,0 +1,10 @@
+/**
+ * Canvas Editor Hooks
+ * Exports all custom hooks used in the Canvas Editor
+ */
+export { usePostLoader } from './usePostLoader';
+export { useHeroBlock } from './useHeroBlock';
+export { useRegisteredBlocks } from './useRegisteredBlocks';
+export { useKeyboardShortcuts } from './useKeyboardShortcuts';
+export { useUnsavedChanges } from './useUnsavedChanges';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * Canvas Editor Hooks
+ * Exports all custom hooks used in the Canvas Editor
+ */
+
+export { usePostLoader } from './usePostLoader';
+export { useHeroBlock } from './useHeroBlock';
+export { useRegisteredBlocks } from './useRegisteredBlocks';
+export { useKeyboardShortcuts } from './useKeyboardShortcuts';
+export { useUnsavedChanges } from './useUnsavedChanges';

package/src/views/CanvasEditor/hooks/useHeroBlock.d.ts

@@ -0,0 +1,8 @@
+import type { Block } from '../../../types/block';
+import type { EditorState } from '../../../state/types';
+export declare function useHeroBlock(state: EditorState, registeredBlocks: any[]): {
+    heroBlock: Block | null;
+    setHeroBlock: import("react").Dispatch<import("react").SetStateAction<Block | null>>;
+    heroBlockDefinition: import("../../..").BlockTypeDefinition | undefined;
+};
+//# sourceMappingURL=useHeroBlock.d.ts.map

package/src/views/CanvasEditor/hooks/useHeroBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeroBlock.d.ts","sourceRoot":"","sources":["useHeroBlock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAUxD,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,EAAE;;;;EAyFvE"}

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

@@ -0,0 +1,103 @@
+import { useState, useEffect, useMemo } from 'react';
+import { blockRegistry } from '../../../registry/BlockRegistry';
+import type { Block } from '../../../types/block';
+import type { EditorState } from '../../../state/types';
+
+// Generate a unique block ID
+function generateBlockId(): string {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+export function useHeroBlock(state: EditorState, registeredBlocks: any[]) {
+    const [heroBlock, setHeroBlock] = useState<Block | null>(null);
+
+    // Get Hero block definition from registered blocks (REQUIRED)
+    const heroBlockDefinition = useMemo(() => {
+        return blockRegistry.get('hero');
+    }, [registeredBlocks]);
+
+    // Initialize hero block if Hero block definition exists
+    useEffect(() => {
+        if (heroBlockDefinition) {
+            // Get default data from block definition
+            const heroData = heroBlockDefinition.defaultData || {};
+
+            // Initialize hero block only if it doesn't exist yet
+            setHeroBlock(prev => {
+                if (!prev) {
+                    // First, try to find hero block in contentBlocks (from loaded post)
+                    const heroBlockFromContent = state.blocks.find(block => block.type === 'hero');
+                    
+                    if (heroBlockFromContent) {
+                        return heroBlockFromContent;
+                    }
+                    
+                    // If no hero block in contentBlocks, initialize from defaults
+                    // Hero image and featured image are completely independent - no syncing
+                    const initialData = {
+                        ...heroData,
+                        title: state.title || heroData.title || '',
+                        summary: state.metadata.excerpt || heroData.summary || '',
+                        image: heroData.image, // Use default image, not featured image
+                    };
+                    return {
+                        id: generateBlockId(),
+                        type: 'hero',
+                        data: initialData,
+                    };
+                }
+                // Keep existing hero block data - let the Edit component manage it
+                return prev;
+            });
+        } else {
+            setHeroBlock(null);
+        }
+    }, [heroBlockDefinition, state.blocks, state.title, state.metadata.excerpt]);
+
+    // Sync hero block with editor state when post is loaded (for existing posts)
+    // BUT: Never sync image from featured image to hero - they are independent
+    // Only sync title, summary, and category
+    useEffect(() => {
+        if (heroBlock && heroBlockDefinition && state.postId) {
+            // Only update if the hero block data doesn't match the editor state
+            // This prevents overwriting user edits with stale data
+            const currentTitle = (heroBlock.data as any)?.title || '';
+            const currentSummary = (heroBlock.data as any)?.summary || '';
+            const currentCategory = (heroBlock.data as any)?.category || '';
+
+            const stateTitle = state.title || '';
+            const stateSummary = state.metadata.excerpt || '';
+            const stateCategory = state.metadata.categories?.[0] || '';
+
+            // Check if hero block is out of sync with editor state
+            // NOTE: We do NOT sync image anymore - hero and featured image are independent
+            const titleMismatch = currentTitle !== stateTitle;
+            const summaryMismatch = currentSummary !== stateSummary;
+            const categoryMismatch = currentCategory !== stateCategory;
+
+            // Only update title, summary, and category - NEVER update image
+            // The hero block image should come from contentBlocks, not from featured image
+            if ((titleMismatch || summaryMismatch || categoryMismatch) && (stateTitle || stateSummary || stateCategory)) {
+                setHeroBlock({
+                    ...heroBlock,
+                    data: {
+                        ...heroBlock.data,
+                        title: stateTitle || (heroBlock.data as any)?.title || '',
+                        summary: stateSummary || (heroBlock.data as any)?.summary || '',
+                        // DO NOT sync image - keep hero block's own image
+                        category: stateCategory || (heroBlock.data as any)?.category || '',
+                    },
+                });
+            }
+        }
+    }, [state.postId, state.title, state.metadata.excerpt, state.metadata.categories, heroBlockDefinition, heroBlock]);
+
+    return {
+        heroBlock,
+        setHeroBlock,
+        heroBlockDefinition,
+    };
+}

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

@@ -0,0 +1,3 @@
+import type { EditorState } from '../../../state/types';
+export declare function useKeyboardShortcuts(state: EditorState, dispatch: (action: any) => void, canUndo: boolean, canRedo: boolean, undo: () => void, redo: () => void): void;
+//# sourceMappingURL=useKeyboardShortcuts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["useKeyboardShortcuts.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAUxD,wBAAgB,oBAAoB,CAChC,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,EAC/B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,MAAM,IAAI,EAChB,IAAI,EAAE,MAAM,IAAI,QA2HnB"}

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

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