@salesforcedevs/docs-components 0.0.8-edit → 0.0.10-edit

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.0.8-edit",
+    "version": "0.0.10-edit",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/editFile/editFile.css

@@ -242,7 +242,8 @@
     padding: 16px;
     border: 2px solid #e5e7ea;
     border-radius: 12px;
-    font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+    font-family: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New",
+        monospace;
     font-size: 14px;
     line-height: 1.5;
     resize: vertical;
@@ -375,7 +376,7 @@
     width: 16px;
     height: 16px;
     border: 2px solid transparent;
-    border-top: 2px solid currentColor;
+    border-top: 2px solid currentcolor;
     border-radius: 50%;
     animation: edit-file-spin 1s linear infinite;
 }
@@ -508,4 +509,4 @@
     .edit-file-button {
         border: 2px solid;
     }
-} 
+}

package/src/modules/doc/editFile/editFile.html

@@ -25,10 +25,7 @@
 
     <!-- Popover Overlay -->
     <template lwc:if={isPopoverOpen}>
-        <div
-            class={overlayClass}
-            onclick={handleOverlayClick}
-        >
+        <div class={overlayClass} onclick={handleOverlayClick}>
             <div class={popoverClass}>
                 <!-- Popover Header -->
                 <div class="edit-file-header">
@@ -78,7 +75,9 @@
                     <template lwc:if={isLoading}>
                         <div class="edit-file-loading">
                             <div class="edit-file-spinner"></div>
-                            <p class="edit-file-loading-text">Loading file content...</p>
+                            <p class="edit-file-loading-text">
+                                Loading file content...
+                            </p>
                         </div>
                     </template>
 
@@ -95,7 +94,9 @@
                                 <line x1="15" y1="9" x2="9" y2="15"></line>
                                 <line x1="9" y1="9" x2="15" y2="15"></line>
                             </svg>
-                            <span class="edit-file-error-text">{errorMessage}</span>
+                            <span class="edit-file-error-text">
+                                {errorMessage}
+                            </span>
                         </div>
                     </template>
 
@@ -108,7 +109,6 @@
                             <textarea
                                 id="file-content"
                                 class="edit-file-textarea"
-                                value={fileContent}
                                 oninput={handleContentChange}
                                 placeholder="Enter file content..."
                                 rows="20"
@@ -152,13 +152,11 @@
                                 <div class="edit-file-button-spinner"></div>
                                 Saving...
                             </template>
-                            <template lwc:else>
-                                Save
-                            </template>
+                            <template lwc:else>Save</template>
                         </button>
                     </div>
                 </div>
             </div>
         </div>
     </template>
-</template> 
+</template>

package/src/modules/doc/editFile/editFile.ts

@@ -37,7 +37,8 @@ export default class EditFile extends LightningElement {
     private _disabled: boolean = false;
 
     // API Configuration
-    private static readonly FETCH_ENDPOINT = "https://1208ddd77328.ngrok-free.app/api/file-retrieval/retrieve";
+    private static readonly FETCH_ENDPOINT =
+        "https://1208ddd77328.ngrok-free.app/api/file-retrieval/retrieve";
     private static readonly SAVE_ENDPOINT = "/api/file/save";
 
     get popoverClass() {
@@ -58,7 +59,8 @@ export default class EditFile extends LightningElement {
         return cx(
             "edit-file-button",
             "edit-file-button_primary",
-            (this.isSaving || this.isContentUnchanged) && "edit-file-button_disabled"
+            (this.isSaving || this.isContentUnchanged) &&
+                "edit-file-button_disabled"
         );
     }
 
@@ -68,7 +70,9 @@ export default class EditFile extends LightningElement {
 
     // Open the edit file popover
     async handleEditClick() {
-        if (this.disabled) return;
+        if (this.disabled) {
+            return;
+        }
 
         this.isPopoverOpen = true;
         this.errorMessage = "";
@@ -88,7 +92,7 @@ export default class EditFile extends LightningElement {
             const response = await fetch(EditFile.FETCH_ENDPOINT, {
                 method: "POST",
                 headers: {
-                    "Content-Type": "application/json",
+                    "Content-Type": "application/json"
                 },
                 body: JSON.stringify({
                     source: this.source,
@@ -106,12 +110,19 @@ export default class EditFile extends LightningElement {
                 this.fileContent = data.data.content;
                 this.originalContent = data.data.content;
                 this.errorMessage = "";
+
+                // Set textarea value directly using ref
+                this.updateTextareaValue();
             } else {
-                this.errorMessage = data.error || data.message || "Failed to load file content";
+                this.errorMessage =
+                    data.error || data.message || "Failed to load file content";
             }
         } catch (error) {
             console.error("Error fetching file content:", error);
-            this.errorMessage = error instanceof Error ? error.message : "Failed to connect to server";
+            this.errorMessage =
+                error instanceof Error
+                    ? error.message
+                    : "Failed to connect to server";
         } finally {
             this.isLoading = false;
         }
@@ -142,7 +153,9 @@ export default class EditFile extends LightningElement {
 
     // Handle save action
     async handleSave() {
-        if (this.isSaving || this.isContentUnchanged || this.disabled) return;
+        if (this.isSaving || this.isContentUnchanged || this.disabled) {
+            return;
+        }
 
         this.isSaving = true;
         this.errorMessage = "";
@@ -151,7 +164,7 @@ export default class EditFile extends LightningElement {
             const response = await fetch(EditFile.SAVE_ENDPOINT, {
                 method: "POST",
                 headers: {
-                    "Content-Type": "application/json",
+                    "Content-Type": "application/json"
                 },
                 body: JSON.stringify({
                     fileName: this.fileName,
@@ -169,11 +182,11 @@ export default class EditFile extends LightningElement {
             if (data.success) {
                 this.originalContent = this.fileContent;
                 this.isPopoverOpen = false;
-                
+
                 // Dispatch success event
                 this.dispatchEvent(
                     new CustomEvent("editsuccess", {
-                        detail: { 
+                        detail: {
                             fileName: this.fileName,
                             content: this.fileContent,
                             message: data.message || "File saved successfully"
@@ -181,11 +194,15 @@ export default class EditFile extends LightningElement {
                     })
                 );
             } else {
-                this.errorMessage = data.error || data.message || "Failed to save file";
+                this.errorMessage =
+                    data.error || data.message || "Failed to save file";
             }
         } catch (error) {
             console.error("Error saving file:", error);
-            this.errorMessage = error instanceof Error ? error.message : "Failed to connect to server";
+            this.errorMessage =
+                error instanceof Error
+                    ? error.message
+                    : "Failed to connect to server";
         } finally {
             this.isSaving = false;
         }
@@ -205,13 +222,33 @@ export default class EditFile extends LightningElement {
         }
     }
 
+    // Update textarea value using ref
+    private updateTextareaValue() {
+        // Use setTimeout to ensure DOM is updated
+        setTimeout(() => {
+            const textarea = this.template.querySelector(
+                "#file-content"
+            ) as HTMLTextAreaElement;
+            if (textarea && this.fileContent !== undefined) {
+                textarea.value = this.fileContent;
+            }
+        }, 0);
+    }
+
     connectedCallback() {
         // Add escape key listener
         document.addEventListener("keydown", this.handleKeyDown.bind(this));
     }
 
+    renderedCallback() {
+        // Ensure textarea value is set correctly when component renders
+        if (this.isPopoverOpen && this.fileContent && !this.isLoading) {
+            this.updateTextareaValue();
+        }
+    }
+
     disconnectedCallback() {
         // Remove escape key listener
         document.removeEventListener("keydown", this.handleKeyDown.bind(this));
     }
-} 
+}