@jhits/plugin-blog 0.0.1

package/src/lib/layouts/blocks/ColumnsBlock.tsx

@@ -0,0 +1,134 @@
+/**
+ * Columns Block
+ * Flex/grid container with configurable column layouts
+ */
+
+'use client';
+
+import React from 'react';
+import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
+import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
+import { COLUMN_LAYOUTS, ColumnLayout } from '../index';
+import { Block } from '../../../types/block';
+
+/**
+ * Columns Block Edit Component
+ */
+export const ColumnsEdit: React.FC<BlockEditProps & {
+    childBlocks: Block[];
+    onChildBlockAdd: (type: string, index: number, containerId: string) => void;
+    onChildBlockUpdate: (id: string, data: Partial<Block['data']>, containerId: string) => void;
+    onChildBlockDelete: (id: string, containerId: string) => void;
+    onChildBlockMove: (id: string, newIndex: number, containerId: string) => void;
+}> = ({
+    block,
+    onUpdate,
+    isSelected,
+    childBlocks = [],
+    onChildBlockAdd,
+    onChildBlockUpdate,
+    onChildBlockDelete,
+    onChildBlockMove,
+}) => {
+        const layout = (block.data.layout as ColumnLayout) || '50-50';
+        const layoutConfig = COLUMN_LAYOUTS[layout];
+        const numColumns = layoutConfig.widths.length;
+
+        // Split child blocks into columns based on columnIndex in meta, or round-robin
+        const columns: Block[][] = Array.from({ length: numColumns }, () => []);
+        childBlocks.forEach((childBlock) => {
+            const columnIndex = childBlock.meta?.columnIndex;
+            if (typeof columnIndex === 'number' && columnIndex >= 0 && columnIndex < numColumns) {
+                columns[columnIndex].push(childBlock);
+            } else {
+                // Fallback to round-robin if no columnIndex specified
+                const index = childBlocks.indexOf(childBlock);
+                columns[index % numColumns].push(childBlock);
+            }
+        });
+
+        return (
+            <div className="rounded-xl bg-white">
+                {/* Column Grid */}
+                <div className={`grid ${layoutConfig.grid} gap-8 p-6`}>
+                    {Array.from({ length: numColumns }).map((_, colIndex) => (
+                        <div
+                            key={colIndex}
+                            className={`min-h-[200px] rounded-xl border border-dashed transition-all ${isSelected
+                                ? 'border-primary/20'
+                                : 'border-gray-200/50'
+                                }`}
+                        >
+                            <div className="p-4">
+                                <div className="mb-3 flex items-center justify-between">
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-400">
+                                        Column {colIndex + 1}
+                                    </span>
+                                    <span className="text-[9px] text-gray-500">
+                                        {layoutConfig.widths[colIndex]}%
+                                    </span>
+                                </div>
+
+                                <LayoutContainer
+                                    blocks={columns[colIndex] || []}
+                                    containerId={`${block.id}-col-${colIndex}`}
+                                    onBlockAdd={onChildBlockAdd}
+                                    onBlockUpdate={onChildBlockUpdate}
+                                    onBlockDelete={onChildBlockDelete}
+                                    onBlockMove={onChildBlockMove}
+                                    emptyLabel={`Drop blocks in column ${colIndex + 1}`}
+                                />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
+/**
+ * Columns Block Preview Component
+ */
+export const ColumnsPreview: React.FC<BlockPreviewProps & {
+    childBlocks?: Block[];
+    renderChild?: (block: Block) => React.ReactNode;
+}> = ({ block, childBlocks = [], renderChild, context }) => {
+    const layout = (block.data.layout as ColumnLayout) || '50-50';
+    const layoutConfig = COLUMN_LAYOUTS[layout];
+    const numColumns = layoutConfig.widths.length;
+
+    // If childBlocks are provided, use them; otherwise get from block.children
+    const children = childBlocks.length > 0
+        ? childBlocks
+        : (block.children && Array.isArray(block.children) && typeof block.children[0] === 'object'
+            ? block.children as Block[]
+            : []);
+
+    // Split child blocks into columns based on columnIndex in meta, or round-robin
+    const columns: Block[][] = Array.from({ length: numColumns }, () => []);
+    children.forEach((childBlock) => {
+        const columnIndex = childBlock.meta?.columnIndex;
+        if (typeof columnIndex === 'number' && columnIndex >= 0 && columnIndex < numColumns) {
+            columns[columnIndex].push(childBlock);
+        } else {
+            // Fallback to round-robin if no columnIndex specified
+            const index = children.indexOf(childBlock);
+            columns[index % numColumns].push(childBlock);
+        }
+    });
+
+    return (
+        <div className={`grid ${layoutConfig.grid} gap-8 my-8`}>
+            {Array.from({ length: numColumns }).map((_, colIndex) => (
+                <div key={colIndex} className="min-h-[100px]">
+                    {columns[colIndex]?.map((childBlock) => (
+                        <React.Fragment key={childBlock.id}>
+                            {renderChild ? renderChild(childBlock) : null}
+                        </React.Fragment>
+                    ))}
+                </div>
+            ))}
+        </div>
+    );
+};
+

package/src/lib/layouts/blocks/SectionBlock.tsx

@@ -0,0 +1,104 @@
+/**
+ * Section Block
+ * Full-width wrapper with configurable padding and background
+ */
+
+'use client';
+
+import React from 'react';
+import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
+import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
+import { LAYOUT_CONSTANTS, LAYOUT_BACKGROUNDS } from '../index';
+import { Block } from '../../../types/block';
+
+/**
+ * Section Block Edit Component
+ */
+export const SectionEdit: React.FC<BlockEditProps & {
+    childBlocks: Block[];
+    onChildBlockAdd: (type: string, index: number, containerId: string) => void;
+    onChildBlockUpdate: (id: string, data: Partial<Block['data']>, containerId: string) => void;
+    onChildBlockDelete: (id: string, containerId: string) => void;
+    onChildBlockMove: (id: string, newIndex: number, containerId: string) => void;
+}> = ({
+    block,
+    onUpdate,
+    isSelected,
+    childBlocks = [],
+    onChildBlockAdd,
+    onChildBlockUpdate,
+    onChildBlockDelete,
+    onChildBlockMove,
+}) => {
+        const background = (block.data.background as keyof typeof LAYOUT_BACKGROUNDS) || 'DEFAULT';
+
+        return (
+            <div
+                className={`rounded-xl transition-all ${isSelected
+                    ? 'bg-primary/5'
+                    : ''
+                    } ${LAYOUT_BACKGROUNDS[background]}`}
+                onDragStart={(e) => {
+                    // Prevent section from being dragged when dragging nested blocks
+                    // Check if the drag started on a nested block wrapper
+                    const nestedBlockWrapper = (e.target as HTMLElement).closest('[data-block-wrapper]');
+                    if (nestedBlockWrapper) {
+                        const nestedBlockId = nestedBlockWrapper.getAttribute('data-block-id');
+                        // If dragging a nested block, prevent the section's drag handler from firing
+                        if (nestedBlockId && nestedBlockId !== block.id) {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            console.log('[SectionBlock] Preventing section drag, nested block is being dragged:', nestedBlockId);
+                        }
+                    }
+                }}
+            >
+                {/* Nested Content */}
+                <div className={`px-8 py-4`}>
+                    <LayoutContainer
+                        blocks={childBlocks}
+                        containerId={block.id}
+                        onBlockAdd={onChildBlockAdd}
+                        onBlockUpdate={onChildBlockUpdate}
+                        onBlockDelete={onChildBlockDelete}
+                        onBlockMove={onChildBlockMove}
+                        emptyLabel="Drop blocks into section"
+                    />
+                </div>
+            </div>
+        );
+    };
+
+/**
+ * Section Block Preview Component
+ */
+export const SectionPreview: React.FC<BlockPreviewProps & {
+    childBlocks?: Block[];
+    renderChild?: (block: Block) => React.ReactNode;
+}> = ({ block, childBlocks = [], renderChild, context }) => {
+    const background = (block.data.background as keyof typeof LAYOUT_BACKGROUNDS) || 'DEFAULT';
+
+    // If childBlocks are provided, use them; otherwise get from block.children
+    const children = childBlocks.length > 0
+        ? childBlocks
+        : (block.children && Array.isArray(block.children) && typeof block.children[0] === 'object'
+            ? block.children as Block[]
+            : []);
+
+    return (
+        <section className={`w-full ${LAYOUT_BACKGROUNDS[background]}`}>
+            <div className={`max-w-7xl mx-auto px-6 py-2`}>
+                {children.length > 0 && renderChild ? (
+                    children.map((childBlock) => (
+                        <React.Fragment key={childBlock.id}>
+                            {renderChild(childBlock)}
+                        </React.Fragment>
+                    ))
+                ) : (
+                    <div className="text-gray-400 text-sm italic">Empty section</div>
+                )}
+            </div>
+        </section>
+    );
+};
+

package/src/lib/layouts/blocks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Core Layout Blocks
+ * Section and Columns blocks for the Universal Layout System
+ */
+
+export { SectionEdit, SectionPreview } from './SectionBlock';
+export { ColumnsEdit, ColumnsPreview } from './ColumnsBlock';
+

package/src/lib/layouts/index.ts

@@ -0,0 +1,52 @@
+/**
+ * Layout System Constants
+ * Standardized spacing and styling for layout blocks
+ */
+
+// Spacing Constants (Earth-tone aligned)
+export const LAYOUT_CONSTANTS = {
+    GUTTER: '2rem',      // 32px - Space between columns
+    SPACING: '4rem',     // 64px - Vertical padding for sections
+    SPACING_SM: '2rem',  // 32px - Smaller vertical padding
+    SPACING_LG: '6rem',  // 96px - Larger vertical padding
+    BORDER_RADIUS: '2rem', // 32px - Consistent rounded corners
+} as const;
+
+// Background Colors (Light mode only - matches client website theme)
+export const LAYOUT_BACKGROUNDS = {
+    DEFAULT: 'bg-white',
+    NEUTRAL: 'bg-neutral-50',
+    SAGE: 'bg-primary/5',
+    CREAM: 'bg-amber-50/50',
+} as const;
+
+// Column Layout Presets
+export type ColumnLayout = '50-50' | '33-66' | '66-33' | '25-25-25-25' | '25-75' | '75-25';
+
+export const COLUMN_LAYOUTS: Record<ColumnLayout, { grid: string; widths: number[] }> = {
+    '50-50': {
+        grid: 'grid-cols-2',
+        widths: [50, 50],
+    },
+    '33-66': {
+        grid: 'grid-cols-3',
+        widths: [33, 66],
+    },
+    '66-33': {
+        grid: 'grid-cols-3',
+        widths: [66, 33],
+    },
+    '25-25-25-25': {
+        grid: 'grid-cols-4',
+        widths: [25, 25, 25, 25],
+    },
+    '25-75': {
+        grid: 'grid-cols-4',
+        widths: [25, 75],
+    },
+    '75-25': {
+        grid: 'grid-cols-4',
+        widths: [75, 25],
+    },
+};
+

package/src/lib/layouts/registerLayoutBlocks.ts

@@ -0,0 +1,59 @@
+/**
+ * Register Core Layout Blocks
+ * Registers Section and Columns blocks in the block registry
+ */
+
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { SectionEdit, SectionPreview } from './blocks/SectionBlock';
+import { ColumnsEdit, ColumnsPreview } from './blocks/ColumnsBlock';
+import { Columns, Square } from 'lucide-react';
+
+/**
+ * Register all core layout blocks
+ */
+export function registerLayoutBlocks() {
+    // Section Block
+    blockRegistry.register({
+        type: 'section',
+        name: 'Section',
+        description: 'Full-width wrapper with configurable padding and background',
+        icon: Square,
+        defaultData: {
+            padding: 'md',
+            background: 'DEFAULT',
+        },
+        category: 'layout',
+        isContainer: true,
+        validate: (data) => {
+            return ['sm', 'md', 'lg'].includes(data.padding as string) &&
+                   ['DEFAULT', 'NEUTRAL', 'SAGE', 'CREAM'].includes(data.background as string);
+        },
+        components: {
+            Edit: SectionEdit as any,
+            Preview: SectionPreview as any,
+            Icon: Square,
+        },
+    });
+
+    // Columns Block
+    blockRegistry.register({
+        type: 'columns',
+        name: 'Columns',
+        description: 'Flex/grid container with configurable column layouts (50/50, 33/66, etc.)',
+        icon: Columns,
+        defaultData: {
+            layout: '50-50',
+        },
+        category: 'layout',
+        isContainer: true,
+        validate: (data) => {
+            return ['50-50', '33-66', '66-33', '25-25-25-25', '25-75', '75-25'].includes(data.layout as string);
+        },
+        components: {
+            Edit: ColumnsEdit as any,
+            Preview: ColumnsPreview as any,
+            Icon: Columns,
+        },
+    });
+}
+

package/src/lib/mappers/apiMapper.ts

@@ -0,0 +1,223 @@
+/**
+ * API Mapper
+ * Converts between API format (MongoDB) and BlogPost format
+ */
+
+import { BlogPost, PostStatus, SEOMetadata, PostMetadata } from '../../types/post';
+import { Block } from '../../types/block';
+
+/**
+ * API Blog Document Format (from MongoDB)
+ */
+export interface APIBlogDocument {
+    _id?: string;
+    id?: string;
+    title: string;
+    slug: string;
+    contentBlocks?: Block[]; // New block-based format
+    content?: any[]; // Legacy format
+    summary?: string;
+    image?: {
+        src?: string;
+        alt?: string;
+        brightness?: number;
+        blur?: number;
+    };
+    categoryTags?: {
+        category?: string;
+        tags?: string[];
+    };
+    publicationData?: {
+        status?: PostStatus | 'concept'; // API uses 'concept' instead of 'draft'
+        date?: string | Date;
+    };
+    seo?: {
+        title?: string;
+        description?: string;
+        keywords?: string[];
+        ogImage?: string;
+        canonicalUrl?: string;
+    };
+    authorId?: string;
+    createdAt?: string | Date;
+    updatedAt?: string | Date;
+}
+
+/**
+ * Convert API document to BlogPost format
+ */
+export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
+    const id = doc._id?.toString() || doc.id || '';
+    
+    // Use contentBlocks if available, otherwise fallback to content (legacy)
+    const blocks = doc.contentBlocks || [];
+    
+    // Convert publication data
+    const publicationDate = doc.publicationData?.date 
+        ? (typeof doc.publicationData.date === 'string' 
+            ? doc.publicationData.date 
+            : doc.publicationData.date.toISOString())
+        : undefined;
+    
+    // Convert SEO data
+    const seo: SEOMetadata = {
+        title: doc.seo?.title,
+        description: doc.seo?.description,
+        keywords: doc.seo?.keywords,
+        ogImage: doc.seo?.ogImage,
+        canonicalUrl: doc.seo?.canonicalUrl,
+    };
+    
+    // Convert metadata
+    const metadata: PostMetadata = {
+        featuredImage: doc.image ? {
+            src: doc.image.src,
+            alt: doc.image.alt,
+            brightness: doc.image.brightness,
+            blur: doc.image.blur,
+        } : undefined,
+        categories: doc.categoryTags?.category ? [doc.categoryTags.category] : [],
+        tags: doc.categoryTags?.tags || [],
+        excerpt: doc.summary,
+        privacy: undefined, // Privacy settings not in API yet
+    };
+    
+    // Convert publication data - API uses 'concept' but we use 'draft'
+    const apiStatus = doc.publicationData?.status || 'concept';
+    const normalizedStatus = apiStatus === 'concept' ? 'draft' : apiStatus;
+    
+    const publication = {
+        status: normalizedStatus as PostStatus,
+        date: publicationDate,
+        authorId: doc.authorId,
+        updatedAt: doc.updatedAt 
+            ? (typeof doc.updatedAt === 'string' ? doc.updatedAt : doc.updatedAt.toISOString())
+            : undefined,
+    };
+    
+    return {
+        id,
+        title: doc.title,
+        slug: doc.slug,
+        blocks,
+        seo,
+        publication,
+        metadata,
+        createdAt: doc.createdAt 
+            ? (typeof doc.createdAt === 'string' ? doc.createdAt : doc.createdAt.toISOString())
+            : new Date().toISOString(),
+        updatedAt: doc.updatedAt 
+            ? (typeof doc.updatedAt === 'string' ? doc.updatedAt : doc.updatedAt.toISOString())
+            : new Date().toISOString(),
+    };
+}
+
+/**
+ * Convert BlogPost to API document format
+ */
+export function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlogDocument> {
+    return {
+        title: post.title,
+        slug: post.slug,
+        contentBlocks: post.blocks, // Use new block format
+        summary: post.metadata.excerpt,
+        image: post.metadata.featuredImage ? {
+            src: post.metadata.featuredImage.src,
+            alt: post.metadata.featuredImage.alt,
+            brightness: post.metadata.featuredImage.brightness,
+            blur: post.metadata.featuredImage.blur,
+        } : undefined,
+        categoryTags: {
+            category: post.metadata.categories?.[0] || '',
+            tags: post.metadata.tags || [],
+        },
+        publicationData: {
+            // API uses 'concept' instead of 'draft'
+            status: post.publication.status === 'draft' ? 'concept' : post.publication.status,
+            date: post.publication.date ? new Date(post.publication.date) : new Date(),
+        },
+        seo: {
+            title: post.seo.title,
+            description: post.seo.description,
+            keywords: post.seo.keywords,
+            ogImage: post.seo.ogImage,
+            canonicalUrl: post.seo.canonicalUrl,
+        },
+        authorId: authorId || post.publication.authorId,
+        updatedAt: new Date(),
+    };
+}
+
+/**
+ * Convert EditorState to API format for saving
+ */
+export function editorStateToAPI(state: {
+    title: string;
+    slug: string;
+    blocks: Block[];
+    seo: SEOMetadata;
+    metadata: PostMetadata;
+    status: PostStatus;
+    postId?: string | null;
+}, authorId?: string): Partial<APIBlogDocument> {
+    // Map status: draft -> concept, published -> published, everything else stays as-is
+    const apiStatus = state.status === 'draft' ? 'concept' : state.status;
+    
+    console.log('[editorStateToAPI] Mapping status:', {
+        editorStatus: state.status,
+        apiStatus: apiStatus,
+        willBePublished: apiStatus === 'published'
+    });
+    
+    // Try to get category from metadata first, then check hero block
+    let category: string | undefined = undefined;
+    if (state.metadata.categories && state.metadata.categories.length > 0 && state.metadata.categories[0]?.trim()) {
+        category = state.metadata.categories[0].trim();
+    } else {
+        // Check hero block for category
+        const heroBlock = state.blocks.find(block => block.type === 'hero');
+        if (heroBlock && heroBlock.data && typeof heroBlock.data === 'object') {
+            const heroCategory = (heroBlock.data as any).category;
+            if (heroCategory && typeof heroCategory === 'string' && heroCategory.trim()) {
+                category = heroCategory.trim();
+            }
+        }
+    }
+    
+    console.log('[editorStateToAPI] Category resolution:', {
+        fromMetadata: state.metadata.categories?.[0],
+        fromHeroBlock: state.blocks.find(b => b.type === 'hero')?.data ? (state.blocks.find(b => b.type === 'hero')!.data as any).category : undefined,
+        finalCategory: category
+    });
+    
+    return {
+        title: state.title,
+        slug: state.slug,
+        contentBlocks: state.blocks,
+        summary: state.metadata.excerpt,
+        image: state.metadata.featuredImage ? {
+            src: state.metadata.featuredImage.src,
+            alt: state.metadata.featuredImage.alt,
+            brightness: state.metadata.featuredImage.brightness,
+            blur: state.metadata.featuredImage.blur,
+        } : undefined,
+        categoryTags: {
+            category: category,
+            tags: state.metadata.tags || [],
+        },
+        publicationData: {
+            status: apiStatus,
+            date: new Date(),
+        },
+        seo: {
+            title: state.seo.title,
+            description: state.seo.description,
+            keywords: state.seo.keywords,
+            ogImage: state.seo.ogImage,
+            canonicalUrl: state.seo.canonicalUrl,
+        },
+        authorId,
+        updatedAt: new Date(),
+    };
+}
+

package/src/lib/migration/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Migration utilities exports
+ */
+
+export * from './mapper';
+