highlight the json content of the api requests #44
Conversation
WalkthroughAdded shiki dependency and created a new CodeHighlighter component that renders syntax-highlighted code asynchronously using Shiki. Integrated CodeHighlighter into ApiRequestsPanel for JSON rendering with fallback support during highlighting. Changes
Sequence Diagram(s)sequenceDiagram
participant ApiRequestsPanel
participant CodeHighlighter
participant Shiki
ApiRequestsPanel->>CodeHighlighter: Render with code & language
CodeHighlighter->>CodeHighlighter: Show fallback <pre><code> while loading
CodeHighlighter->>Shiki: codeToHtml(code, language)
Shiki-->>CodeHighlighter: Return highlighted HTML
CodeHighlighter->>CodeHighlighter: Update state with HTML
CodeHighlighter->>CodeHighlighter: Render highlighted HTML via dangerouslySetInnerHTML
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
🚀 Preview DeploymentStatus: ✅ Ready! Preview URL: Open Preview Commit: Built and deployed successfully |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/components/CodeHighlighter.tsx:
- Around line 18-37: The async call to codeToHtml in the CodeHighlighter
useEffect lacks error handling, so if it rejects the component can hang; update
the promise chain to handle rejections (or use try/catch with an async IIFE) and
when an error occurs, check the cancelled flag, log the error (e.g.,
console.error or a logger), and setHtml to a safe fallback (empty string or an
error placeholder) so the component exits the loading state; make the change
around the codeToHtml(...).then(...) block and also ensure the cancelled check
is applied before calling setHtml in both success and error paths.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
package.jsonsrc/components/ApiRequestsPanel.tsxsrc/components/CodeHighlighter.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
**/package.json: Always usepnpm installinstead ofnpm installfor installing dependencies
Always usepnpm add <package>instead ofnpm install <package>for adding packages
Always usepnpm add -D <package>instead ofnpm install --save-dev <package>for adding dev dependencies
Always usepnpm remove <package>instead ofnpm uninstall <package>for removing packages
Always usepnpm run <script>instead ofnpm run <script>for running scripts
Always usepnpm dlx <command>instead ofnpx <command>
Always usepnpm create <template>instead ofnpm create <template>
Files:
package.json
package.json
📄 CodeRabbit inference engine (AGENTS.md)
package.json: Usepnpm devfor starting the development server
Usepnpm buildfor production build
Usepnpm run testfor running tests
Usepnpm lintfor linting
Usepnpm typecheckfor type checking
Usepnpm formatfor code formatting
Usepnpm db.generateto generate database migrations
Usepnpm db.local.migrateto apply local migrations
Usepnpm db.prod.migrateto apply production migrations
Files:
package.json
src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Always ensure no formatting/linting issues exist in code - use
pnpm check --fixto automatically fix issues
Files:
src/components/ApiRequestsPanel.tsxsrc/components/CodeHighlighter.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer functions over arrow functions for React components
Files:
src/components/ApiRequestsPanel.tsxsrc/components/CodeHighlighter.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer
typeoverinterfacefor type definitions
Files:
src/components/ApiRequestsPanel.tsxsrc/components/CodeHighlighter.tsx
🧠 Learnings (2)
📚 Learning: 2025-12-24T15:25:07.106Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.
Applied to files:
src/components/ApiRequestsPanel.tsxsrc/components/CodeHighlighter.tsx
📚 Learning: 2025-12-28T23:34:13.416Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.
Applied to files:
src/components/ApiRequestsPanel.tsxsrc/components/CodeHighlighter.tsx
🧬 Code graph analysis (2)
src/components/ApiRequestsPanel.tsx (1)
src/components/CodeHighlighter.tsx (1)
CodeHighlighter(12-55)
src/components/CodeHighlighter.tsx (1)
vite.config.ts (1)
pre(44-51)
🪛 ast-grep (0.40.4)
src/components/CodeHighlighter.tsx
[warning] 51-51: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
⏰ 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: Deploy Preview
🔇 Additional comments (7)
package.json (1)
67-67: Consider aligning shiki version with existing @shikijs packages.The existing
@shikijs/rehypeand@shikijs/transformersare at^3.20.0(lines 42-43), while this addsshikiat^3.21.0. This should work fine due to semver, but you may want to align versions for consistency.src/components/ApiRequestsPanel.tsx (2)
62-64: LGTM!The
jsonStringcomputation correctly handles both string and non-string data, with appropriate pretty-printing for objects.
76-76: LGTM!Clean integration of the
CodeHighlightercomponent with the appropriate props.src/components/CodeHighlighter.tsx (4)
1-7: LGTM!Clean imports and type definition following the coding guidelines (using
typeoverinterface).
9-10: Styling approach is reasonable.The use of child selectors and
!importantmodifiers is appropriate here to override Shiki's default inline styles.
39-46: Good fallback pattern.Showing plain text immediately while the async highlighting loads provides a good user experience.
48-54: Usage of dangerouslySetInnerHTML is acceptable here.The static analysis warning is a general caution, but Shiki's
codeToHtmloutput is safe — it properly escapes input and generates deterministic HTML based on language grammar. The biome-ignore comment appropriately documents this.
| useEffect(() => { | ||
| let cancelled = false; | ||
|
|
||
| codeToHtml(code, { | ||
| lang: language, | ||
| themes: { | ||
| light: "material-theme-lighter", | ||
| dark: "material-theme-darker", | ||
| }, | ||
| defaultColor: false, | ||
| }).then((result) => { | ||
| if (!cancelled) { | ||
| setHtml(result); | ||
| } | ||
| }); | ||
|
|
||
| return () => { | ||
| cancelled = true; | ||
| }; | ||
| }, [code, language]); |
There was a problem hiding this comment.
Add error handling for the async highlighting operation.
If codeToHtml rejects (e.g., invalid language), the component will silently stay in the loading state indefinitely.
🛠️ Proposed fix
useEffect(() => {
let cancelled = false;
codeToHtml(code, {
lang: language,
themes: {
light: "material-theme-lighter",
dark: "material-theme-darker",
},
defaultColor: false,
- }).then((result) => {
- if (!cancelled) {
- setHtml(result);
- }
- });
+ })
+ .then((result) => {
+ if (!cancelled) {
+ setHtml(result);
+ }
+ })
+ .catch(() => {
+ // On error, keep showing plain text fallback
+ if (!cancelled) {
+ setHtml(null);
+ }
+ });
return () => {
cancelled = true;
};
}, [code, language]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| let cancelled = false; | |
| codeToHtml(code, { | |
| lang: language, | |
| themes: { | |
| light: "material-theme-lighter", | |
| dark: "material-theme-darker", | |
| }, | |
| defaultColor: false, | |
| }).then((result) => { | |
| if (!cancelled) { | |
| setHtml(result); | |
| } | |
| }); | |
| return () => { | |
| cancelled = true; | |
| }; | |
| }, [code, language]); | |
| useEffect(() => { | |
| let cancelled = false; | |
| codeToHtml(code, { | |
| lang: language, | |
| themes: { | |
| light: "material-theme-lighter", | |
| dark: "material-theme-darker", | |
| }, | |
| defaultColor: false, | |
| }) | |
| .then((result) => { | |
| if (!cancelled) { | |
| setHtml(result); | |
| } | |
| }) | |
| .catch(() => { | |
| // On error, keep showing plain text fallback | |
| if (!cancelled) { | |
| setHtml(null); | |
| } | |
| }); | |
| return () => { | |
| cancelled = true; | |
| }; | |
| }, [code, language]); |
🤖 Prompt for AI Agents
In @src/components/CodeHighlighter.tsx around lines 18 - 37, The async call to
codeToHtml in the CodeHighlighter useEffect lacks error handling, so if it
rejects the component can hang; update the promise chain to handle rejections
(or use try/catch with an async IIFE) and when an error occurs, check the
cancelled flag, log the error (e.g., console.error or a logger), and setHtml to
a safe fallback (empty string or an error placeholder) so the component exits
the loading state; make the change around the codeToHtml(...).then(...) block
and also ensure the cancelled check is applied before calling setHtml in both
success and error paths.
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.