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

package/src/modules/doc/textSelectionSearch/textSelectionSearch.js

@@ -1,236 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-
-export default class TextSelectionSearch extends LightningElement {
-    @api searchApiUrl = "";
-    @api repoUrl = "";
-    @api placeholder = "Search for...";
-    @api popoverPosition = "top";
-    @api maxResults = 10;
-
-    @track isVisible = false;
-    @track isHidden = false;
-    @track searchQuery = "";
-    @track isLoading = false;
-    @track isSuccess = false;
-    @track errorMessage = "";
-    @track popoverStyle = "";
-
-    selectedText = "";
-    selectionStart = 0;
-    selectionEnd = 0;
-    initialPopoverStyle = "";
-
-    connectedCallback() {
-        this.setupTextSelectionListener();
-    }
-
-    disconnectedCallback() {
-        this.removeTextSelectionListener();
-    }
-
-    setupTextSelectionListener() {
-        console.log('TextSelectionSearch: Setting up text selection listeners');
-        document.addEventListener("mouseup", (event) => this.handleTextSelection(event));
-        document.addEventListener("keyup", (event) => this.handleTextSelection(event));
-    }
-
-    removeTextSelectionListener() {
-        console.log('TextSelectionSearch: Removing text selection listeners');
-        document.removeEventListener("mouseup", (event) => this.handleTextSelection(event));
-        document.removeEventListener("keyup", (event) => this.handleTextSelection(event));
-    }
-
-    handleTextSelection(event) {
-        if (this.isVisible) {
-            console.log('TextSelectionSearch: Popover is visible, ignoring text selection event');
-            return;
-        }
-        
-        console.log('TextSelectionSearch: Text selection event triggered');
-        
-        if (event && event.target) {
-            const target = event.target;
-            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();
-        
-        if (!selection || selection.toString().trim() === "") {
-            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);
-        
-        if (this.selectedText.length > 0) {
-            this.showPopover();
-        }
-    }
-
-    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();
-        
-        const popoverTop = this.popoverPosition === "top" 
-            ? Math.max(10, rect.top - 80)
-            : Math.min(window.innerHeight - 200, rect.bottom + 20);
-        
-        const popoverLeft = Math.max(10, Math.min(window.innerWidth - 350, rect.left + (rect.width / 2) - 175));
-
-        this.popoverStyle = `position: fixed; top: ${popoverTop}px; left: ${popoverLeft}px; z-index: 9999; width: 350px;`;
-        this.initialPopoverStyle = this.popoverStyle;
-        console.log('TextSelectionSearch: Popover style:', this.popoverStyle);
-        
-        this.isVisible = true;
-        this.isHidden = false;
-        this.searchQuery = this.selectedText;
-        this.errorMessage = "";
-        this.isSuccess = false;
-        
-        console.log('TextSelectionSearch: Popover should now be visible');
-    }
-
-    hidePopover() {
-        console.log('TextSelectionSearch: Hiding popover');
-        this.isHidden = true;
-        
-        setTimeout(() => {
-            this.isVisible = false;
-            this.searchQuery = "";
-            this.errorMessage = "";
-            this.isSuccess = false;
-            this.popoverStyle = "";
-            this.initialPopoverStyle = "";
-            
-            const selection = window.getSelection();
-            if (selection) {
-                selection.removeAllRanges();
-            }
-        }, 100);
-    }
-
-    handlePopoverClick(event) {
-        event.stopPropagation();
-    }
-
-    handleInputClick(event) {
-        event.stopPropagation();
-    }
-
-    handleSearchInputChange(event) {
-        const target = event.target;
-        this.searchQuery = target.value;
-    }
-
-    async handleSearchSubmit(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();
-    }
-
-    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;
-                
-                this.dispatchEvent(
-                    new CustomEvent("textedited", {
-                        detail: {
-                            repoUrl: this.repoUrl,
-                            selectedText: this.selectedText,
-                            editedText: this.searchQuery,
-                            success: true
-                        }
-                    })
-                );
-
-                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;
-        }
-    }
-
-    handleKeyDown(event) {
-        if (event.key === "Escape") {
-            this.hidePopover();
-        }
-    }
-
-    get hasError() {
-        return this.errorMessage.length > 0;
-    }
-
-    get searchButtonDisabled() {
-        return this.isLoading || !this.searchQuery.trim();
-    }
-
-    renderedCallback() {
-        if (this.isVisible && this.initialPopoverStyle) {
-            const popover = this.template.querySelector('.text-selection-search-popover');
-            if (popover) {
-                popover.style.cssText = this.initialPopoverStyle;
-            }
-        } else if (!this.isVisible) {
-            const popover = this.template.querySelector('.text-selection-search-popover');
-            if (popover) {
-                popover.style.cssText = '';
-            }
-        }
-    }
-} 

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

@@ -1,257 +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
-
-    connectedCallback() {
-        this.setupTextSelectionListener();
-    }
-
-    disconnectedCallback() {
-        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));
-    }
-
-    removeTextSelectionListener() {
-        console.log('TextSelectionSearch: Removing text selection listeners');
-        document.removeEventListener("mouseup", (event) => this.handleTextSelection(event));
-        document.removeEventListener("keyup", (event) => this.handleTextSelection(event));
-    }
-
-    // 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');
-        
-        // 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();
-        
-        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);
-        
-        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();
-        
-        // 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);
-        
-        const popoverLeft = Math.max(10, Math.min(window.innerWidth - 350, rect.left + (rect.width / 2) - 175));
-
-        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);
-        
-        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();
-    }
-
-    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 = '';
-            }
-        }
-    }
-}