@salesforcedevs/docs-components 1.17.10-hover-edit → 1.17.11-hover-edit

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.10-hover-edit",
+    "version": "1.17.11-hover-edit",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/textSelectionSearch/textSelectionSearch.ts

@@ -20,6 +20,8 @@ export default class TextSelectionSearch extends LightningElement {
     private selectionEnd: number = 0;
     private initialPopoverStyle: string = ""; // Store initial position
     private mutationObserver: MutationObserver | null = null;
+    private lastMouseX: number = 0;
+    private lastMouseY: number = 0;
 
     connectedCallback() {
         console.log('TextSelectionSearch: Component connected');
@@ -46,7 +48,11 @@ export default class TextSelectionSearch extends LightningElement {
         console.log('TextSelectionSearch: Setting up text selection listeners');
         try {
             // Use capture phase to ensure we get the events
-            document.addEventListener("mouseup", (event) => this.handleTextSelection(event), true);
+            document.addEventListener("mouseup", (event) => {
+                this.lastMouseX = event.clientX;
+                this.lastMouseY = event.clientY;
+                this.handleTextSelection(event);
+            }, true);
             document.addEventListener("keyup", (event) => this.handleTextSelection(event), true);
             console.log('TextSelectionSearch: Event listeners attached successfully');
         } catch (error) {
@@ -223,68 +229,28 @@ export default class TextSelectionSearch extends LightningElement {
             return;
         }
 
-        const range = selection.getRangeAt(0);
-        const rect = range.getBoundingClientRect();
-        
+        // Use a simpler, more reliable positioning approach
+        const rect = selection.getRangeAt(0).getBoundingClientRect();
         console.log('TextSelectionSearch: Selection rect:', rect);
-        console.log('TextSelectionSearch: Window dimensions:', window.innerWidth, window.innerHeight);
-        console.log('TextSelectionSearch: Scroll position:', window.scrollX, window.scrollY);
-        console.log('TextSelectionSearch: Document height:', document.documentElement.scrollHeight);
         
         // Check if we're on a spec-based reference page
         const isSpecBased = this.isSpecBasedReferencePage();
         console.log('TextSelectionSearch: Is spec-based reference:', isSpecBased);
         
-        // Calculate popover position with better positioning logic
+        // Use mouse position as fallback for better positioning
+        const mouseX = this.lastMouseX || rect.left + rect.width / 2;
+        const mouseY = this.lastMouseY || rect.top;
+        
+        console.log('TextSelectionSearch: Using mouse position:', mouseX, mouseY);
+        
+        // Calculate popover position
+        const popoverLeft = Math.max(10, Math.min(window.innerWidth - 360, mouseX - 175)); // Center on mouse
         let popoverTop: number;
-        let popoverLeft: number;
         
-        if (isSpecBased) {
-            // For spec-based references, we need to account for the dynamic content structure
-            // The content might be inside shadow DOM or have different positioning
-            const apiDocContainer = document.querySelector('.api-documentation');
-            if (apiDocContainer) {
-                const containerRect = apiDocContainer.getBoundingClientRect();
-                console.log('TextSelectionSearch: API documentation container rect:', containerRect);
-                
-                // Position the popover relative to the selection within the container
-                popoverLeft = Math.max(10, Math.min(window.innerWidth - 360, rect.left + (rect.width / 2) - 180));
-                
-                if (this.popoverPosition === "top") {
-                    // Position above the selection, but ensure it's within the container bounds
-                    popoverTop = Math.max(10, rect.top - 200);
-                    // If it would go above the container, position it below instead
-                    if (popoverTop < containerRect.top + 10) {
-                        popoverTop = Math.min(window.innerHeight - 250, rect.bottom + 20);
-                    }
-                } else {
-                    // Position below the selection
-                    popoverTop = Math.min(window.innerHeight - 250, rect.bottom + 20);
-                    // If it would go below the container, position it above instead
-                    if (popoverTop > containerRect.bottom - 250) {
-                        popoverTop = Math.max(10, rect.top - 200);
-                    }
-                }
-            } else {
-                // Fallback to standard positioning if container not found
-                popoverLeft = Math.max(10, Math.min(window.innerWidth - 360, rect.left + (rect.width / 2) - 180));
-                if (this.popoverPosition === "top") {
-                    popoverTop = Math.max(10, rect.top - 200);
-                } else {
-                    popoverTop = Math.min(window.innerHeight - 250, rect.bottom + 20);
-                }
-            }
+        if (this.popoverPosition === "top") {
+            popoverTop = Math.max(10, mouseY - 220); // Above mouse cursor
         } else {
-            // Standard positioning for markdown-based references
-            popoverLeft = Math.max(10, Math.min(window.innerWidth - 360, rect.left + (rect.width / 2) - 180));
-            
-            if (this.popoverPosition === "top") {
-                // Position above the selection
-                popoverTop = Math.max(10, rect.top - 200); // 200px above selection
-            } else {
-                // Position below the selection
-                popoverTop = Math.min(window.innerHeight - 250, rect.bottom + 20);
-            }
+            popoverTop = Math.min(window.innerHeight - 250, mouseY + 20); // Below mouse cursor
         }
 
         // Ensure the popover doesn't go off-screen
@@ -295,10 +261,15 @@ export default class TextSelectionSearch extends LightningElement {
             popoverTop = window.innerHeight - 250;
         }
 
-        this.popoverStyle = `position: fixed; top: ${popoverTop}px; left: ${popoverLeft}px; z-index: 9999; width: 350px;`;
-        this.initialPopoverStyle = this.popoverStyle; // Store the initial position
-        console.log('TextSelectionSearch: Popover style:', this.popoverStyle);
-        console.log('TextSelectionSearch: Calculated position - top:', popoverTop, 'left:', popoverLeft);
+        this.setPopoverPosition(popoverTop, popoverLeft);
+    }
+
+    // Set the popover position and show it
+    setPopoverPosition(top: number, left: number) {
+        this.popoverStyle = `position: fixed; top: ${top}px; left: ${left}px; z-index: 9999; width: 350px;`;
+        this.initialPopoverStyle = this.popoverStyle;
+        console.log('TextSelectionSearch: Final popover style:', this.popoverStyle);
+        console.log('TextSelectionSearch: Final position - top:', top, 'left:', left);
         
         this.isVisible = true;
         this.isHidden = false;
@@ -434,27 +405,6 @@ export default class TextSelectionSearch extends LightningElement {
         return this.isLoading || !this.searchQuery.trim();
     }
 
-    // Find text content within shadow DOM elements
-    findTextInShadowDOM(element: Element): boolean {
-        // Check if element has shadow root
-        if (element.shadowRoot) {
-            const shadowContent = element.shadowRoot.querySelector('p, h1, h2, h3, h4, h5, h6, li, td, th, div, span');
-            if (shadowContent) {
-                console.log('TextSelectionSearch: Found content in shadow DOM');
-                return true;
-            }
-        }
-        
-        // Recursively check child elements
-        for (const child of Array.from(element.children)) {
-            if (this.findTextInShadowDOM(child)) {
-                return true;
-            }
-        }
-        
-        return false;
-    }
-
     // Check if current page is a spec-based reference
     isSpecBasedReferencePage(): boolean {
         const url = window.location.href;