@jhits/plugin-blog 0.0.14 → 0.0.16

package/src/registry/BlockRegistry.ts

@@ -0,0 +1,139 @@
+/**
+ * Block Registry
+ * Dynamic registry for all block types in the system
+ * Multi-Tenant Architecture: Blocks are provided by client applications
+ * 
+ * The registry is a singleton that starts empty and is populated by client apps
+ */
+
+import { 
+    BlockTypeDefinition, 
+    BlockRegistry as IBlockRegistry,
+    ClientBlockDefinition 
+} from '../types/block';
+
+/**
+ * Dynamic Block Registry Implementation
+ * No default blocks - all blocks must be registered by client applications
+ */
+class BlockRegistryImpl implements IBlockRegistry {
+    private _types: Map<string, BlockTypeDefinition> = new Map();
+
+    get types(): Map<string, BlockTypeDefinition> {
+        return this._types;
+    }
+
+    /**
+     * Register a single block type
+     */
+    register(definition: BlockTypeDefinition): void {
+        // Validate that components are provided
+        if (!definition.components || !definition.components.Edit || !definition.components.Preview) {
+            throw new Error(
+                `Block type "${definition.type}" must provide both Edit and Preview components. ` +
+                `Use registerClientBlocks() for client-provided blocks.`
+            );
+        }
+
+        // Silently overwrite if already registered (expected in React 18 Strict Mode)
+        this._types.set(definition.type, definition);
+    }
+
+    /**
+     * Register multiple client blocks at once
+     * This is the primary method for client applications to register their blocks
+     */
+    registerClientBlocks(definitions: ClientBlockDefinition[]): void {
+        for (const def of definitions) {
+            // Validate required fields
+            if (!def.type || !def.name || !def.components) {
+                console.error('Invalid block definition:', def);
+                throw new Error(
+                    'Block definition must have: type, name, and components (with Edit and Preview)'
+                );
+            }
+
+            // Validate components
+            if (!def.components.Edit || !def.components.Preview) {
+                throw new Error(
+                    `Block "${def.type}" must provide both Edit and Preview components in the components object`
+                );
+            }
+
+            // Convert ClientBlockDefinition to BlockTypeDefinition
+            const blockDefinition: BlockTypeDefinition = {
+                type: def.type,
+                name: def.name,
+                description: def.description,
+                icon: def.icon || def.components.Icon,
+                defaultData: def.defaultData,
+                validate: def.validate,
+                isContainer: def.isContainer,
+                allowedChildren: def.allowedChildren,
+                category: def.category || 'custom',
+                components: def.components,
+            };
+
+            this.register(blockDefinition);
+        }
+    }
+
+    /**
+     * Get block type definition by type string
+     */
+    get(type: string): BlockTypeDefinition | undefined {
+        return this._types.get(type);
+    }
+
+    /**
+     * Get all registered block types
+     */
+    getAll(): BlockTypeDefinition[] {
+        return Array.from(this._types.values());
+    }
+
+    /**
+     * Get block types filtered by category
+     */
+    getByCategory(category: BlockTypeDefinition['category']): BlockTypeDefinition[] {
+        return this.getAll().filter(block => block.category === category);
+    }
+
+    /**
+     * Check if a block type is registered
+     */
+    has(type: string): boolean {
+        return this._types.has(type);
+    }
+
+    /**
+     * Unregister a block type (useful for testing or dynamic loading)
+     */
+    unregister(type: string): boolean {
+        return this._types.delete(type);
+    }
+
+    /**
+     * Clear all registered block types
+     * Useful for testing or resetting the registry
+     */
+    clear(): void {
+        this._types.clear();
+    }
+
+    /**
+     * Get count of registered blocks
+     */
+    getCount(): number {
+        return this._types.size;
+    }
+}
+
+// Singleton instance - starts empty, populated by client apps
+export const blockRegistry = new BlockRegistryImpl();
+
+/**
+ * NOTE: No default blocks are registered automatically.
+ * Client applications must call registerClientBlocks() to populate the registry.
+ * This ensures the editor is a true "shell" without hardcoded blocks.
+ */

package/src/registry/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Registry exports
+ */
+export { blockRegistry } from './BlockRegistry';
+export type { ClientBlockDefinition, BlockTypeDefinition, BlockRegistry, } from '../types/block';
+//# sourceMappingURL=index.d.ts.map

package/src/registry/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACR,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,GAChB,MAAM,gBAAgB,CAAC"}

package/src/registry/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Registry exports
+ */
+
+export { blockRegistry } from './BlockRegistry';
+export type { 
+    ClientBlockDefinition,
+    BlockTypeDefinition,
+    BlockRegistry,
+} from '../types/block';
+

package/src/state/EditorContext.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Editor Context
+ * React Context for managing editor state
+ * Multi-Tenant: Accepts custom blocks from client applications
+ */
+import React from 'react';
+import { EditorContextValue, EditorState } from './types';
+import { Block } from '../types/block';
+import { ClientBlockDefinition } from '../types/block';
+/**
+ * Editor Provider Props
+ */
+export interface EditorProviderProps {
+    children: React.ReactNode;
+    /** Initial state (optional) */
+    initialState?: Partial<EditorState>;
+    /** Callback when save is triggered */
+    onSave?: (state: EditorState, heroBlock?: Block | null) => Promise<void>;
+    /**
+     * Custom blocks from client application
+     * These blocks will be registered in the BlockRegistry on mount
+     */
+    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;
+    };
+}
+/**
+ * Editor Provider
+ * Provides editor state and actions to child components
+ * Automatically registers client-provided blocks on mount
+ */
+export declare function EditorProvider({ children, initialState, onSave, customBlocks, darkMode, backgroundColors }: EditorProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access editor context
+ * @throws Error if used outside EditorProvider
+ */
+export declare function useEditor(): EditorContextValue;
+//# sourceMappingURL=EditorContext.d.ts.map

package/src/state/EditorContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContext.d.ts","sourceRoot":"","sources":["EditorContext.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAmG,MAAM,OAAO,CAAC;AAExH,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAoC,MAAM,SAAS,CAAC;AAC5F,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAMvD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE;;;OAGG;IACH,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACvC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,iDAAiD;QACjD,KAAK,EAAE,MAAM,CAAC;QACd,gDAAgD;QAChD,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,YAAiB,EACjB,QAAe,EACf,gBAAgB,EACnB,EAAE,mBAAmB,2CAqNrB;AAED;;;GAGG;AACH,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}

package/src/state/EditorContext.tsx

@@ -0,0 +1,283 @@
+/**
+ * Editor Context
+ * React Context for managing editor state
+ * Multi-Tenant: Accepts custom blocks from client applications
+ */
+
+'use client';
+
+import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect, useRef, useState } from 'react';
+import { editorReducer } from './reducer';
+import { EditorContextValue, EditorState, EditorAction, initialEditorState } from './types';
+import { Block } from '../types/block';
+import { BlogPost } from '../types/post';
+import { blockRegistry } from '../registry/BlockRegistry';
+import { ClientBlockDefinition } from '../types/block';
+import { registerLayoutBlocks } from '../lib/layouts/registerLayoutBlocks';
+
+// Create the context
+const EditorContext = createContext<EditorContextValue | null>(null);
+
+/**
+ * Editor Provider Props
+ */
+export interface EditorProviderProps {
+    children: React.ReactNode;
+    /** Initial state (optional) */
+    initialState?: Partial<EditorState>;
+    /** Callback when save is triggered */
+    onSave?: (state: EditorState, heroBlock?: Block | null) => Promise<void>;
+    /** 
+     * Custom blocks from client application
+     * These blocks will be registered in the BlockRegistry on mount
+     */
+    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;
+    };
+}
+
+/**
+ * Editor Provider
+ * Provides editor state and actions to child components
+ * Automatically registers client-provided blocks on mount
+ */
+export function EditorProvider({ 
+    children, 
+    initialState,
+    onSave,
+    customBlocks = [],
+    darkMode = true,
+    backgroundColors
+}: EditorProviderProps) {
+    // Register core layout blocks on mount
+    useEffect(() => {
+        registerLayoutBlocks();
+    }, []);
+
+    // Register client blocks on mount
+    useEffect(() => {
+        if (customBlocks && customBlocks.length > 0) {
+            try {
+                blockRegistry.registerClientBlocks(customBlocks);
+            } catch (error) {
+                console.error('[EditorContext] Failed to register custom blocks:', error);
+            }
+        }
+    }, [customBlocks]);
+
+    const [state, dispatch] = useReducer(
+        editorReducer,
+        { ...initialEditorState, ...initialState }
+    );
+
+    // Use a ref to always have access to the latest state in callbacks
+    const stateRef = useRef(state);
+    stateRef.current = state;
+
+    // History state for undo/redo
+    const [history, setHistory] = useState<EditorState[]>([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    const isRestoringRef = useRef(false);
+    const MAX_HISTORY = 50; // Limit history to prevent memory issues
+
+    // Save current state to history after state changes (but not during undo/redo)
+    // Debounce history updates to avoid excessive re-renders
+    const historyTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    
+    useEffect(() => {
+        if (isRestoringRef.current) {
+            isRestoringRef.current = false;
+            return;
+        }
+
+        // Clear existing timeout
+        if (historyTimeoutRef.current) {
+            clearTimeout(historyTimeoutRef.current);
+        }
+
+        // Debounce history updates to reduce re-renders
+        historyTimeoutRef.current = setTimeout(() => {
+            // Save current state to history
+            setHistory(prev => {
+                const newHistory = [...prev];
+                // Remove any future history if we're not at the end
+                if (historyIndex < newHistory.length - 1) {
+                    newHistory.splice(historyIndex + 1);
+                }
+                // Add current state
+                newHistory.push({ ...state });
+                // Limit history size
+                if (newHistory.length > MAX_HISTORY) {
+                    newHistory.shift();
+                    return newHistory;
+                }
+                return newHistory;
+            });
+            setHistoryIndex(prev => {
+                const newIndex = prev + 1;
+                return newIndex >= MAX_HISTORY ? MAX_HISTORY - 1 : newIndex;
+            });
+        }, 300); // Debounce by 300ms
+
+        return () => {
+            if (historyTimeoutRef.current) {
+                clearTimeout(historyTimeoutRef.current);
+            }
+        };
+    }, [state.blocks, state.title, state.slug, state.seo, state.metadata, state.status, historyIndex]);
+
+    // Helper: Add a new block (supports nested containers)
+    const addBlock = useCallback((type: string, index?: number, containerId?: string) => {
+        const blockDefinition = blockRegistry.get(type);
+        if (!blockDefinition) {
+            console.warn(`Block type "${type}" not found in registry. Available types:`, 
+                blockRegistry.getAll().map(b => b.type).join(', '));
+            return;
+        }
+
+        const newBlock: Block = {
+            id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            type,
+            data: { ...blockDefinition.defaultData },
+        };
+
+        dispatch({ type: 'ADD_BLOCK', payload: { block: newBlock, index, containerId } });
+    }, []);
+
+    // Helper: Update a block
+    const updateBlock = useCallback((id: string, data: Partial<Block['data']>) => {
+        dispatch({ type: 'UPDATE_BLOCK', payload: { id, data } });
+    }, []);
+
+    // Helper: Delete a block
+    const deleteBlock = useCallback((id: string) => {
+        dispatch({ type: 'DELETE_BLOCK', payload: { id } });
+    }, []);
+
+    // Helper: Duplicate a block
+    const duplicateBlock = useCallback((id: string) => {
+        dispatch({ type: 'DUPLICATE_BLOCK', payload: { id } });
+    }, []);
+
+    // Helper: Move a block (supports nested containers)
+    const moveBlock = useCallback((id: string, newIndex: number, containerId?: string) => {
+        dispatch({ type: 'MOVE_BLOCK', payload: { id, newIndex, containerId } });
+    }, []);
+
+    // Helper: Load a post
+    const loadPost = useCallback((post: BlogPost) => {
+        dispatch({ type: 'LOAD_POST', payload: post });
+    }, []);
+
+    // Helper: Reset editor
+    const resetEditor = useCallback(() => {
+        dispatch({ type: 'RESET_EDITOR' });
+    }, []);
+
+    // Helper: Save
+    // Uses stateRef to always get the latest state, avoiding stale closure issues
+    const save = useCallback(async (heroBlock?: Block | null) => {
+        if (onSave) {
+            // Use stateRef.current to get the absolute latest state
+            // This ensures we don't have stale closure issues with React state updates
+            await onSave(stateRef.current, heroBlock);
+            dispatch({ type: 'MARK_CLEAN' });
+        }
+    }, [onSave]);
+
+    // Helper: Undo
+    const undo = useCallback(() => {
+        if (historyIndex > 0 && history.length > 0) {
+            const previousState = history[historyIndex - 1];
+            if (previousState) {
+                isRestoringRef.current = true;
+                setHistoryIndex(prev => prev - 1);
+                dispatch({ type: 'LOAD_POST', payload: {
+                    id: previousState.postId || '',
+                    title: previousState.title,
+                    slug: previousState.slug,
+                    blocks: previousState.blocks,
+                    seo: previousState.seo,
+                    publication: {
+                        status: previousState.status,
+                        authorId: undefined,
+                    },
+                    metadata: previousState.metadata,
+                    createdAt: new Date().toISOString(),
+                    updatedAt: new Date().toISOString(),
+                } });
+            }
+        }
+    }, [history, historyIndex, dispatch]);
+
+    // Helper: Redo
+    const redo = useCallback(() => {
+        if (historyIndex < history.length - 1) {
+            const nextState = history[historyIndex + 1];
+            if (nextState) {
+                isRestoringRef.current = true;
+                setHistoryIndex(prev => prev + 1);
+                dispatch({ type: 'LOAD_POST', payload: {
+                    id: nextState.postId || '',
+                    title: nextState.title,
+                    slug: nextState.slug,
+                    blocks: nextState.blocks,
+                    seo: nextState.seo,
+                    publication: {
+                        status: nextState.status,
+                        authorId: undefined,
+                    },
+                    metadata: nextState.metadata,
+                    createdAt: new Date().toISOString(),
+                    updatedAt: new Date().toISOString(),
+                } });
+            }
+        }
+    }, [history, historyIndex, dispatch]);
+
+    // Memoize the context value
+    const value = useMemo<EditorContextValue>(
+        () => ({
+            state,
+            dispatch,
+            darkMode,
+            backgroundColors,
+        helpers: {
+            addBlock,
+            updateBlock,
+            deleteBlock,
+            duplicateBlock,
+            moveBlock,
+            loadPost,
+            resetEditor,
+            save,
+            undo,
+            redo,
+        },
+        canUndo: historyIndex > 0 && history.length > 0,
+        canRedo: historyIndex < history.length - 1,
+        }),
+        [state, dispatch, darkMode, backgroundColors, addBlock, updateBlock, deleteBlock, duplicateBlock, moveBlock, loadPost, resetEditor, save, undo, redo, historyIndex, history.length]
+    );
+
+    return <EditorContext.Provider value={value}>{children}</EditorContext.Provider>;
+}
+
+/**
+ * Hook to access editor context
+ * @throws Error if used outside EditorProvider
+ */
+export function useEditor(): EditorContextValue {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error('useEditor must be used within an EditorProvider');
+    }
+    return context;
+}

package/src/state/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * State management exports
+ */
+export * from './types';
+export * from './reducer';
+export * from './EditorContext';
+//# sourceMappingURL=index.d.ts.map

package/src/state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}

package/src/state/index.ts

@@ -0,0 +1,8 @@
+/**
+ * State management exports
+ */
+
+export * from './types';
+export * from './reducer';
+export * from './EditorContext';
+

package/src/state/reducer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Editor Reducer
+ * Pure function that handles state transitions
+ */
+import { EditorState, EditorAction } from './types';
+/**
+ * Editor Reducer
+ * Handles all state transitions for the editor
+ */
+export declare function editorReducer(state: EditorState, action: EditorAction): EditorState;
+//# sourceMappingURL=reducer.d.ts.map

package/src/state/reducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["reducer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAsB,MAAM,SAAS,CAAC;AAqUxE;;;GAGG;AACH,wBAAgB,aAAa,CACzB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,GACrB,WAAW,CAmWb"}