feat: Paste images in ticket comments (#308)#313
Open
akash2017sky wants to merge 9 commits intomainfrom
Open
Conversation
- Intercept paste events on comment textarea for clipboard images - Auto-upload pasted images as attachments to Azure DevOps - Insert inline <img> tag into comment for Azure DevOps HTML rendering - Show thumbnail previews of pasted images with remove button - Loading indicator while image uploads - Updated MentionInput with onPaste prop support Closes #308 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Convert MentionInput from textarea to contentEditable div for inline image rendering - Pasted images upload as attachments and render inline in the comment input - Add attachment proxy route (/api/devops/attachments/[id]) for authenticated image serving - Add CSS for inline images in user content (comments, descriptions) - Images display inline in both the comment input and the comment thread after submit Closes #308 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds support for pasting images into ticket comments by switching the mention/comment input to a contentEditable editor, uploading pasted images as Azure DevOps attachments, and rendering them inline via a new authenticated attachment proxy route.
Changes:
- Rewrites
MentionInputto acontentEditable-based editor while preserving@mentionsuggestions. - Adds paste-image handling in the ticket reply box to auto-upload and insert inline
<img>tags. - Introduces
/api/devops/attachments/[id]proxy route and global CSS to style inline images in user-generated HTML.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| src/components/tickets/TicketDetail.tsx | Adds image paste upload flow and inserts inline <img> tags into comment content. |
| src/components/common/MentionInput.tsx | Converts textarea to contentEditable; adds paste handling and HTML/text syncing for mentions + images. |
| src/app/api/devops/attachments/[id]/route.ts | New server route to fetch/serve DevOps attachments using the user session token. |
| src/app/globals.css | Adds styling for inline images inside .user-content. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Escape img src/alt attributes and validate URLs in getTextContent - Sanitize innerHTML sync with whitelisted img tags only (XSS prevention) - Remove debug console.log from paste handler - Always preventDefault on paste to block arbitrary HTML injection - Include org in attachment proxy URL for multi-org support - Sanitize filename in Content-Disposition header (strip control chars) - Stream attachment response body instead of buffering, add size limit Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace textarea with MentionInput in CommentSection for paste support - Add onUploadAttachment prop chain: Dialog -> Content -> CommentSection - Dialog now handles attachment uploads for pasted images - Images render inline in the dialog comment input Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace description textarea with MentionInput for inline image paste - Pasted images converted to base64 data URLs and embedded in description - Images render inline in the description input while composing Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Collaborator
|
@akash2017sky , please take a look of this issue: #324 |
…-comments Keep onUploadAttachment prop and TypeChangeRequiredFields modal. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Collaborator
Author
|
Resolved merge conflict with main — kept both image paste support ( |
EdiWeeks
approved these changes
Mar 27, 2026
…-comments Keep both paste-image functionality (from this branch) and resolution editing support (from main) in TicketDetail and WorkItemDetailContent components. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/api/devops/attachments/[id]) serves files with authenticationKey Changes
src/components/common/MentionInput.tsx— Rewritten as contentEditable div with @mention support preservedsrc/components/tickets/TicketDetail.tsx— Paste handler uploads images and inserts inline<img>tagssrc/app/api/devops/attachments/[id]/route.ts— New proxy route for authenticated attachment servingsrc/app/globals.css— Inline image styling for user contentScreenshot
Test plan
Closes #308
🤖 Generated with Claude Code