feat: markdown support for gh issues / pull requests

[Shironex]

Add Markdown support for gh pr and issues

Preview

Summary by CodeRabbit

• New Features
  • GitHub issue and pull request views now render richer Markdown: raw HTML, embedded elements and images display correctly with improved styling.
  • Rendered HTML is sanitized to maintain safe content while allowing useful embedded markup.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Added rehype-raw and rehype-sanitize dependencies and updated the Markdown rendering pipeline to allow sanitized raw HTML; GitHub issue and PR body rendering were switched from prose-wrapped divs to the unified Markdown component and some unused icon imports were removed.

Changes

Cohort / File(s)	Summary
Dependencies apps/ui/package.json, package.json	Added rehype-raw (^7.0.0) and rehype-sanitize (^6.0.0) to enable and sanitize raw HTML in Markdown rendering.
Markdown Component apps/ui/src/components/ui/markdown.tsx	Integrated rehypeRaw and rehypeSanitize into ReactMarkdown rehypePlugins; enabled rendering of raw HTML (including images) and added image-specific styling classes.
GitHub Views apps/ui/src/components/views/github-issues-view.tsx, apps/ui/src/components/views/github-prs-view.tsx	Replaced prose-wrapped divs with the unified Markdown component for rendering issue/PR bodies; removed unused icon imports in PR view.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Inspect sanitization configuration to ensure no unsafe HTML bypass.
• Verify Markdown styling and image class behavior in both issue and PR views.
• Confirm removed icon imports are not used elsewhere in the files.

Poem

🐰 I nibble at bytes where raw HTML hides,

I hop through markdown where tidy code strides,
Sanitized petals on images gleam,
One component now gardens the content stream,
Hooray — a rabbit's small, delighted scheme 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: markdown support for gh issues / pull requests' directly and accurately describes the main change: adding Markdown support for GitHub issues and pull requests rendering.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/gh-issues-markdow-support

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a0fd19f and 73e7a85.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• apps/ui/src/components/ui/markdown.tsx
• package.json

✅ Files skipped from review due to trivial changes (1)

• package.json

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/ui/src/components/ui/markdown.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: e2e

---

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

[gemini-code-assist]

Summary of Changes

Hello @Shironex, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a crucial enhancement to the application's UI by upgrading its Markdown rendering capabilities. The primary goal is to ensure that Markdown content, particularly within GitHub issues and pull requests, is displayed accurately, including any embedded raw HTML or images. This change provides a more faithful and complete representation of the original content, improving the user experience when viewing detailed descriptions.

Highlights

• Enhanced Markdown Rendering: The Markdown component has been significantly improved to support rendering raw HTML elements, including images, embedded within Markdown content. This is achieved by integrating the rehype-raw plugin.
• Improved GitHub Issues and PRs Display: The views for GitHub Issues and Pull Requests now utilize the enhanced Markdown component to display their respective bodies, ensuring that rich content, such as images and custom HTML, is rendered correctly.
• New Dependency Added: The rehype-raw package has been added as a new dependency to enable the parsing and rendering of raw HTML within Markdown.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces markdown rendering for GitHub issue and pull request bodies, which is a great enhancement for user experience. It correctly uses react-markdown and the new rehype-raw plugin to support HTML content. However, there is a significant security concern with using rehype-raw on user-generated content without proper sanitization, which could lead to Cross-Site Scripting (XSS) attacks. I've added comments with suggestions to use rehype-sanitize to mitigate this risk. Please also remember to add rehype-sanitize as a dependency in package.json. The rest of the changes look good.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6a8b206 and a0fd19f.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (4)

• apps/ui/package.json
• apps/ui/src/components/ui/markdown.tsx
• apps/ui/src/components/views/github-issues-view.tsx
• apps/ui/src/components/views/github-prs-view.tsx

🧰 Additional context used

🧬 Code graph analysis (2)

apps/ui/src/components/views/github-prs-view.tsx (1)

apps/ui/src/components/ui/markdown.tsx (1)

• Markdown (15-50)

apps/ui/src/components/views/github-issues-view.tsx (1)

apps/ui/src/components/ui/markdown.tsx (1)

• Markdown (15-50)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: e2e

🔇 Additional comments (7)

apps/ui/src/components/views/github-issues-view.tsx (2)

6-6: Good addition of the Markdown component import.

This change consolidates markdown rendering logic, improving code maintainability and consistency across the application.

---

244-248: Refactoring to use the Markdown component improves consistency.

The change from a styled div to the unified Markdown component is a good improvement. However, be aware that the Markdown component now uses rehype-raw, which renders raw HTML from GitHub issue bodies. Ensure that:

1. GitHub's API returns sanitized content to prevent XSS attacks, or
2. Additional sanitization is implemented in the Markdown component using rehype-sanitize

Since this content is user-generated (GitHub issues can be created by any user with repository access), this could be a security concern if malicious HTML/JavaScript is present in issue bodies.

Based on the security concern raised in apps/ui/package.json regarding rehype-raw usage.

apps/ui/src/components/views/github-prs-view.tsx (2)

6-6: Good refactoring to use the Markdown component consistently.

This change aligns PR body rendering with the same pattern used for issues, improving code consistency and maintainability. However, the same XSS security concern mentioned in the github-issues-view.tsx review applies here: ensure GitHub's API returns sanitized content or implement additional sanitization in the Markdown component.

Based on the security concern raised in apps/ui/package.json regarding rehype-raw usage.

Also applies to: 290-294

---

2-2: Icons properly removed and unused.

The AlertCircle and Circle icons are not referenced elsewhere in the file, confirming the import removal is correct.

apps/ui/src/components/ui/markdown.tsx (2)

42-43: Good addition of image styling.

The image styling classes are comprehensive and provide appropriate constraints (max-width, rounded corners, border) that will work well with the existing prose styles.

---

13-13: Documentation update accurately reflects the new capability.

The comment correctly documents that the component now supports raw HTML elements including images.

apps/ui/package.json (1)

75-75: Verify use of allowDangerousHtml with remark-rehype before finalizing this dependency.

The allowDangerousHtml option in remark-rehype is dangerous; otherwise, rehype-raw is safe. Version 7.0.0 is the latest and only non-vulnerable version available.

If allowDangerousHtml: true is configured in remark-rehype to process untrusted GitHub content, confirm that rehype-sanitize is used after rehype-raw to strip potentially harmful HTML. Otherwise, if allowDangerousHtml is not enabled, this plugin poses no additional XSS risk.