@jhits/plugin-blog 0.0.5 → 0.0.7

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

@@ -0,0 +1,160 @@
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import { BlockWrapper } from '../BlockWrapper';
+import { EditorBody } from '../EditorBody';
+import { BlockRenderer } from '../../../lib/blocks/BlockRenderer';
+import type { Block } from '../../../types/block';
+import type { BlockTypeDefinition } from '../../../types/block';
+
+export interface EditorCanvasProps {
+    isPreviewMode: boolean;
+    heroBlock: Block | null;
+    heroBlockDefinition: BlockTypeDefinition | undefined;
+    contentBlocks: Block[];
+    title: string;
+    siteId: string;
+    locale: string;
+    darkMode: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    featuredImage?: {
+        id?: string; // Semantic ID - plugin-images handles transforms
+        alt?: string;
+    };
+    onTitleChange: (title: string) => void;
+    onHeroBlockUpdate: (data: Partial<Block['data']>) => void;
+    onHeroBlockDelete: () => void;
+    onBlockAdd: (type: string, index: number, containerId?: string) => void;
+    onBlockUpdate: (id: string, data: Partial<Block['data']>) => void;
+    onBlockDelete: (id: string) => void;
+    onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
+}
+
+export function EditorCanvas({
+    isPreviewMode,
+    heroBlock,
+    heroBlockDefinition,
+    contentBlocks,
+    title,
+    siteId,
+    locale,
+    darkMode,
+    backgroundColors,
+    featuredImage,
+    onTitleChange,
+    onHeroBlockUpdate,
+    onHeroBlockDelete,
+    onBlockAdd,
+    onBlockUpdate,
+    onBlockDelete,
+    onBlockMove,
+}: EditorCanvasProps) {
+    const titleRef = useRef<HTMLTextAreaElement>(null);
+
+    // Handle Title Auto-resize
+    useEffect(() => {
+        if (titleRef.current) {
+            titleRef.current.style.height = 'auto';
+            titleRef.current.style.height = `${titleRef.current.scrollHeight}px`;
+        }
+    }, [title]);
+
+    return (
+        <div
+            className="flex-1 overflow-y-auto overflow-x-hidden pb-40 px-6 custom-scrollbar selection:bg-primary/20 dark:selection:bg-primary/30 min-h-0"
+            style={{
+                backgroundColor: backgroundColors
+                    ? (darkMode && backgroundColors.dark
+                        ? backgroundColors.dark
+                        : backgroundColors.light)
+                    : undefined,
+            }}
+        >
+            <div className={`mx-auto transition-all duration-500 max-w-7xl w-full`}>
+                {/* Hero Block - Only show editable version when NOT in preview mode */}
+                {!isPreviewMode && heroBlockDefinition && heroBlock && (
+                    <div className="mb-12">
+                        <BlockWrapper
+                            block={heroBlock}
+                            onUpdate={onHeroBlockUpdate}
+                            onDelete={onHeroBlockDelete}
+                            onMoveUp={() => { }}
+                            onMoveDown={() => { }}
+                            allBlocks={[heroBlock]}
+                        />
+                    </div>
+                )}
+
+                {isPreviewMode ? (
+                    <div className="space-y-8">
+                        {heroBlockDefinition && heroBlock && (
+                            <BlockRenderer
+                                block={heroBlock}
+                                context={{ 
+                                    siteId, 
+                                    locale,
+                                    // Pass featured image as fallback for hero block
+                                    // Only pass id and alt - plugin-images handles transforms
+                                    fallbackImage: featuredImage ? {
+                                        id: featuredImage.id,
+                                        alt: featuredImage.alt,
+                                    } : undefined,
+                                }}
+                            />
+                        )}
+
+                        {!heroBlockDefinition && title && (
+                            <h1 className="text-5xl font-serif font-medium text-neutral-950 dark:text-white leading-tight mb-12">
+                                {title}
+                            </h1>
+                        )}
+
+                        {contentBlocks.length > 0 ? (
+                            <div className="space-y-8">
+                                {contentBlocks.map((block) => (
+                                    <BlockRenderer
+                                        key={block.id}
+                                        block={block}
+                                        context={{ siteId, locale }}
+                                    />
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="text-center py-20 text-neutral-400 dark:text-neutral-500">
+                                <p className="text-sm">No content blocks yet. Switch to Edit mode to add blocks.</p>
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <>
+                        {!heroBlockDefinition && (
+                            <div className="mb-12">
+                                <textarea
+                                    ref={titleRef}
+                                    rows={1}
+                                    value={title}
+                                    onChange={(e) => onTitleChange(e.target.value)}
+                                    placeholder="The title of your story..."
+                                    className="w-full bg-transparent border-none outline-none text-5xl font-serif font-medium placeholder:text-neutral-500 dark:placeholder:text-neutral-500 resize-none leading-tight transition-colors duration-300 text-neutral-950 dark:text-white"
+                                />
+                            </div>
+                        )}
+
+                        <EditorBody
+                            blocks={contentBlocks}
+                            darkMode={darkMode}
+                            backgroundColors={backgroundColors}
+                            onBlockAdd={onBlockAdd}
+                            onBlockUpdate={onBlockUpdate}
+                            onBlockDelete={onBlockDelete}
+                            onBlockMove={onBlockMove}
+                        />
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,122 @@
+'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 from state (excluding Hero block from sidebar)
+    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={14} />}
+                                    onAddBlock={onAddBlock}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Empty State */}
+            {allBlocks.length === 0 && (
+                <div className="text-center py-12">
+                    <Library size={32} className="mx-auto text-neutral-300 dark:text-neutral-700 mb-4" />
+                    <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                        No blocks registered yet.
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,181 @@
+'use client';
+
+import React from 'react';
+import { Globe, Search, Box } from 'lucide-react';
+import { FeaturedMediaSection, PrivacySettingsSection } from './index';
+import type { Block } from '../../../types/block';
+import type { PostMetadata, SEOMetadata } from '../../../types/post';
+
+export interface EditorSidebarProps {
+    slug: string;
+    seo: SEOMetadata;
+    metadata: PostMetadata;
+    heroBlock: Block | null;
+    status: string;
+    onSEOUpdate: (seo: Partial<SEOMetadata>) => void;
+    onMetadataUpdate: (metadata: Partial<PostMetadata>) => void;
+}
+
+export function EditorSidebar({
+    slug,
+    seo,
+    metadata,
+    heroBlock,
+    status,
+    onSEOUpdate,
+    onMetadataUpdate,
+}: EditorSidebarProps) {
+    return (
+        <div className="p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full">
+            {/* SEO Section */}
+            <section>
+                <div className="flex items-center gap-3 mb-6">
+                    <Search 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">
+                        SEO 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">
+                            SEO Title
+                        </label>
+                        <input
+                            type="text"
+                            value={seo.title || ''}
+                            onChange={(e) => onSEOUpdate({ title: e.target.value })}
+                            placeholder="SEO title (defaults to post title)"
+                            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">
+                            {seo.title?.length || 0} / 60 characters
+                        </p>
+                    </div>
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Meta Description
+                        </label>
+                        <textarea
+                            value={seo.description || ''}
+                            onChange={(e) => onSEOUpdate({ description: e.target.value })}
+                            placeholder="Brief description for search engines"
+                            rows={3}
+                            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 resize-none"
+                        />
+                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                            {seo.description?.length || 0} / 160 characters
+                        </p>
+                    </div>
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Keywords (comma-separated)
+                        </label>
+                        <input
+                            type="text"
+                            value={seo.keywords?.join(', ') || ''}
+                            onChange={(e) => {
+                                const keywords = e.target.value.split(',').map(k => k.trim()).filter(k => k);
+                                onSEOUpdate({ keywords });
+                            }}
+                            placeholder="keyword1, keyword2, keyword3"
+                            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"
+                        />
+                    </div>
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Open Graph Image URL
+                        </label>
+                        <input
+                            type="url"
+                            value={seo.ogImage || ''}
+                            onChange={(e) => onSEOUpdate({ ogImage: e.target.value })}
+                            placeholder="https://example.com/image.jpg"
+                            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"
+                        />
+                    </div>
+                </div>
+            </section>
+
+            {/* Publishing Section */}
+            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="flex items-center gap-3 mb-6">
+                    <Globe 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">
+                        Publishing
+                    </label>
+                </div>
+                <div className="bg-dashboard-bg p-5 rounded-2xl border border-dashboard-border">
+                    <span className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-3">Slug / Permalink</span>
+                    <div className="text-xs font-mono break-all text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                        /blog/<span className="text-neutral-950 dark:text-white bg-amber-50 dark:bg-amber-900/20 px-1 rounded">{slug || 'untitled-post'}</span>
+                    </div>
+                </div>
+            </section>
+
+            {/* Category Section */}
+            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="flex items-center gap-3 mb-6">
+                    <Box 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">
+                        Category
+                    </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">
+                            Category
+                        </label>
+                        <input
+                            type="text"
+                            value={metadata.categories?.[0] || ''}
+                            onChange={(e) => {
+                                const category = e.target.value.trim();
+                                onMetadataUpdate({
+                                    categories: category ? [category] : []
+                                });
+                            }}
+                            placeholder="Enter category (required for publishing)"
+                            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.categories?.[0] ? 'Category set' : 'No category set'}
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            {/* Featured Media Section */}
+            <FeaturedMediaSection
+                featuredImage={metadata.featuredImage}
+                heroBlock={heroBlock}
+                slug={slug}
+                onUpdate={(image) => onMetadataUpdate({ featuredImage: image })}
+            />
+
+            {/* Privacy Settings Section */}
+            <PrivacySettingsSection
+                privacy={metadata.privacy}
+                onUpdate={(privacy) => onMetadataUpdate({ privacy })}
+            />
+
+            {/* Post Status Section */}
+            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="flex items-center justify-between mb-4">
+                    <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
+                        Post Status
+                    </label>
+                    <span className="text-[10px] font-black text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2.5 py-1 rounded-full uppercase tracking-tighter">
+                        {status}
+                    </span>
+                </div>
+                <p className="text-[11px] text-neutral-500 dark:text-neutral-400 leading-relaxed italic">
+                    {status === 'draft'
+                        ? 'This post is private. Only you can see it until you hit publish.'
+                        : status === 'published'
+                            ? 'This post is live and visible to everyone.'
+                            : 'This post is scheduled for publication.'}
+                </p>
+            </section>
+        </div>
+    );
+}

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

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