@jhits/plugin-blog 0.0.1

package/src/index.tsx

@@ -0,0 +1,354 @@
+/**
+ * Plugin Blog - Main Entry Point
+ * Block-Based Blog Management System
+ * Multi-Tenant Architecture: Accepts custom blocks from client applications
+ */
+
+'use client';
+
+import React, { useMemo, useEffect } from 'react';
+import { EditorProvider } from './state/EditorContext';
+import { ClientBlockDefinition } from './types/block';
+import { PostManagerView } from './views/PostManager';
+import { CanvasEditorView } from './views/CanvasEditor';
+import { editorStateToAPI } from './lib/mappers/apiMapper';
+import { SlugSEOManagerView } from './views/SlugSEO';
+import { PreviewBridgeView } from './views/Preview';
+import { SettingsView } from './views/Settings';
+import { useHeroBlockValidation, findHeroBlock } from './lib/utils/configValidation';
+
+/**
+ * Plugin Props Interface
+ * Matches the PluginProps from @jhits/jhits-dashboard
+ */
+export interface PluginProps {
+    subPath: string[];
+    siteId: string;
+    locale: string;
+    /** Custom blocks from client application (optional, can also come from window.__JHITS_PLUGIN_PROPS__) */
+    customBlocks?: ClientBlockDefinition[];
+    /** Enable dark mode for content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        /** Background color for light mode (REQUIRED) */
+        light: string;
+        /** Background color for dark mode (optional) */
+        dark?: string;
+    };
+}
+
+/**
+ * Main Router Component
+ * Handles routing within the blog plugin
+ * 
+ * Client Handshake:
+ * - Client apps can pass customBlocks via props
+ * - Or via window.__JHITS_PLUGIN_PROPS__['plugin-blog'].customBlocks
+ * - The EditorProvider will automatically register these blocks
+ */
+export default function BlogPlugin(props: PluginProps) {
+    const { subPath, siteId, locale, customBlocks: propsCustomBlocks, darkMode: propsDarkMode, backgroundColors: propsBackgroundColors } = props;
+    console.log('[BlogPlugin] Component rendering, propsDarkMode:', propsDarkMode);
+    
+    // Get custom blocks from props or window global (client app injection point)
+    const customBlocks = useMemo(() => {
+        // First, try props
+        if (propsCustomBlocks && propsCustomBlocks.length > 0) {
+            return propsCustomBlocks;
+        }
+        
+        // Fallback to window global (for client app injection)
+        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
+            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-blog'];
+            if (pluginProps?.customBlocks) {
+                return pluginProps.customBlocks as ClientBlockDefinition[];
+            }
+        }
+        
+        return [];
+    }, [propsCustomBlocks]);
+    
+    // Get dark mode setting from props, localStorage (dev settings), or window global
+    // Priority: localStorage (dev) > props > window global > default
+    const darkMode = useMemo(() => {
+        // First, check localStorage for dev settings (highest priority for dev)
+        if (typeof window !== 'undefined') {
+            try {
+                const saved = localStorage.getItem('__JHITS_PLUGIN_BLOG_CONFIG__');
+                if (saved) {
+                    const config = JSON.parse(saved);
+                    if (config.darkMode !== undefined) {
+                        console.log('[BlogPlugin] Using darkMode from localStorage (dev settings):', config.darkMode);
+                        return config.darkMode as boolean;
+                    }
+                }
+            } catch (e) {
+                // Ignore localStorage errors
+            }
+        }
+        
+        // Then try props
+        if (propsDarkMode !== undefined) {
+            console.log('[BlogPlugin] Using darkMode from props:', propsDarkMode);
+            return propsDarkMode;
+        }
+        
+        // Fallback to window global if prop not provided
+        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
+            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-blog'];
+            if (pluginProps?.darkMode !== undefined) {
+                console.log('[BlogPlugin] Using darkMode from window global (fallback):', pluginProps.darkMode);
+                return pluginProps.darkMode as boolean;
+            }
+        }
+        
+        console.log('[BlogPlugin] darkMode not found, defaulting to true');
+        return true; // Default to dark mode enabled
+    }, [propsDarkMode]);
+    
+    // Get background colors from props, localStorage (dev settings), or window global
+    // Priority: localStorage (dev) > props > window global
+    const backgroundColors = useMemo(() => {
+        // First, check localStorage for dev settings (highest priority for dev)
+        if (typeof window !== 'undefined') {
+            try {
+                const saved = localStorage.getItem('__JHITS_PLUGIN_BLOG_CONFIG__');
+                if (saved) {
+                    const config = JSON.parse(saved);
+                    if (config.backgroundColors) {
+                        return config.backgroundColors;
+                    }
+                }
+            } catch (e) {
+                // Ignore localStorage errors
+            }
+        }
+        
+        // Then try props
+        if (propsBackgroundColors) {
+            return propsBackgroundColors;
+        }
+        
+        // Fallback to window global
+        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
+            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-blog'];
+            if (pluginProps?.backgroundColors) {
+                return pluginProps.backgroundColors as { light: string; dark?: string };
+            }
+        }
+        
+        return undefined;
+    }, [propsBackgroundColors]);
+    
+    const route = subPath[0] || 'posts';
+    
+    // Validate hero block configuration (only checks when needed)
+    useHeroBlockValidation(route, customBlocks, propsCustomBlocks);
+    
+    // Get hero block definition for logging/debugging (only for routes that need it)
+    const heroBlockDefinition = useMemo(() => {
+        const needsHeroBlock = route === 'editor' || route === 'new' || route === 'preview';
+        return needsHeroBlock ? findHeroBlock(customBlocks) : undefined;
+    }, [customBlocks, route]);
+    
+    // Listen for config updates from settings screen
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+        
+        const handleConfigUpdate = () => {
+            // Reload page to apply changes (simplest way to ensure all components pick up new values)
+            window.location.reload();
+        };
+        
+        window.addEventListener('blog-plugin-config-updated', handleConfigUpdate as EventListener);
+        return () => {
+            window.removeEventListener('blog-plugin-config-updated', handleConfigUpdate as EventListener);
+        };
+    }, []);
+    
+    console.log('[BlogPlugin] Final darkMode value:', darkMode);
+    console.log('[BlogPlugin] Background colors:', backgroundColors);
+    if (heroBlockDefinition !== undefined) {
+        console.log('[BlogPlugin] Hero block definition:', heroBlockDefinition ? 'found' : 'not found (REQUIRED)');
+    }
+
+    // Route to appropriate view
+    switch (route) {
+        case 'posts':
+            return <PostManagerView siteId={siteId} locale={locale} />;
+        
+        case 'editor':
+            const postId = subPath[1]; // This is actually the slug, not the ID
+            console.log('[BlogPlugin] Rendering editor route with postId (slug):', postId, 'darkMode:', darkMode);
+            return (
+                <EditorProvider 
+                    customBlocks={customBlocks} 
+                    darkMode={darkMode} 
+                    backgroundColors={backgroundColors}
+                    onSave={async (state) => {
+                        // Save to API - update existing post
+                        // Use the route postId (original slug) to identify which blog to update
+                        // If route postId is missing, use state.slug or state.postId as fallback
+                        const originalSlug = postId || state.slug || state.postId;
+                        if (!originalSlug) {
+                            throw new Error('Cannot save: no post identifier available. Please reload the page.');
+                        }
+                        console.log('[BlogPlugin] Saving post with slug:', originalSlug);
+                        console.log('[BlogPlugin] Post state:', {
+                            title: state.title,
+                            status: state.status,
+                            blocksCount: state.blocks.length,
+                            blocks: state.blocks.map(b => ({ id: b.id, type: b.type, hasData: !!b.data })),
+                            hasFeaturedImage: !!state.metadata.featuredImage,
+                        });
+                        const apiData = editorStateToAPI(state);
+                        console.log('[BlogPlugin] API data being sent:', {
+                            title: apiData.title,
+                            status: apiData.publicationData?.status,
+                            contentBlocksCount: apiData.contentBlocks?.length || 0,
+                            contentBlocks: apiData.contentBlocks?.map((b: any) => ({ id: b.id, type: b.type, hasData: !!b.data })) || [],
+                            hasImage: !!apiData.image,
+                            fullApiData: JSON.stringify(apiData, null, 2),
+                        });
+                        const response = await fetch(`/api/plugin-blog/${originalSlug}`, {
+                            method: 'PUT',
+                            headers: { 'Content-Type': 'application/json' },
+                            credentials: 'include', // Include cookies for authentication
+                            body: JSON.stringify(apiData),
+                        });
+                        if (!response.ok) {
+                            const error = await response.json();
+                            console.error('[BlogPlugin] Save failed:', {
+                                status: response.status,
+                                statusText: response.statusText,
+                                error,
+                                missingFields: error.missingFields,
+                            });
+                            // Provide more detailed error message if available
+                            const errorMessage = error.message || error.error || 'Failed to save post';
+                            const missingFieldsMsg = error.missingFields && error.missingFields.length > 0
+                                ? ` Missing: ${error.missingFields.join(', ')}`
+                                : '';
+                            throw new Error(errorMessage + missingFieldsMsg);
+                        }
+                        const result = await response.json();
+                        console.log('[BlogPlugin] Save successful:', result);
+                        // If the slug changed, update the URL
+                        if (result.slug && result.slug !== originalSlug) {
+                            window.history.replaceState(null, '', `/dashboard/blog/editor/${result.slug}`);
+                        }
+                        return result;
+                    }}
+                >
+                    <CanvasEditorView postId={postId} siteId={siteId} locale={locale} darkMode={darkMode} backgroundColors={backgroundColors} />
+                </EditorProvider>
+            );
+        
+        case 'new':
+            console.log('[BlogPlugin] Rendering new route with darkMode:', darkMode);
+            return (
+                <EditorProvider 
+                    customBlocks={customBlocks} 
+                    darkMode={darkMode} 
+                    backgroundColors={backgroundColors}
+                    onSave={async (state) => {
+                        // Save to API - create new post
+                        const apiData = editorStateToAPI(state);
+                        const response = await fetch('/api/plugin-blog/new', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            credentials: 'include', // Include cookies for authentication
+                            body: JSON.stringify(apiData),
+                        });
+                        if (!response.ok) {
+                            const error = await response.json();
+                            throw new Error(error.message || 'Failed to create post');
+                        }
+                        const result = await response.json();
+                        // Update the URL to the new post's slug
+                        if (result.slug) {
+                            window.history.replaceState(null, '', `/dashboard/blog/editor/${result.slug}`);
+                        }
+                        return result;
+                    }}
+                >
+                    <CanvasEditorView siteId={siteId} locale={locale} darkMode={darkMode} backgroundColors={backgroundColors} />
+                </EditorProvider>
+            );
+        
+        case 'seo':
+            const seoPostId = subPath[1];
+            return <SlugSEOManagerView postId={seoPostId} siteId={siteId} locale={locale} />;
+        
+        case 'preview':
+            const previewPostId = subPath[1];
+            return <PreviewBridgeView postId={previewPostId} siteId={siteId} locale={locale} />;
+        
+        case 'settings':
+        case 'install':
+            return <SettingsView siteId={siteId} locale={locale} />;
+        
+        default:
+            return <PostManagerView siteId={siteId} locale={locale} />;
+    }
+}
+
+
+// Export for use as default
+export { BlogPlugin as Index };
+
+// Export types for client applications
+export type {
+    Block,
+    BlockTypeDefinition,
+    ClientBlockDefinition,
+    RichTextFormattingConfig,
+    BlockEditProps,
+    BlockPreviewProps,
+    IBlockComponent,
+} from './types';
+
+// Export post types
+export type {
+    SEOMetadata,
+    PublicationData,
+    PostStatus,
+    PostMetadata,
+    BlogPost,
+    PostListItem,
+    PostFilterOptions,
+} from './types/post';
+
+// Export initialization utility for easy setup
+export { initBlogPlugin } from './init';
+export type { BlogPluginConfig } from './init';
+
+// Export rich text components for client applications
+export { RichTextEditor, RichTextPreview } from './lib/rich-text';
+export type { RichTextEditorProps, RichTextPreviewProps } from './lib/rich-text';
+
+// Export hooks for client applications
+export { useBlogs, useBlog } from './hooks';
+export type { UseBlogsOptions, UseBlogsResult, UseBlogOptions, UseBlogResult } from './hooks';
+
+// Export client utilities
+export { fetchBlogs, fetchBlog } from './utils/client';
+export type { FetchBlogsOptions, FetchBlogsResult, FetchBlogOptions } from './utils/client';
+
+// Export block rendering components
+export { BlockRenderer, BlocksRenderer } from './lib/blocks/BlockRenderer';
+
+// Export block registry
+export { blockRegistry } from './registry';
+
+// Export layout block registration
+export { registerLayoutBlocks } from './lib/layouts/registerLayoutBlocks';
+
+// Export editor state management
+export { EditorProvider, useEditor } from './state/EditorContext';
+export type { EditorProviderProps, EditorState, EditorContextValue } from './state';
+
+// Note: API handlers are server-only and exported from ./index.ts (server entry point)
+// They are NOT exported here to prevent client/server context mixing
+

package/src/init.tsx

@@ -0,0 +1,72 @@
+/**
+ * Blog Plugin Initialization Utility
+ * 
+ * Simple function to initialize the blog plugin with client configuration.
+ * Call this once in your app (e.g., in a script tag or root layout) to configure
+ * the blog plugin without needing a React component.
+ * 
+ * @example
+ * ```typescript
+ * import { initBlogPlugin } from '@jhits/plugin-blog/init';
+ * import { blogConfig } from '@/plugins/blog-config';
+ * 
+ * // Call once when your app loads
+ * initBlogPlugin(blogConfig);
+ * ```
+ */
+
+'use client';
+
+import React from 'react';
+import type { ClientBlockDefinition } from './types/block';
+
+export interface BlogPluginConfig {
+    /** Custom blocks available in the editor */
+    customBlocks?: ClientBlockDefinition[];
+    /** Dark mode setting for the editor content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        /** Background color for light mode (REQUIRED) - CSS color value (hex, rgb, or named color) */
+        light: string;
+        /** Background color for dark mode (optional) - CSS color value (hex, rgb, or named color) */
+        dark?: string;
+    };
+}
+
+/**
+ * Initialize the blog plugin with client configuration
+ * 
+ * This function sets up the window global that the plugin reads from automatically.
+ * Call this once when your app loads, before the plugin is rendered.
+ * 
+ * @param config - Blog plugin configuration (customBlocks, darkMode, etc.)
+ */
+export function initBlogPlugin(config: BlogPluginConfig): void {
+    if (typeof window === 'undefined') {
+        // Server-side: no-op
+        return;
+    }
+
+    // Initialize the global plugin props object if it doesn't exist
+    if (!(window as any).__JHITS_PLUGIN_PROPS__) {
+        (window as any).__JHITS_PLUGIN_PROPS__ = {};
+    }
+
+    // Set blog plugin configuration
+    (window as any).__JHITS_PLUGIN_PROPS__['plugin-blog'] = {
+        customBlocks: config.customBlocks || [],
+        darkMode: config.darkMode !== undefined ? config.darkMode : true, // Default to true
+        backgroundColors: config.backgroundColors || undefined,
+    };
+
+    console.log('[BlogPlugin] Initialized with config:', {
+        customBlocks: config.customBlocks?.length || 0,
+        darkMode: config.darkMode !== undefined ? config.darkMode : true,
+        backgroundColors: config.backgroundColors ? {
+            light: config.backgroundColors.light,
+            dark: config.backgroundColors.dark || 'not set',
+        } : 'not set',
+    });
+}
+

package/src/lib/blocks/BlockRenderer.tsx

@@ -0,0 +1,141 @@
+/**
+ * Block Renderer
+ * Library component for rendering blocks (decoupled from editor)
+ * This is the "headless" rendering layer
+ * 
+ * Multi-Tenant: Uses Preview components from client-provided blocks
+ */
+
+'use client';
+
+import React from 'react';
+import { Block, BlockPreviewProps } from '../../types/block';
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { getChildBlocks } from '../utils/blockHelpers';
+
+/**
+ * Block Renderer Props
+ */
+export interface BlockRendererProps {
+    /** Block to render */
+    block: Block;
+    
+    /** Custom renderers for specific block types (optional override) */
+    customRenderers?: Map<string, React.ComponentType<BlockPreviewProps>>;
+    
+    /** Additional context for rendering */
+    context?: {
+        siteId?: string;
+        locale?: string;
+        [key: string]: unknown;
+    };
+}
+
+/**
+ * Block Renderer Component
+ * Renders a single block using its Preview component from the registry
+ * 
+ * This is the headless rendering layer - it uses the Preview component
+ * provided by the client application, allowing each client to have
+ * their own design system in the frontend while the editor uses
+ * the dashboard's design system.
+ */
+export function BlockRenderer({ 
+    block, 
+    customRenderers,
+    context = {}
+}: BlockRendererProps) {
+    // Check for custom renderer override first
+    if (customRenderers?.has(block.type)) {
+        const CustomRenderer = customRenderers.get(block.type)!;
+        return <CustomRenderer block={block} context={context} />;
+    }
+
+    // Get block definition from registry
+    const definition = blockRegistry.get(block.type);
+    if (!definition) {
+        console.warn(`Block type "${block.type}" not found in registry. Available types:`, 
+            blockRegistry.getAll().map(b => b.type).join(', '));
+        return (
+            <div className="p-4 border border-red-300 bg-red-50 rounded">
+                <p className="text-red-600">Unknown block type: {block.type}</p>
+                <p className="text-xs text-red-500 mt-1">
+                    Make sure this block type is registered via customBlocks prop
+                </p>
+            </div>
+        );
+    }
+
+    // Use the Preview component from the block definition
+    // This is provided by the client application
+    const PreviewComponent = definition.components.Preview;
+    
+    // Check if this is a container block with children
+    const isContainer = definition.isContainer === true;
+    const childBlocks = isContainer && block.children && Array.isArray(block.children) && block.children.length > 0
+        ? (typeof block.children[0] === 'object' 
+            ? block.children as Block[]
+            : [])
+        : [];
+    
+    // If container block, pass child blocks and render function
+    if (isContainer) {
+        return (
+            <PreviewComponent 
+                block={block} 
+                context={context}
+                childBlocks={childBlocks}
+                renderChild={(childBlock: Block) => (
+                    <BlockRenderer
+                        block={childBlock}
+                        customRenderers={customRenderers}
+                        context={context}
+                    />
+                )}
+            />
+        );
+    }
+    
+    return <PreviewComponent block={block} context={context} />;
+}
+
+/**
+ * Blocks Renderer
+ * Renders an array of blocks
+ */
+export interface BlocksRendererProps {
+    /** Array of blocks to render */
+    blocks: Block[];
+    
+    /** Custom renderers for specific block types */
+    customRenderers?: Map<string, React.ComponentType<{ block: Block }>>;
+    
+    /** Additional props to pass to renderers */
+    renderProps?: Record<string, unknown>;
+    
+    /** Wrapper component for the blocks */
+    wrapper?: React.ComponentType<{ children: React.ReactNode }>;
+}
+
+export function BlocksRenderer({
+    blocks,
+    customRenderers,
+    renderProps,
+    wrapper: Wrapper,
+}: BlocksRendererProps) {
+    const content = blocks.map((block, index) => (
+        <BlockRenderer
+            key={block.id || index}
+            block={block}
+            customRenderers={customRenderers}
+            context={renderProps}
+        />
+    ));
+
+    if (Wrapper) {
+        return <Wrapper>{content}</Wrapper>;
+    }
+
+    return <>{content}</>;
+}
+

package/src/lib/blocks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Block library exports
+ */
+
+export * from './BlockRenderer';
+

package/src/lib/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Library exports
+ * All decoupled, reusable components and utilities
+ */
+
+export * from './blocks';
+export * from './utils';
+export * from './migration';
+