@jhits/plugin-blog 0.0.4 → 0.0.6

package/src/state/EditorContext.tsx

@@ -26,7 +26,7 @@ export interface EditorProviderProps {
     /** Initial state (optional) */
     initialState?: Partial<EditorState>;
     /** Callback when save is triggered */
-    onSave?: (state: EditorState) => Promise<void>;
+    onSave?: (state: EditorState, heroBlock?: Block | null) => Promise<void>;
     /** 
      * Custom blocks from client application
      * These blocks will be registered in the BlockRegistry on mount
@@ -56,29 +56,19 @@ export function EditorProvider({
     darkMode = true,
     backgroundColors
 }: EditorProviderProps) {
-    console.log('[EditorProvider] Rendering with darkMode:', darkMode);
-    
     // Register core layout blocks on mount
     useEffect(() => {
-        console.log('[EditorContext] Registering layout blocks...');
         registerLayoutBlocks();
-        const layoutBlocks = blockRegistry.getByCategory('layout');
-        console.log('[EditorContext] Layout blocks registered:', layoutBlocks.length, layoutBlocks.map(b => b.type));
     }, []);
 
     // Register client blocks on mount
     useEffect(() => {
         if (customBlocks && customBlocks.length > 0) {
             try {
-                console.log('[EditorContext] Registering custom blocks:', customBlocks.length, customBlocks.map(b => b.type));
                 blockRegistry.registerClientBlocks(customBlocks);
-                const allBlocks = blockRegistry.getAll();
-                console.log('[EditorContext] Total blocks after registration:', allBlocks.length, allBlocks.map(b => b.type));
             } catch (error) {
                 console.error('[EditorContext] Failed to register custom blocks:', error);
             }
-        } else {
-            console.log('[EditorContext] No custom blocks provided');
         }
     }, [customBlocks]);
 
@@ -98,33 +88,50 @@ export function EditorProvider({
     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;
         }
 
-        // 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();
+        // 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);
             }
-            return newHistory;
-        });
-        setHistoryIndex(prev => {
-            const newIndex = prev + 1;
-            return newIndex >= MAX_HISTORY ? MAX_HISTORY - 1 : newIndex;
-        });
-    }, [state.blocks, state.title, state.slug, state.seo, state.metadata, state.status]);
+        };
+    }, [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) => {
@@ -176,12 +183,11 @@ export function EditorProvider({
 
     // Helper: Save
     // Uses stateRef to always get the latest state, avoiding stale closure issues
-    const save = useCallback(async () => {
+    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
-            console.log('[EditorContext] save() called with status:', stateRef.current.status);
-            await onSave(stateRef.current);
+            await onSave(stateRef.current, heroBlock);
             dispatch({ type: 'MARK_CLEAN' });
         }
     }, [onSave]);

package/src/state/types.ts

@@ -118,7 +118,7 @@ export interface EditorContextValue {
         resetEditor: () => void;
         
         /** Save current state (triggers save callback) */
-        save: () => Promise<void>;
+        save: (heroBlock?: Block | null) => Promise<void>;
         
         /** Undo last action */
         undo: () => void;

package/src/types/post.ts

@@ -75,6 +75,10 @@ export interface PostMetadata {
         alt?: string;
         brightness?: number; // 0-200, 100 = normal
         blur?: number; // 0-20
+        scale?: number; // 0.1-3.0, 1.0 = normal
+        positionX?: number; // -100 to 100, 0 = center
+        positionY?: number; // -100 to 100, 0 = center
+        isCustom?: boolean; // true if edited independently from hero image
     };
     
     /** Categories */

package/src/utils/index.ts

@@ -4,5 +4,6 @@
  */
 
 export * from './client';
-export * from '../lib/utils/blockHelpers';
+export * from './blockHelpers';
+export * from './slugify';
 

package/src/views/CanvasEditor/BlockWrapper.tsx

@@ -274,7 +274,7 @@ export function BlockWrapper({
         >
             {/* Left Margin Controls - Visible on Hover */}
             <div
-                className={`absolute -left-16 top-1/2 -translate-y-1/2 flex flex-col gap-2 transition-all duration-200 z-20 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                className={`absolute -left-16 top-1/2 -translate-y-1/2 flex flex-col gap-2 transition-all duration-200 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
                     }`}
                 onMouseEnter={() => setIsControlsHovered(true)}
                 onMouseLeave={() => setIsControlsHovered(false)}
@@ -321,7 +321,7 @@ export function BlockWrapper({
 
             {/* Block Header - Positioned above the component */}
             <div
-                className={`mb-2 transition-all relative z-[100] ${isHovered || showControls || showSettingsMenu
+                className={`mb-2 transition-all relative ${isHovered || showControls || showSettingsMenu
                     ? 'opacity-100 translate-y-0'
                     : 'opacity-0 -translate-y-2 pointer-events-none'
                     }`}
@@ -339,7 +339,7 @@ export function BlockWrapper({
                         </span>
 
                         {/* Layout Block Settings - Inline in header */}
-                        {block.type === 'section' && (
+                        {/* {block.type === 'section' && (
                             <div className="flex items-center gap-2 ml-4 flex-1 min-w-0">
                                 <select
                                     value={(block.data.padding as string) || 'md'}
@@ -363,7 +363,7 @@ export function BlockWrapper({
                                     <option value="CREAM">Cream</option>
                                 </select>
                             </div>
-                        )}
+                        )} */}
 
                         {block.type === 'columns' && (
                             <select
@@ -381,13 +381,13 @@ export function BlockWrapper({
                             </select>
                         )}
                     </div>
-                    <div className="relative shrink-0 z-[200]" ref={settingsMenuRef}>
+                    <div className="relative shrink-0 z-20" ref={settingsMenuRef}>
                         <button
                             onClick={(e) => {
                                 e.stopPropagation();
                                 setShowSettingsMenu(!showSettingsMenu);
                             }}
-                            className="p-1 rounded transition-colors text-neutral-400 dark:text-neutral-500 hover:text-neutral-950 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 relative z-[200]"
+                            className="p-1 rounded transition-colors text-neutral-400 dark:text-neutral-500 hover:text-neutral-950 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 relative z-20"
                             title="Block settings"
                         >
                             <Settings2 size={12} />
@@ -395,7 +395,7 @@ export function BlockWrapper({
 
                         {/* Settings Dropdown Menu */}
                         {showSettingsMenu && (
-                            <div className="absolute right-0 top-full mt-1 w-40 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl z-[200] overflow-hidden">
+                            <div className="absolute right-0 top-full mt-1 w-40 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl z-20 overflow-hidden">
                                 <button
                                     onClick={(e) => {
                                         e.stopPropagation();
@@ -418,7 +418,6 @@ export function BlockWrapper({
                     ? 'border-primary/60 dark:border-primary/40 bg-primary/5 dark:bg-primary/10'
                     : 'border-neutral-200 dark:border-neutral-700 bg-transparent'
                     }`}
-                style={{ zIndex: 1 }}
             >
                 {/* Edit Component - No padding, let the component control its own spacing */}
                 <div className="relative" style={{ userSelect: 'text' }}>