Décalage affichage menu contextuel personnalisé

menu_contextuel/custom_context_menu.js

@@ -28,7 +28,7 @@ function injectWhiteBox() {
     const getDefinitionWikiPath = browser.runtime.getURL("icons/definition_wiktionnaire.png");
     const loginPath = browser.runtime.getURL("icons/connexion.png");
 
-    // Construction du HTML avec interpolation
+    // Construction du HTML
     whiteBox.innerHTML = `
       <p id="selectedWord">Mot sélectionné : Aucun</p>
   <hr style="border: 0; height: 1px; background-color: #323046; margin: 8px 0;">
@@ -159,12 +159,20 @@ function showWhiteBox(event, selectedText) {
     // Met à jour l'affichage du mot sélectionné
     const selectedWordElement = document.getElementById("selectedWord");
     selectedWordElement.textContent = `${selectedText}`;
-
-    // Positionne la whiteBox près du clic
-    whiteBox.style.left = `${event.pageX}px`;
-    whiteBox.style.top = `${event.pageY}px`;
-    whiteBox.style.display = "block";
-    console.log("Affichage du menu contextuel avec le mot :", selectedText);
+    
+    // Récupère la position de la sélection
+    const selection = window.getSelection();
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect(); // Obtenez la position et taille du mot sélectionné
+
+    // Calcule la position du menu en bas à droite du mot sélectionné
+    const top = rect.bottom + window.scrollY; // Bas du mot + défilement vertical
+    const left = rect.right + window.scrollX; // Droite du mot + défilement horizontal
+
+    // Positionne la whiteBox
+    whiteBox.style.left = `${left}px`;
+    whiteBox.style.top = `${top}px`;
+    whiteBox.style.display = "block";nsole.log("Affichage du menu contextuel avec le mot :", selectedText);
 
     // Mettre à jour la visibilité des boutons
     updateMenuVisibility();