From efd479dbcbf59f318dc510add32774f49d466d5a Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sat, 11 Oct 2025 09:17:03 +0000
Subject: [PATCH] Improve text positioning in price badges and banners  Fixes
 an issue where text in price badges and banners was not rendering correctly
 after image editing, ensuring proper alignment and display by adjusting CSS
 properties and document cloning during canvas generation.

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 | 36 +++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/image-editor.tsx b/client/src/pages/image-editor.tsx
index bcfbf4e..ffc1d92 100644
--- a/client/src/pages/image-editor.tsx
+++ b/client/src/pages/image-editor.tsx
@@ -100,6 +100,9 @@ export default function ImageEditor() {
         throw new Error("Aucune image sélectionnée");
       }
 
+      // Wait for fonts and styles to load
+      await document.fonts.ready;
+      
       // Capture the preview container as canvas (including CSS overlays)
       const canvas = await html2canvas(previewRef.current, {
         backgroundColor: null,
@@ -110,7 +113,35 @@ export default function ImageEditor() {
         width: previewRef.current.offsetWidth,
         height: previewRef.current.offsetHeight,
         x: 0,
-        y: 0
+        y: 0,
+        onclone: (clonedDoc) => {
+          // Fix ribbon text positioning in cloned document
+          const ribbonText = clonedDoc.querySelector('.ribbon-text');
+          if (ribbonText instanceof HTMLElement) {
+            const parent = ribbonText.parentElement;
+            if (parent) {
+              const parentRect = parent.getBoundingClientRect();
+              // Calculate center position for ribbon text
+              ribbonText.style.transform = 'rotate(-45deg)';
+              ribbonText.style.position = 'absolute';
+              ribbonText.style.top = '50%';
+              ribbonText.style.left = '50%';
+              ribbonText.style.transformOrigin = 'center';
+              ribbonText.style.marginTop = '-0.6em';
+              ribbonText.style.marginLeft = `${-ribbonText.offsetWidth / 2}px`;
+            }
+          }
+          
+          // Ensure price badge text is properly positioned
+          const priceBadges = clonedDoc.querySelectorAll('[data-badge-price]');
+          priceBadges.forEach(badge => {
+            if (badge instanceof HTMLElement) {
+              badge.style.display = 'flex';
+              badge.style.alignItems = 'center';
+              badge.style.justifyContent = 'center';
+            }
+          });
+        }
       });
 
       // Convert canvas to blob
@@ -681,12 +712,13 @@ export default function ImageEditor() {
                           {/* Price Badge Overlay (CSS) */}
                           {priceBadge.enabled && priceBadge.price && (
                             <div 
+                              data-badge-price="true"
                               className={`absolute ${
                                 priceBadge.position === "north_east" ? "top-4 right-4" :
                                 priceBadge.position === "south_east" ? "bottom-4 right-4" :
                                 priceBadge.position === "south_west" ? "bottom-4 left-4" :
                                 "top-4 left-4"
-                              } px-4 py-2 rounded-full text-white font-bold z-10 ${
+                              } px-4 py-2 rounded-full text-white font-bold z-10 flex items-center justify-center ${
                                 priceBadge.color === "red" ? "bg-red-600" : "bg-yellow-500"
                               }`}
                               style={{ fontSize: `${priceBadge.size}px` }}