refactor: replace regex markdown renderer with react markdown#94
refactor: replace regex markdown renderer with react markdown#94Zahnentferner merged 5 commits intoStabilityNexus:mainfrom
Conversation
|
Warning Rate limit exceeded
⌛ 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: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughReplaced custom regex-based markdown rendering with the Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
There was a problem hiding this comment.
Pull request overview
Refactors the blog’s markdown rendering pipeline to replace the custom regex-based HTML renderer with react-markdown, addressing formatting issues (notably code block indentation) reported in #92.
Changes:
- Rewrote
MarkdownRendererto render markdown viareact-markdownwith Tailwind-styled element overrides. - Added
react-markdownas a dependency and updated lockfiles accordingly.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| lib/markdown-renderer.tsx | Replaces regex + dangerouslySetInnerHTML rendering with react-markdown and custom component mappings (including code/pre/img handling). |
| package.json | Adds react-markdown dependency. |
| package-lock.json | Locks react-markdown (and transitive deps) into the npm lockfile. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
lib/markdown-renderer.tsx
Outdated
| code: ({ inline, className, children, ...props }: { inline?: boolean; className?: string; children?: React.ReactNode }) => { | ||
| if (inline) { | ||
| return <code className="bg-gray-100 px-1 py-0.5 rounded text-sm" {...props}>{children}</code> |
There was a problem hiding this comment.
In the custom code renderer, ...props is spread onto the <code> element but react-markdown typically includes non-DOM props (notably node) in the props object. This will cause React warnings about unknown DOM attributes. Destructure and omit node (and only forward valid HTML props) before spreading, or avoid spreading entirely.
| code: ({ inline, className, children, ...props }: { inline?: boolean; className?: string; children?: React.ReactNode }) => { | |
| if (inline) { | |
| return <code className="bg-gray-100 px-1 py-0.5 rounded text-sm" {...props}>{children}</code> | |
| code: ({ inline, className, children }: { inline?: boolean; className?: string; children?: React.ReactNode }) => { | |
| if (inline) { | |
| return <code className="bg-gray-100 px-1 py-0.5 rounded text-sm">{children}</code> |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@lib/markdown-renderer.tsx`:
- Around line 1-4: This file is a client-side React component but is missing the
"use client" directive and contains a hardcoded BASE_PATH that may conflict with
next.config.mjs; add the "use client" directive as the very first line of
lib/markdown-renderer.tsx, and replace the hardcoded BASE_PATH logic in the
BASE_PATH constant (used by ReactMarkdown rendering) so it derives from an
authoritative source—either read a NEXT_PUBLIC_BASE_PATH environment variable or
align it with the Next.js config (set to '' if next.config.mjs defines basePath:
''), ensuring images/paths rendered by ReactMarkdown get the correct prefix.
- Around line 40-44: The custom link renderer currently forces target="_blank"
for all links (the anonymous renderer in lib/markdown-renderer.tsx: a: ({ href,
children }) => ...), causing internal links to open in new tabs; change it to
detect internal vs external links (treat hrefs starting with "/" or same-origin
URLs as internal) and only add target="_blank" and rel="noopener noreferrer" for
external links, leaving internal links as normal anchors (or use client-side
navigation like Next.js Link if desired) so internal navigation stays in the
same tab.
- Around line 28-34: The code renderer relies on a removed `inline` prop
(react-markdown v9) so inline styling never runs; update the `code` renderer
(the code property in your Markdown renderers) to detect block vs inline by
inspecting the incoming className for a language pattern (e.g. /language-/). If
className contains a language class, render the block form (wrap in a pre with a
code element carrying the className so syntax highlighters work); otherwise
render the inline code element with your existing inline styling. Keep the
symbol names the same (the `code` renderer prop and the className variable) so
changes are localized.
In `@package.json`:
- Around line 22-23: Update the react-markdown dependency version in
package.json from "^9.0.1" to "^9.0.2" to pick up React 19 TypeScript fixes;
open package.json, locate the "react-markdown" entry and change its version spec
to "^9.0.2", then run your package manager (npm/yarn/pnpm) to reinstall and
update lockfile.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 33b429e8-7c7f-4305-ae0a-bb94319022b5
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
lib/markdown-renderer.tsxpackage.json
Refactor: Replace regex markdown renderer with
react-markdownAddressed Issues:
Fixes #92
Screenshots/Recordings:
before:
after:
Additional Notes:
Replaces the broken regex-based markdown renderer with
react-markdown+gray-matter. Only two files changed —lib/markdown-renderer.tsx(full rewrite) andpackage.json(addedreact-markdown). No other files were touched. All existing Tailwind styles, image base path handling, and component API are preserved.AI Usage Disclosure:
I have used the following AI models and tools: Claude (Anthropic)
Checklist
Summary by CodeRabbit
Release Notes
Bug Fixes
Refactor