@salesforcedevs/docs-components 1.17.10-hover-edit → 1.17.11-lwc-fix-alpha

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

@@ -1,496 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-
-export default class TextSelectionSearch extends LightningElement {
-    @api searchApiUrl: string = "";
-    @api repoUrl: string = "";
-    @api placeholder: string = "Search for...";
-    @api popoverPosition: "top" | "bottom" = "top";
-    @api maxResults: number = 10;
-
-    @track isVisible: boolean = false;
-    @track isHidden: boolean = false;
-    @track searchQuery: string = "";
-    @track isLoading: boolean = false;
-    @track isSuccess: boolean = false;
-    @track errorMessage: string = "";
-    @track popoverStyle: string = "";
-
-    private selectedText: string = "";
-    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');
-        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');
-        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
-    handleTextSelection(event?: Event) {
-        // If popover is visible, completely ignore all text selection events
-        if (this.isVisible) {
-            console.log('TextSelectionSearch: Popover is visible, ignoring text selection event');
-            return;
-        }
-        
-        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) {
-            const target = event.target as Element;
-            const popover = this.template.querySelector('.text-selection-search-popover');
-            if (popover && popover.contains(target)) {
-                console.log('TextSelectionSearch: Click inside popover, ignoring selection event');
-                return;
-            }
-        }
-        
-        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
-            if (this.isVisible) {
-                console.log('TextSelectionSearch: No text selected, but popover is visible - keeping it open');
-                return;
-            }
-            console.log('TextSelectionSearch: No text selected, hiding popover');
-            this.hidePopover();
-            return;
-        }
-
-        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();
-        }
-    }
-
-    // Show popover at selection position
-    showPopover() {
-        console.log('TextSelectionSearch: Showing popover');
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) {
-            console.log('TextSelectionSearch: No selection range found');
-            return;
-        }
-
-        const range = selection.getRangeAt(0);
-        const rect = range.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
-        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;
-        this.searchQuery = this.selectedText;
-        this.errorMessage = "";
-        this.isSuccess = false;
-        
-        console.log('TextSelectionSearch: Popover should now be visible');
-    }
-
-    // Hide popover
-    hidePopover() {
-        console.log('TextSelectionSearch: Hiding popover');
-        this.isHidden = true;
-        
-        // Use setTimeout to ensure the hidden class is applied before hiding
-        setTimeout(() => {
-            this.isVisible = false;
-            this.searchQuery = "";
-            this.errorMessage = "";
-            this.isSuccess = false;
-            this.popoverStyle = ""; // Reset the positioning style
-            this.initialPopoverStyle = ""; // Reset the initial position
-            
-            // Clear any text selection to prevent immediate re-showing
-            const selection = window.getSelection();
-            if (selection) {
-                selection.removeAllRanges();
-            }
-        }, 100);
-    }
-
-    // Handle popover click to prevent closing
-    handlePopoverClick(event: Event) {
-        event.stopPropagation();
-    }
-
-    // Handle input click to prevent closing
-    handleInputClick(event: Event) {
-        event.stopPropagation();
-    }
-
-    // Handle search input change
-    handleSearchInputChange(event: Event) {
-        const target = event.target as HTMLInputElement;
-        this.searchQuery = target.value;
-    }
-
-    // Handle search submission
-    async handleSearchSubmit(event: Event) {
-        event.preventDefault();
-        
-        if (!this.searchQuery.trim()) {
-            this.errorMessage = "Please enter edited text";
-            return;
-        }
-
-        if (!this.repoUrl.trim()) {
-            this.errorMessage = "Repository URL not configured";
-            return;
-        }
-
-        if (!this.searchApiUrl) {
-            this.errorMessage = "Search API URL not configured";
-            return;
-        }
-
-        await this.performSearch();
-    }
-
-    // Perform search API call
-    async performSearch() {
-        this.isLoading = true;
-        this.errorMessage = "";
-        this.isSuccess = false;
-
-        try {
-            const response = await fetch(this.searchApiUrl, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify({
-                    repoUrl: this.repoUrl,
-                    selectedText: this.selectedText,
-                    editedText: this.searchQuery
-                })
-            });
-
-            if (response.ok) {
-                this.isSuccess = true;
-                
-                // Dispatch success event
-                this.dispatchEvent(
-                    new CustomEvent("textedited", {
-                        detail: {
-                            repoUrl: this.repoUrl,
-                            selectedText: this.selectedText,
-                            editedText: this.searchQuery,
-                            success: true
-                        }
-                    })
-                );
-
-                // Auto-hide popover after success
-                setTimeout(() => {
-                    this.hidePopover();
-                }, 2000);
-            } else {
-                throw new Error(`Edit failed: ${response.status}`);
-            }
-        } catch (error) {
-            console.error("Edit failed:", error);
-            this.errorMessage = "Edit failed. Please try again.";
-        } finally {
-            this.isLoading = false;
-        }
-    }
-
-    // Handle escape key
-    handleKeyDown(event: KeyboardEvent) {
-        if (event.key === "Escape") {
-            this.hidePopover();
-        }
-    }
-
-    // Getters for UI state
-    get hasError() {
-        return this.errorMessage.length > 0;
-    }
-
-    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();
-    }
-}