Normalize image tag export formatting

apps/web/src/components/ImageItem.tsx

@@ -88,13 +88,17 @@ const ImageItem = (
     outputSizingMode,
     thumbnailScale,
     onDelete,
+    caption,
+    onCaptionChange,
   }: {
     file: File;
     outputSize: Size;
     outputFormat: OutputFormat;
     outputSizingMode: OutputSizingMode;
     thumbnailScale: number;
     onDelete: () => void;
+    caption: string;
+    onCaptionChange: (value: string) => void;
   },
   ref: Ref<AvatarEditor>,
 ) => {
@@ -254,6 +258,19 @@ const ImageItem = (
             }}
           />
         </div>
+        <div className="form-control mt-2">
+          <label className="label">
+            <span className="label-text text-xs">Caption</span>
+          </label>
+          <textarea
+            className="textarea textarea-bordered textarea-xs w-full"
+            placeholder="Caption will be stored in a text file alongside each image after download"
+            value={caption}
+            onChange={(e) => {
+              onCaptionChange(e.target.value);
+            }}
+          />
+        </div>
       </div>
     </div>
   );

apps/web/src/components/ImageSelector.tsx

@@ -14,6 +14,7 @@ type ImageFile = {
   id: string;
   file: File;
   editorRef?: AvatarEditor;
+  caption: string;
 };
 
 function TbPhotoPlus(props: SVGProps<SVGSVGElement>) {
@@ -67,6 +68,7 @@ function ImageSelectorImpl({
         ...acceptedFiles.map((file) => ({
           id: typeid().toString(),
           file,
+          caption: '',
         })),
         ...prev,
       ]);
@@ -87,6 +89,7 @@ function ImageSelectorImpl({
             id: file.id,
             file: file.file,
             blob: await getImageBlobFromEditor(file.editorRef, imageType, outputSizingMode),
+            caption: file.caption,
           });
         }
       }
@@ -179,6 +182,19 @@ function ImageSelectorImpl({
           onDelete={() => {
             setFiles((prev) => prev.filter((f) => f.id !== file.id));
           }}
+          caption={file.caption}
+          onCaptionChange={(value) => {
+            setFiles((prev) =>
+              prev.map((f) =>
+                f.id === file.id
+                  ? {
+                      ...f,
+                      caption: value,
+                    }
+                  : f,
+              ),
+            );
+          }}
         />
       ))}
     </div>

apps/web/src/lib/types.ts

@@ -7,6 +7,7 @@ export type ProcessedImage = {
   id: string;
   file: File;
   blob: Blob;
+  caption?: string;
 };
 
 export type Size = {

apps/web/src/routes/index.tsx

@@ -163,6 +163,14 @@ export default component$(() => {
 
                   const newFileName = fileName.replace(/\.[^.]+$/, '') + `.${imageSelectorContext.outputFormat}`;
                   zip.file(newFileName, result.blob);
+                  if (result.caption && result.caption.trim().length > 0) {
+                    const textFileName = newFileName.replace(/\.[^.]+$/, '.txt');
+                    const normalizedCaption = result.caption.replace(/\r\n/g, '\n').trim();
+                    const captionContent = normalizedCaption.endsWith('\n')
+                      ? normalizedCaption
+                      : normalizedCaption + '\n';
+                    zip.file(textFileName, captionContent);
+                  }
                 }
 
                 const zipBlob = await zip.generateAsync({ type: 'blob' });