@jhits/plugin-blog 0.0.9 → 0.0.11

package/src/index.tsx

@@ -1,335 +0,0 @@
-/**
- * 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;
-    
-    // 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 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);
-        };
-    }, []);
-    
-    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
-            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.');
-                        }
-                        console.log('[BlogPlugin] Saving post with slug:', originalSlug);
-                        const apiData = editorStateToAPI(state, undefined, heroBlock);
-                        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();
-                        // 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 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 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
-

package/src/init.d.ts

@@ -1,40 +0,0 @@
-/**
- * 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);
- * ```
- */
-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 declare function initBlogPlugin(config: BlogPluginConfig): void;
-//# sourceMappingURL=init.d.ts.map

package/src/init.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["init.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAKH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC7B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACvC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,8FAA8F;QAC9F,KAAK,EAAE,MAAM,CAAC;QACd,6FAA6F;QAC7F,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAiB7D"}

package/src/init.js

@@ -1,41 +0,0 @@
-/**
- * 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';
-/**
- * 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) {
-    if (typeof window === 'undefined') {
-        // Server-side: no-op
-        return;
-    }
-    // Initialize the global plugin props object if it doesn't exist
-    if (!window.__JHITS_PLUGIN_PROPS__) {
-        window.__JHITS_PLUGIN_PROPS__ = {};
-    }
-    // Set blog plugin configuration
-    window.__JHITS_PLUGIN_PROPS__['plugin-blog'] = {
-        customBlocks: config.customBlocks || [],
-        darkMode: config.darkMode !== undefined ? config.darkMode : true, // Default to true
-        backgroundColors: config.backgroundColors || undefined,
-    };
-}

package/src/init.tsx

@@ -1,63 +0,0 @@
-/**
- * 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,
-    };
-}
-

package/src/lib/blocks/BlockRenderer.d.ts

@@ -1,54 +0,0 @@
-/**
- * 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
- */
-import React from 'react';
-import { Block, BlockPreviewProps } from '../../types/block';
-/**
- * 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 declare function BlockRenderer({ block, customRenderers, context }: BlockRendererProps): import("react/jsx-runtime").JSX.Element;
-/**
- * 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 declare function BlocksRenderer({ blocks, customRenderers, renderProps, wrapper: Wrapper, }: BlocksRendererProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=BlockRenderer.d.ts.map

package/src/lib/blocks/BlockRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlockRenderer.d.ts","sourceRoot":"","sources":["BlockRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAI7D;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,sBAAsB;IACtB,KAAK,EAAE,KAAK,CAAC;IAEb,oEAAoE;IACpE,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAEtE,uCAAuC;IACvC,OAAO,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC;CACL;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,eAAe,EACf,OAAY,EACf,EAAE,kBAAkB,2CAqDpB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAChC,gCAAgC;IAChC,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,gDAAgD;IAChD,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC,CAAC;IAErE,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEtC,uCAAuC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAChE;AAED,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,eAAe,EACf,WAAW,EACX,OAAO,EAAE,OAAO,GACnB,EAAE,mBAAmB,2CAerB"}

package/src/lib/blocks/BlockRenderer.js

@@ -1,54 +0,0 @@
-/**
- * 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { blockRegistry } from '../../registry/BlockRegistry';
-/**
- * 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 = {} }) {
-    // Check for custom renderer override first
-    if (customRenderers === null || customRenderers === void 0 ? void 0 : customRenderers.has(block.type)) {
-        const CustomRenderer = customRenderers.get(block.type);
-        return _jsx(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 (_jsxs("div", { className: "p-4 border border-red-300 bg-red-50 rounded", children: [_jsxs("p", { className: "text-red-600", children: ["Unknown block type: ", block.type] }), _jsx("p", { className: "text-xs text-red-500 mt-1", children: "Make sure this block type is registered via customBlocks prop" })] }));
-    }
-    // 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
-            : [])
-        : [];
-    // If container block, pass child blocks and render function
-    if (isContainer) {
-        return (_jsx(PreviewComponent, { block: block, context: context, childBlocks: childBlocks, renderChild: (childBlock) => (_jsx(BlockRenderer, { block: childBlock, customRenderers: customRenderers, context: context })) }));
-    }
-    return _jsx(PreviewComponent, { block: block, context: context });
-}
-export function BlocksRenderer({ blocks, customRenderers, renderProps, wrapper: Wrapper, }) {
-    const content = blocks.map((block, index) => (_jsx(BlockRenderer, { block: block, customRenderers: customRenderers, context: renderProps }, block.id || index)));
-    if (Wrapper) {
-        return _jsx(Wrapper, { children: content });
-    }
-    return _jsx(_Fragment, { children: content });
-}