@salesforcedevs/docs-components 1.17.6-hover-edit → 1.17.8-hover-edit

package/package.json

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

package/src/modules/doc/textSelectionSearch/textSelectionSearch.css

@@ -7,20 +7,19 @@
     min-width: 320px;
     max-width: 480px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    position: relative;
+    position: fixed; /* Changed from relative to fixed for better positioning */
     overflow: hidden;
     opacity: 1;
     visibility: visible;
     transition: opacity 0.1s ease, visibility 0.1s ease;
+    z-index: 9999; /* Ensure it's above other content */
 }
 
 .text-selection-search-popover.hidden {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
+    /* Remove the absolute positioning that was causing issues */
 }
 
 /* Header Styles */

package/src/modules/doc/textSelectionSearch/textSelectionSearch.html

@@ -4,6 +4,7 @@
         <div 
             class="text-selection-search-popover" 
             class:hidden={isHidden}
+            style={popoverStyle}
             onkeydown={handleKeyDown}
             onclick={handlePopoverClick}
         >

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

@@ -21,24 +21,39 @@ export default class TextSelectionSearch extends LightningElement {
     private initialPopoverStyle: string = ""; // Store initial position
 
     connectedCallback() {
+        console.log('TextSelectionSearch: Component connected');
+        console.log('TextSelectionSearch: Document ready state:', document.readyState);
+        console.log('TextSelectionSearch: Current page URL:', window.location.href);
         this.setupTextSelectionListener();
     }
 
     disconnectedCallback() {
+        console.log('TextSelectionSearch: Component disconnected');
         this.removeTextSelectionListener();
     }
 
     // Setup text selection listener
     setupTextSelectionListener() {
         console.log('TextSelectionSearch: Setting up text selection listeners');
-        document.addEventListener("mouseup", (event) => this.handleTextSelection(event));
-        document.addEventListener("keyup", (event) => this.handleTextSelection(event));
+        try {
+            // Use capture phase to ensure we get the events
+            document.addEventListener("mouseup", (event) => this.handleTextSelection(event), true);
+            document.addEventListener("keyup", (event) => this.handleTextSelection(event), true);
+            console.log('TextSelectionSearch: Event listeners attached successfully');
+        } catch (error) {
+            console.error('TextSelectionSearch: Error setting up event listeners:', error);
+        }
     }
 
     removeTextSelectionListener() {
         console.log('TextSelectionSearch: Removing text selection listeners');
-        document.removeEventListener("mouseup", (event) => this.handleTextSelection(event));
-        document.removeEventListener("keyup", (event) => this.handleTextSelection(event));
+        try {
+            document.removeEventListener("mouseup", (event) => this.handleTextSelection(event), true);
+            document.removeEventListener("keyup", (event) => this.handleTextSelection(event), true);
+            console.log('TextSelectionSearch: Event listeners removed successfully');
+        } catch (error) {
+            console.error('TextSelectionSearch: Error removing event listeners:', error);
+        }
     }
 
     // Handle text selection
@@ -50,6 +65,8 @@ export default class TextSelectionSearch extends LightningElement {
         }
         
         console.log('TextSelectionSearch: Text selection event triggered');
+        console.log('TextSelectionSearch: Event type:', event?.type);
+        console.log('TextSelectionSearch: Event target:', event?.target);
         
         // Check if the event target is inside our popover
         if (event && event.target) {
@@ -62,6 +79,9 @@ export default class TextSelectionSearch extends LightningElement {
         }
         
         const selection = window.getSelection();
+        console.log('TextSelectionSearch: Selection object:', selection);
+        console.log('TextSelectionSearch: Selection string:', selection?.toString());
+        console.log('TextSelectionSearch: Selection range count:', selection?.rangeCount);
         
         if (!selection || selection.toString().trim() === "") {
             // Only hide popover if it's currently visible and we're not clicking inside it
@@ -94,16 +114,35 @@ export default class TextSelectionSearch extends LightningElement {
         const range = selection.getRangeAt(0);
         const rect = range.getBoundingClientRect();
         
-        // Calculate popover position with more conservative positioning
-        const popoverTop = this.popoverPosition === "top" 
-            ? Math.max(10, rect.top - 80) // Ensure it doesn't go off-screen
-            : Math.min(window.innerHeight - 200, rect.bottom + 20);
+        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);
         
-        const popoverLeft = Math.max(10, Math.min(window.innerWidth - 350, rect.left + (rect.width / 2) - 175));
+        // Calculate popover position with better positioning logic
+        let popoverTop: number;
+        const 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);
+        }
+
+        // Ensure the popover doesn't go off-screen
+        if (popoverTop < 10) {
+            popoverTop = 10;
+        }
+        if (popoverTop > window.innerHeight - 250) {
+            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.isVisible = true;
         this.isHidden = false;
@@ -238,20 +277,4 @@ export default class TextSelectionSearch extends LightningElement {
     get searchButtonDisabled() {
         return this.isLoading || !this.searchQuery.trim();
     }
-
-    renderedCallback() {
-        if (this.isVisible && this.initialPopoverStyle) {
-            const popover = this.template.querySelector('.text-selection-search-popover') as HTMLElement;
-            if (popover) {
-                // Always use the initial position, never recalculate
-                popover.style.cssText = this.initialPopoverStyle;
-            }
-        } else if (!this.isVisible) {
-            // Clear the style when popover is hidden
-            const popover = this.template.querySelector('.text-selection-search-popover') as HTMLElement;
-            if (popover) {
-                popover.style.cssText = '';
-            }
-        }
-    }
 }