@jhits/plugin-images 0.0.4 → 0.0.6

package/src/components/GlobalImageEditor.tsx

@@ -7,36 +7,31 @@
 
 'use client';
 
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { X, Edit2 } from 'lucide-react';
 import { ImagePicker } from './ImagePicker';
 import type { ImageMetadata } from '../types';
+import type { SelectedImage, PendingTransform } from './GlobalImageEditor/types';
+import { getPluginConfig } from './GlobalImageEditor/config';
+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';
 
 export function GlobalImageEditor() {
-    // Read config from window global (set by initImagesPlugin)
-    const config = useMemo(() => {
-        if (typeof window === 'undefined') {
-            return { enabled: false };
-        }
-        
-        const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__?.['plugin-images'];
-        return {
-            enabled: pluginProps?.enabled !== undefined ? pluginProps.enabled : true,
-            className: pluginProps?.className,
-            overlayClassName: pluginProps?.overlayClassName,
-        };
-    }, []);
-    const [selectedImage, setSelectedImage] = useState<{
-        element: HTMLElement;
-        originalSrc: string;
-        brightness: number;
-        blur: number;
-        isBackground: boolean;
-    } | null>(null);
+    // Configuration
+    const config = useMemo(() => getPluginConfig(), []);
+    
+    // State
+    const [selectedImage, setSelectedImage] = useState<SelectedImage | null>(null);
     const [isOpen, setIsOpen] = useState(false);
     const [userRole, setUserRole] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(true);
 
+    // Refs for save debouncing
+    const saveTransformTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const pendingTransformRef = useRef<PendingTransform | null>(null);
+
     // Check if user is admin/dev
     useEffect(() => {
         const checkUser = async () => {
@@ -63,13 +58,11 @@ export function GlobalImageEditor() {
             const { id, currentBrightness, currentBlur } = e.detail || {};
             if (!id) return;
 
-            console.log('[GlobalImageEditor] open-image-editor event received for id:', id);
 
             // Find the element by data-image-id or data-background-image-id
             let element = document.querySelector(`[data-image-id="${id}"], [data-background-image-id="${id}"]`) as HTMLElement;
             
             if (!element) {
-                // Try finding by background image component
                 element = document.querySelector(`[data-background-image-component="true"][data-background-image-id="${id}"]`) as HTMLElement;
             }
 
@@ -78,82 +71,27 @@ export function GlobalImageEditor() {
                 return;
             }
 
-            // Determine if it's a background image
-            const isBackground = element.hasAttribute('data-background-image-component') || 
-                                element.hasAttribute('data-background-image-id');
-
-            // Get current image source - handle Next.js Image wrapper
-            let currentSrc = '';
-            let actualImgElement: HTMLImageElement | null = null;
-
-            if (isBackground) {
-                // For background images, look for nested Image component
-                const imgWrapper = element.querySelector('[data-image-id]');
-                if (imgWrapper) {
-                    actualImgElement = imgWrapper.querySelector('img') || null;
-                } else {
-                    // Fallback: look for any img inside
-                    actualImgElement = element.querySelector('img');
-                }
-                
-                if (actualImgElement) {
-                    currentSrc = actualImgElement.src;
-                } else {
-                    // Try computed style as last resort
-                    const bgImage = window.getComputedStyle(element).backgroundImage;
-                    const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-                    if (urlMatch && urlMatch[1]) {
-                        currentSrc = urlMatch[1];
-                    }
-                }
-            } else {
-                // For regular images, find the actual img element (Next.js wraps it)
-                if (element.tagName === 'IMG') {
-                    actualImgElement = element as HTMLImageElement;
-                    currentSrc = actualImgElement.src;
-                } else {
-                    // Next.js Image wraps img in span/picture
-                    actualImgElement = element.querySelector('img');
-                    if (actualImgElement) {
-                        currentSrc = actualImgElement.src;
-                    }
-                }
-            }
-
-            if (!currentSrc) {
-                console.error('[GlobalImageEditor] Could not determine image source for id:', id);
-                return;
-            }
-
             // Extract semantic ID
             const semanticId = element.getAttribute('data-image-id') || 
                              element.getAttribute('data-background-image-id') || 
                              id;
 
-            // Get current brightness and blur from the wrapper element (where filter is applied)
-            const filterStyle = element.style.filter || window.getComputedStyle(element).filter || '';
-            const brightness = currentBrightness ?? 
-                (parseInt(filterStyle.match(/brightness\((\d+)%\)/)?.[1] || '100'));
-            const blur = currentBlur ?? 
-                (parseInt(filterStyle.match(/blur\((\d+)px\)/)?.[1] || '0'));
-
-            console.log('[GlobalImageEditor] Opening editor for:', { id, semanticId, currentSrc, brightness, blur, isBackground });
-
-            setSelectedImage({
-                element,
-                originalSrc: currentSrc,
-                brightness,
-                blur,
-                isBackground,
-            });
+            // Parse image data
+            const imageData = parseImageData(element, semanticId, currentBrightness, currentBlur);
+            
+            if (!imageData) {
+                console.error('[GlobalImageEditor] Failed to parse image data');
+                return;
+            }
 
             // Store semantic ID on element if not already set
-            if (isBackground && !element.hasAttribute('data-background-image-id')) {
+            if (imageData.isBackground && !element.hasAttribute('data-background-image-id')) {
                 element.setAttribute('data-background-image-id', semanticId);
-            } else if (!isBackground && !element.hasAttribute('data-image-id')) {
+            } else if (!imageData.isBackground && !element.hasAttribute('data-image-id')) {
                 element.setAttribute('data-image-id', semanticId);
             }
 
+            setSelectedImage(imageData);
             setIsOpen(true);
         };
 
@@ -167,561 +105,128 @@ export function GlobalImageEditor() {
     // Add click handlers to all images
     useEffect(() => {
         if (isLoading || !userRole) {
-            console.log('[GlobalImageEditor] Skipping image handlers - isLoading:', isLoading, 'userRole:', userRole);
             return;
         }
 
-        console.log('[GlobalImageEditor] Setting up image handlers for role:', userRole);
-        
-        // Declare cleanupFunctions outside setupImages so it's accessible in the cleanup function
-        const cleanupFunctions: Array<() => void> = [];
         
-        // Wait a bit for images to load and DOM to be ready
-        const setupImages = () => {
-        const handleImageClick = (e: MouseEvent) => {
-            const target = e.target as HTMLElement;
-            
-            // Only handle clicks on images that use the plugin components
-            // Check if it's an img element with data-image-id (from plugin Image component)
-            let img = target.closest('img[data-image-id]') as HTMLImageElement | null;
-            let isBackground = false;
-            let element: HTMLElement | null = null;
-            let currentSrc = '';
-            
-            if (img) {
-                // This is a plugin Image component
-                element = img;
-                currentSrc = img.src;
-            } else {
-                // Check if it's an element with background-image
-                // First check for BackgroundImage component
-                let bgElement = target.closest('[data-background-image-component]') as HTMLElement | null;
-                
-                if (bgElement) {
-                    // This is a BackgroundImage component
-                    element = bgElement;
-                    isBackground = true;
-                    
-                    // Try to get image source from nested Image component first
-                    const imgInside = bgElement.querySelector('img[data-image-id]') as HTMLImageElement | null;
-                    if (imgInside) {
-                        currentSrc = imgInside.src;
-                    } else {
-                        // Fallback to background-image CSS
-                        const bgImage = window.getComputedStyle(bgElement).backgroundImage;
-                        const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-                        if (urlMatch && urlMatch[1]) {
-                            currentSrc = urlMatch[1];
-                        }
-                    }
-                }
-            }
-            
-            if (!element || !currentSrc) return;
-            
-            // Don't handle images in modals or the editor itself
-            if (element.closest('[data-image-editor]') || element.closest('[role="dialog"]')) {
-                return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            // Extract semantic ID from data attribute
-            let semanticId = element.getAttribute('data-image-id') || element.getAttribute('data-background-image-id');
-            
-            // If not found, try to extract from the src URL
-            if (!semanticId && currentSrc.includes('/api/uploads/')) {
-                const urlPart = currentSrc.split('/api/uploads/')[1]?.split('?')[0];
-                // If it looks like a semantic ID (no extension or timestamp), use it
-                if (urlPart && !/^\d+-/.test(urlPart) && !/\.(jpg|jpeg|png|webp|gif|svg)$/i.test(urlPart)) {
-                    semanticId = decodeURIComponent(urlPart);
-                }
-            }
-            
-            // If still not found, generate one
-            if (!semanticId) {
-                semanticId = element.closest('[data-image-id]')?.getAttribute('data-image-id') || 
-                            `image-${Date.now()}`;
-            }
-            
-            // Check for existing filter or data attributes
-            const filterStyle = element.style.filter || window.getComputedStyle(element).filter || '';
-            const dataBrightness = element.getAttribute('data-brightness');
-            const dataBlur = element.getAttribute('data-blur');
-            const currentBrightness = dataBrightness 
-                ? parseInt(dataBrightness) 
-                : parseInt(filterStyle.match(/brightness\((\d+)%\)/)?.[1] || '100');
-            const currentBlur = dataBlur 
-                ? parseInt(dataBlur) 
-                : parseInt(filterStyle.match(/blur\((\d+)px\)/)?.[1] || '0');
-
-            setSelectedImage({
-                element,
-                originalSrc: currentSrc,
-                brightness: currentBrightness,
-                blur: currentBlur,
-                isBackground,
-            });
-            
-            // Store semantic ID on element for later use
-            if (isBackground) {
-                element.setAttribute('data-background-image-id', semanticId);
-            } else {
-                element.setAttribute('data-image-id', semanticId);
-            }
+        const cleanup = setupImageHandlers((imageData) => {
+            setSelectedImage(imageData);
             setIsOpen(true);
-        };
-
-        // Add click listeners and hover effects to all images
-        // Only select images that use the plugin components (have data-image-id or are inside BackgroundImage)
-        const images = document.querySelectorAll('img[data-image-id]:not([data-no-edit])') as NodeListOf<HTMLImageElement>;
-        
-        // Find elements with BackgroundImage components only
-        // Only BackgroundImage components should be editable, not all elements with background-image
-        const bgElements: HTMLElement[] = [];
-        const backgroundImageComponents = document.querySelectorAll('[data-background-image-component]');
-        backgroundImageComponents.forEach(el => {
-            bgElements.push(el as HTMLElement);
-        });
-        
-        console.log('[GlobalImageEditor] Found', images.length, 'images and', bgElements.length, 'background images to make editable');
-        
-        images.forEach((img, index) => {
-            console.log(`[GlobalImageEditor] Setting up image ${index + 1}:`, img.src);
-            // Store original position for cleanup
-            const originalPosition = img.style.position;
-            
-            img.style.cursor = 'pointer';
-            img.setAttribute('data-editable-image', 'true');
-            img.addEventListener('click', handleImageClick as EventListener);
-            
-            // Find the best container for the indicator
-            // Next.js Image wraps in span, so we need to find the right parent
-            let indicatorContainer: HTMLElement = img;
-            let parent = img.parentElement;
-            
-            // Check if parent is a span (Next.js Image wrapper)
-            if (parent && (parent.tagName === 'SPAN' || parent.tagName === 'DIV')) {
-                const parentStyle = window.getComputedStyle(parent);
-                // Use parent if it has relative/absolute positioning or is a block element
-                if (parentStyle.position !== 'static' || 
-                    (parentStyle.display !== 'inline' && parentStyle.display !== 'inline-block')) {
-                    indicatorContainer = parent as HTMLElement;
-                }
-            }
-            
-            // Ensure container has relative positioning
-            const containerStyle = window.getComputedStyle(indicatorContainer);
-            if (containerStyle.position === 'static') {
-                indicatorContainer.style.position = 'relative';
-            }
-            
-            // Get actual dimensions
-            const rect = indicatorContainer.getBoundingClientRect();
-            
-            console.log(`[GlobalImageEditor] Using container for image ${index + 1}:`, indicatorContainer.tagName, `(${rect.width}x${rect.height})`);
-            
-            const indicator = document.createElement('div');
-            indicator.className = 'image-edit-indicator';
-            indicator.setAttribute('data-image-index', index.toString());
-            indicator.style.cssText = `
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: rgba(0, 0, 0, 0.4);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                opacity: 0;
-                transition: opacity 0.2s ease;
-                pointer-events: none;
-                z-index: 10000;
-                border-radius: inherit;
-                box-sizing: border-box;
-            `;
-            
-            const label = document.createElement('div');
-            label.style.cssText = `
-                background: rgba(0, 0, 0, 0.9);
-                color: white;
-                padding: 8px 16px;
-                border-radius: 8px;
-                font-size: 12px;
-                font-weight: bold;
-                text-transform: uppercase;
-                letter-spacing: 0.5px;
-                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-            `;
-            label.textContent = 'Click to Edit';
-            indicator.appendChild(label);
-            
-            indicatorContainer.appendChild(indicator);
-            console.log(`[GlobalImageEditor] Added hover indicator to image ${index + 1}, container:`, indicatorContainer.tagName);
-            
-            const addHoverEffect = () => {
-                console.log(`[GlobalImageEditor] Hover enter on image ${index + 1}`);
-                indicator.style.opacity = '1';
-            };
-            
-            const removeHoverEffect = () => {
-                console.log(`[GlobalImageEditor] Hover leave on image ${index + 1}`);
-                indicator.style.opacity = '0';
-            };
-            
-            // Add hover listeners to both image and container
-            img.addEventListener('mouseenter', addHoverEffect);
-            img.addEventListener('mouseleave', removeHoverEffect);
-            if (indicatorContainer !== img) {
-                indicatorContainer.addEventListener('mouseenter', addHoverEffect);
-                indicatorContainer.addEventListener('mouseleave', removeHoverEffect);
-            }
-            
-            cleanupFunctions.push(() => {
-                img.removeEventListener('click', handleImageClick as EventListener);
-                img.removeEventListener('mouseenter', addHoverEffect);
-                img.removeEventListener('mouseleave', removeHoverEffect);
-                if (indicatorContainer !== img) {
-                    indicatorContainer.removeEventListener('mouseenter', addHoverEffect);
-                    indicatorContainer.removeEventListener('mouseleave', removeHoverEffect);
-                    if (indicatorContainer.style.position === 'relative') {
-                        indicatorContainer.style.position = '';
-                    }
-                }
-                img.removeAttribute('data-editable-image');
-                img.style.cursor = '';
-                img.style.position = originalPosition;
-                indicator.remove();
-            });
-        });
-        
-        // Process background images - show a button instead of hover overlay
-        bgElements.forEach((bgEl, index) => {
-            // Skip BackgroundImage components - they already have their own edit button
-            if (bgEl.hasAttribute('data-background-image-component')) {
-                console.log(`[GlobalImageEditor] Skipping BackgroundImage component ${index + 1} - it has its own edit button`);
-                return;
-            }
-            const originalPosition = bgEl.style.position;
-            if (!bgEl.style.position || bgEl.style.position === 'static') {
-                bgEl.style.position = 'relative';
-            }
-            
-            bgEl.setAttribute('data-editable-background', 'true');
-            bgEl.setAttribute('data-background-image', 'true');
-            
-            // Create a button indicator instead of hover overlay
-            const buttonContainer = document.createElement('div');
-            buttonContainer.className = 'background-edit-button-container';
-            buttonContainer.setAttribute('data-image-index', `bg-${index}`);
-            buttonContainer.style.cssText = `
-                position: absolute;
-                top: 12px;
-                right: 12px;
-                z-index: 10000;
-                pointer-events: auto;
-            `;
-            
-            const editButton = document.createElement('button');
-            editButton.className = 'background-edit-button';
-            editButton.setAttribute('type', 'button');
-            editButton.style.cssText = `
-                background: rgba(0, 0, 0, 0.8);
-                color: white;
-                border: 2px solid rgba(255, 255, 255, 0.3);
-                padding: 10px 20px;
-                border-radius: 8px;
-                font-size: 12px;
-                font-weight: bold;
-                text-transform: uppercase;
-                letter-spacing: 0.5px;
-                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-                cursor: pointer;
-                transition: all 0.2s ease;
-                display: flex;
-                align-items: center;
-                gap: 8px;
-            `;
-            editButton.innerHTML = `
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-                </svg>
-                Edit Background
-            `;
-            
-            // Add hover effect to button
-            editButton.addEventListener('mouseenter', () => {
-                editButton.style.background = 'rgba(0, 0, 0, 0.95)';
-                editButton.style.borderColor = 'rgba(255, 255, 255, 0.5)';
-                editButton.style.transform = 'translateY(-2px)';
-                editButton.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.5)';
-            });
-            
-            editButton.addEventListener('mouseleave', () => {
-                editButton.style.background = 'rgba(0, 0, 0, 0.8)';
-                editButton.style.borderColor = 'rgba(255, 255, 255, 0.3)';
-                editButton.style.transform = 'translateY(0)';
-                editButton.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
-            });
-            
-            // Handle button click
-            editButton.addEventListener('click', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleImageClick(e as any);
-            });
-            
-            buttonContainer.appendChild(editButton);
-            bgEl.appendChild(buttonContainer);
-            
-            console.log(`[GlobalImageEditor] Added edit button to background image ${index + 1}`);
-            
-            cleanupFunctions.push(() => {
-                bgEl.removeAttribute('data-editable-background');
-                bgEl.removeAttribute('data-background-image');
-                bgEl.style.position = originalPosition;
-                buttonContainer.remove();
-            });
         });
 
-        }; // End of setupImages function
-        
         // Setup immediately and also after a short delay to catch dynamically loaded images
-        setupImages();
-        const timeoutId = setTimeout(setupImages, 500);
+        const timeoutId = setTimeout(() => {
+            const cleanup2 = setupImageHandlers((imageData) => {
+                setSelectedImage(imageData);
+                setIsOpen(true);
+            });
+            // Note: This creates a new cleanup, but the first one will handle the initial setup
+        }, 500);
         
         return () => {
             clearTimeout(timeoutId);
-            cleanupFunctions.forEach(cleanup => cleanup());
+            cleanup();
         };
     }, [isLoading, userRole]);
 
-    // Apply image changes
-    const handleImageChange = async (image: ImageMetadata | null) => {
+    // Save image transform (scale/position) to API with debouncing
+    const saveImageTransformHandler = useCallback(async (
+        scale: number,
+        positionX: number,
+        positionY: number,
+        immediate: boolean = false,
+        brightnessOverride?: number,
+        blurOverride?: number
+    ) => {
         if (!selectedImage) return;
 
         const { element } = selectedImage;
+        const semanticId = element.getAttribute('data-image-id') || 
+                         element.getAttribute('data-background-image-id');
         
-        if (image) {
-            // Get the semantic ID that was stored when the image was clicked
-            // Check both data-image-id and data-background-image-id
-            const semanticId = element.getAttribute('data-image-id') || 
-                             element.getAttribute('data-background-image-id');
-            
-            if (!semanticId) {
-                console.error('[GlobalImageEditor] No semantic ID found for image', {
-                    hasDataImageId: element.hasAttribute('data-image-id'),
-                    hasDataBackgroundImageId: element.hasAttribute('data-background-image-id'),
-                    element: element,
-                });
-                return;
-            }
-            
-            // Extract filename from image URL or use image.id
-            const filename = image.url.split('/').pop()?.split('?')[0] || image.id;
-            
-            // Save the mapping between semantic ID and filename, including effects
-            try {
-                const response = await fetch('/api/plugin-images/resolve', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ 
-                        id: semanticId, 
-                        filename,
-                        brightness: selectedImage.brightness,
-                        blur: selectedImage.blur,
-                    }),
-                });
-                
-                if (response.ok) {
-                    console.log(`[GlobalImageEditor] Saved mapping: ${semanticId} -> ${filename} (brightness: ${selectedImage.brightness}%, blur: ${selectedImage.blur}px)`);
-                } else {
-                    console.error('[GlobalImageEditor] Failed to save mapping:', await response.text());
-                }
-            } catch (error) {
-                console.error('Failed to save image mapping:', error);
+        if (!semanticId) return;
+
+        const filename = await getFilename(semanticId, selectedImage);
+        if (!filename) return;
+
+        // Store pending transform
+        pendingTransformRef.current = { 
+            scale, 
+            positionX, 
+            positionY,
+            semanticId,
+            filename
+        };
+
+        // Clear existing timeout
+        if (saveTransformTimeoutRef.current) {
+            clearTimeout(saveTransformTimeoutRef.current);
+            saveTransformTimeoutRef.current = null;
+        }
+
+        // If immediate save is requested (e.g., when "Done" is clicked), save right away
+        if (immediate) {
+            const normalizedPositionX = normalizePosition(positionX);
+            const normalizedPositionY = normalizePosition(positionY);
+            
+            // Use override values if provided, otherwise use selectedImage values
+            // IMPORTANT: Overrides contain the latest values from the editor
+            const finalBrightness = brightnessOverride !== undefined ? brightnessOverride : (selectedImage?.brightness ?? 100);
+            const finalBlur = blurOverride !== undefined ? blurOverride : (selectedImage?.blur ?? 0);
+
+            await saveTransformToAPI(
+                semanticId,
+                filename,
+                scale,
+                normalizedPositionX,
+                normalizedPositionY,
+                finalBrightness,
+                finalBlur
+            );
+            pendingTransformRef.current = null;
+            return;
+        }
+
+        // Debounce: save after 300ms of no changes
+        saveTransformTimeoutRef.current = setTimeout(async () => {
+            const pending = pendingTransformRef.current;
+            if (pending && selectedImage) {
+                await flushPendingSave(pending, selectedImage);
             }
-            
-            // Update image src immediately - handle background images differently
-            if (selectedImage.isBackground) {
-                // For background images, update the nested Image component
-                const imgWrapper = element.querySelector('[data-image-id]');
-                if (imgWrapper) {
-                    // Find the actual img element inside the wrapper
-                    const img = imgWrapper.querySelector('img');
-                    if (img) {
-                        img.src = image.url;
-                        img.setAttribute('data-edited-src', image.url);
-                    }
-                } else {
-                    // Fallback: update background-image style if no nested Image component
-                    const bgImage = window.getComputedStyle(element).backgroundImage;
-                    if (bgImage && bgImage !== 'none') {
-                        element.style.backgroundImage = `url(${image.url})`;
-                    }
-                }
-                
-                // Store attributes on the background container
-                element.setAttribute('data-background-image-id', semanticId);
-                element.setAttribute('data-edited-src', image.url);
-                element.setAttribute('data-brightness', selectedImage.brightness.toString());
-                element.setAttribute('data-blur', selectedImage.blur.toString());
-                
-                // Apply filter to the wrapper element
-                if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
-                    element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
-                } else {
-                    element.style.filter = '';
-                }
-            } else {
-                // For regular images, update the img element directly
-                if (element.tagName === 'IMG') {
-                    (element as HTMLImageElement).src = image.url;
-                    element.setAttribute('data-edited-src', image.url);
-                    element.setAttribute('data-image-id', semanticId);
-                    element.setAttribute('data-brightness', selectedImage.brightness.toString());
-                    element.setAttribute('data-blur', selectedImage.blur.toString());
-                    
-                    // Apply filter
-                    if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
-                        element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
-                    } else {
-                        element.style.filter = '';
-                    }
-                } else {
-                    // Next.js Image wrapper - find the actual img element
-                    const img = element.querySelector('img');
-                    if (img) {
-                        img.src = image.url;
-                        img.setAttribute('data-edited-src', image.url);
-                    }
-                    element.setAttribute('data-image-id', semanticId);
-                    element.setAttribute('data-edited-src', image.url);
-                    element.setAttribute('data-brightness', selectedImage.brightness.toString());
-                    element.setAttribute('data-blur', selectedImage.blur.toString());
-                    
-                    // Apply filter to wrapper
-                    if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
-                        element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
-                    } else {
-                        element.style.filter = '';
-                    }
-                }
+        }, 300);
+    }, [selectedImage]);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (saveTransformTimeoutRef.current) {
+                clearTimeout(saveTransformTimeoutRef.current);
             }
-            
-            // Dispatch a custom event to notify Image components to re-resolve
-            window.dispatchEvent(new CustomEvent('image-mapping-updated', {
-                detail: { id: semanticId, filename, brightness: selectedImage.brightness, blur: selectedImage.blur }
-            }));
-            
-            // Close the editor
-            handleClose();
-        }
-    };
+        };
+    }, []);
 
-    const handleBrightnessChange = async (brightness: number) => {
+    // Event handlers
+    const handleImageChangeWrapper = useCallback(async (image: ImageMetadata | null) => {
         if (!selectedImage) return;
-        
-        const { element } = selectedImage;
-        const semanticId = element.getAttribute('data-image-id') || 
-                          element.getAttribute('data-background-image-id');
-        const currentFilter = element.style.filter || '';
-        const blurMatch = currentFilter.match(/blur\((\d+)px\)/);
-        const blur = blurMatch ? parseInt(blurMatch[1]) : selectedImage.blur;
-        
-        // Update the selectedImage state
-        setSelectedImage({
-            ...selectedImage,
-            brightness,
-        });
-        
-        element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
-        element.setAttribute('data-brightness', brightness.toString());
-        
-        // Save the effect immediately
-        if (semanticId) {
-            try {
-                let filename = semanticId;
-                if (selectedImage.isBackground) {
-                    const bgImage = window.getComputedStyle(element).backgroundImage;
-                    const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-                    if (urlMatch && urlMatch[1]) {
-                        filename = urlMatch[1].split('/api/uploads/')[1]?.split('?')[0] || semanticId;
-                    }
-                } else {
-                    filename = (element as HTMLImageElement).src.split('/api/uploads/')[1]?.split('?')[0] || semanticId;
-                }
-                await fetch('/api/plugin-images/resolve', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ 
-                        id: semanticId, 
-                        filename,
-                        brightness,
-                        blur,
-                    }),
-                });
-            } catch (error) {
-                console.error('Failed to save brightness:', error);
-            }
-        }
-    };
+        await handleImageChange(image, selectedImage, handleClose);
+    }, [selectedImage]);
 
-    const handleBlurChange = async (blur: number) => {
+    const handleBrightnessChangeWrapper = useCallback(async (brightness: number) => {
         if (!selectedImage) return;
-        
-        const { element } = selectedImage;
-        const semanticId = element.getAttribute('data-image-id') || 
-                          element.getAttribute('data-background-image-id');
-        const currentFilter = element.style.filter || '';
-        const brightnessMatch = currentFilter.match(/brightness\((\d+)%\)/);
-        const brightness = brightnessMatch ? parseInt(brightnessMatch[1]) : selectedImage.brightness;
-        
-        // Update the selectedImage state
-        setSelectedImage({
-            ...selectedImage,
-            blur,
-        });
-        
-        element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
-        element.setAttribute('data-blur', blur.toString());
-        
-        // Save the effect immediately
-        if (semanticId) {
-            try {
-                let filename = semanticId;
-                if (selectedImage.isBackground) {
-                    const bgImage = window.getComputedStyle(element).backgroundImage;
-                    const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-                    if (urlMatch && urlMatch[1]) {
-                        filename = urlMatch[1].split('/api/uploads/')[1]?.split('?')[0] || semanticId;
-                    }
-                } else {
-                    filename = (element as HTMLImageElement).src.split('/api/uploads/')[1]?.split('?')[0] || semanticId;
-                }
-                await fetch('/api/plugin-images/resolve', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ 
-                        id: semanticId, 
-                        filename,
-                        brightness,
-                        blur,
-                    }),
-                });
-            } catch (error) {
-                console.error('Failed to save blur:', error);
-            }
-        }
-    };
+        // Don't save immediately when in editor - will be saved when "Done" is pressed
+        await handleBrightnessChange(brightness, selectedImage, setSelectedImage, false);
+    }, [selectedImage]);
+
+    const handleBlurChangeWrapper = useCallback(async (blur: number) => {
+        if (!selectedImage) return;
+        // Don't save immediately when in editor - will be saved when "Done" is pressed
+        await handleBlurChange(blur, selectedImage, setSelectedImage, false);
+    }, [selectedImage]);
 
-    const handleClose = () => {
+    const handleClose = useCallback(() => {
         setIsOpen(false);
         setSelectedImage(null);
-    };
+    }, []);
 
     // Don't render if disabled or user is not admin/dev
     if (!config.enabled || isLoading || !userRole) {
@@ -731,48 +236,92 @@ export function GlobalImageEditor() {
     if (!isOpen || !selectedImage) {
         return null;
     }
-
+    
     return (
-        <div
-            data-image-editor
-            className={config.overlayClassName || "fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm"}
-            onClick={handleClose}
+        <div 
+            className={`fixed inset-0 z-50 flex items-center justify-center ${config.overlayClassName || 'bg-black/50 backdrop-blur-sm'}`}
+            data-image-editor="true"
+            onClick={(e) => {
+                if (e.target === e.currentTarget) {
+                    handleClose();
+                }
+            }}
         >
-            <div
+            <div 
+                className={`relative bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col ${config.className || ''}`}
                 onClick={(e) => e.stopPropagation()}
-                className={config.className || "w-full max-w-2xl max-h-[90vh] bg-dashboard-card rounded-2xl border border-dashboard-border shadow-2xl m-4 overflow-y-auto"}
             >
                 {/* Header */}
-                <div className="p-6 border-b border-dashboard-border flex items-center justify-between sticky top-0 bg-dashboard-card z-10">
-                    <div className="flex items-center gap-3">
-                        <Edit2 size={20} className="text-neutral-600 dark:text-neutral-400" />
-                        <h2 className="text-lg font-black uppercase tracking-tighter text-neutral-950 dark:text-white">
-                            Edit Image
-                        </h2>
-                    </div>
+                <div className="flex items-center justify-between p-6 border-b dark:border-neutral-800">
+                    <h2 className="text-2xl font-bold dark:text-white">Edit Image</h2>
                     <button
                         onClick={handleClose}
-                        className="p-2 hover:bg-dashboard-bg rounded-lg transition-colors"
+                        className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+                        aria-label="Close editor"
                     >
-                        <X size={20} className="text-neutral-500 dark:text-neutral-400" />
+                        <X className="w-5 h-5" />
                     </button>
                 </div>
 
                 {/* Content */}
                 <div className="p-6">
                     <ImagePicker
-                        value={selectedImage.originalSrc}
-                        onChange={handleImageChange}
+                        value={selectedImage.element.getAttribute('data-image-id') || selectedImage.element.getAttribute('data-background-image-id') || selectedImage.originalSrc}
+                        onChange={handleImageChangeWrapper}
                         brightness={selectedImage.brightness}
                         blur={selectedImage.blur}
-                        onBrightnessChange={handleBrightnessChange}
-                        onBlurChange={handleBlurChange}
+                        scale={selectedImage.scale}
+                        positionX={selectedImage.positionX}
+                        positionY={selectedImage.positionY}
+                        onBrightnessChange={handleBrightnessChangeWrapper}
+                        onBlurChange={handleBlurChangeWrapper}
+                        onScaleChange={async (newScale: number) => {
+                            if (selectedImage) {
+                                const updated = { ...selectedImage, scale: newScale };
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(newScale, updated.positionX, updated.positionY);
+                            }
+                        }}
+                        onPositionXChange={async (newPositionX: number) => {
+                            if (selectedImage) {
+                                const updated = { ...selectedImage, positionX: newPositionX };
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(updated.scale, newPositionX, updated.positionY);
+                            }
+                        }}
+                        onPositionYChange={async (newPositionY: number) => {
+                            if (selectedImage) {
+                                const updated = { ...selectedImage, positionY: newPositionY };
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(updated.scale, updated.positionX, newPositionY);
+                            }
+                        }}
+                        onEditorSave={async (finalScale: number, finalPositionX: number, finalPositionY: number, finalBrightness?: number, finalBlur?: number) => {
+                            if (selectedImage) {
+                                // Update selectedImage with final values
+                                // Use provided brightness/blur if available, otherwise use current values
+                                const updated = { 
+                                    ...selectedImage, 
+                                    scale: finalScale, 
+                                    positionX: finalPositionX, 
+                                    positionY: finalPositionY,
+                                    brightness: finalBrightness !== undefined ? finalBrightness : selectedImage.brightness,
+                                    blur: finalBlur !== undefined ? finalBlur : selectedImage.blur
+                                };
+                                setSelectedImage(updated);
+                                // Save with the final brightness and blur values
+                                await saveImageTransformHandler(finalScale, finalPositionX, finalPositionY, true, updated.brightness, updated.blur);
+                            }
+                        }}
                         showEffects={true}
                         darkMode={false}
+                        aspectRatio={selectedImage.aspectRatio}
+                        borderRadius={selectedImage.borderRadius}
+                        objectFit={selectedImage.objectFit}
+                        objectPosition={selectedImage.objectPosition}
                     />
                 </div>
             </div>
         </div>
     );
 }
-