@salesforcedevs/docs-components 0.0.9-edit → 0.0.11-chat

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,163 +0,0 @@
1
- <template>
2
- <!-- Edit File Trigger Button -->
3
- <button
4
- class="edit-file-trigger"
5
- onclick={handleEditClick}
6
- disabled={disabled}
7
- aria-label="Edit file"
8
- title="Edit file"
9
- >
10
- <svg
11
- class="edit-file-icon"
12
- viewBox="0 0 24 24"
13
- fill="none"
14
- stroke="currentColor"
15
- >
16
- <path
17
- stroke-linecap="round"
18
- stroke-linejoin="round"
19
- stroke-width="2"
20
- d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
21
- />
22
- </svg>
23
- <span class="edit-file-trigger-text">Edit</span>
24
- </button>
25
-
26
- <!-- Popover Overlay -->
27
- <template lwc:if={isPopoverOpen}>
28
- <div
29
- class={overlayClass}
30
- onclick={handleOverlayClick}
31
- >
32
- <div class={popoverClass}>
33
- <!-- Popover Header -->
34
- <div class="edit-file-header">
35
- <h2 class="edit-file-title">{project}</h2>
36
- <template lwc:if={fileName}>
37
- <p class="edit-file-filename">
38
- <svg
39
- class="edit-file-file-icon"
40
- viewBox="0 0 24 24"
41
- fill="none"
42
- stroke="currentColor"
43
- >
44
- <path
45
- stroke-linecap="round"
46
- stroke-linejoin="round"
47
- stroke-width="2"
48
- d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
49
- />
50
- </svg>
51
- {fileName}
52
- </p>
53
- </template>
54
- <button
55
- class="edit-file-close"
56
- onclick={handleCancel}
57
- aria-label="Close editor"
58
- >
59
- <svg
60
- class="edit-file-close-icon"
61
- viewBox="0 0 24 24"
62
- fill="none"
63
- stroke="currentColor"
64
- >
65
- <path
66
- stroke-linecap="round"
67
- stroke-linejoin="round"
68
- stroke-width="2"
69
- d="M6 18L18 6M6 6l12 12"
70
- />
71
- </svg>
72
- </button>
73
- </div>
74
-
75
- <!-- Popover Content -->
76
- <div class="edit-file-content">
77
- <!-- Loading State -->
78
- <template lwc:if={isLoading}>
79
- <div class="edit-file-loading">
80
- <div class="edit-file-spinner"></div>
81
- <p class="edit-file-loading-text">Loading file content...</p>
82
- </div>
83
- </template>
84
-
85
- <!-- Error Message -->
86
- <template lwc:if={errorMessage}>
87
- <div class="edit-file-error">
88
- <svg
89
- class="edit-file-error-icon"
90
- viewBox="0 0 24 24"
91
- fill="none"
92
- stroke="currentColor"
93
- >
94
- <circle cx="12" cy="12" r="10"></circle>
95
- <line x1="15" y1="9" x2="9" y2="15"></line>
96
- <line x1="9" y1="9" x2="15" y2="15"></line>
97
- </svg>
98
- <span class="edit-file-error-text">{errorMessage}</span>
99
- </div>
100
- </template>
101
-
102
- <!-- Content Editor -->
103
- <template lwc:if={fileContent}>
104
- <div class="edit-file-editor">
105
- <label class="edit-file-label" for="file-content">
106
- File Content
107
- </label>
108
- <textarea
109
- id="file-content"
110
- class="edit-file-textarea"
111
- oninput={handleContentChange}
112
- placeholder="Enter file content..."
113
- rows="20"
114
- spellcheck="false"
115
- ></textarea>
116
- </div>
117
- </template>
118
- </div>
119
-
120
- <!-- Popover Footer -->
121
- <div class="edit-file-footer">
122
- <div class="edit-file-status">
123
- <template lwc:if={isSaving}>
124
- <div class="edit-file-saving">
125
- <div class="edit-file-mini-spinner"></div>
126
- <span>Saving...</span>
127
- </div>
128
- </template>
129
- <template lwc:elseif={isContentUnchanged}>
130
- <span class="edit-file-unchanged">No changes</span>
131
- </template>
132
- <template lwc:else>
133
- <span class="edit-file-modified">Modified</span>
134
- </template>
135
- </div>
136
-
137
- <div class="edit-file-actions">
138
- <button
139
- class="edit-file-button edit-file-button_secondary"
140
- onclick={handleCancel}
141
- disabled={isSaving}
142
- >
143
- Cancel
144
- </button>
145
- <button
146
- class={saveButtonClass}
147
- onclick={handleSave}
148
- disabled={isSaving}
149
- >
150
- <template lwc:if={isSaving}>
151
- <div class="edit-file-button-spinner"></div>
152
- Saving...
153
- </template>
154
- <template lwc:else>
155
- Save
156
- </template>
157
- </button>
158
- </div>
159
- </div>
160
- </div>
161
- </div>
162
- </template>
163
- </template>
@@ -1,238 +0,0 @@
1
- import { LightningElement, api, track } from "lwc";
2
- import cx from "classnames";
3
- import { normalizeBoolean } from "dxUtils/normalizers";
4
-
5
- interface ApiResponse {
6
- success: boolean;
7
- data?: {
8
- content: string;
9
- };
10
- message?: string;
11
- error?: string;
12
- }
13
-
14
- export default class EditFile extends LightningElement {
15
- @api fileName: string = "";
16
- @api repoName: string = "";
17
- @api source: string = "";
18
- @api apiEndpoint: string = "/api/edit-file";
19
- @api project: string = "Edit File";
20
-
21
- @api
22
- get disabled() {
23
- return this._disabled;
24
- }
25
-
26
- set disabled(value) {
27
- this._disabled = normalizeBoolean(value);
28
- }
29
-
30
- @track isPopoverOpen: boolean = false;
31
- @track isLoading: boolean = false;
32
- @track isSaving: boolean = false;
33
- @track fileContent: string = "";
34
- @track originalContent: string = "";
35
- @track errorMessage: string = "";
36
-
37
- private _disabled: boolean = false;
38
-
39
- // API Configuration
40
- private static readonly FETCH_ENDPOINT = "https://1208ddd77328.ngrok-free.app/api/file-retrieval/retrieve";
41
- private static readonly SAVE_ENDPOINT = "/api/file/save";
42
-
43
- get popoverClass() {
44
- return cx(
45
- "edit-file-popover",
46
- this.isPopoverOpen && "edit-file-popover_open"
47
- );
48
- }
49
-
50
- get overlayClass() {
51
- return cx(
52
- "edit-file-overlay",
53
- this.isPopoverOpen && "edit-file-overlay_open"
54
- );
55
- }
56
-
57
- get saveButtonClass() {
58
- return cx(
59
- "edit-file-button",
60
- "edit-file-button_primary",
61
- (this.isSaving || this.isContentUnchanged) && "edit-file-button_disabled"
62
- );
63
- }
64
-
65
- get isContentUnchanged() {
66
- return this.fileContent === this.originalContent;
67
- }
68
-
69
- // Open the edit file popover
70
- async handleEditClick() {
71
- if (this.disabled) return;
72
-
73
- this.isPopoverOpen = true;
74
- this.errorMessage = "";
75
- await this.fetchFileContent();
76
- }
77
-
78
- // Fetch file content from API
79
- private async fetchFileContent() {
80
- if (!this.fileName) {
81
- this.errorMessage = "No file specified to edit";
82
- return;
83
- }
84
-
85
- this.isLoading = true;
86
-
87
- try {
88
- const response = await fetch(EditFile.FETCH_ENDPOINT, {
89
- method: "POST",
90
- headers: {
91
- "Content-Type": "application/json",
92
- },
93
- body: JSON.stringify({
94
- source: this.source,
95
- href: this.fileName
96
- })
97
- });
98
-
99
- if (!response.ok) {
100
- throw new Error(`Failed to fetch file: ${response.status}`);
101
- }
102
-
103
- const data: ApiResponse = await response.json();
104
-
105
- if (data.success && data.data !== undefined) {
106
- this.fileContent = data.data.content;
107
- this.originalContent = data.data.content;
108
- this.errorMessage = "";
109
-
110
- // Set textarea value directly using ref
111
- this.updateTextareaValue();
112
- } else {
113
- this.errorMessage = data.error || data.message || "Failed to load file content";
114
- }
115
- } catch (error) {
116
- console.error("Error fetching file content:", error);
117
- this.errorMessage = error instanceof Error ? error.message : "Failed to connect to server";
118
- } finally {
119
- this.isLoading = false;
120
- }
121
- }
122
-
123
- // Handle content change in textarea
124
- handleContentChange(event: Event) {
125
- const target = event.target as HTMLTextAreaElement;
126
- this.fileContent = target.value;
127
- }
128
-
129
- // Handle cancel action
130
- handleCancel() {
131
- this.isPopoverOpen = false;
132
- this.fileContent = "";
133
- this.originalContent = "";
134
- this.errorMessage = "";
135
- this.isLoading = false;
136
- this.isSaving = false;
137
-
138
- // Dispatch cancel event
139
- this.dispatchEvent(
140
- new CustomEvent("editcancel", {
141
- detail: { fileName: this.fileName }
142
- })
143
- );
144
- }
145
-
146
- // Handle save action
147
- async handleSave() {
148
- if (this.isSaving || this.isContentUnchanged || this.disabled) return;
149
-
150
- this.isSaving = true;
151
- this.errorMessage = "";
152
-
153
- try {
154
- const response = await fetch(EditFile.SAVE_ENDPOINT, {
155
- method: "POST",
156
- headers: {
157
- "Content-Type": "application/json",
158
- },
159
- body: JSON.stringify({
160
- fileName: this.fileName,
161
- content: this.fileContent,
162
- action: "save"
163
- })
164
- });
165
-
166
- if (!response.ok) {
167
- throw new Error(`Failed to save file: ${response.status}`);
168
- }
169
-
170
- const data: ApiResponse = await response.json();
171
-
172
- if (data.success) {
173
- this.originalContent = this.fileContent;
174
- this.isPopoverOpen = false;
175
-
176
- // Dispatch success event
177
- this.dispatchEvent(
178
- new CustomEvent("editsuccess", {
179
- detail: {
180
- fileName: this.fileName,
181
- content: this.fileContent,
182
- message: data.message || "File saved successfully"
183
- }
184
- })
185
- );
186
- } else {
187
- this.errorMessage = data.error || data.message || "Failed to save file";
188
- }
189
- } catch (error) {
190
- console.error("Error saving file:", error);
191
- this.errorMessage = error instanceof Error ? error.message : "Failed to connect to server";
192
- } finally {
193
- this.isSaving = false;
194
- }
195
- }
196
-
197
- // Handle overlay click to close popover
198
- handleOverlayClick(event: Event) {
199
- if (event.target === event.currentTarget) {
200
- this.handleCancel();
201
- }
202
- }
203
-
204
- // Handle escape key to close popover
205
- handleKeyDown(event: KeyboardEvent) {
206
- if (event.key === "Escape" && this.isPopoverOpen) {
207
- this.handleCancel();
208
- }
209
- }
210
-
211
- // Update textarea value using ref
212
- private updateTextareaValue() {
213
- // Use setTimeout to ensure DOM is updated
214
- setTimeout(() => {
215
- const textarea = this.template.querySelector('#file-content') as HTMLTextAreaElement;
216
- if (textarea && this.fileContent !== undefined) {
217
- textarea.value = this.fileContent;
218
- }
219
- }, 0);
220
- }
221
-
222
- connectedCallback() {
223
- // Add escape key listener
224
- document.addEventListener("keydown", this.handleKeyDown.bind(this));
225
- }
226
-
227
- renderedCallback() {
228
- // Ensure textarea value is set correctly when component renders
229
- if (this.isPopoverOpen && this.fileContent && !this.isLoading) {
230
- this.updateTextareaValue();
231
- }
232
- }
233
-
234
- disconnectedCallback() {
235
- // Remove escape key listener
236
- document.removeEventListener("keydown", this.handleKeyDown.bind(this));
237
- }
238
- }