feat(ui): render markdown in issue body and comments (#13)#138
Conversation
Add marked + DOMPurify pipeline via useMarkdown composable; replace plain-text event.body rendering in IssueDetailView with sanitized v-html and scoped Tailwind markdown styles (code, pre, lists, links, paragraphs).
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 3 minutes and 14 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Code Review
This pull request implements Markdown support for issue event bodies by integrating the marked and dompurify libraries. The feedback suggests updating the marked configuration to use the modern use() API and parseSync() for synchronous processing. Additionally, it is recommended to add the break-words CSS class to prevent layout overflow and to include explicit styles for markdown headings, which are otherwise reset by Tailwind CSS.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
- Replace deprecated marked.setOptions() with marked.use() (marked v5+) - Use marked.parseSync() for explicit synchronous parsing - Add break-words class to prevent overflow on long URLs/code - Add h1/h2/h3 heading styles to markdown-body scope (Tailwind resets) Reviewer comment ids: PRRC_kwDORY-ek8629gpn, PRRC_kwDORY-ek8629gpr, PRRC_kwDORY-ek8629gpt Thread ids: PRRT_kwDORY-ek856XwQ-, PRRT_kwDORY-ek856XwRA, PRRT_kwDORY-ek856XwRC
Summary
marked+dompurify(+@types/dompurify) inui/ui/src/composables/useMarkdown.ts— thin wrapper that runsmarked.parse(GFM + line breaks) then sanitizes output with DOMPurify{{ event.body }}inIssueDetailView.vuetimeline withv-html="renderMarkdown(event.body)"and amarkdown-bodywrapperIssue titles remain plain text.
IssuesView.vue(list view) is unchanged.Test plan
**bold**, bullet list, URL)<script>alert(1)</script>) is stripped by DOMPurifycd ui && npm run build— verify clean build (no type errors, no warnings)