@jhits/plugin-blog 0.0.18 → 0.0.20

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

@@ -32,8 +32,10 @@ export interface RichTextFormattingConfig {
 }
 
 export interface RichTextEditorProps {
+    /** HTML content value (alias for value) */
+    content?: string;
     /** HTML content value */
-    value: string;
+    value?: string;
     /** Change handler */
     onChange: (html: string) => void;
     /** Placeholder text */
@@ -49,6 +51,7 @@ export interface RichTextEditorProps {
 }
 
 export function RichTextEditor({
+    content,
     value,
     onChange,
     placeholder = 'Enter text...',
@@ -65,6 +68,9 @@ export function RichTextEditor({
     const [showColorPicker, setShowColorPicker] = useState(false);
     const [selectedText, setSelectedText] = useState('');
     const [currentColor, setCurrentColor] = useState<string | null>(null);
+    const isMounted = useRef(false);
+
+    const actualContent = content ?? value ?? '';
 
     // Check which formatting options are available
     const hasBold = formatting?.bold !== false;
@@ -75,19 +81,20 @@ export function RichTextEditor({
 
     // Initialize content when component mounts
     useEffect(() => {
-        if (editorRef.current && !editorRef.current.innerHTML && value) {
-            editorRef.current.innerHTML = value;
+        if (editorRef.current && !isMounted.current && actualContent) {
+            editorRef.current.innerHTML = actualContent;
+            isMounted.current = true;
         }
-    }, []); // Only run on mount
+    }, [actualContent]); // Run when content is available
 
-    // Update content when value prop changes (but avoid if user is editing)
+    // Update content when prop changes (but avoid if user is editing)
     useEffect(() => {
         if (editorRef.current && document.activeElement !== editorRef.current) {
-            if (editorRef.current.innerHTML !== value) {
-                editorRef.current.innerHTML = value || '';
+            if (editorRef.current.innerHTML !== actualContent) {
+                editorRef.current.innerHTML = actualContent;
             }
         }
-    }, [value]);
+    }, [actualContent]);
 
     // Handle focus prop
     useEffect(() => {
@@ -814,7 +821,7 @@ export function RichTextEditor({
                     }
                 }}
                 data-placeholder={placeholder}
-                className={`outline-none min-h-[24px] ${!value || value === '<br>' || value === '<div><br></div>'
+                className={`outline-none min-h-[24px] ${!actualContent || actualContent === '<br>' || actualContent === '<div><br></div>'
                     ? 'before:content-[attr(data-placeholder)] before:text-neutral-400 dark:before:text-neutral-500 before:pointer-events-none'
                     : ''
                     }`}

package/src/lib/utils/config-resolver.ts

@@ -0,0 +1,64 @@
+/**
+ * Plugin Configuration Resolver
+ * Centralizes the logic for resolving plugin settings from multiple sources
+ */
+
+import { ClientBlockDefinition } from '../../types/block';
+
+export interface ResolvedConfig {
+    customBlocks: ClientBlockDefinition[];
+    darkMode: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    LayoutWrapper?: any;
+    translations?: Record<string, any>;
+}
+
+/**
+ * Resolves a specific configuration value from priority sources:
+ * 1. LocalStorage (Dev overrides)
+ * 2. Component Props
+ * 3. Window Global (__JHITS_PLUGIN_PROPS__)
+ * 4. Default Value
+ */
+export function resolveConfigValue<T>(
+    key: string,
+    propValue: T | undefined,
+    defaultValue: T
+): T {
+    if (typeof window === 'undefined') return propValue ?? defaultValue;
+
+    // 1. Check LocalStorage (Dev priority)
+    try {
+        const saved = localStorage.getItem('__JHITS_PLUGIN_BLOG_CONFIG__');
+        if (saved) {
+            const config = JSON.parse(saved);
+            if (config[key] !== undefined) return config[key];
+        }
+    } catch (e) {}
+
+    // 2. Check Props
+    if (propValue !== undefined) return propValue;
+
+    // 3. Check Window Global
+    const globalProps = (window as any).__JHITS_PLUGIN_PROPS__?.['plugin-blog'];
+    if (globalProps && globalProps[key] !== undefined) return globalProps[key];
+
+    // 4. Default
+    return defaultValue;
+}
+
+/**
+ * Resolves all plugin configuration
+ */
+export function resolvePluginConfig(props: any): ResolvedConfig {
+    return {
+        customBlocks: resolveConfigValue('customBlocks', props.customBlocks, []),
+        darkMode: resolveConfigValue('darkMode', props.darkMode, true),
+        backgroundColors: resolveConfigValue('backgroundColors', props.backgroundColors, undefined),
+        LayoutWrapper: resolveConfigValue('LayoutWrapper', props.LayoutWrapper, undefined),
+        translations: resolveConfigValue('translations', props.translations, undefined),
+    };
+}

package/src/lib/utils/tree.ts

@@ -0,0 +1,150 @@
+/**
+ * Tree Utility Functions
+ * Generic functions for manipulating nested block trees
+ */
+
+import { Block } from '../../types/block';
+
+/**
+ * Check if the children property contains actual Block objects (nested blocks)
+ * rather than just strings (like in the Recipe block)
+ */
+function hasNestedBlocks(node: Block): boolean {
+    return !!(node.children && 
+              Array.isArray(node.children) && 
+              node.children.length > 0 && 
+              typeof node.children[0] === 'object' &&
+              node.children[0] !== null);
+}
+
+/**
+ * Find a node in the tree by ID
+ */
+export function findNode(nodes: Block[], id: string): Block | null {
+    for (const node of nodes) {
+        if (node.id === id) return node;
+        if (hasNestedBlocks(node)) {
+            const found = findNode(node.children as Block[], id);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+
+/**
+ * Map over a tree and update nodes
+ */
+export function mapTree(nodes: Block[], mapper: (node: Block) => Block): Block[] {
+    return nodes.map(node => {
+        const mapped = mapper(node);
+        if (hasNestedBlocks(mapped)) {
+            return {
+                ...mapped,
+                children: mapTree(mapped.children as Block[], mapper),
+            };
+        }
+        return mapped;
+    });
+}
+
+/**
+ * Filter a tree and remove nodes
+ */
+export function filterTree(nodes: Block[], predicate: (node: Block) => boolean): Block[] {
+    return nodes
+        .filter(predicate)
+        .map(node => {
+            if (hasNestedBlocks(node)) {
+                return {
+                    ...node,
+                    children: filterTree(node.children as Block[], predicate),
+                };
+            }
+            return node;
+        });
+}
+
+/**
+ * Remove a node and return both the new tree and the removed node
+ */
+export function removeNode(nodes: Block[], id: string): { updatedNodes: Block[]; removedNode: Block | null } {
+    let removedNode: Block | null = null;
+    
+    // 1. Search at current level
+    const index = nodes.findIndex(n => n.id === id);
+    if (index !== -1) {
+        removedNode = nodes[index];
+        const updatedNodes = [...nodes];
+        updatedNodes.splice(index, 1);
+        return { updatedNodes, removedNode };
+    }
+
+    // 2. Search recursively in children
+    const updatedNodes = nodes.map(node => {
+        // If we already found the node in a previous iteration of this map, just return the node
+        if (removedNode) return node;
+
+        if (hasNestedBlocks(node)) {
+            const { updatedNodes: newChildren, removedNode: found } = removeNode(node.children as Block[], id);
+            if (found) {
+                removedNode = found;
+                return { ...node, children: newChildren };
+            }
+        }
+        return node;
+    });
+
+    return { updatedNodes, removedNode };
+}
+
+/**
+ * Add a node to a container at a specific index
+ */
+export function addNodeToContainer(
+    nodes: Block[],
+    containerId: string,
+    newNode: Block,
+    index?: number
+): Block[] {
+    // 1. Safety check: Can't add a node to itself
+    if (newNode.id === containerId) return nodes;
+
+    // 2. Track if we found and updated the container
+    let found = false;
+
+    const result = mapTree(nodes, node => {
+        // Direct container match or column container match (e.g., "block-id-col-0")
+        const isMatch = node.id === containerId || containerId.startsWith(`${node.id}-col-`);
+        
+        if (isMatch) {
+            found = true;
+            // If it's a column container, apply meta
+            if (containerId.startsWith(`${node.id}-col-`)) {
+                const columnIndex = parseInt(containerId.split('-col-')[1] || '0', 10);
+                newNode.meta = { ...newNode.meta, columnIndex };
+            }
+            
+            const children = hasNestedBlocks(node)
+                ? [...(node.children as Block[])]
+                : [];
+            
+            // Ensure we don't have duplicates of the same ID in the children
+            const filteredChildren = children.filter(c => c.id !== newNode.id);
+            
+            if (index !== undefined && index >= 0 && index <= filteredChildren.length) {
+                filteredChildren.splice(index, 0, newNode);
+            } else {
+                filteredChildren.push(newNode);
+            }
+            
+            return { ...node, children: filteredChildren };
+        }
+        return node;
+    });
+
+    if (!found) {
+        throw new Error(`Container ${containerId} not found in the block tree.`);
+    }
+
+    return result;
+}