@jhits/plugin-blog 0.0.1

package/src/lib/rich-text/RichTextPreview.tsx

@@ -0,0 +1,210 @@
+/**
+ * Rich Text Preview Component
+ * Renders HTML content with client-provided styles
+ * Also supports plain text with formatting markers using the plugin-content parser
+ */
+
+'use client';
+
+import React from 'react';
+import { RichTextFormattingConfig } from './RichTextEditor';
+import { parse, useParserConfig } from '@jhits/plugin-content';
+
+export interface RichTextPreviewProps {
+    /** HTML content or plain text with formatting markers to render */
+    content: string;
+    /** Formatting configuration (for applying client styles to HTML) */
+    formatting?: RichTextFormattingConfig;
+    /** Additional CSS classes */
+    className?: string;
+}
+
+/**
+ * Check if content is HTML or plain text with formatting markers
+ */
+function isHtmlContent(content: string): boolean {
+    // If content contains HTML tags, it's HTML
+    if (/<[a-z][\s\S]*>/i.test(content)) {
+        return true;
+    }
+    // If content contains HTML entities, it's likely HTML
+    if (/&[a-z]+;/i.test(content)) {
+        return true;
+    }
+    // Otherwise, it's plain text (potentially with formatting markers)
+    return false;
+}
+
+export function RichTextPreview({
+    content,
+    formatting,
+    className = '',
+}: RichTextPreviewProps) {
+    // Handle empty content
+    if (!content || content.trim() === '') {
+        return <div className={className}>&nbsp;</div>;
+    }
+    
+    // Get parser config from context (provided by client app)
+    const parserConfig = useParserConfig();
+    
+    // Check if content is HTML or plain text
+    const isHtml = isHtmlContent(content);
+    
+    // If it's plain text, use the parser from plugin-content
+    if (!isHtml) {
+        const parsedContent = parse(content, false, parserConfig);
+        return (
+            <div className={className}>
+                {parsedContent}
+            </div>
+        );
+    }
+    
+    // Otherwise, continue with HTML rendering logic
+    // Apply client-provided styles to HTML content
+    const applyStyles = (html: string): string => {
+        if (!formatting?.styles) return html;
+
+        const styles = formatting.styles;
+        let styledHtml = html;
+
+        // Apply bold style - handle both <strong> and <b> tags
+        if (styles.bold) {
+            // Replace <strong> tags
+            styledHtml = styledHtml.replace(
+                /<strong\b([^>]*)>/gi,
+                (match, attrs) => {
+                    // Check if class already exists
+                    if (attrs && attrs.includes('class=')) {
+                        return match.replace(/class="([^"]*)"/, `class="$1 ${styles.bold}"`);
+                    }
+                    return `<strong class="${styles.bold}">`;
+                }
+            );
+            // Replace <b> tags
+            styledHtml = styledHtml.replace(
+                /<b\b([^>]*)>/gi,
+                (match, attrs) => {
+                    if (attrs && attrs.includes('class=')) {
+                        return match.replace(/class="([^"]*)"/, `class="$1 ${styles.bold}"`);
+                    }
+                    return `<b class="${styles.bold}">`;
+                }
+            );
+        }
+
+        // Apply italic style - handle both <em> and <i> tags
+        if (styles.italic) {
+            styledHtml = styledHtml.replace(
+                /<em\b([^>]*)>/gi,
+                (match, attrs) => {
+                    if (attrs && attrs.includes('class=')) {
+                        return match.replace(/class="([^"]*)"/, `class="$1 ${styles.italic}"`);
+                    }
+                    return `<em class="${styles.italic}">`;
+                }
+            );
+            styledHtml = styledHtml.replace(
+                /<i\b([^>]*)>/gi,
+                (match, attrs) => {
+                    if (attrs && attrs.includes('class=')) {
+                        return match.replace(/class="([^"]*)"/, `class="$1 ${styles.italic}"`);
+                    }
+                    return `<i class="${styles.italic}">`;
+                }
+            );
+        }
+
+        // Apply underline style
+        if (styles.underline) {
+            styledHtml = styledHtml.replace(
+                /<u\b([^>]*)>/gi,
+                (match, attrs) => {
+                    if (attrs && attrs.includes('class=')) {
+                        return match.replace(/class="([^"]*)"/, `class="$1 ${styles.underline}"`);
+                    }
+                    return `<u class="${styles.underline}">`;
+                }
+            );
+        }
+
+        // Apply link style
+        if (styles.link) {
+            styledHtml = styledHtml.replace(
+                /<a\b([^>]*)>/gi,
+                (match, attrs) => {
+                    if (attrs && attrs.includes('class=')) {
+                        return match.replace(/class="([^"]*)"/, `class="$1 ${styles.link}"`);
+                    }
+                    return match.replace('>', ` class="${styles.link}">`);
+                }
+            );
+        }
+
+        // Apply color classes to spans (preserve existing classes)
+        if (styles.colorClasses) {
+            Object.entries(styles.colorClasses).forEach(([color, colorClass]) => {
+                // Match spans that might have the color class already or need it added
+                const regex = new RegExp(`<span([^>]*)class="([^"]*)"([^>]*)>`, 'gi');
+                styledHtml = styledHtml.replace(regex, (match, beforeAttrs, existingClasses, afterAttrs) => {
+                    // Don't add if class already exists
+                    if (existingClasses.includes(colorClass)) {
+                        return match;
+                    }
+                    // Add the color class
+                    return `<span${beforeAttrs}class="${existingClasses} ${colorClass}"${afterAttrs}>`;
+                });
+                
+                // Also handle spans without class attribute
+                const regexNoClass = new RegExp(`<span([^>]*)>`, 'gi');
+                styledHtml = styledHtml.replace(regexNoClass, (match, attrs) => {
+                    // Only add if this span doesn't already have a class and we're looking for a specific color
+                    if (!attrs.includes('class=')) {
+                        return match.replace('>', ` class="${colorClass}">`);
+                    }
+                    return match;
+                });
+            });
+        }
+
+        return styledHtml;
+    };
+
+    const styledContent = formatting ? applyStyles(content) : content;
+
+    // For rendering, we'll use a ref to set innerHTML only on the client side
+    // This avoids SSR issues while still allowing HTML rendering
+    const contentRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (contentRef.current && styledContent) {
+            contentRef.current.innerHTML = styledContent;
+        }
+    }, [styledContent]);
+
+    // For server-side rendering, render plain text
+    if (typeof window === 'undefined') {
+        const textContent = styledContent
+            .replace(/<[^>]*>/g, '')
+            .replace(/&nbsp;/g, ' ')
+            .replace(/&amp;/g, '&')
+            .replace(/&lt;/g, '<')
+            .replace(/&gt;/g, '>')
+            .replace(/&quot;/g, '"');
+
+        return (
+            <div className={className}>
+                {textContent || '\u00A0'}
+            </div>
+        );
+    }
+
+    return (
+        <div 
+            ref={contentRef}
+            className={className}
+        />
+    );
+}
+

package/src/lib/rich-text/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Rich Text Utilities
+ * Export rich text editor and preview components
+ */
+
+export { RichTextEditor } from './RichTextEditor';
+export { RichTextPreview } from './RichTextPreview';
+export type { RichTextFormattingConfig, RichTextEditorProps } from './RichTextEditor';
+export type { RichTextPreviewProps } from './RichTextPreview';
+

package/src/lib/utils/blockHelpers.ts

@@ -0,0 +1,72 @@
+/**
+ * Block Helper Utilities
+ * Functions for working with blocks, including nested structures
+ */
+
+import { Block } from '../../types/block';
+
+/**
+ * Get child blocks from a container block
+ * Handles both Block[] and string[] formats
+ */
+export function getChildBlocks(block: Block, allBlocks: Block[] = []): Block[] {
+    if (!block.children || block.children.length === 0) {
+        return [];
+    }
+
+    // If children are Block objects, return them directly
+    if (block.children.length > 0 && typeof block.children[0] === 'object' && 'id' in block.children[0]) {
+        return block.children as Block[];
+    }
+
+    // If children are IDs, resolve them from allBlocks (recursively search nested blocks)
+    const childIds = block.children as string[];
+    const resolvedBlocks: Block[] = [];
+    
+    function findBlockRecursive(blocks: Block[], id: string): Block | null {
+        for (const b of blocks) {
+            if (b.id === id) return b;
+            if (b.children && Array.isArray(b.children) && b.children.length > 0) {
+                if (typeof b.children[0] === 'object') {
+                    const found = findBlockRecursive(b.children as Block[], id);
+                    if (found) return found;
+                }
+            }
+        }
+        return null;
+    }
+    
+    childIds.forEach(id => {
+        const found = findBlockRecursive(allBlocks, id);
+        if (found) resolvedBlocks.push(found);
+    });
+    
+    return resolvedBlocks;
+}
+
+/**
+ * Check if a block is a container (has children or is marked as container)
+ */
+export function isContainerBlock(block: Block, blockRegistry: { get: (type: string) => { isContainer?: boolean } | undefined }): boolean {
+    const definition = blockRegistry.get(block.type);
+    return definition?.isContainer === true || (block.children !== undefined && block.children.length > 0);
+}
+
+/**
+ * Find a block by ID recursively (including nested blocks)
+ */
+export function findBlockById(blocks: Block[], id: string): Block | null {
+    for (const block of blocks) {
+        if (block.id === id) {
+            return block;
+        }
+        if (block.children && Array.isArray(block.children) && block.children.length > 0) {
+            if (typeof block.children[0] === 'object') {
+                const found = findBlockById(block.children as Block[], id);
+                if (found) return found;
+            }
+        }
+    }
+    return null;
+}
+

package/src/lib/utils/configValidation.ts

@@ -0,0 +1,137 @@
+/**
+ * Plugin Configuration Validation Utilities
+ * Validates plugin configuration and custom blocks
+ */
+
+import { useEffect, useState, useMemo } from 'react';
+import { ClientBlockDefinition } from '../../types/block';
+
+/**
+ * Routes that require the hero block to be defined
+ */
+const ROUTES_REQUIRING_HERO_BLOCK = ['editor', 'new', 'preview'] as const;
+
+/**
+ * Check if a route requires the hero block
+ */
+export function routeRequiresHeroBlock(route: string): boolean {
+    return ROUTES_REQUIRING_HERO_BLOCK.includes(route as any);
+}
+
+/**
+ * Find hero block definition in custom blocks
+ */
+export function findHeroBlock(customBlocks: ClientBlockDefinition[]): ClientBlockDefinition | undefined {
+    return customBlocks.find(block => block.type === 'hero');
+}
+
+/**
+ * Hook to validate hero block configuration
+ * Only validates for routes that require it, and waits for customBlocks to load
+ * 
+ * @param route - Current route (e.g., 'posts', 'editor', 'new')
+ * @param customBlocks - Array of custom block definitions
+ * @param propsCustomBlocks - Custom blocks from props (for immediate validation)
+ */
+export function useHeroBlockValidation(
+    route: string,
+    customBlocks: ClientBlockDefinition[],
+    propsCustomBlocks?: ClientBlockDefinition[]
+): void {
+    const needsHeroBlock = useMemo(() => routeRequiresHeroBlock(route), [route]);
+    
+    const heroBlockDefinition = useMemo(() => {
+        // Only search for hero block if route needs it
+        return needsHeroBlock ? findHeroBlock(customBlocks) : undefined;
+    }, [customBlocks, needsHeroBlock]);
+    
+    // Track if we've given customBlocks time to load from window global
+    // This prevents false errors when customBlocks are loaded asynchronously
+    // Only track this if we actually need the hero block
+    const [hasCheckedForBlocks, setHasCheckedForBlocks] = useState(false);
+    
+    // Give window global a chance to load before validating
+    // Only do this if the route needs the hero block
+    useEffect(() => {
+        // Early return: Skip all validation logic if route doesn't need hero block
+        if (!needsHeroBlock) {
+            return;
+        }
+        
+        if (typeof window === 'undefined') {
+            setHasCheckedForBlocks(true); // Server-side, no need to wait
+            return;
+        }
+        
+        // If props are provided, we can validate immediately
+        if (propsCustomBlocks && propsCustomBlocks.length > 0) {
+            setHasCheckedForBlocks(true);
+            return;
+        }
+        
+        // Check if window global is already available
+        if ((window as any).__JHITS_PLUGIN_PROPS__?.['plugin-blog']?.customBlocks) {
+            setHasCheckedForBlocks(true);
+            return;
+        }
+        
+        // Retry mechanism: check multiple times with increasing delays
+        // This handles the case where BlogPluginInit's useEffect runs after BlogPlugin mounts
+        // BlogPluginInit runs initBlogPlugin in useEffect, which may execute after BlogPlugin's first render
+        let attempt = 0;
+        const maxAttempts = 6;
+        const delays = [50, 100, 200, 300, 500, 1000]; // Progressive delays: total ~2.15s
+        
+        const timers: NodeJS.Timeout[] = [];
+        
+        const checkWithRetry = () => {
+            const windowGlobal = (window as any).__JHITS_PLUGIN_PROPS__?.['plugin-blog']?.customBlocks;
+            if (windowGlobal && windowGlobal.length > 0) {
+                // Found it! Mark as checked
+                setHasCheckedForBlocks(true);
+                return;
+            }
+            
+            if (attempt < maxAttempts) {
+                const timer = setTimeout(() => {
+                    attempt++;
+                    checkWithRetry();
+                }, delays[attempt]);
+                timers.push(timer);
+            } else {
+                // After all retries, mark as checked (even if not found)
+                // This prevents infinite waiting and allows validation to proceed
+                setHasCheckedForBlocks(true);
+            }
+        };
+        
+        // Start checking
+        checkWithRetry();
+        
+        // Cleanup all timers
+        return () => {
+            timers.forEach(timer => clearTimeout(timer));
+        };
+    }, [propsCustomBlocks, needsHeroBlock]);
+    
+    // Validate that Hero block is required (only for editor routes, and only after we've checked for blocks)
+    useEffect(() => {
+        // Early return if route doesn't need hero block - no validation needed
+        if (!needsHeroBlock) {
+            return;
+        }
+        
+        // Only validate if:
+        // 1. We're in a route that needs the hero block (already checked above)
+        // 2. We've given customBlocks time to load (hasCheckedForBlocks is true)
+        // 3. The hero block is still not found
+        if (hasCheckedForBlocks && !heroBlockDefinition) {
+            console.error(
+                '[BlogPlugin] Hero block is REQUIRED but not found in customBlocks. ' +
+                'Please define a block with type: "hero" in your blog config. ' +
+                `Current route: "${route}"`
+            );
+        }
+    }, [heroBlockDefinition, needsHeroBlock, hasCheckedForBlocks, route]);
+}
+

package/src/lib/utils/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Utility exports
+ */
+
+export * from './slugify';
+export * from './blockHelpers';
+export * from './configValidation';
+

package/src/lib/utils/slugify.ts

@@ -0,0 +1,79 @@
+/**
+ * Slug Utilities
+ * Functions for generating and validating URL slugs
+ */
+
+/**
+ * Convert a string to a URL-friendly slug
+ */
+export function slugify(text: string): string {
+    return text
+        .toString()
+        .toLowerCase()
+        .trim()
+        .replace(/\s+/g, '-')           // Replace spaces with hyphens
+        .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
+        .replace(/\-\-+/g, '-')         // Replace multiple hyphens with single hyphen
+        .replace(/^-+/, '')             // Trim hyphens from start
+        .replace(/-+$/, '');            // Trim hyphens from end
+}
+
+/**
+ * Generate a slug from a title
+ * Automatically handles edge cases and ensures uniqueness
+ */
+export function generateSlugFromTitle(title: string, existingSlugs: string[] = []): string {
+    let baseSlug = slugify(title);
+    
+    // If slug is empty after processing, use a fallback
+    if (!baseSlug) {
+        baseSlug = 'untitled-post';
+    }
+    
+    // Check for collisions and append number if needed
+    let finalSlug = baseSlug;
+    let counter = 1;
+    
+    while (existingSlugs.includes(finalSlug)) {
+        finalSlug = `${baseSlug}-${counter}`;
+        counter++;
+    }
+    
+    return finalSlug;
+}
+
+/**
+ * Validate a slug format
+ */
+export function isValidSlug(slug: string): boolean {
+    // Slug should be lowercase, alphanumeric with hyphens
+    const slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+    return slugRegex.test(slug) && slug.length > 0 && slug.length <= 200;
+}
+
+/**
+ * Check if a slug collides with existing slugs
+ */
+export function checkSlugCollision(slug: string, existingSlugs: string[], excludeId?: string): {
+    isCollision: boolean;
+    conflictingId?: string;
+} {
+    // Normalize the slug for comparison
+    const normalizedSlug = slug.toLowerCase().trim();
+    
+    // Check against existing slugs (excluding current post if editing)
+    for (const existing of existingSlugs) {
+        if (existing.toLowerCase().trim() === normalizedSlug) {
+            // If we have an excludeId, we need to check if this is the same post
+            // This would require additional context (like a post ID map)
+            // For now, we'll return collision if it matches
+            return {
+                isCollision: true,
+                conflictingId: existing,
+            };
+        }
+    }
+    
+    return { isCollision: false };
+}
+

package/src/registry/BlockRegistry.ts

@@ -0,0 +1,142 @@
+/**
+ * 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.`
+            );
+        }
+
+        if (this._types.has(definition.type)) {
+            console.warn(`Block type "${definition.type}" is already registered. Overwriting...`);
+        }
+        
+        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.ts

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