From 3d123aa3ffd78d21e55981b40fc01db1d14a74d4 Mon Sep 17 00:00:00 2001 From: natnaelat Date: Sun, 16 Nov 2025 16:19:52 -0500 Subject: [PATCH 1/2] Add image uploading to other tools and change button colors --- .../src/components/ImageUploadSection.tsx | 12 ++-- frontend/src/pages/BookEditor.tsx | 66 +++++++++++++------ 2 files changed, 52 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/ImageUploadSection.tsx b/frontend/src/components/ImageUploadSection.tsx index 9f15fbf6..29f9a51c 100644 --- a/frontend/src/components/ImageUploadSection.tsx +++ b/frontend/src/components/ImageUploadSection.tsx @@ -4,9 +4,11 @@ import { ImagesService, Body_upload_image_images_post } from "../api"; export function ImageUploadSection({ tempImage, setTempImage, + showLabel = false, }: { tempImage: string; setTempImage: (value: string) => void; + showLabel?: boolean; }) { const fileInputRef = useRef(null); const [uploadError, setUploadError] = useState(""); @@ -130,7 +132,8 @@ export function ImageUploadSection({ return (
-
image url or path:
+ {/* Conditionally show label */} + {showLabel &&
image url or path:
}
{/* URL Input */} @@ -154,11 +157,10 @@ export function ImageUploadSection({ onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} - className={`w-full border-2 border-dashed border-primary-green rounded-xl p-4 text-center cursor-pointer transition-colors min-w-0 ${ - isUploading + className={`w-full border-2 border-dashed border-primary-green rounded-xl p-4 text-center cursor-pointer transition-colors min-w-0 ${isUploading ? "bg-gray-100 cursor-not-allowed opacity-60" : "hover:bg-green-50" - }`} + }`} onClick={() => !isUploading && fileInputRef.current?.click()} >
); -} +} \ No newline at end of file diff --git a/frontend/src/pages/BookEditor.tsx b/frontend/src/pages/BookEditor.tsx index 368534b6..9074f629 100644 --- a/frontend/src/pages/BookEditor.tsx +++ b/frontend/src/pages/BookEditor.tsx @@ -28,6 +28,18 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) { console.error("Error parsing tempProps JSON:", e); } + const imageKeys = new Set(['image', 'imageUrl', 'imageSrc', 'backgroundImage', 'img']); + + // Helper to check if a key is an image field + const isImageField = (key: string): boolean => { + const lowerKey = key.toLowerCase(); + return imageKeys.has(lowerKey) || + lowerKey.includes('image') || + lowerKey.includes('img') || + (typeof propsObject[key] === 'string' && + (propsObject[key].startsWith('http') || propsObject[key].startsWith('/'))); + }; + // Compute arrays based on the initial propsObject const objectArrays = Object.keys(propsObject).filter( (key) => @@ -215,6 +227,12 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) { className="border border-gray-300 rounded p-1 font-mono whitespace-pre w-full max-w-full min-w-0" style={{ resize: "vertical" }} /> + ) : isImageField(key) ? ( + // *** NEW: Use ImageUploadSection for image fields *** + handleInputChange(key, newValue)} + /> ) : ( True + ) : isImageField(field) ? ( + // *** NEW: Use ImageUploadSection for image fields in arrays *** + + handleOptionChange(arrayKey, index, field, newValue) + } + /> ) : ( Preview Book
From adbf51f9737f852db87cee3ce72f35e8e645a2bb Mon Sep 17 00:00:00 2001 From: natnaelat Date: Sun, 16 Nov 2025 16:28:09 -0500 Subject: [PATCH 2/2] Fix formatting with Prettier --- .../src/components/ImageUploadSection.tsx | 7 ++- frontend/src/pages/BookEditor.tsx | 58 ++++++++++++------- 2 files changed, 40 insertions(+), 25 deletions(-) diff --git a/frontend/src/components/ImageUploadSection.tsx b/frontend/src/components/ImageUploadSection.tsx index 29f9a51c..01642a38 100644 --- a/frontend/src/components/ImageUploadSection.tsx +++ b/frontend/src/components/ImageUploadSection.tsx @@ -157,10 +157,11 @@ export function ImageUploadSection({ onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} - className={`w-full border-2 border-dashed border-primary-green rounded-xl p-4 text-center cursor-pointer transition-colors min-w-0 ${isUploading + className={`w-full border-2 border-dashed border-primary-green rounded-xl p-4 text-center cursor-pointer transition-colors min-w-0 ${ + isUploading ? "bg-gray-100 cursor-not-allowed opacity-60" : "hover:bg-green-50" - }`} + }`} onClick={() => !isUploading && fileInputRef.current?.click()} > ); -} \ No newline at end of file +} diff --git a/frontend/src/pages/BookEditor.tsx b/frontend/src/pages/BookEditor.tsx index 9074f629..b18c323c 100644 --- a/frontend/src/pages/BookEditor.tsx +++ b/frontend/src/pages/BookEditor.tsx @@ -28,16 +28,25 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) { console.error("Error parsing tempProps JSON:", e); } - const imageKeys = new Set(['image', 'imageUrl', 'imageSrc', 'backgroundImage', 'img']); + const imageKeys = new Set([ + "image", + "imageUrl", + "imageSrc", + "backgroundImage", + "img", + ]); // Helper to check if a key is an image field const isImageField = (key: string): boolean => { const lowerKey = key.toLowerCase(); - return imageKeys.has(lowerKey) || - lowerKey.includes('image') || - lowerKey.includes('img') || - (typeof propsObject[key] === 'string' && - (propsObject[key].startsWith('http') || propsObject[key].startsWith('/'))); + return ( + imageKeys.has(lowerKey) || + lowerKey.includes("image") || + lowerKey.includes("img") || + (typeof propsObject[key] === "string" && + (propsObject[key].startsWith("http") || + propsObject[key].startsWith("/"))) + ); }; // Compute arrays based on the initial propsObject @@ -231,7 +240,9 @@ function PropsForm({ tempProps, setTempProps }: PropsFormProps) { // *** NEW: Use ImageUploadSection for image fields *** handleInputChange(key, newValue)} + setTempImage={(newValue) => + handleInputChange(key, newValue) + } /> ) : ( (