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

package/src/modules/doc/textSelectionSearch/textSelectionSearch.css

@@ -0,0 +1,286 @@
+.text-selection-search-popover {
+    background: white;
+    border: 1px solid #e1e5e9;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    padding: 0;
+    min-width: 320px;
+    max-width: 480px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    position: relative;
+    overflow: hidden;
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.1s ease, visibility 0.1s ease;
+}
+
+.text-selection-search-popover.hidden {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+/* Header Styles */
+.popover-header {
+    background: #f8f9fa;
+    border-bottom: 1px solid #e9ecef;
+    padding: 12px 16px;
+    margin: 0;
+}
+
+.popover-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #495057;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Content Container */
+.text-selection-search-popover > *:not(.popover-header):not(.popover-close) {
+    padding: 16px;
+}
+
+/* Section Labels */
+.section-label {
+    display: block;
+    font-weight: 600;
+    font-size: 12px;
+    color: #6c757d;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Selected Text Display */
+.selected-text-section {
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f1f3f4;
+}
+
+.selected-text-display {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 4px;
+    padding: 8px 12px;
+    font-size: 13px;
+    line-height: 1.4;
+    color: #495057;
+    min-height: 32px;
+    max-height: 60px;
+    overflow-y: auto;
+    word-wrap: break-word;
+    font-style: italic;
+}
+
+/* Edit Form */
+.edit-form {
+    margin-bottom: 16px;
+}
+
+.input-group {
+    margin-bottom: 16px;
+}
+
+.input-group:last-child {
+    margin-bottom: 0;
+}
+
+.input-with-button {
+    display: flex;
+    gap: 8px;
+    align-items: flex-end;
+}
+
+.edit-input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 2px solid #e5e7eb;
+    border-radius: 6px;
+    font-size: 14px;
+    transition: border-color 0.2s ease;
+    background: white;
+    min-height: 48px;
+}
+
+.edit-input:focus {
+    outline: none;
+    border-color: #0070d2;
+    box-shadow: 0 0 0 3px rgba(0, 112, 210, 0.1);
+}
+
+.edit-input::placeholder {
+    color: #9ca3af;
+}
+
+.edit-button {
+    padding: 8px 16px;
+    background: #0070d2;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-weight: 500;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    min-height: 48px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.edit-button:hover:not(:disabled) {
+    background: #005fb2;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.edit-button:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.edit-button:disabled {
+    background: #9ca3af;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+/* Loading State */
+.loading-state {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: #f8f9fa;
+    border-radius: 6px;
+    margin-top: 12px;
+}
+
+.loading-text {
+    font-size: 13px;
+    color: #6c757d;
+}
+
+/* Error State */
+.error-state {
+    padding: 12px;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    border-radius: 6px;
+    margin-top: 12px;
+}
+
+.error-message {
+    color: #dc2626;
+    font-size: 13px;
+}
+
+/* Success State */
+.success-state {
+    padding: 12px;
+    background: #f0fdf4;
+    border: 1px solid #bbf7d0;
+    border-radius: 6px;
+    margin-top: 12px;
+}
+
+.success-message {
+    color: #16a34a;
+    font-size: 13px;
+    font-weight: 500;
+}
+
+/* Close Button */
+.popover-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 10;
+}
+
+.close-button {
+    background: rgba(108, 117, 125, 0.1);
+    border: none;
+    color: #6c757d;
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: bold;
+    transition: background-color 0.2s ease;
+}
+
+.close-button:hover {
+    background: rgba(108, 117, 125, 0.2);
+}
+
+/* Responsive Design */
+@media (max-width: 480px) {
+    .text-selection-search-popover {
+        min-width: 280px;
+        max-width: 90vw;
+    }
+    
+    .input-with-button {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .edit-button {
+        margin-top: 8px;
+    }
+    
+    .popover-header {
+        padding: 10px 12px;
+    }
+    
+    .popover-title {
+        font-size: 13px;
+    }
+}
+
+/* Animation for popover appearance */
+@keyframes popoverFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.text-selection-search-popover {
+    animation: popoverFadeIn 0.2s ease-out;
+}
+
+/* Scrollbar styling for results */
+.results-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.results-list::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.results-list::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+
+.results-list::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+} 

package/src/modules/doc/textSelectionSearch/textSelectionSearch.html

@@ -0,0 +1,90 @@
+<template>
+    <!-- Text Selection Search Popover -->
+    <template if:true={isVisible}>
+        <div 
+            class="text-selection-search-popover" 
+            class:hidden={isHidden}
+            onkeydown={handleKeyDown}
+            onclick={handlePopoverClick}
+        >
+            <!-- Header with Title -->
+            <div class="popover-header">
+                <h3 class="popover-title">Text Editor</h3>
+            </div>
+
+            <!-- Selected Text Display -->
+            <div class="selected-text-section">
+                <label class="section-label">Selected Text</label>
+                <div class="selected-text-display">
+                    {selectedText}
+                </div>
+            </div>
+
+            <!-- Edit Form -->
+            <div class="edit-form">
+                <form onsubmit={handleSearchSubmit}>
+                    <div class="input-group">
+                        <label class="section-label">Edit to:</label>
+                        <div class="input-with-button">
+                            <input
+                                type="text"
+                                class="edit-input"
+                                value={searchQuery}
+                                onchange={handleSearchInputChange}
+                                onclick={handleInputClick}
+                                placeholder="Enter your edited text here..."
+                                autocomplete="off"
+                                autofocus
+                            />
+                            <dx-button
+                                type="submit"
+                                variant="primary"
+                                disabled={searchButtonDisabled}
+                                class="edit-button"
+                            >
+                                Edit
+                            </dx-button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+
+            <!-- Loading State -->
+            <template if:true={isLoading}>
+                <div class="loading-state">
+                    <dx-spinner
+                        size="small"
+                        alternative-text="Editing..."
+                    ></dx-spinner>
+                    <span class="loading-text">Processing your edit...</span>
+                </div>
+            </template>
+
+            <!-- Error State -->
+            <template if:true={hasError}>
+                <div class="error-state">
+                    <span class="error-message">{errorMessage}</span>
+                </div>
+            </template>
+
+            <!-- Success State -->
+            <template if:true={isSuccess}>
+                <div class="success-state">
+                    <span class="success-message">Text edited successfully!</span>
+                </div>
+            </template>
+
+            <!-- Close Button -->
+            <div class="popover-close">
+                <dx-button
+                    onclick={hidePopover}
+                    variant="tertiary"
+                    class="close-button"
+                    title="Close editor"
+                >
+                    ×
+                </dx-button>
+            </div>
+        </div>
+    </template>
+</template>

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

@@ -0,0 +1,236 @@
+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 = '';
+            }
+        }
+    }
+}