feat: implement Composer block with markdown support and add to home page examples#30
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 9 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (8)
📝 WalkthroughWalkthroughAdds a client-side Composer block with editable markdown state and a live preview, registers it as a homepage example linking to ChangesComposer feature
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
app/page.tsx (1)
27-31: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove unnecessary React fragment.
The
<>fragment wrapper around the<Composer />component is redundant and can be removed for cleaner code.♻️ Proposed refactor
- component: ( - <> - <Composer /> - </> - ), + component: <Composer />,🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/page.tsx` around lines 27 - 31, Remove the redundant fragment in the component configuration by returning Composer directly from the component property, preserving the existing Composer rendering behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@registry/components/blocks/composer.tsx`:
- Line 17: Update the Composer component to call React’s useId hook at the
component’s top level, then replace the hardcoded textarea ID with the generated
value so each rendered Composer has a unique accessible identifier.
- Around line 31-35: Replace the placeholder labels in the two InputGroupButton
elements within the composer UI with meaningful user-facing labels or
appropriate icons, using a descriptive action such as “Run” for the relevant
button and removing the leftover debug text.
- Line 38: Update the component rendering around the markdown state to
instantiate and use markdown-it, rendering the parsed Markdown via
dangerouslySetInnerHTML instead of displaying raw text. Disable raw HTML or
sanitize the rendered output with an established sanitizer such as DOMPurify
before assigning it, preserving safe behavior for empty or undefined markdown.
- Line 12: Update the markdown state initialization in the composer component to
use an empty-string fallback when the text prop is undefined. Keep the existing
text value when provided, ensuring the textarea value remains controlled from
its initial render.
---
Nitpick comments:
In `@app/page.tsx`:
- Around line 27-31: Remove the redundant fragment in the component
configuration by returning Composer directly from the component property,
preserving the existing Composer rendering behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 03e6d4dd-50e9-445d-8f70-4413918fc326
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
app/page.tsxpackage.jsonregistry/components/blocks/composer.tsx
| <div className={cn("flex gap-2", className)} {...props}> | ||
| <InputGroup> | ||
| <InputGroupTextarea | ||
| id="textarea-code-32" |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use a unique ID for the textarea.
The hardcoded ID textarea-code-32 will result in duplicate IDs if multiple Composer components are rendered on the same page, which breaks accessibility and label association. Use React's useId hook at the top level of the component to generate a unique ID and assign it here.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@registry/components/blocks/composer.tsx` at line 17, Update the Composer
component to call React’s useId hook at the component’s top level, then replace
the hardcoded textarea ID with the generated value so each rendered Composer has
a unique accessible identifier.
| </InputGroupButton> | ||
| </InputGroupAddon> | ||
| </InputGroup> | ||
| <div>{markdown}</div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Parse and render Markdown securely.
The markdown state is rendered directly as raw text, which contradicts the PR objective of adding Markdown support. Although markdown-it was added to package.json, it is not being utilized here.
To resolve this, instantiate markdown-it and render the parsed output using dangerouslySetInnerHTML. Security Warning: markdown-it allows HTML by default. If users can input arbitrary Markdown, you must sanitize the output (e.g., using dompurify) to prevent Cross-Site Scripting (XSS) vulnerabilities.
🛠️ Example implementation
import markdownit from "markdown-it";
// Note: You may also need to install `@types/markdown-it` and a sanitizer like `dompurify`
const md = markdownit();
// Inside the component return:
{/* Ensure you sanitize this output to prevent XSS */}
<div dangerouslySetInnerHTML={{ __html: md.render(markdown ?? "") }} />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@registry/components/blocks/composer.tsx` at line 38, Update the component
rendering around the markdown state to instantiate and use markdown-it,
rendering the parsed Markdown via dangerouslySetInnerHTML instead of displaying
raw text. Disable raw HTML or sanitize the rendered output with an established
sanitizer such as DOMPurify before assigning it, preserving safe behavior for
empty or undefined markdown.
…view into Composer block
1 participant
Summary by CodeRabbit