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

package/src/modules/doc/markdownEditor/markdownEditor.ts

@@ -1,148 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-
-export default class MarkdownEditor extends LightningElement {
-    @api fetchUrl: string = "";
-    @api saveUrl: string = "";
-    @api filePath: string = "";
-    @api htmlContent: string = "";
-
-    @track isEditing: boolean = false;
-    @track editorContent: string = "";
-    @track isLoading: boolean = false;
-    @track saveStatus: "idle" | "saving" | "success" | "error" = "idle";
-
-    // Event Handlers
-    async handleEdit() {
-        if (!this.fetchUrl) {
-            console.error("Fetch URL not configured");
-            return;
-        }
-
-        this.isLoading = true;
-        this.saveStatus = "idle";
-
-        try {
-            const response = await fetch(this.fetchUrl, {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json"
-                }
-            });
-
-            if (response.ok) {
-                const data = await response.json();
-                this.editorContent = data.content || data.text || data.body || "";
-                this.isEditing = true;
-            } else {
-                throw new Error(`Failed to fetch content: ${response.status}`);
-            }
-        } catch (error) {
-            console.error("Failed to fetch content:", error);
-            this.saveStatus = "error";
-        } finally {
-            this.isLoading = false;
-        }
-    }
-
-    handleCancel() {
-        this.isEditing = false;
-        this.saveStatus = "idle";
-        this.editorContent = "";
-    }
-
-    handleContentChange(event: Event) {
-        const target = event.target as HTMLTextAreaElement;
-        this.editorContent = target.value;
-    }
-
-    async handleSave() {
-        if (!this.saveUrl) {
-            console.error("Save URL not configured");
-            this.saveStatus = "error";
-            return;
-        }
-
-        this.saveStatus = "saving";
-        this.isLoading = true;
-
-        try {
-            const response = await fetch(this.saveUrl, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify({
-                    content: this.editorContent,
-                    filePath: this.filePath
-                })
-            });
-
-            if (response.ok) {
-                this.saveStatus = "success";
-                this.isEditing = false;
-                this.editorContent = "";
-
-                // Dispatch save success event
-                this.dispatchEvent(
-                    new CustomEvent("saved", {
-                        detail: {
-                            success: true,
-                            content: this.editorContent,
-                            filePath: this.filePath
-                        }
-                    })
-                );
-            } else {
-                throw new Error(`Save failed: ${response.status}`);
-            }
-        } catch (error) {
-            console.error("Save failed:", error);
-            this.saveStatus = "error";
-        } finally {
-            this.isLoading = false;
-        }
-    }
-
-    // Getters for UI state
-    get showEditor() {
-        return this.isEditing;
-    }
-
-    get showViewer() {
-        return !this.isEditing;
-    }
-
-    get saveButtonDisabled() {
-        return this.saveStatus === "saving" || this.isLoading || !this.editorContent.trim();
-    }
-
-    get statusMessage() {
-        switch (this.saveStatus) {
-            case "saving":
-                return "Saving...";
-            case "success":
-                return "Saved successfully!";
-            case "error":
-                return "Save failed. Please try again.";
-            default:
-                return "";
-        }
-    }
-
-    get statusClass() {
-        switch (this.saveStatus) {
-            case "saving":
-                return "status-saving";
-            case "success":
-                return "status-success";
-            case "error":
-                return "status-error";
-            default:
-                return "";
-        }
-    }
-
-    get hasHtmlContent() {
-        return this.htmlContent && this.htmlContent.trim().length > 0;
-    }
-}

package/src/modules/doc/textSelectionSearch/README.md

@@ -1,185 +0,0 @@
-# Text Selection Search Component
-
-A Lightning Web Component that detects text selection on the page and shows a search popover for finding related content.
-
-## Features
-
-- **Automatic Text Detection**: Detects text selection via mouse and keyboard
-- **Positioned Popover**: Shows search interface near the selected text
-- **Search Functionality**: Makes API calls to backend search endpoints
-- **Modern UI**: Clean, responsive interface with loading states
-- **Keyboard Navigation**: Escape key to close popover
-- **Event Handling**: Dispatches events for search results and clicks
-- **Customizable**: Configurable appearance and behavior
-
-## Usage
-
-### Basic Implementation
-
-```html
-<doc-text-selection-search
-    search-api-url="/api/search"
-    placeholder="Search for..."
-    popover-position="top"
-    max-results="10">
-</doc-text-selection-search>
-```
-
-### With Event Listeners
-
-```html
-<doc-text-selection-search
-    search-api-url="/api/search"
-    @searchresults="handleSearchResults"
-    @resultclick="handleResultClick">
-</doc-text-selection-search>
-```
-
-```javascript
-handleSearchResults(event) {
-    const { query, results, selectedText } = event.detail;
-    console.log('Search results:', results);
-}
-
-handleResultClick(event) {
-    const { result, query, selectedText } = event.detail;
-    console.log('Result clicked:', result);
-    // Navigate to result or perform action
-}
-```
-
-## API Reference
-
-### Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `searchApiUrl` | string | `""` | The URL endpoint for the search API |
-| `placeholder` | string | `"Search for..."` | Placeholder text for the search input |
-| `popoverPosition` | `"top" \| "bottom"` | `"top"` | Position of popover relative to selected text |
-| `maxResults` | number | `10` | Maximum number of search results to display |
-
-### Events
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `searchresults` | `{ query, results, selectedText }` | Fired when search results are received |
-| `resultclick` | `{ result, query, selectedText }` | Fired when a search result is clicked |
-
-### Backend API Format
-
-The component expects your backend API to:
-
-**Request (POST):**
-```json
-{
-    "query": "search term",
-    "maxResults": 10,
-    "selectedText": "originally selected text"
-}
-```
-
-**Response:**
-```json
-{
-    "results": [
-        {
-            "title": "Result Title",
-            "description": "Result description or snippet",
-            "url": "https://example.com/result"
-        }
-    ]
-}
-```
-
-## Examples
-
-### Knowledge Base Search
-
-```html
-<doc-text-selection-search
-    search-api-url="https://api.example.com/kb/search"
-    placeholder="Search knowledge base..."
-    popover-position="bottom"
-    max-results="15">
-</doc-text-selection-search>
-```
-
-### Documentation Search
-
-```html
-<doc-text-selection-search
-    search-api-url="/api/docs/search"
-    placeholder="Search documentation..."
-    popover-position="top"
-    max-results="8">
-</doc-text-selection-search>
-```
-
-### Custom Styling
-
-You can customize the appearance by overriding CSS classes:
-
-```css
-.text-selection-search-popover {
-    /* Custom popover styling */
-    border-radius: 12px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-}
-
-.result-item:hover {
-    /* Custom hover effects */
-    background: #f0f8ff;
-    border-color: #0066cc;
-}
-```
-
-## Browser Support
-
-- Chrome 60+
-- Firefox 55+
-- Safari 12+
-- Edge 79+
-
-## Accessibility
-
-- Keyboard navigation support (Escape to close)
-- Screen reader friendly
-- High contrast mode support
-- Focus management
-
-## Performance Considerations
-
-- Event listeners are properly cleaned up on component destruction
-- Debounced text selection detection
-- Efficient DOM updates
-- Minimal re-renders
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Popover not appearing**: Ensure text selection is enabled and the component is properly mounted
-2. **API calls failing**: Check the `searchApiUrl` and ensure CORS is configured
-3. **Positioning issues**: The popover position calculation may need adjustment for complex layouts
-
-### Debug Mode
-
-Enable console logging for debugging:
-
-```javascript
-// Add to your component
-connectedCallback() {
-    this.debug = true; // Enable debug logging
-}
-```
-
-## Contributing
-
-When contributing to this component:
-
-1. Follow the existing code style and patterns
-2. Add appropriate tests for new features
-3. Update documentation for API changes
-4. Ensure accessibility compliance
-5. Test across different browsers and devices 

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

@@ -1,285 +0,0 @@
-.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: 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;
-    /* Remove the absolute positioning that was causing issues */
-}
-
-/* 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

@@ -1,91 +0,0 @@
-<template>
-    <!-- Text Selection Search Popover -->
-    <template if:true={isVisible}>
-        <div 
-            class="text-selection-search-popover" 
-            class:hidden={isHidden}
-            style={popoverStyle}
-            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>