feat: add markdown preview with toggle to view raw source #863
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| 'use client'; | ||
|
|
||
| import { useState } from "react"; | ||
| import { PureCodePreviewPanel } from "./pureCodePreviewPanel"; | ||
| import { PureMarkDownPreviewPanel } from "./pureMarkDownPreviewPanel"; | ||
| import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; | ||
|
|
||
| interface SourcePreviewPanelClientProps { | ||
| path: string; | ||
| repoName: string; | ||
| revisionName: string; | ||
| source: string; | ||
| language: string; | ||
| } | ||
|
|
||
| export const SourcePreviewPanelClient = ({ | ||
| source, | ||
| language, | ||
| path, | ||
| repoName, | ||
| revisionName, | ||
| }: SourcePreviewPanelClientProps) => { | ||
| const [viewMode, setViewMode] = useState<string>("preview"); | ||
| const isMarkdown = language === 'Markdown'; | ||
|
|
||
| return ( | ||
| <> | ||
| {isMarkdown && ( | ||
| <> | ||
| <div className="p-2 border-b flex"> | ||
| <ToggleGroup | ||
| type="single" | ||
| defaultValue="preview" | ||
| value={viewMode} | ||
| onValueChange={(value) => value && setViewMode(value)} | ||
| > | ||
| <ToggleGroupItem | ||
| value="preview" | ||
| aria-label="Preview" | ||
| className="w-fit px-4" | ||
| > | ||
| Preview | ||
| </ToggleGroupItem> | ||
| <ToggleGroupItem | ||
| value="code" | ||
| aria-label="Code" | ||
| className="w-fit px-4" | ||
| > | ||
| Code | ||
| </ToggleGroupItem> | ||
| </ToggleGroup> | ||
| </div> | ||
| </> | ||
| )} | ||
| {isMarkdown && viewMode === "preview" ? ( | ||
| <PureMarkDownPreviewPanel source={source} repoName={repoName} revisionName={revisionName} /> | ||
| ) : ( | ||
| <PureCodePreviewPanel | ||
| source={source} | ||
| language={language} | ||
| repoName={repoName} | ||
| path={path} | ||
| revisionName={revisionName} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| 'use client'; | ||
|
|
||
| import { ScrollArea } from "@/components/ui/scroll-area"; | ||
| import ReactMarkdown from "react-markdown"; | ||
| import remarkGfm from "remark-gfm"; | ||
| import rehypeHighlight from "rehype-highlight"; | ||
| import "github-markdown-css/github-markdown.css"; | ||
| import "highlight.js/styles/github-dark.css"; | ||
| import rehypeRaw from "rehype-raw"; | ||
|
|
||
| interface PureMarkDownPreviewPanelProps { | ||
| source: string; | ||
| repoName: string; | ||
| revisionName: string; | ||
| } | ||
|
|
||
| export const PureMarkDownPreviewPanel = ({ | ||
| source, | ||
| repoName, | ||
| revisionName, | ||
| }: PureMarkDownPreviewPanelProps) => { | ||
| const IMAGE_BASE_URL = "https://raw.githubusercontent.com/"+repoName.split("/").slice(1).join("/")+"/"+revisionName+"/"; | ||
| return ( | ||
| <ScrollArea className="h-full overflow-auto flex-1"> | ||
| <div className="w-full flex justify-center bg-white dark:bg-background"> | ||
| <article className="markdown-body dark dark:bg-background w-full max-w-4xl px-6 py-10"> | ||
|
Comment on lines
+25
to
+26
Contributor
There was a problem hiding this comment. Hardcoded
Proposed fix- <div className="w-full flex justify-center bg-white dark:bg-background">
- <article className="markdown-body dark dark:bg-background w-full max-w-4xl px-6 py-10">
+ <div className="w-full flex justify-center bg-background">
+ <article className="markdown-body w-full max-w-4xl px-6 py-10">You'll need to integrate with the app's theme (e.g., via As per coding guidelines, "Use Tailwind color classes directly (e.g., 🤖 Prompt for AI Agents
Contributor
There was a problem hiding this comment.
Thanks for the screenshot and the +1! The markdown preview feature is working well. Just to clarify—are you planning to address the theme-switching concern I flagged (the hardcoded 🧠 Learnings used |
||
| <ReactMarkdown | ||
| remarkPlugins={[remarkGfm]} | ||
| rehypePlugins={[rehypeRaw, rehypeHighlight]} | ||
|
Comment on lines
+27
to
+29
Contributor
There was a problem hiding this comment. Security:
🔒 Proposed fix: add rehype-sanitize import rehypeHighlight from "rehype-highlight";
import "github-markdown-css/github-markdown.css";
import "highlight.js/styles/github-dark.css";
import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";Then update the plugins array — - rehypePlugins={[rehypeRaw, rehypeHighlight]}
+ rehypePlugins={[rehypeRaw, rehypeSanitize, rehypeHighlight]}You may need to extend 🤖 Prompt for AI Agents
Contributor
There was a problem hiding this comment.
|
||
| components={{ | ||
| pre: ({ children }) => ( | ||
| <pre className="rounded-md overflow-x-auto"> | ||
| {children} | ||
| </pre> | ||
| ), | ||
|
|
||
| source: ({ srcSet = "", ...props }) => { | ||
| if (typeof srcSet !== "string") return null; | ||
|
|
||
| let resolvedSrcset = srcSet; | ||
|
|
||
| if ( | ||
| srcSet.startsWith(".github/") || | ||
| !srcSet.startsWith("http") | ||
| ) { | ||
| resolvedSrcset = | ||
| IMAGE_BASE_URL + | ||
| srcSet.replace(/^\.\//, ""); | ||
| } | ||
|
|
||
| return ( | ||
| <source | ||
| srcSet={resolvedSrcset} | ||
| {...props} | ||
| /> | ||
| ); | ||
| }, | ||
|
|
||
| img: ({ src = "", alt, ...props }) => { | ||
| if (typeof src !== "string") return null; | ||
|
|
||
| let resolvedSrc = src; | ||
|
|
||
| if ( | ||
| src.startsWith(".github/") || | ||
| (!src.startsWith("http://") && | ||
| !src.startsWith("https://")) | ||
| ) { | ||
| resolvedSrc = | ||
| IMAGE_BASE_URL + | ||
| src.replace(/^\.\//, ""); | ||
| } | ||
|
|
||
| return ( | ||
| // eslint-disable-next-line @next/next/no-img-element | ||
| <img | ||
| src={resolvedSrc} | ||
| alt={alt || ""} | ||
| className="max-w-full h-auto" | ||
| loading="lazy" | ||
| {...props} | ||
| /> | ||
| ); | ||
| }, | ||
|
|
||
| video: ({ src = "", ...props }) => { | ||
| return ( | ||
| <video | ||
| src={src} | ||
| controls | ||
| preload="metadata" | ||
| className="max-w-full h-auto my-4" | ||
| {...props} | ||
| > | ||
| Your browser does not support the video | ||
| tag. | ||
| </video> | ||
| ); | ||
| }, | ||
|
Comment on lines
+86
to
+99
Contributor
There was a problem hiding this comment. Video The 🤖 Prompt for AI Agents |
||
|
|
||
| code({ className, children, ...props }) { | ||
| const isBlock = | ||
| className?.startsWith("language-"); | ||
|
|
||
| if (!isBlock) { | ||
| return ( | ||
| <code | ||
| className="px-1 py-0.5 rounded" | ||
| {...props} | ||
| > | ||
| {children} | ||
| </code> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <code className={className} {...props}> | ||
| {children} | ||
| </code> | ||
| ); | ||
| }, | ||
|
|
||
| table: ({ children }) => ( | ||
| <div className="overflow-x-auto"> | ||
| <table>{children}</table> | ||
| </div> | ||
| ), | ||
|
|
||
| a: ({ children, href, ...props }) => { | ||
| // Check if link is a video URL | ||
| if ( | ||
| href && | ||
| href.match( | ||
| /^https:\/\/github\.com\/user-attachments\/assets\/.+$/, | ||
| ) | ||
| ) { | ||
| return ( | ||
| <video | ||
| src={href} | ||
| controls | ||
| preload="metadata" | ||
| className="max-w-full h-auto my-4" | ||
| > | ||
| Your browser does not support the | ||
| video tag. | ||
| </video> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <a | ||
| href={href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="text-blue-600 hover:underline" | ||
| {...props} | ||
| > | ||
| {children} | ||
| </a> | ||
| ); | ||
| }, | ||
| }} | ||
| > | ||
| {source} | ||
| </ReactMarkdown> | ||
| </article> | ||
| </div> | ||
| </ScrollArea> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group" | ||
| import { type VariantProps } from "class-variance-authority" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
| import { toggleVariants } from "@/components/ui/toggle" | ||
|
|
||
| const ToggleGroupContext = React.createContext< | ||
| VariantProps<typeof toggleVariants> | ||
| >({ | ||
| size: "default", | ||
| variant: "default", | ||
| }) | ||
|
|
||
| const ToggleGroup = React.forwardRef< | ||
| React.ElementRef<typeof ToggleGroupPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & | ||
| VariantProps<typeof toggleVariants> | ||
| >(({ className, variant, size, children, ...props }, ref) => ( | ||
| <ToggleGroupPrimitive.Root | ||
| ref={ref} | ||
| className={cn("flex items-center justify-center gap-1", className)} | ||
| {...props} | ||
| > | ||
| <ToggleGroupContext.Provider value={{ variant, size }}> | ||
| {children} | ||
| </ToggleGroupContext.Provider> | ||
| </ToggleGroupPrimitive.Root> | ||
| )) | ||
|
|
||
| ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName | ||
|
|
||
| const ToggleGroupItem = React.forwardRef< | ||
| React.ElementRef<typeof ToggleGroupPrimitive.Item>, | ||
| React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & | ||
| VariantProps<typeof toggleVariants> | ||
| >(({ className, children, variant, size, ...props }, ref) => { | ||
| const context = React.useContext(ToggleGroupContext) | ||
|
|
||
| return ( | ||
| <ToggleGroupPrimitive.Item | ||
| ref={ref} | ||
| className={cn( | ||
| toggleVariants({ | ||
| variant: context.variant || variant, | ||
| size: context.size || size, | ||
| }), | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </ToggleGroupPrimitive.Item> | ||
| ) | ||
| }) | ||
|
|
||
| ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName | ||
|
|
||
| export { ToggleGroup, ToggleGroupItem } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMAGE_BASE_URLis hardcoded to GitHub'sraw.githubusercontent.com.This component is used in a codebase that supports multiple code hosts (GitHub, GitLab, Bitbucket, Azure DevOps — as evidenced by ADO handling in
codePreviewPanel.tsxLine 42). Hardcoding the URL to GitHub means image resolution will break for all non-GitHub repositories.Consider either:
🤖 Prompt for AI Agents
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think a more complete solution may be to serve up assets from our own apis instead of having to hit the code host. That is a larger change however, so I'm not opposed with having something like what you have now as a MVP solution.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@brendan-kellamThanks for the context! That makes sense—serving assets through your own APIs would indeed be a cleaner and more maintainable solution that works uniformly across all code hosts.I understand you're okay with the current GitHub-hardcoded approach as an MVP to get the feature out. Would you like me to create a follow-up issue to track the future work of serving markdown assets (images, videos, etc.) through Sourcebot's own APIs instead of direct code-host URLs? That way the technical debt is documented and can be prioritized later.
✏️ Learnings added