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

package/lwc.config.json

@@ -18,6 +18,8 @@
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",
+        "doc/markdownEditor",
+        "doc/textSelectionSearch",
         "doc/overview",
         "doc/phase",
         "doc/specificationContent",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.2",
+    "version": "1.17.6-hover-edit",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "456b8ad8b3162df223f9809e66a454cb66b4add0"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

package/src/modules/doc/markdownEditor/markdownEditor.css

@@ -0,0 +1,225 @@
+.markdown-editor {
+    border: 1px solid #e1e5e9;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+}
+
+/* Editor Toolbar */
+.editor-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e1e5e9;
+    flex-wrap: wrap;
+}
+
+.edit-button,
+.cancel-button,
+.save-button {
+    min-width: 80px;
+}
+
+.status-indicator {
+    margin-left: 0.5rem;
+    font-size: 0.875rem;
+}
+
+.status-saving {
+    color: #0176d3;
+}
+
+.status-success {
+    color: #04844b;
+}
+
+.status-error {
+    color: #ea001e;
+}
+
+/* Content Viewer */
+.content-viewer {
+    padding: 1rem;
+}
+
+.content-display {
+    line-height: 1.6;
+    color: #3e3e3c;
+}
+
+.content-display h1,
+.content-display h2,
+.content-display h3,
+.content-display h4,
+.content-display h5,
+.content-display h6 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: #181818;
+}
+
+.content-display p {
+    margin-bottom: 1rem;
+}
+
+.content-display ul,
+.content-display ol {
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+}
+
+.content-display code {
+    background-color: #f3f2f2;
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+    font-size: 0.875rem;
+}
+
+.content-display pre {
+    background-color: #f3f2f2;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    margin-bottom: 1rem;
+}
+
+.content-display pre code {
+    background-color: transparent;
+    padding: 0;
+}
+
+/* HTML Content Styling */
+.html-content {
+    line-height: 1.6;
+    color: #3e3e3c;
+}
+
+.html-content h1,
+.html-content h2,
+.html-content h3,
+.html-content h4,
+.html-content h5,
+.html-content h6 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: #181818;
+}
+
+.html-content p {
+    margin-bottom: 1rem;
+}
+
+.html-content ul,
+.html-content ol {
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+}
+
+.html-content code {
+    background-color: #f3f2f2;
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+    font-size: 0.875rem;
+}
+
+.html-content pre {
+    background-color: #f3f2f2;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    margin-bottom: 1rem;
+}
+
+.html-content pre code {
+    background-color: transparent;
+    padding: 0;
+}
+
+/* No Content Message */
+.no-content {
+    color: #706e6b;
+    font-style: italic;
+    text-align: center;
+    padding: 2rem;
+    background-color: #f8f9fa;
+    border: 1px dashed #e1e5e9;
+    border-radius: 4px;
+}
+
+/* Editor Wrapper */
+.editor-wrapper {
+    position: relative;
+    min-height: 300px;
+}
+
+.simple-editor {
+    width: 100%;
+    min-height: 300px;
+    padding: 1rem;
+    border: none;
+    outline: none;
+    font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    resize: vertical;
+    background: #fff;
+    color: #3e3e3c;
+}
+
+.simple-editor:focus {
+    outline: none;
+}
+
+.simple-editor::placeholder {
+    color: #706e6b;
+}
+
+/* Loading Overlay */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgb(255 255 255 / 80%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .editor-toolbar {
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        justify-content: flex-end;
+    }
+
+    .status-indicator {
+        margin-left: 0.25rem;
+        width: auto;
+        text-align: right;
+        margin-top: 0;
+    }
+
+    .simple-editor {
+        min-height: 250px;
+    }
+
+    .content-viewer {
+        padding: 0.75rem;
+    }
+}
+
+/* Empty state */
+.content-display:empty::before {
+    content: "No content to display";
+    color: #706e6b;
+    font-style: italic;
+}

package/src/modules/doc/markdownEditor/markdownEditor.html

@@ -0,0 +1,80 @@
+<template>
+    <div class="markdown-editor">
+        <!-- Editor Toolbar -->
+        <div class="editor-toolbar">
+            <template if:true={showViewer}>
+                <dx-button
+                    onclick={handleEdit}
+                    variant="tertiary"
+                    class="edit-button"
+                >
+                    Edit Content
+                </dx-button>
+            </template>
+
+            <template if:true={showEditor}>
+                <dx-button
+                    onclick={handleCancel}
+                    variant="secondary"
+                    class="cancel-button"
+                >
+                    Cancel
+                </dx-button>
+
+                <dx-button
+                    onclick={handleSave}
+                    variant="primary"
+                    disabled={saveButtonDisabled}
+                    class="save-button"
+                >
+                    Save
+                </dx-button>
+
+                <div class="status-indicator">
+                    <span class={statusClass}>{statusMessage}</span>
+                </div>
+            </template>
+        </div>
+
+        <!-- Content Viewer (Read-only) -->
+        <template if:true={showViewer}>
+            <div class="content-viewer">
+                <div class="content-display">
+                    <!-- Show HTML content if provided -->
+                    <template if:true={hasHtmlContent}>
+                        <div class="html-content" innerhtml={htmlContent}></div>
+                    </template>
+                    
+                    <!-- Show message if no HTML content -->
+                    <template if:false={hasHtmlContent}>
+                        <div class="no-content">
+                            No content to display. Click 'Edit Content' to fetch from the backend.
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </template>
+
+        <!-- Simple Editor -->
+        <template if:true={showEditor}>
+            <div class="editor-wrapper">
+                <textarea
+                    class="simple-editor"
+                    value={editorContent}
+                    onchange={handleContentChange}
+                    placeholder="Content will be loaded from the fetch URL..."
+                ></textarea>
+            </div>
+        </template>
+
+        <!-- Loading Overlay -->
+        <template if:true={isLoading}>
+            <div class="loading-overlay">
+                <dx-spinner
+                    size="medium"
+                    alternative-text="Loading"
+                ></dx-spinner>
+            </div>
+        </template>
+    </div>
+</template>

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

@@ -0,0 +1,148 @@
+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

@@ -0,0 +1,185 @@
+# 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