webui: add line numbers to Monaco diff view comment auto-inserted text
Enhances the Monaco diff editor comment functionality to include line
numbers in the auto-inserted context text when users add comments to
selected code. The comments now show specific line information along
with the filename and editor type.
Changes include:
1. Modified sketch-monaco-view.ts submitComment method:
- Added line number calculation logic using this.selectionRange
- Single line selections show '(line N)' format
- Multi-line selections show '(lines N-M)' format
- No line info added when selectionRange is unavailable
- Line info is appended to the existing fileContext and editorLabel
2. Enhanced comment format from:
'filename [Modified]:'
to:
'filename [Modified] (line 42):'
or:
'filename [Modified] (lines 10-15):'
3. Line number extraction uses Monaco's selection tracking:
- Leverages existing selectionRange state from handleSelectionChange
- Works for both original and modified editors in diff view
- Maintains backwards compatibility when selectionRange is null
The auto-inserted comment text now provides precise line context,
making comments more useful for code review and collaboration by
clearly indicating which specific lines are being referenced.
This addresses the issue where comments lacked line number context,
making it difficult to locate the referenced code.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s2b4c8f9a1e6d7e3k
diff --git a/webui/src/web-components/sketch-monaco-view.ts b/webui/src/web-components/sketch-monaco-view.ts
index 1d7363b..56138e3 100644
--- a/webui/src/web-components/sketch-monaco-view.ts
+++ b/webui/src/web-components/sketch-monaco-view.ts
@@ -925,8 +925,20 @@
const editorLabel =
this.activeEditor === "original" ? "[Original]" : "[Modified]";
+ // Add line number information if available
+ let lineInfo = "";
+ if (this.selectionRange) {
+ const startLine = this.selectionRange.startLineNumber;
+ const endLine = this.selectionRange.endLineNumber;
+ if (startLine === endLine) {
+ lineInfo = ` (line ${startLine})`;
+ } else {
+ lineInfo = ` (lines ${startLine}-${endLine})`;
+ }
+ }
+
// Format the comment in a readable way
- const formattedComment = `\`\`\`\n${fileContext} ${editorLabel}:\n${this.selectedText}\n\`\`\`\n\n${this.commentText}`;
+ const formattedComment = `\`\`\`\n${fileContext} ${editorLabel}${lineInfo}:\n${this.selectedText}\n\`\`\`\n\n${this.commentText}`;
// Close UI before dispatching to prevent interaction conflicts
this.closeCommentBox();