feat(web): render GitHub PR links as chips in RichMarkdown#274
Conversation
Detect GitHub PR URLs in markdown links and render them as a styled `PrChip` (icon + owner/repo + #number), matching the existing thread mention chip pattern. The matcher accepts canonical, `/pulls/`, `www.`, trailing-path and anchor/query shapes. Also adds a JS-based adjacent-whitespace detector so both PR and thread chips pick up a tiny inline margin only when surrounding text actually has spaces, keeping flush placements (e.g. punctuation) tight. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
📝 WalkthroughWalkthroughAdds a PrChip component and GitHub PR URL parsing; rich-markdown now renders matching PR links as inline PR chips and adjusts surrounding whitespace; playground adds a PR-mention sample variant. ChangesGitHub PR Chip System
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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.
🧹 Nitpick comments (1)
apps/web/src/components/markdown/rich-markdown.tsx (1)
13-27: ⚡ Quick winUse Zod to validate parsed GitHub PR data before rendering.
The
parseGithubPrUrlfunction (lines 16-25) validates the URL pattern with regex but lacks explicit schema validation for the returned data shape. Per coding guidelines, add a small Zod schema to validate the parsed object before returning it, ensuring theowner,repo, andnumberfields meet expected types and constraints.🤖 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 `@apps/web/src/components/markdown/rich-markdown.tsx` around lines 13 - 27, Add Zod validation to parseGithubPrUrl: define a small Zod schema (e.g., GithubPrSchema) that requires owner and repo as non-empty strings and number as a positive integer, then run safeParse/parse against the object you build from the regex match inside parseGithubPrUrl; if validation fails return null, otherwise return the validated object (owner, repo, number, url). Ensure you import z from "zod" and use the schema name (GithubPrSchema) when validating before returning.
🤖 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.
Nitpick comments:
In `@apps/web/src/components/markdown/rich-markdown.tsx`:
- Around line 13-27: Add Zod validation to parseGithubPrUrl: define a small Zod
schema (e.g., GithubPrSchema) that requires owner and repo as non-empty strings
and number as a positive integer, then run safeParse/parse against the object
you build from the regex match inside parseGithubPrUrl; if validation fails
return null, otherwise return the validated object (owner, repo, number, url).
Ensure you import z from "zod" and use the schema name (GithubPrSchema) when
validating before returning.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0009aee8-87e6-4129-87f5-57296122cc07
📒 Files selected for processing (3)
apps/web/src/components/chips.tsxapps/web/src/components/markdown/rich-markdown.tsxapps/web/src/routes/app/_workspace/_main/playground/rich-markdown.tsx
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 3 files
Confidence score: 5/5
- Automated review surfaced no issues in the provided summaries.
- No files require special attention.
Auto-approved: This PR adds a PrChip component and regex-based detection to render GitHub pull request URLs as inline chips in RichMarkdown, with careful handling of edge cases and spacing; the changes are isolated to UI rendering, do not affect business logic or critical paths, and the AI review found no issues.
Re-trigger cubic
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/web/src/components/markdown/rich-markdown.tsx (1)
151-164: ⚡ Quick winExtract duplicated sibling-whitespace logic into a shared hook.
PrChipInlineandThreadMentioncurrently duplicate the same ref/state/layout-effect block. A small shared hook (e.g.useAdjacentTextWhitespace) will prevent behavior drift and reduce maintenance overhead.Proposed refactor
+function useAdjacentTextWhitespace() { + const ref = useRef<HTMLSpanElement>(null); + const [hasLeadingSpace, setHasLeadingSpace] = useState(false); + const [hasTrailingSpace, setHasTrailingSpace] = useState(false); + + useLayoutEffect(() => { + const prev = ref.current?.previousSibling; + const next = ref.current?.nextSibling; + setHasLeadingSpace( + prev?.nodeType === Node.TEXT_NODE && /\s$/.test(prev.textContent ?? ""), + ); + setHasTrailingSpace( + next?.nodeType === Node.TEXT_NODE && /^\s/.test(next.textContent ?? ""), + ); + }); + + return { ref, hasLeadingSpace, hasTrailingSpace }; +}Also applies to: 192-205
🤖 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 `@apps/web/src/components/markdown/rich-markdown.tsx` around lines 151 - 164, Duplicate logic that inspects adjacent text-node whitespace (the useRef/useLayoutEffect block that sets hasLeadingSpace and hasTrailingSpace) appears in PrChipInline and ThreadMention; extract it into a small reusable hook (e.g., useAdjacentTextWhitespace) that accepts no args and returns { ref, hasLeadingSpace, hasTrailingSpace } or returns a ref plus the two booleans, move the current DOM checks (/\s$/ and /^\s/) and Node.TEXT_NODE checks into that hook, and replace the duplicated blocks in PrChipInline and ThreadMention with calls to the new hook to centralize behavior and avoid drift.
🤖 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.
Nitpick comments:
In `@apps/web/src/components/markdown/rich-markdown.tsx`:
- Around line 151-164: Duplicate logic that inspects adjacent text-node
whitespace (the useRef/useLayoutEffect block that sets hasLeadingSpace and
hasTrailingSpace) appears in PrChipInline and ThreadMention; extract it into a
small reusable hook (e.g., useAdjacentTextWhitespace) that accepts no args and
returns { ref, hasLeadingSpace, hasTrailingSpace } or returns a ref plus the two
booleans, move the current DOM checks (/\s$/ and /^\s/) and Node.TEXT_NODE
checks into that hook, and replace the duplicated blocks in PrChipInline and
ThreadMention with calls to the new hook to centralize behavior and avoid drift.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e26c1e5e-8758-4181-9a0a-09cd0e6bef6d
📒 Files selected for processing (1)
apps/web/src/components/markdown/rich-markdown.tsx
There was a problem hiding this comment.
0 issues found across 1 file (changes from recent commits).
Auto-approved: The change adds a new feature to render GitHub PR links as inline chips in RichMarkdown with careful regex and Zod validation, and the only modifications to existing code are minor spacing adjustments to thread chips, all within a single frontend component that poses low risk to business logic...
Re-trigger cubic
1 participant
Summary
RichMarkdownlink rendering and show them as inlinePrChipcontrols (owner/repo, PR icon, number) instead of plain anchors.PrChipinchips.tsxand a playground variant that exercises/pull/,/pulls/,www, anchors, and trailing paths so non-PR GitHub links stay normal links.contentsspan and adjust adjacent text spacing so inline chips align cleanly next to markdown text.Test plan
RichMarkdownwith a GitHub PR link and a thread mention.Made with Cursor
Summary by cubic
Render GitHub PR links as inline chips in
RichMarkdownwith schema validation and cleaner inline spacing; non-PR GitHub links remain unchanged.PrChipand detection + Zod validation for GitHub PR URLs inRichMarkdown; supports/pull/,/pulls/,www, anchors, and trailing paths.contentsspans with whitespace-aware margins for clean inline alignment.Written for commit 385b516. Summary will update on new commits. Review in cubic
Summary by CodeRabbit
New Features
Style