Skip to content

feat(ui): render markdown in issue body and comments (#13)#138

Merged
thebtf merged 2 commits into
mainfrom
fix/issue-13-markdown-rendering
Apr 12, 2026
Merged

feat(ui): render markdown in issue body and comments (#13)#138
thebtf merged 2 commits into
mainfrom
fix/issue-13-markdown-rendering

Conversation

@thebtf
Copy link
Copy Markdown
Owner

@thebtf thebtf commented Apr 12, 2026

Summary

  • Install marked + dompurify (+ @types/dompurify) in ui/
  • Add ui/src/composables/useMarkdown.ts — thin wrapper that runs marked.parse (GFM + line breaks) then sanitizes output with DOMPurify
  • Replace plain-text {{ event.body }} in IssueDetailView.vue timeline with v-html="renderMarkdown(event.body)" and a markdown-body wrapper
  • Add scoped Tailwind CSS for rendered markdown: inline code, fenced code blocks, lists (disc/decimal), links, and paragraphs

Issue titles remain plain text. IssuesView.vue (list view) is unchanged.

Test plan

  • Open an issue with a markdown body (backtick code, **bold**, bullet list, URL)
  • Confirm body and comments render as HTML, not raw markdown
  • Confirm issue title still shows as plain text
  • Confirm XSS payload (<script>alert(1)</script>) is stripped by DOMPurify
  • cd ui && npm run build — verify clean build (no type errors, no warnings)

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).
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 12, 2026

Warning

Rate limit exceeded

@thebtf has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 3 minutes and 14 seconds before requesting another review.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 948c71d0-055d-49d4-9f02-d910803388ac

📥 Commits

Reviewing files that changed from the base of the PR and between 3ca8495 and b5fde4a.

⛔ Files ignored due to path filters (1)
  • ui/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (3)
  • ui/package.json
  • ui/src/composables/useMarkdown.ts
  • ui/src/views/IssueDetailView.vue
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/issue-13-markdown-rendering

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread ui/src/composables/useMarkdown.ts Outdated
Comment thread ui/src/views/IssueDetailView.vue Outdated
Comment thread ui/src/views/IssueDetailView.vue
@thebtf
Copy link
Copy Markdown
Owner Author

thebtf commented Apr 12, 2026

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 12, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

- 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
@thebtf thebtf merged commit 5f3bb36 into main Apr 12, 2026
1 of 2 checks passed
@thebtf thebtf deleted the fix/issue-13-markdown-rendering branch April 12, 2026 14:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant