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

package/package.json

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

@@ -19,17 +19,26 @@ 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
@@ -56,6 +65,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 +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();
         }
@@ -119,16 +231,60 @@ export default class TextSelectionSearch extends LightningElement {
         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
         let popoverTop: number;
-        const popoverLeft = Math.max(10, Math.min(window.innerWidth - 360, rect.left + (rect.width / 2) - 180));
+        let popoverLeft: number;
         
-        if (this.popoverPosition === "top") {
-            // Position above the selection
-            popoverTop = Math.max(10, rect.top - 200); // 200px above selection
+        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 {
-            // Position below the selection
-            popoverTop = Math.min(window.innerHeight - 250, rect.bottom + 20);
+            // 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
@@ -277,4 +433,64 @@ export default class TextSelectionSearch extends LightningElement {
     get searchButtonDisabled() {
         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;
+        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();
+    }
 }