@jhits/plugin-images 0.0.7 → 0.0.9

package/src/hooks/useImagePicker.ts

@@ -1,344 +0,0 @@
-/**
- * Hook for Image Picker Logic
- */
-
-import { useState, useEffect, useRef } from 'react';
-import type { ImageMetadata } from '../types';
-
-export interface UseImagePickerOptions {
-    value?: string;
-    images: ImageMetadata[];
-}
-
-export function useImagePicker({ value, images }: UseImagePickerOptions) {
-    const [selectedImage, setSelectedImage] = useState<ImageMetadata | null>(null);
-    const [uploading, setUploading] = useState(false);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const lastResolvedValueRef = useRef<string | undefined>(undefined);
-    const isResolvingRef = useRef(false);
-    const lastImagesRef = useRef<string>('');
-
-    // Find selected image from value (can be ID or URL)
-    useEffect(() => {
-        // Create a stable reference for images array to detect actual changes
-        const imagesKey = JSON.stringify(images.map(img => ({ id: img.id, url: img.url })));
-        
-        // Prevent infinite loops by checking if we're already resolving or if value and images haven't changed
-        if (isResolvingRef.current || (lastResolvedValueRef.current === value && lastImagesRef.current === imagesKey)) {
-            return;
-        }
-        
-        lastImagesRef.current = imagesKey;
-
-        if (!value) {
-            if (selectedImage !== null) {
-                setSelectedImage(null);
-            }
-            lastResolvedValueRef.current = value;
-            return;
-        }
-
-        isResolvingRef.current = true;
-        const resolveImage = async () => {
-            // Normalize the value - extract filename if it's a URL
-            const isFullUrl = value.startsWith('http://') || value.startsWith('https://');
-            const isRelativeUrl = value.startsWith('/');
-            const isUrl = isFullUrl || isRelativeUrl;
-            
-            // Extract filename from URL if it's a URL
-            let filenameFromUrl: string | null = null;
-            let imageIdToResolve = value;
-            
-            if (isUrl) {
-                const urlParts = value.split('/');
-                filenameFromUrl = urlParts[urlParts.length - 1]?.split('?')[0] || null;
-                // If it's a full URL, try to resolve using the filename instead
-                if (isFullUrl && filenameFromUrl) {
-                    imageIdToResolve = filenameFromUrl;
-                }
-            }
-            
-            // First, try to find by ID (preferred method)
-            let found = images.find(img => img.id === value || img.id === imageIdToResolve);
-            
-            // If not found by ID, try to find by URL
-            if (!found) {
-                found = images.find(img => img.url === value);
-            }
-            
-            // If still not found, try to match by filename extracted from URL
-            if (!found && filenameFromUrl) {
-                found = images.find(img => img.id === filenameFromUrl || img.filename === filenameFromUrl);
-            }
-            
-            if (found) {
-                // Only update if the image is actually different
-                setSelectedImage(prev => {
-                    if (prev?.id === found.id && prev?.url === found.url) {
-                        return prev;
-                    }
-                    return found;
-                });
-            } else {
-                // If value is already a full URL, use it directly
-                if (isFullUrl) {
-                    const newImage = {
-                        id: value,
-                        filename: filenameFromUrl || value,
-                        url: value, // Use the full URL as-is
-                        size: 0,
-                        mimeType: 'image/jpeg',
-                        uploadedAt: new Date().toISOString(),
-                    };
-                    setSelectedImage(prev => {
-                        if (prev?.id === newImage.id && prev?.url === newImage.url) {
-                            return prev;
-                        }
-                        return newImage;
-                    });
-                    lastResolvedValueRef.current = value;
-                    isResolvingRef.current = false;
-                    return;
-                }
-                
-                // If value is a relative URL, use it directly
-                if (isRelativeUrl) {
-                    const newImage = {
-                        id: value,
-                        filename: filenameFromUrl || value,
-                        url: value, // Use the relative URL as-is
-                        size: 0,
-                        mimeType: 'image/jpeg',
-                        uploadedAt: new Date().toISOString(),
-                    };
-                    setSelectedImage(prev => {
-                        if (prev?.id === newImage.id && prev?.url === newImage.url) {
-                            return prev;
-                        }
-                        return newImage;
-                    });
-                    lastResolvedValueRef.current = value;
-                    isResolvingRef.current = false;
-                    return;
-                }
-                
-                // Check if value looks like a filename (has extension or starts with digits)
-                const isLikelyPath = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(value) || /^\d+-/.test(value);
-                
-                if (isLikelyPath) {
-                    // It's likely a filename, create image object directly
-                    const newImage = {
-                        id: value,
-                        filename: value,
-                        url: `/api/uploads/${value}`,
-                        size: 0,
-                        mimeType: 'image/jpeg',
-                        uploadedAt: new Date().toISOString(),
-                    };
-                    setSelectedImage(prev => {
-                        if (prev?.id === newImage.id && prev?.url === newImage.url) {
-                            return prev;
-                        }
-                        return newImage;
-                    });
-                    lastResolvedValueRef.current = value;
-                    isResolvingRef.current = false;
-                } else {
-                    // It might be a semantic ID, try to resolve via API
-                    // Use the extracted ID (filename) if value was a URL, otherwise use value
-                    try {
-                        const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(imageIdToResolve)}`);
-                        if (response.ok) {
-                            const data = await response.json();
-                            // Normalize the URL - ensure it's a proper URL
-                            let imageUrl: string;
-                            if (data.url) {
-                                // If API returns a URL, use it (but check if it's already a full URL)
-                                if (data.url.startsWith('http://') || data.url.startsWith('https://')) {
-                                    imageUrl = data.url;
-                                } else if (data.url.startsWith('/')) {
-                                    imageUrl = data.url;
-                                } else {
-                                    // Relative path without leading slash
-                                    imageUrl = `/api/uploads/${data.url}`;
-                                }
-                            } else if (data.filename) {
-                                // Use filename to construct URL
-                                imageUrl = `/api/uploads/${data.filename}`;
-                            } else {
-                                // Fallback: if original value was a URL, use it; otherwise construct
-                                imageUrl = isFullUrl ? value : (isRelativeUrl ? value : `/api/uploads/${value}`);
-                            }
-                            
-                            const newImage = {
-                                id: value,
-                                filename: data.filename || filenameFromUrl || value,
-                                url: imageUrl,
-                                size: 0,
-                                mimeType: 'image/jpeg',
-                                uploadedAt: new Date().toISOString(),
-                            };
-                            setSelectedImage(prev => {
-                                if (prev?.id === newImage.id && prev?.url === newImage.url) {
-                                    return prev;
-                                }
-                                return newImage;
-                            });
-                            lastResolvedValueRef.current = value;
-                            isResolvingRef.current = false;
-                        } else {
-                            // API resolution failed - check if it's a semantic ID or actual filename
-                            const isLikelyFilename = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(imageIdToResolve) || /^\d+-/.test(imageIdToResolve);
-                            
-                            if (!isLikelyFilename) {
-                                // It's a semantic ID that couldn't be resolved - clear selection
-                                // This prevents showing broken URLs like /api/uploads/blog-featured-...
-                                setSelectedImage(null);
-                                lastResolvedValueRef.current = value;
-                                isResolvingRef.current = false;
-                                return;
-                            }
-                            
-                            // It's a filename, create fallback object
-                            const isFullUrl = value.startsWith('http://') || value.startsWith('https://');
-                            const isRelativeUrl = value.startsWith('/');
-                            
-                            let imageUrl: string;
-                            if (isFullUrl) {
-                                // Already a full URL, use as-is
-                                imageUrl = value;
-                            } else if (isRelativeUrl) {
-                                // Already a relative URL starting with /, use as-is
-                                imageUrl = value;
-                            } else {
-                                // It's a filename, construct the URL
-                                imageUrl = `/api/uploads/${value}`;
-                            }
-                            
-                            const urlParts = value.split('/');
-                            const filename = urlParts[urlParts.length - 1]?.split('?')[0] || value;
-                            
-                            const newImage = {
-                                id: value,
-                                filename: filename,
-                                url: imageUrl,
-                                size: 0,
-                                mimeType: 'image/jpeg',
-                                uploadedAt: new Date().toISOString(),
-                            };
-                            setSelectedImage(prev => {
-                                if (prev?.id === newImage.id && prev?.url === newImage.url) {
-                                    return prev;
-                                }
-                                return newImage;
-                            });
-                            lastResolvedValueRef.current = value;
-                            isResolvingRef.current = false;
-                        }
-                    } catch (error) {
-                        // API call failed - check if it's a semantic ID or actual filename
-                        const isLikelyFilename = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(imageIdToResolve) || /^\d+-/.test(imageIdToResolve);
-                        
-                        if (!isLikelyFilename) {
-                            // It's a semantic ID that couldn't be resolved - clear selection
-                            // This prevents showing broken URLs like /api/uploads/blog-featured-...
-                            setSelectedImage(null);
-                            lastResolvedValueRef.current = value;
-                            isResolvingRef.current = false;
-                            return;
-                        }
-                        
-                        // It's a filename, create fallback object
-                        const isFullUrl = value.startsWith('http://') || value.startsWith('https://');
-                        const isRelativeUrl = value.startsWith('/');
-                        
-                        let imageUrl: string;
-                        if (isFullUrl) {
-                            // Already a full URL, use as-is
-                            imageUrl = value;
-                        } else if (isRelativeUrl) {
-                            // Already a relative URL starting with /, use as-is
-                            imageUrl = value;
-                        } else {
-                            // It's a filename, construct the URL
-                            imageUrl = `/api/uploads/${value}`;
-                        }
-                        
-                        const urlParts = value.split('/');
-                        const filename = urlParts[urlParts.length - 1]?.split('?')[0] || value;
-                        
-                        const newImage = {
-                            id: value,
-                            filename: filename,
-                            url: imageUrl,
-                            size: 0,
-                            mimeType: 'image/jpeg',
-                            uploadedAt: new Date().toISOString(),
-                        };
-                        setSelectedImage(prev => {
-                            if (prev?.id === newImage.id && prev?.url === newImage.url) {
-                                return prev;
-                            }
-                            return newImage;
-                        });
-                        lastResolvedValueRef.current = value;
-                        isResolvingRef.current = false;
-                    }
-                }
-            }
-        };
-
-        resolveImage().catch(() => {
-            // Error already handled in catch block
-            isResolvingRef.current = false;
-        });
-    }, [value, images]);
-
-    // Handle file upload
-    const handleFileSelect = async (e?: React.ChangeEvent<HTMLInputElement> | { target: { files: File[] | null } }) => {
-        const file = e?.target?.files?.[0];
-        if (!file) return null;
-
-        setUploading(true);
-        try {
-            const formData = new FormData();
-            formData.append('file', file);
-
-            const response = await fetch('/api/plugin-images/upload', {
-                method: 'POST',
-                body: formData,
-            });
-
-            const data = await response.json();
-            
-            if (data.success && data.image) {
-                // Select the newly uploaded image
-                setSelectedImage(data.image);
-                if (fileInputRef.current) {
-                    fileInputRef.current.value = '';
-                }
-                return data.image;
-            } else {
-                alert(data.error || 'Failed to upload image');
-                return null;
-            }
-        } catch (error) {
-            console.error('Upload error:', error);
-            alert('Failed to upload image');
-            return null;
-        } finally {
-            setUploading(false);
-            if (fileInputRef.current) {
-                fileInputRef.current.value = '';
-            }
-        }
-    };
-
-    return {
-        selectedImage,
-        setSelectedImage,
-        uploading,
-        fileInputRef,
-        handleFileSelect,
-    };
-}

package/src/index.d.ts

@@ -1,23 +0,0 @@
-/**
- * Plugin Images - Main Entry Point
- * Image management plugin for uploading, searching, and managing images
- */
-export interface PluginProps {
-    subPath: string[];
-    siteId: string;
-    locale: string;
-}
-export default function ImagesPlugin({ subPath, siteId, locale }: PluginProps): import("react/jsx-runtime").JSX.Element;
-export { ImagesPlugin as Index };
-export { ImagePicker } from './components/ImagePicker';
-export { GlobalImageEditor } from './components/GlobalImageEditor';
-export { ImagesPluginInit } from './components/ImagesPluginInit';
-export { Image } from './components/Image';
-export { BackgroundImage } from './components/BackgroundImage';
-export type { ImagePickerProps, ImageMetadata } from './types';
-export type { PluginImageProps } from './components/Image';
-export type { BackgroundImageProps } from './components/BackgroundImage';
-export { initImagesPlugin } from './init';
-export type { ImagesPluginConfig } from './init';
-export { getFallbackImageUrl, isValidImageUrl, getSafeImageUrl, constructImageUrl } from './utils/fallback';
-//# sourceMappingURL=index.d.ts.map

package/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,WAAW;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,WAAW,2CAU5E;AAGD,OAAO,EAAE,YAAY,IAAI,KAAK,EAAE,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC/D,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAGjD,OAAO,EACH,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,iBAAiB,EACpB,MAAM,kBAAkB,CAAC"}

package/src/index.js

@@ -1,28 +0,0 @@
-/**
- * Plugin Images - Main Entry Point
- * Image management plugin for uploading, searching, and managing images
- */
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ImageManagerView } from './views/ImageManager';
-export default function ImagesPlugin({ subPath, siteId, locale }) {
-    const route = subPath[0] || 'manager';
-    switch (route) {
-        case 'manager':
-            return _jsx(ImageManagerView, { siteId: siteId, locale: locale });
-        default:
-            return _jsx(ImageManagerView, { siteId: siteId, locale: locale });
-    }
-}
-// Export for use as default
-export { ImagesPlugin as Index };
-// Export components for use in other plugins
-export { ImagePicker } from './components/ImagePicker';
-export { GlobalImageEditor } from './components/GlobalImageEditor';
-export { ImagesPluginInit } from './components/ImagesPluginInit';
-export { Image } from './components/Image';
-export { BackgroundImage } from './components/BackgroundImage';
-// Export initialization utility
-export { initImagesPlugin } from './init';
-// Export utility functions
-export { getFallbackImageUrl, isValidImageUrl, getSafeImageUrl, constructImageUrl } from './utils/fallback';

package/src/index.server.ts

@@ -1,12 +0,0 @@
-import 'server-only';
-/**
- * Plugin Images - Server-Only Entry Point
- * This file exports only server-side API handlers
- * Used by the dynamic plugin router via @jhits/plugin-images/server
- * 
- * Note: This file is server-only (no 'use server' needed - that's only for Server Actions)
- */
-
-export { handleImagesApi as handleApi } from './api/router';
-export { handleImagesApi } from './api/router'; // Keep original export for backward compatibility
-

package/src/index.tsx

@@ -1,56 +0,0 @@
-/**
- * Plugin Images - Main Entry Point
- * Image management plugin for uploading, searching, and managing images
- */
-
-'use client';
-
-import React from 'react';
-import { ImageManagerView } from './views/ImageManager';
-
-export interface PluginProps {
-    subPath: string[];
-    siteId: string;
-    locale: string;
-}
-
-export default function ImagesPlugin({ subPath, siteId, locale }: PluginProps) {
-    const route = subPath[0] || 'manager';
-
-    switch (route) {
-        case 'manager':
-            return <ImageManagerView siteId={siteId} locale={locale} />;
-        
-        default:
-            return <ImageManagerView siteId={siteId} locale={locale} />;
-    }
-}
-
-// Export for use as default
-export { ImagesPlugin as Index };
-
-// Export components for use in other plugins
-export { ImagePicker } from './components/ImagePicker';
-export { GlobalImageEditor } from './components/GlobalImageEditor';
-export { ImagesPluginInit } from './components/ImagesPluginInit';
-export { Image } from './components/Image';
-export { BackgroundImage } from './components/BackgroundImage';
-export type { ImagePickerProps, ImageMetadata } from './types';
-export type { PluginImageProps } from './components/Image';
-export type { BackgroundImageProps } from './components/BackgroundImage';
-
-// Export initialization utility
-export { initImagesPlugin } from './init';
-export type { ImagesPluginConfig } from './init';
-
-// Export utility functions
-export { 
-    getFallbackImageUrl, 
-    isValidImageUrl, 
-    getSafeImageUrl,
-    constructImageUrl 
-} from './utils/fallback';
-
-// Note: API handlers are server-only and exported from ./index.ts (server entry point)
-// They are NOT exported here to prevent client/server context mixing
-

package/src/init.d.ts

@@ -1,33 +0,0 @@
-/**
- * Images Plugin Initialization Utility
- *
- * Simple function to initialize the images plugin with client configuration.
- * Call this once in your app (e.g., in root layout) to enable global image editing.
- *
- * @example
- * ```typescript
- * import { initImagesPlugin } from '@jhits/plugin-images/init';
- * import { imagesConfig } from '@/plugins/images-config';
- *
- * // Call once when your app loads
- * initImagesPlugin(imagesConfig);
- * ```
- */
-export interface ImagesPluginConfig {
-    /** Enable global image editor (default: true) */
-    enabled?: boolean;
-    /** Custom styling for the editor modal */
-    className?: string;
-    /** Custom styling for the modal overlay */
-    overlayClassName?: string;
-}
-/**
- * Initialize the images plugin with client configuration
- *
- * This function sets up the window global that the plugin reads from automatically.
- * Call this once when your app loads, before the plugin component is rendered.
- *
- * @param config - Images plugin configuration (enabled, styling, etc.)
- */
-export declare function initImagesPlugin(config?: ImagesPluginConfig): void;
-//# sourceMappingURL=init.d.ts.map

package/src/init.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["init.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,MAAM,WAAW,kBAAkB;IAC/B,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAqBlE"}

package/src/init.js

@@ -1,43 +0,0 @@
-/**
- * Images Plugin Initialization Utility
- *
- * Simple function to initialize the images plugin with client configuration.
- * Call this once in your app (e.g., in root layout) to enable global image editing.
- *
- * @example
- * ```typescript
- * import { initImagesPlugin } from '@jhits/plugin-images/init';
- * import { imagesConfig } from '@/plugins/images-config';
- *
- * // Call once when your app loads
- * initImagesPlugin(imagesConfig);
- * ```
- */
-'use client';
-/**
- * Initialize the images plugin with client configuration
- *
- * This function sets up the window global that the plugin reads from automatically.
- * Call this once when your app loads, before the plugin component is rendered.
- *
- * @param config - Images plugin configuration (enabled, styling, etc.)
- */
-export function initImagesPlugin(config) {
-    if (typeof window === 'undefined') {
-        // Server-side: no-op
-        return;
-    }
-    // Initialize the global plugin props object if it doesn't exist
-    if (!window.__JHITS_PLUGIN_PROPS__) {
-        window.__JHITS_PLUGIN_PROPS__ = {};
-    }
-    // Set images plugin configuration
-    window.__JHITS_PLUGIN_PROPS__['plugin-images'] = {
-        enabled: (config === null || config === void 0 ? void 0 : config.enabled) !== undefined ? config.enabled : true,
-        className: config === null || config === void 0 ? void 0 : config.className,
-        overlayClassName: config === null || config === void 0 ? void 0 : config.overlayClassName,
-    };
-    console.log('[ImagesPlugin] Initialized with config:', {
-        enabled: (config === null || config === void 0 ? void 0 : config.enabled) !== undefined ? config.enabled : true,
-    });
-}

package/src/init.tsx

@@ -1,58 +0,0 @@
-/**
- * Images Plugin Initialization Utility
- * 
- * Simple function to initialize the images plugin with client configuration.
- * Call this once in your app (e.g., in root layout) to enable global image editing.
- * 
- * @example
- * ```typescript
- * import { initImagesPlugin } from '@jhits/plugin-images/init';
- * import { imagesConfig } from '@/plugins/images-config';
- * 
- * // Call once when your app loads
- * initImagesPlugin(imagesConfig);
- * ```
- */
-
-'use client';
-
-export interface ImagesPluginConfig {
-    /** Enable global image editor (default: true) */
-    enabled?: boolean;
-    /** Custom styling for the editor modal */
-    className?: string;
-    /** Custom styling for the modal overlay */
-    overlayClassName?: string;
-}
-
-/**
- * Initialize the images plugin with client configuration
- * 
- * This function sets up the window global that the plugin reads from automatically.
- * Call this once when your app loads, before the plugin component is rendered.
- * 
- * @param config - Images plugin configuration (enabled, styling, etc.)
- */
-export function initImagesPlugin(config?: ImagesPluginConfig): void {
-    if (typeof window === 'undefined') {
-        // Server-side: no-op
-        return;
-    }
-
-    // Initialize the global plugin props object if it doesn't exist
-    if (!(window as any).__JHITS_PLUGIN_PROPS__) {
-        (window as any).__JHITS_PLUGIN_PROPS__ = {};
-    }
-
-    // Set images plugin configuration
-    (window as any).__JHITS_PLUGIN_PROPS__['plugin-images'] = {
-        enabled: config?.enabled !== undefined ? config.enabled : true,
-        className: config?.className,
-        overlayClassName: config?.overlayClassName,
-    };
-
-    console.log('[ImagesPlugin] Initialized with config:', {
-        enabled: config?.enabled !== undefined ? config.enabled : true,
-    });
-}
-