Improve image editor by correctly displaying ribbons on uploaded images

Update client/src/pages/image-editor.tsx to fix ribbon positioning logic and ensure ribbons are displayed correctly based on user-defined positions.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Hpj2VzR

client/src/pages/image-editor.tsx

@@ -125,14 +125,14 @@ export default function ImageEditor() {
       // Draw ribbon if enabled
       if (ribbon.enabled && ribbon.text) {
         const ribbonSize = 150;
-        const positions = {
+        const positions: Record<string, { x: number; y: number; rotation: number }> = {
           top_left: { x: 0, y: 0, rotation: 0 },
           top_right: { x: width - ribbonSize, y: 0, rotation: 90 },
           bottom_left: { x: 0, y: height - ribbonSize, rotation: -90 },
           bottom_right: { x: width - ribbonSize, y: height - ribbonSize, rotation: 180 }
         };
         
-        const pos = positions[ribbon.position as keyof typeof positions];
+        const pos = positions[ribbon.position] || positions.top_left;
         
         ctx.save();
         ctx.translate(pos.x + ribbonSize / 2, pos.y + ribbonSize / 2);