@jhits/plugin-blog 0.0.18 → 0.0.20

package/src/index.tsx

@@ -1,14 +1,12 @@
 /**
  * Plugin Blog - Main Entry Point
- * Block-Based Blog Management System
- * Multi-Tenant Architecture: Accepts custom blocks from client applications
+ * Simplified with Configuration Resolver
  */
 
 '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';
@@ -16,324 +14,112 @@ import { SlugSEOManagerView } from './views/SlugSEO';
 import { PreviewBridgeView } from './views/Preview';
 import { SettingsView } from './views/Settings';
 import { useHeroBlockValidation, findHeroBlock } from './lib/utils/configValidation';
+import { resolvePluginConfig } from './lib/utils/config-resolver';
+import { ClientBlockDefinition } from './types/block';
 
-/**
- * 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;
-    };
+    backgroundColors?: { light: string; dark?: string };
+    LayoutWrapper?: React.ComponentType<any>;
+    translations?: Record<string, any>;
 }
 
 /**
- * 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
+ * Client-facing configuration type
+ * Allows partial overrides of plugin behavior
  */
+export type BlogPluginConfig = Partial<Omit<PluginProps, 'subPath' | 'siteId' | 'locale'>> & {
+    customBlocks?: ClientBlockDefinition[];
+    darkMode?: boolean;
+    backgroundColors?: { light: string; dark?: string };
+    LayoutWrapper?: React.ComponentType<any>;
+    translations?: Record<string, any>;
+};
+
 export default function BlogPlugin(props: PluginProps) {
-    const { subPath, siteId, locale, customBlocks: propsCustomBlocks, darkMode: propsDarkMode, backgroundColors: propsBackgroundColors } = props;
-    
-    // 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) {
-                        return config.darkMode as boolean;
-                    }
-                }
-            } catch (e) {
-                // Ignore localStorage errors
-            }
-        }
-        
-        // Then try props
-        if (propsDarkMode !== undefined) {
-            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) {
-                return pluginProps.darkMode as boolean;
-            }
-        }
-        
-        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 { subPath, siteId, locale } = props;
     
+    // Resolve configuration from multiple sources (Props, Window, Storage)
+    const config = useMemo(() => resolvePluginConfig(props), [props]);
     const route = subPath[0] || 'posts';
     
-    // Validate hero block configuration (only checks when needed)
-    useHeroBlockValidation(route, customBlocks, propsCustomBlocks);
+    // Validate hero block configuration
+    useHeroBlockValidation(route, config.customBlocks, props.customBlocks);
     
-    // 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
+    // Listen for config updates from settings
     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();
-        };
-        
+        const handleConfigUpdate = () => window.location.reload();
         window.addEventListener('blog-plugin-config-updated', handleConfigUpdate as EventListener);
-        return () => {
-            window.removeEventListener('blog-plugin-config-updated', handleConfigUpdate as EventListener);
-        };
+        return () => window.removeEventListener('blog-plugin-config-updated', handleConfigUpdate as EventListener);
     }, []);
-    
-    if (heroBlockDefinition !== undefined) {
-        console.log('[BlogPlugin] Hero block definition:', heroBlockDefinition ? 'found' : 'not found (REQUIRED)');
-    }
 
-    // Route to appropriate view
+    // Helper to render editor with provider
+    const renderEditor = (postId?: string) => (
+        <EditorProvider 
+            customBlocks={config.customBlocks} 
+            darkMode={config.darkMode} 
+            backgroundColors={config.backgroundColors}
+            translations={config.translations}
+            onSave={async (state, heroBlock) => {
+                const originalSlug = postId || state.slug || state.postId;
+                if (!originalSlug && route !== 'new') throw new Error('No post identifier');
+                
+                const apiData = editorStateToAPI(state, undefined, heroBlock);
+                const isNew = route === 'new';
+                const url = isNew ? '/api/plugin-blog/new' : `/api/plugin-blog/${originalSlug}`;
+                
+                const response = await fetch(`${url}?language=${state.currentLanguage || locale}`, {
+                    method: isNew ? 'POST' : 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'include',
+                    body: JSON.stringify(apiData),
+                });
+                
+                if (!response.ok) throw new Error('Save failed');
+                const result = await response.json();
+                if (result.slug && result.slug !== originalSlug) {
+                    window.history.replaceState(null, '', `/dashboard/blog/editor/${result.slug}`);
+                }
+                return result;
+            }}
+        >
+            <CanvasEditorView 
+                postId={postId || undefined} 
+                siteId={siteId} 
+                locale={locale} 
+                LayoutWrapper={config.LayoutWrapper} 
+            />
+        </EditorProvider>
+    );
+
     switch (route) {
-        case 'posts':
-            return <PostManagerView siteId={siteId} locale={locale} />;
-        
-        case 'editor':
-            const postId = subPath[1]; // This is actually the slug, not the ID
-            return (
-                <EditorProvider 
-                    customBlocks={customBlocks} 
-                    darkMode={darkMode} 
-                    backgroundColors={backgroundColors}
-                    onSave={async (state, heroBlock) => {
-                        // 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.');
-                        }
-                        const language = state.currentLanguage || locale;
-                        console.log('[BlogPlugin] Saving post with slug:', originalSlug, 'language:', language);
-                        const apiData = editorStateToAPI(state, undefined, heroBlock);
-                        const response = await fetch(`/api/plugin-blog/${originalSlug}?language=${language}`, {
-                            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();
-                        // 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':
-            return (
-                <EditorProvider 
-                    customBlocks={customBlocks} 
-                    darkMode={darkMode} 
-                    backgroundColors={backgroundColors}
-                    onSave={async (state) => {
-                        // Save to API - create new post
-                        const language = state.currentLanguage || locale;
-                        const apiData = editorStateToAPI(state);
-                        const response = await fetch(`/api/plugin-blog/new?language=${language}`, {
-                            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 'posts': return <PostManagerView siteId={siteId} locale={locale} />;
+        case 'editor': return renderEditor(subPath[1]);
+        case 'new': return renderEditor();
+        case 'seo': return <SlugSEOManagerView postId={subPath[1]} siteId={siteId} locale={locale} />;
+        case 'preview': return <PreviewBridgeView postId={subPath[1]} siteId={siteId} locale={locale} />;
         case 'settings':
-        case 'install':
-            return <SettingsView siteId={siteId} locale={locale} />;
-        
-        default:
-            return <PostManagerView siteId={siteId} locale={locale} />;
+        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,
-    BlogPostLanguageContent,
-    BlogPostLanguages,
-} from './types/post';
-
-// Export initialization utility for easy setup
+// ... Re-export other symbols as needed (keeping existing exports from original file)
+export type { Block, ClientBlockDefinition, BlockEditProps, BlockPreviewProps, BlockTypeDefinition, IBlockComponent } from './types';
+export type { SEOMetadata, PublicationData, BlogPost, PostListItem, PostStatus } from './types';
 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 { useBlogs, useBlog, useCategories } from './hooks';
 export { blockRegistry } from './registry';
-
-// Export layout block registration
-export { registerLayoutBlocks } from './lib/layouts/registerLayoutBlocks';
-
-// Export config storage utilities
-export { getPluginConfig, savePluginConfig } from './lib/config-storage';
-
-// Export editor state management
 export { EditorProvider, useEditor } from './state/EditorContext';
-export type { EditorProviderProps, EditorState, EditorContextValue } from './state';
-
-// Export hooks
-export { useCategories } from './hooks/useCategories';
-
-// 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
-
+export type { EditorProviderProps } from './state/EditorContext';
+export type { EditorState, EditorContextValue } from './state/types';
+export { BlockRenderer, BlocksRenderer } from './lib/blocks/BlockRenderer';
+export { ColumnsPreview } from './lib/layouts/blocks/ColumnsBlock';
+export { registerLayoutBlocks } from './lib/layouts/registerLayoutBlocks';

package/src/init.tsx

@@ -32,17 +32,29 @@ export interface BlogPluginConfig {
         /** Background color for dark mode (optional) - CSS color value (hex, rgb, or named color) */
         dark?: string;
     };
-}
+    /** Optional layout wrapper for 1:1 preview (injected by client app) */
+    LayoutWrapper?: React.ComponentType<{ 
+        children: React.ReactNode; 
+        header?: React.ReactNode; 
+        footer?: React.ReactNode;
+        title?: string;
+        excerpt?: string;
+        category?: string;
+        date?: string;
+        thumbnail?: string;
+        isPreview?: boolean;
+    }>;
+    }
 
-/**
- * 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 {
+    /**
+    * 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;
@@ -58,6 +70,7 @@ export function initBlogPlugin(config: BlogPluginConfig): void {
         customBlocks: config.customBlocks || [],
         darkMode: config.darkMode !== undefined ? config.darkMode : true, // Default to true
         backgroundColors: config.backgroundColors || undefined,
+        LayoutWrapper: config.LayoutWrapper || undefined,
     };
-}
+    }
 

package/src/lib/blocks/BlockRenderer.tsx

@@ -123,6 +123,7 @@ export function BlocksRenderer({
     renderProps,
     wrapper: Wrapper,
 }: BlocksRendererProps) {
+
     const content = blocks.map((block, index) => (
         <BlockRenderer
             key={block.id || index}