@salesforcedevs/docs-components 1.14.3-alpha → 1.14.4-edit

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.14.3-alpha",
+    "version": "1.14.4-edit",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -13,6 +13,7 @@
     "dependencies": {
         "@api-components/amf-helper-mixin": "4.5.29",
         "classnames": "2.5.1",
+        "dompurify": "3.2.4",
         "kagekiri": "1.4.2",
         "lodash.orderby": "4.6.0",
         "lodash.uniqby": "4.7.0",

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

@@ -0,0 +1,70 @@
+# Markdown Editor Component
+
+A Lightning Web Component that provides an HTML-to-Markdown editor with Monaco Editor integration for documentation editing.
+
+## Features
+
+- **HTML to Markdown Conversion**: Automatically converts HTML content to Markdown format
+- **Monaco Editor Integration**: Rich code editing experience with syntax highlighting
+- **Basic Save Functionality**: Save edited content to a configured endpoint
+- **Responsive Design**: Works on desktop and mobile devices
+- **Loading States**: Visual feedback during save operations
+
+## Usage
+
+```html
+<doc-markdown-editor
+    content="<h1>Your HTML content here</h1>"
+    file-path="/docs/your-file.md"
+    save-endpoint="/api/save"
+    auth-token="your-auth-token">
+</doc-markdown-editor>
+```
+
+## API Properties
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `content` | string | Yes | The HTML content to display and edit |
+| `filePath` | string | No | The file path for saving (used in save requests) |
+| `saveEndpoint` | string | No | The API endpoint for saving content |
+| `authToken` | string | No | Authentication token for API calls |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `saved` | `{success: boolean, content: string, filePath: string}` | Fired when content is successfully saved |
+
+## Dependencies
+
+- **Monaco Editor**: Loaded dynamically from CDN
+- **Turndown.js**: Loaded dynamically from CDN for HTML-to-Markdown conversion
+
+## Browser Support
+
+- Modern browsers with ES6+ support
+- Requires JavaScript enabled
+- Monaco Editor requires modern browser features
+
+## Development
+
+To test the component locally:
+
+1. Start Storybook: `yarn storybook`
+2. Navigate to "Doc/MarkdownEditor" story
+3. Test the edit functionality
+
+## Save Endpoint Format
+
+The save endpoint should accept POST requests with the following JSON payload:
+
+```json
+{
+  "content": "markdown content",
+  "filePath": "/path/to/file.md",
+  "originalContent": "original html content"
+}
+```
+
+Expected response: HTTP 200 for success, any other status for failure. 

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

@@ -0,0 +1,169 @@
+.markdown-editor {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin: 1rem 0;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.editor-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    border-bottom: 1px solid #ddd;
+    background: #f8f9fa;
+    border-radius: 4px 4px 0 0;
+    justify-content: space-between;
+}
+
+.edit-button {
+    margin-left: auto;
+    min-width: 80px;
+}
+
+.button-group {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: auto;
+}
+
+.cancel-button,
+.save-button {
+    min-width: 80px;
+}
+
+.status-indicator {
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.status-saving {
+    color: #007bff;
+}
+
+.status-success {
+    color: #28a745;
+}
+
+.status-error {
+    color: #dc3545;
+}
+
+.content-viewer {
+    padding: 1rem;
+    min-height: 100px;
+}
+
+.content-display {
+    line-height: 1.6;
+}
+
+.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;
+    font-weight: 600;
+}
+
+.content-display p {
+    margin-bottom: 1rem;
+}
+
+.content-display code {
+    background: #f1f3f4;
+    padding: 0.125rem 0.25rem;
+    border-radius: 3px;
+    font-size: 0.875em;
+}
+
+.content-display pre {
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 1rem 0;
+}
+
+.content-display pre code {
+    background: none;
+    padding: 0;
+}
+
+.editor-wrapper {
+    position: relative;
+    min-height: 400px;
+}
+
+.editor-container {
+    height: 400px;
+    min-height: 200px;
+    border-radius: 0 0 4px 4px;
+}
+
+.simple-editor {
+    width: 100%;
+    height: 400px;
+    min-height: 200px;
+    padding: 1rem;
+    border: none;
+    border-radius: 0 0 4px 4px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    resize: vertical;
+    background: #f8f9fa;
+    color: #333;
+}
+
+.simple-editor:focus {
+    outline: none;
+    background: #fff;
+    box-shadow: inset 0 0 0 2px #007bff;
+}
+
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    border-radius: 0 0 4px 4px;
+}
+
+/* Monaco Editor customizations */
+.monaco-editor {
+    border-radius: 0 0 4px 4px;
+}
+
+.monaco-editor .margin {
+    background: #f8f9fa;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .editor-toolbar {
+        flex-wrap: wrap;
+        gap: 0.25rem;
+    }
+    
+    .status-indicator {
+        margin-left: 0;
+        width: 100%;
+        text-align: center;
+        margin-top: 0.5rem;
+    }
+    
+    .editor-container {
+        height: 300px;
+    }
+} 

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

@@ -0,0 +1,64 @@
+<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}>
+                <div class="button-group">
+                    <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>
+                
+                <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" innerhtml={content}></div>
+            </div>
+        </template>
+        
+        <!-- Simple Editor -->
+        <template if:true={showEditor}>
+            <div class="editor-wrapper">
+                <textarea 
+                    class="simple-editor" 
+                    value={markdownContent}
+                    onchange={handleContentChange}
+                    placeholder="Enter your markdown content here...">
+                </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,111 @@
+import { LightningElement, api, track } from 'lwc';
+
+export default class MarkdownEditor extends LightningElement {
+    @api content: string = '';
+    @api filePath: string = '';
+    @api saveEndpoint: string = '';
+    @api authToken: string = '';
+    
+    @track isEditing: boolean = false;
+    @track markdownContent: string = '';
+    @track isLoading: boolean = false;
+    @track saveStatus: 'idle' | 'saving' | 'success' | 'error' = 'idle';
+    
+    connectedCallback() {
+        this.markdownContent = this.content; // Simple fallback for now
+    }
+    
+    // Event Handlers
+    handleEdit() {
+        this.isEditing = true;
+        this.saveStatus = 'idle';
+    }
+    
+    handleCancel() {
+        this.isEditing = false;
+        this.saveStatus = 'idle';
+    }
+    
+    handleContentChange(event: Event) {
+        const target = event.target as HTMLTextAreaElement;
+        this.markdownContent = target.value;
+    }
+    
+    async handleSave() {
+        if (!this.saveEndpoint) {
+            console.error('Save endpoint not configured');
+            this.saveStatus = 'error';
+            return;
+        }
+        
+        this.saveStatus = 'saving';
+        this.isLoading = true;
+        
+        try {
+            const response = await fetch(this.saveEndpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': this.authToken ? `Bearer ${this.authToken}` : ''
+                },
+                body: JSON.stringify({
+                    content: this.markdownContent,
+                    filePath: this.filePath,
+                    originalContent: this.content
+                })
+            });
+            
+            if (response.ok) {
+                this.saveStatus = 'success';
+                this.isEditing = false;
+                
+                // Dispatch save success event
+                this.dispatchEvent(new CustomEvent('saved', {
+                    detail: { 
+                        success: true, 
+                        content: this.markdownContent,
+                        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;
+    }
+    
+    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 '';
+        }
+    }
+} 

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -18,6 +18,7 @@ import { LightningElementWithState } from "dxBaseElements/lightningElementWithSt
 import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
 import { track as trackGTM } from "dxUtils/analytics";
+import DOMPurify from "dompurify";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
 const handleContentError = (error: any): void => console.log(error);
@@ -425,9 +426,19 @@ export default class DocXmlContent extends LightningElementWithState<{
             .catch(handleContentError);
     }
 
+    private sanitizeUrlPart(part: string | undefined): string | undefined {
+        if (!part) {
+            return part;
+        }
+        return DOMPurify.sanitize(part);
+    }
+
     getReferenceFromUrl(): PageReference {
         const [page, docId, deliverable, contentDocumentId] =
-            window.location.pathname.substr(1).split("/");
+            window.location.pathname
+                .substr(1)
+                .split("/")
+                .map(this.sanitizeUrlPart);
 
         const { origin: domain, hash, search } = window.location;
 
@@ -436,9 +447,9 @@ export default class DocXmlContent extends LightningElementWithState<{
             deliverable,
             docId,
             domain,
-            hash,
+            hash: this.sanitizeUrlPart(hash),
             page,
-            search
+            search: this.sanitizeUrlPart(search)
         };
     }
 
@@ -701,7 +712,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     addMetatags(): void {
         const div = document.createElement("div");
-        div.innerHTML = this.docContent;
+        div.innerHTML = DOMPurify.sanitize(this.docContent);
         const docDescription = div.querySelector(".shortdesc")?.textContent;
         const topicTitle = div.querySelector("h1")?.textContent;