Skip to content

highlight the json content of the api requests #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fulopkovacs wants to merge 1 commit into
base: main
Choose a base branch
from
Open

highlight the json content of the api requests #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-resizable-panels": "^3.0.6",
"shiki": "^3.21.0",
"sonner": "^2.0.7",
"tailwind-merge": "^3.4.0",
"tailwindcss": "^4.1.17",
Expand Down
66 changes: 66 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 5 additions & 3 deletions src/components/ApiRequestsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { userPreferencesCollection } from "@/collections/UserPreferences";
import { cn } from "@/lib/utils";
import { HighlightWrapper } from "@/utils/highlight-collection-related-info";
import { USER_PLACEHOLDER } from "@/utils/USER_PLACEHOLDER_CONSTANT";
import { CodeHighlighter } from "./CodeHighlighter";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import {
Expand Down Expand Up @@ -58,6 +59,9 @@ function JsonViewer({
return null;
}

const jsonString =
typeof data === "string" ? data : JSON.stringify(data, null, 2);

return (
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors">
Expand All @@ -69,9 +73,7 @@ function JsonViewer({
{label}
</CollapsibleTrigger>
<CollapsibleContent>
<pre className="mt-1 whitespace-pre-wrap p-2 bg-muted/50 rounded text-xs overflow-x-auto max-h-40 overflow-y-auto">
{typeof data === "string" ? data : JSON.stringify(data, null, 2)}
</pre>
<CodeHighlighter code={jsonString} language="json" />
</CollapsibleContent>
</Collapsible>
);
Expand Down
55 changes: 55 additions & 0 deletions src/components/CodeHighlighter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { useEffect, useState } from "react";
import { type BundledLanguage, codeToHtml } from "shiki";

type CodeHighlighterProps = {
code: string;
language?: BundledLanguage;
};

const className =
"mt-1 rounded-md text-xs overflow-x-auto max-h-40 overflow-y-auto [&_.shiki]:p-3! [&_.shiki]:m-0! [&_.shiki]:bg-muted/50 [&_.shiki]:border [&_.shiki]:border-border/50 [&_.shiki]:rounded-md! [&_.shiki]:[--shiki-light-bg:transparent] [&_.shiki]:[--shiki-dark-bg:transparent] [&_.shiki_span]:[--shiki-light-bg:transparent] [&_.shiki_span]:[--shiki-dark-bg:transparent]";

export function CodeHighlighter({
code,
language = "json",
}: CodeHighlighterProps) {
const [html, setHtml] = useState<string | null>(null);

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]);
Comment on lines +18 to +37
Copy link

@coderabbitai coderabbitai bot Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
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.


if (html === null) {
// Show plain text while loading
return (
<pre className={className}>
<code>{code}</code>
</pre>
);
}

return (
<div
className={className}
// biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki output is safe
dangerouslySetInnerHTML={{ __html: html }}
/>
);
}