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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.8-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

@@ -19,17 +19,28 @@ export default class TextSelectionSearch extends LightningElement {
     private selectionStart: number = 0;
     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');
         console.log('TextSelectionSearch: Document ready state:', document.readyState);
         console.log('TextSelectionSearch: Current page URL:', window.location.href);
         this.setupTextSelectionListener();
+        this.setupContentObserver();
+        
+        // Additional initialization for spec-based references
+        if (this.isSpecBasedReferencePage()) {
+            console.log('TextSelectionSearch: Detected spec-based reference page, setting up additional listeners');
+            this.setupSpecBasedReferenceHandling();
+        }
     }
 
     disconnectedCallback() {
         console.log('TextSelectionSearch: Component disconnected');
         this.removeTextSelectionListener();
+        this.removeContentObserver();
     }
 
     // Setup text selection listener
@@ -37,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) {
@@ -56,6 +71,84 @@ export default class TextSelectionSearch extends LightningElement {
         }
     }
 
+    // Setup observer to detect when content is dynamically loaded
+    setupContentObserver() {
+        console.log('TextSelectionSearch: Setting up content observer');
+        try {
+            this.mutationObserver = new MutationObserver((mutations) => {
+                let shouldReinitialize = false;
+                
+                for (const mutation of mutations) {
+                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                        // Check if any added nodes contain text content
+                        for (const node of Array.from(mutation.addedNodes)) {
+                            if (node.nodeType === Node.ELEMENT_NODE) {
+                                const element = node as Element;
+                                
+                                // Check for spec-based reference content (.api-documentation)
+                                if (element.classList && element.classList.contains('api-documentation')) {
+                                    console.log('TextSelectionSearch: Detected .api-documentation container');
+                                    shouldReinitialize = true;
+                                    break;
+                                }
+                                
+                                // Check for doc-amf-topic component
+                                if (element.tagName && element.tagName.toLowerCase() === 'doc-amf-topic') {
+                                    console.log('TextSelectionSearch: Detected doc-amf-topic component');
+                                    shouldReinitialize = true;
+                                    break;
+                                }
+                                
+                                // Check for shadow DOM content in spec-based references
+                                if (this.isSpecBasedReferencePage() && element.shadowRoot) {
+                                    console.log('TextSelectionSearch: Detected shadow DOM content');
+                                    shouldReinitialize = true;
+                                    break;
+                                }
+                                
+                                // Check for common content containers
+                                if (element.querySelector && (
+                                    element.querySelector('p, h1, h2, h3, h4, h5, h6, li, td, th, div') ||
+                                    element.matches('p, h1, h2, h3, h4, h5, h6, li, td, th, div')
+                                )) {
+                                    shouldReinitialize = true;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                
+                if (shouldReinitialize) {
+                    console.log('TextSelectionSearch: Content detected, reinitializing listeners');
+                    // Small delay to ensure content is fully rendered
+                    setTimeout(() => {
+                        this.setupTextSelectionListener();
+                    }, 200); // Increased delay for spec-based references
+                }
+            });
+            
+            // Observe the entire document for content changes
+            this.mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            
+            console.log('TextSelectionSearch: Content observer set up successfully');
+        } catch (error) {
+            console.error('TextSelectionSearch: Error setting up content observer:', error);
+        }
+    }
+
+    removeContentObserver() {
+        console.log('TextSelectionSearch: Removing content observer');
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+            console.log('TextSelectionSearch: Content observer removed successfully');
+        }
+    }
+
     // Handle text selection
     handleTextSelection(event?: Event) {
         // If popover is visible, completely ignore all text selection events
@@ -97,6 +190,31 @@ export default class TextSelectionSearch extends LightningElement {
         this.selectedText = selection.toString().trim();
         console.log('TextSelectionSearch: Selected text:', this.selectedText);
         
+        // For spec-based references, check if selection is within the API documentation container
+        if (this.isSpecBasedReferencePage()) {
+            const apiDocContainer = document.querySelector('.api-documentation');
+            if (apiDocContainer) {
+                const range = selection.getRangeAt(0);
+                const rect = range.getBoundingClientRect();
+                const containerRect = apiDocContainer.getBoundingClientRect();
+                
+                // Check if the selection is within the API documentation container
+                const isWithinContainer = (
+                    rect.top >= containerRect.top &&
+                    rect.bottom <= containerRect.bottom &&
+                    rect.left >= containerRect.left &&
+                    rect.right <= containerRect.right
+                );
+                
+                console.log('TextSelectionSearch: Selection within API container:', isWithinContainer);
+                
+                if (!isWithinContainer) {
+                    console.log('TextSelectionSearch: Selection outside API container, ignoring');
+                    return;
+                }
+            }
+        }
+        
         if (this.selectedText.length > 0) {
             this.showPopover();
         }
@@ -111,24 +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);
         
-        // Calculate popover position with better positioning logic
+        // Check if we're on a spec-based reference page
+        const isSpecBased = this.isSpecBasedReferencePage();
+        console.log('TextSelectionSearch: Is spec-based reference:', isSpecBased);
+        
+        // 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;
-        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
+            popoverTop = Math.max(10, mouseY - 220); // Above mouse cursor
         } 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
@@ -139,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;
@@ -277,4 +404,43 @@ export default class TextSelectionSearch extends LightningElement {
     get searchButtonDisabled() {
         return this.isLoading || !this.searchQuery.trim();
     }
+
+    // Check if current page is a spec-based reference
+    isSpecBasedReferencePage(): boolean {
+        const url = window.location.href;
+        const hasMetaParam = url.includes('?meta=');
+        const isReferencePage = url.includes('/references/');
+        console.log('TextSelectionSearch: URL analysis - hasMetaParam:', hasMetaParam, 'isReferencePage:', isReferencePage);
+        return hasMetaParam && isReferencePage;
+    }
+
+    // Additional setup for spec-based references
+    setupSpecBasedReferenceHandling() {
+        // Wait for the page to be fully loaded
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                this.initializeForSpecBasedReference();
+            });
+        } else {
+            this.initializeForSpecBasedReference();
+        }
+    }
+
+    initializeForSpecBasedReference() {
+        console.log('TextSelectionSearch: Initializing for spec-based reference');
+        
+        // Wait for the .api-documentation container to appear
+        const checkForApiDocumentation = () => {
+            const apiDocContainer = document.querySelector('.api-documentation');
+            if (apiDocContainer) {
+                console.log('TextSelectionSearch: Found .api-documentation container, setting up listeners');
+                this.setupTextSelectionListener();
+            } else {
+                console.log('TextSelectionSearch: .api-documentation container not found yet, retrying...');
+                setTimeout(checkForApiDocumentation, 500);
+            }
+        };
+        
+        checkForApiDocumentation();
+    }
 }