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

package/package.json

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

@@ -19,26 +19,128 @@ 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;
 
     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
     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);
+        }
+    }
+
+    // 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
@@ -50,6 +152,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 +166,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
@@ -77,6 +184,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();
         }
@@ -94,16 +226,79 @@ 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);
+        
+        // Check if we're on a spec-based reference page
+        const isSpecBased = this.isSpecBasedReferencePage();
+        console.log('TextSelectionSearch: Is spec-based reference:', isSpecBased);
         
-        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;
+        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);
+                }
+            }
+        } 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);
+            }
+        }
+
+        // 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;
@@ -239,19 +434,63 @@ export default class TextSelectionSearch extends LightningElement {
         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;
+    // 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;
             }
-        } 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 = '';
+        }
+        
+        // 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;
+        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();
     }
 }