@jhits/plugin-images 0.0.13 → 0.0.14

package/src/api/usage/route.ts

@@ -0,0 +1,294 @@
+/**
+ * Image Usage API Handler
+ * GET /api/plugin-images/usage - Returns usage information for all images
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { readdir, stat, readFile } from 'fs/promises';
+import path from 'path';
+
+const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+const mappingsPath = path.join(process.cwd(), 'data', 'image-mappings.json');
+
+interface ImageUsage {
+    imageId: string;
+    filename: string;
+    usage: Array<{
+        plugin: string;
+        type: string;
+        title: string;
+        id: string;
+        url?: string;
+    }>;
+}
+
+async function getMappings(): Promise<Record<string, any>> {
+    try {
+        const content = await readFile(mappingsPath, 'utf-8');
+        return JSON.parse(content);
+    } catch {
+        return {};
+    }
+}
+
+async function queryMongoDatabase(): Promise<{
+    blogs: Array<{ _id: string; slug?: string; title?: string; image?: { id?: string; src?: string }; contentBlocks?: any[] }>;
+    newsletters: Array<{ _id: string; slug?: string; title?: string; content?: any[] }>;
+    users: Array<{ _id: string; name?: string; email?: string; image?: string }>;
+}> {
+    try {
+        const { MongoClient } = await import('mongodb');
+        const uri = process.env.DATABASE_URL || process.env.MONGODB_URI;
+        
+        if (!uri) {
+            return { blogs: [], newsletters: [], users: [] };
+        }
+
+        const client = new MongoClient(uri);
+        await client.connect();
+        
+        const db = client.db();
+        
+        const blogsRaw = await db.collection('blogs')
+            .find({}, { projection: { slug: 1, title: 1, image: 1, contentBlocks: 1 } })
+            .toArray();
+        
+        const blogs = blogsRaw.map(doc => ({
+            _id: doc._id?.toString() || '',
+            slug: doc.slug || '',
+            title: doc.title || '',
+            image: doc.image || {},
+            contentBlocks: doc.contentBlocks || [],
+        }));
+        
+        const newslettersRaw = await db.collection('newsletters')
+            .find({}, { projection: { slug: 1, title: 1, content: 1 } })
+            .toArray();
+        
+        const newsletters = newslettersRaw.map(doc => ({
+            _id: doc._id?.toString() || '',
+            slug: doc.slug || '',
+            title: doc.title || '',
+            content: doc.content || [],
+        }));
+        
+        // Get users with avatars
+        const usersRaw = await db.collection('users')
+            .find({ image: { $exists: true, $ne: null } })
+            .project({ name: 1, email: 1, image: 1 })
+            .toArray();
+        
+        const users = usersRaw.map(doc => ({
+            _id: doc._id?.toString() || '',
+            name: doc.name || '',
+            email: doc.email || '',
+            image: doc.image || '',
+        }));
+        
+        await client.close();
+        
+        return { blogs, newsletters, users };
+    } catch (error) {
+        console.error('Error querying MongoDB:', error);
+        return { blogs: [], newsletters: [], users: [] };
+    }
+}
+
+function extractImageFilenamesFromContentBlocks(blocks: any[]): string[] {
+    const imageFilenames: Set<string> = new Set();
+    
+    function traverse(obj: any) {
+        if (!obj || typeof obj !== 'object') return;
+        
+        if (Array.isArray(obj)) {
+            obj.forEach(item => traverse(item));
+            return;
+        }
+        
+        // Check for image object with src or id
+        if (obj.src) {
+            const filename = obj.src;
+            if (filename && !filename.startsWith('http') && !filename.startsWith('data:')) {
+                imageFilenames.add(filename);
+            }
+        }
+        // Check for imageId (used by BotanicsAndYou Image block)
+        if (obj.imageId && typeof obj.imageId === 'string' && !obj.imageId.startsWith('http')) {
+            imageFilenames.add(obj.imageId);
+        }
+        if (obj.id && typeof obj.id === 'string' && !obj.id.startsWith('http') && !obj.id.startsWith('block-')) {
+            // This might be an image ID - but be careful not to catch block IDs
+            const ext = path.extname(obj.id);
+            if (ext && ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.svg'].includes(ext.toLowerCase())) {
+                imageFilenames.add(obj.id);
+            }
+        }
+        
+        // Check children
+        if (obj.children && Array.isArray(obj.children)) {
+            obj.children.forEach((child: any) => traverse(child));
+        }
+        // Check data
+        if (obj.data && typeof obj.data === 'object') {
+            traverse(obj.data);
+        }
+    }
+    
+    blocks.forEach(block => traverse(block));
+    return Array.from(imageFilenames);
+}
+
+function extractImageIdsFromContent(content: any[]): string[] {
+    const imageIds: Set<string> = new Set();
+    
+    if (!content || !Array.isArray(content)) {
+        return [];
+    }
+    
+    for (const block of content) {
+        if (block.type === 'image' && block.data?.imageId) {
+            imageIds.add(block.data.imageId);
+        }
+    }
+    
+    return Array.from(imageIds);
+}
+
+export async function GET(request: NextRequest) {
+    try {
+        const { searchParams } = new URL(request.url);
+        const filename = searchParams.get('filename');
+
+        let files: string[] = [];
+        try {
+            files = await readdir(uploadsDir);
+        } catch {
+            return NextResponse.json({ images: [] });
+        }
+
+        const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif'];
+        const imageFiles = files.filter(file => {
+            const ext = path.extname(file).toLowerCase();
+            return imageExtensions.includes(ext);
+        });
+
+        const mappings = await getMappings();
+        
+        const semanticIdToFilename: Record<string, string> = {};
+        Object.entries(mappings).forEach(([semanticId, mapping]) => {
+            const mappedFilename = typeof mapping === 'string' ? mapping : mapping.filename;
+            if (mappedFilename) {
+                semanticIdToFilename[semanticId] = mappedFilename;
+            }
+        });
+
+        const { blogs, newsletters, users } = await queryMongoDatabase();
+
+        const images: ImageUsage[] = imageFiles.map((file) => {
+            const usage: ImageUsage['usage'] = [];
+
+            blogs.forEach((blog) => {
+                const imageFilenamesInBlog = new Set<string>();
+                
+                // 1. Featured image at root level (blog.image.id or blog.image.src)
+                const featuredImage = blog.image;
+                if (featuredImage) {
+                    const featuredId = featuredImage.id || featuredImage.src;
+                    if (featuredId) {
+                        const resolved = semanticIdToFilename[featuredId] || featuredId;
+                        imageFilenamesInBlog.add(resolved);
+                        
+                        // Check if this file matches
+                        if (resolved === file || resolved === path.basename(file, path.extname(file))) {
+                            usage.push({
+                                plugin: 'blog',
+                                type: 'featured-image',
+                                title: blog.title || blog.slug || 'Untitled',
+                                id: blog.slug || blog._id,
+                                url: `/dashboard/blog/editor/${blog.slug || blog._id}`,
+                            });
+                        }
+                    }
+                }
+                
+                // 2. Images in contentBlocks
+                const contentBlockImages = extractImageFilenamesFromContentBlocks(blog.contentBlocks || []);
+                contentBlockImages.forEach(imgId => {
+                    const resolved = semanticIdToFilename[imgId] || imgId;
+                    imageFilenamesInBlog.add(resolved);
+                    
+                    if (resolved === file || resolved === path.basename(file, path.extname(file))) {
+                        // Avoid duplicate entries for the same blog
+                        const existing = usage.find(u => u.id === (blog.slug || blog._id) && u.plugin === 'blog');
+                        if (!existing) {
+                            usage.push({
+                                plugin: 'blog',
+                                type: 'content-image',
+                                title: blog.title || blog.slug || 'Untitled',
+                                id: blog.slug || blog._id,
+                                url: `/dashboard/blog/editor/${blog.slug || blog._id}`,
+                            });
+                        }
+                    }
+                });
+            });
+
+            newsletters.forEach((newsletter) => {
+                const imageIds = extractImageIdsFromContent(newsletter.content || []);
+                imageIds.forEach(imageId => {
+                    const resolvedFilename = semanticIdToFilename[imageId] || imageId;
+                    if (resolvedFilename === file || resolvedFilename === path.basename(file, path.extname(file))) {
+                        const existing = usage.find(u => u.id === (newsletter.slug || newsletter._id) && u.plugin === 'newsletter');
+                        if (!existing) {
+                            usage.push({
+                                plugin: 'newsletter',
+                                type: 'image-block',
+                                title: newsletter.title || newsletter.slug || 'Untitled',
+                                id: newsletter.slug || newsletter._id,
+                                url: `/dashboard/newsletter/editor/${newsletter.slug || newsletter._id}`,
+                            });
+                        }
+                    }
+                });
+            });
+
+            // Check user avatars
+            users.forEach((user) => {
+                if (user.image && user.image.includes('/api/uploads/')) {
+                    const avatarFilename = user.image.split('/api/uploads/')[1];
+                    if (avatarFilename && (avatarFilename === file || avatarFilename === path.basename(file, path.extname(file)))) {
+                        const existing = usage.find(u => u.id === user._id && u.plugin === 'users');
+                        if (!existing) {
+                            usage.push({
+                                plugin: 'users',
+                                type: 'avatar',
+                                title: user.name || user.email || 'Unknown User',
+                                id: user._id,
+                                url: `/dashboard/users`,
+                            });
+                        }
+                    }
+                }
+            });
+
+            return {
+                imageId: file,
+                filename: file,
+                usage,
+            };
+        });
+
+        if (filename) {
+            const filtered = images.filter(img => img.filename === filename || img.imageId === filename);
+            return NextResponse.json({ images: filtered });
+        }
+
+        return NextResponse.json({ images });
+    } catch (error) {
+        console.error('Get image usage error:', error);
+        return NextResponse.json(
+            { error: 'Failed to get image usage' },
+            { status: 500 }
+        );
+    }
+}

package/src/components/BackgroundImage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Image } from './Image';
+import { Image, checkAuthOnce } from './Image';
 import { Edit2 } from 'lucide-react';
 
 export interface BackgroundImageProps {
@@ -25,20 +25,10 @@ export function BackgroundImage({
     const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
-        const checkUser = async () => {
-            try {
-                const res = await fetch('/api/me');
-                const data = await res.json();
-                if (data.loggedIn && ['admin', 'dev'].includes(data.user?.role)) {
-                    setIsAdmin(true);
-                }
-            } catch (error) {
-                console.error('Auth error:', error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        checkUser();
+        checkAuthOnce().then(isAuth => {
+            setIsAdmin(isAuth);
+            setIsLoading(false);
+        });
     }, []);
 
     const handleEditClick = (e: React.MouseEvent) => {

package/src/components/GlobalImageEditor.tsx

@@ -17,6 +17,7 @@ import { parseImageData } from './GlobalImageEditor/imageDetection';
 import { setupImageHandlers } from './GlobalImageEditor/imageSetup';
 import { saveTransformToAPI, flushPendingSave, getFilename, normalizePosition } from './GlobalImageEditor/saveLogic';
 import { handleImageChange, handleBrightnessChange, handleBlurChange } from './GlobalImageEditor/eventHandlers';
+import { checkAuthOnce } from './Image';
 
 export function GlobalImageEditor() {
     // Configuration
@@ -36,10 +37,14 @@ export function GlobalImageEditor() {
     useEffect(() => {
         const checkUser = async () => {
             try {
-                const res = await fetch('/api/me');
-                const data = await res.json();
-                if (data.loggedIn && (data.user?.role === 'admin' || data.user?.role === 'dev')) {
-                    setUserRole(data.user.role);
+                const isAuth = await checkAuthOnce();
+                if (isAuth) {
+                    // Need to fetch again to get user role since checkAuthOnce only returns boolean
+                    const res = await fetch('/api/me');
+                    const data = await res.json();
+                    if (data.user?.role === 'admin' || data.user?.role === 'dev') {
+                        setUserRole(data.user.role);
+                    }
                 }
             } catch (error) {
                 console.error('Failed to check user role:', error);

package/src/components/Image.tsx

@@ -6,6 +6,28 @@ import { Edit2, Loader2 } from 'lucide-react';
 import { getImageTransform, getImageFilter } from '../utils/transforms';
 import { getFallbackImageUrl } from '../utils/fallback';
 
+export let authCache: boolean | null = null;
+let authFetching: Promise<boolean> | null = null;
+
+export async function checkAuthOnce(): Promise<boolean> {
+    if (authCache !== null) return authCache;
+    if (authFetching) return authFetching;
+    
+    authFetching = fetch('/api/me')
+        .then(res => res.json())
+        .then(data => {
+            const isAuth = data.loggedIn && ['admin', 'dev'].includes(data.user?.role);
+            authCache = isAuth;
+            return isAuth;
+        })
+        .catch(() => {
+            authCache = false;
+            return false;
+        });
+    
+    return authFetching;
+}
+
 export interface PluginImageProps {
     id: string;
     alt: string;
@@ -104,17 +126,10 @@ export function Image({
         }
     }, []);
 
-    // 4. Auth Check (Single mount only)
+    // 4. Auth Check (Cached - only fetches once)
     useEffect(() => {
         if (!editable) return;
-        fetch('/api/me')
-            .then(res => res.json())
-            .then(data => {
-                if (data.loggedIn && ['admin', 'dev'].includes(data.user?.role)) {
-                    setIsAuthenticated(true);
-                }
-            })
-            .catch(() => setIsAuthenticated(false));
+        checkAuthOnce().then(setIsAuthenticated);
     }, [editable]);
 
     // 5. Stable Event Listener (Prevents closure staleness)