diff --git a/backend/image_studio_images/img_Modern_data_dashboard_style_illustration__spl_32bd67a8.png b/backend/image_studio_images/img_Modern_data_dashboard_style_illustration__spl_32bd67a8.png new file mode 100644 index 00000000..6118b083 Binary files /dev/null and b/backend/image_studio_images/img_Modern_data_dashboard_style_illustration__spl_32bd67a8.png differ diff --git a/frontend/src/components/BlogWriter/EnhancedOutlineEditor.tsx b/frontend/src/components/BlogWriter/EnhancedOutlineEditor.tsx index b05385d6..67da8096 100644 --- a/frontend/src/components/BlogWriter/EnhancedOutlineEditor.tsx +++ b/frontend/src/components/BlogWriter/EnhancedOutlineEditor.tsx @@ -912,6 +912,13 @@ const EnhancedOutlineEditor: React.FC = ({ onImageGenerated={(imageBase64, sectionId) => { if (sectionId && setSectionImages) { setSectionImages((prev: Record) => ({ ...prev, [sectionId]: imageBase64 })); + try { + const existing = JSON.parse(localStorage.getItem('blog_section_images') || '{}'); + existing[sectionId] = imageBase64; + localStorage.setItem('blog_section_images', JSON.stringify(existing)); + } catch (e) { + console.warn('[SectionImages] Failed to persist to localStorage:', e); + } } }} /> diff --git a/frontend/src/hooks/useBlogWriterState.ts b/frontend/src/hooks/useBlogWriterState.ts index b2ab71c1..ec750575 100644 --- a/frontend/src/hooks/useBlogWriterState.ts +++ b/frontend/src/hooks/useBlogWriterState.ts @@ -52,6 +52,7 @@ const restoreInitialState = () => { let sourceMappingStats: SourceMappingStats | null = null; let groundingInsights: GroundingInsights | null = null; let researchCoverage: ResearchCoverage | null = null; + let sectionImages: Record = {}; try { // Restore research from the research cache (synchronous localStorage reads) @@ -93,6 +94,13 @@ const restoreInitialState = () => { // Restore SEO data seoAnalysis = readLS('blog_seo_analysis', null); seoMetadata = readLS('blog_seo_metadata', null); + + // Restore section images + const savedSectionImages = readLS | null>('blog_section_images', null); + if (savedSectionImages && Object.keys(savedSectionImages).length > 0) { + sectionImages = savedSectionImages; + console.log(`[SectionImages] Restored ${Object.keys(sectionImages).length} images from localStorage`); + } } catch (error) { console.error('Error during initial state restoration:', error); } @@ -110,6 +118,7 @@ const restoreInitialState = () => { sourceMappingStats, groundingInsights, researchCoverage, + sectionImages, }; }; @@ -149,7 +158,7 @@ export const useBlogWriterState = () => { const [contentConfirmed, setContentConfirmed] = useState(initialState.contentConfirmed); // Section images state - persists images generated in outline phase to content phase - const [sectionImages, setSectionImages] = useState>({}); + const [sectionImages, setSectionImages] = useState>(initialState.sectionImages); const formatContentAngleToTitle = useCallback((angle: string): string => { if (!angle || typeof angle !== 'string') { @@ -233,6 +242,19 @@ export const useBlogWriterState = () => { } catch {} }, [seoMetadata]); + // Persist sectionImages to localStorage whenever they change + useEffect(() => { + try { + if (Object.keys(sectionImages).length > 0) { + localStorage.setItem('blog_section_images', JSON.stringify(sectionImages)); + } else { + localStorage.removeItem('blog_section_images'); + } + } catch (e) { + console.warn('[SectionImages] Failed to persist to localStorage via effect:', e); + } + }, [sectionImages]); + // Persist sections to blogWriterCache whenever they change useEffect(() => { const outlineIds = outline.map(s => String(s.id));