Code Viewer

Install it

Source

1"use client";
2 
3import * as React from "react";
4 
5import type { ViewerResource } from "@/lib/viewer-resource";
6 
7import { CodeViewerFallback } from "./code-viewer-chrome";
8import { CodeViewerContent } from "./code-viewer-content";
9import type { CodeViewerHandle, CodeViewerProps } from "./code-viewer-types";
10import { PlainTextViewerFrame } from "./plain-text-viewer-frame";
11 
12export type {
13  CodeDocumentSource,
14  CodeLineRange,
15  CodeViewerHandle,
16  CodeViewerProps,
17} from "./code-viewer-types";
18 
19export type CodeResourceContentProps = Omit<CodeViewerProps, "source"> & {
20  resource: ViewerResource;
21};
22 
23export const CodeViewer = React.forwardRef<CodeViewerHandle, CodeViewerProps>(
24  function CodeViewer(props, ref) {
25    return (
26      <PlainTextViewerFrame
27        props={props}
28        forwardedRef={ref}
29        clientFallbackPolicy="always"
30        contentResetPolicy="inline-retry"
31        Fallback={CodeViewerFallback}
32        Content={CodeViewerContent}
33      />
34    );
35  },
36);
37 
38export const CodeResourceContent = React.forwardRef<
39  CodeViewerHandle,
40  CodeResourceContentProps
41>(function CodeResourceContent({ resource, ...props }, ref) {
42  return (
43    <PlainTextViewerFrame
44      props={props}
45      resource={resource}
46      forwardedRef={ref}
47      clientFallbackPolicy="always"
48      contentResetPolicy="inline-retry"
49      Fallback={CodeViewerFallback}
50      Content={CodeViewerContent}
51    />
52  );
53});

What it pulls in

npm packages

• lucide-react
• prismjs@^1.30.0

Other registry items

• button
• dropdown-menu
• @retab/scroll-area
• @retab/skeleton
• @retab/utils
• @retab/viewer-controls
• @retab/use-mount-effect
• @retab/use-keyed-layout-effect

Files it writes

• registry/new-york-v4/ui/code-viewer.tsx
• registry/new-york-v4/ui/code-viewer-chrome.tsx
• registry/new-york-v4/ui/text-code-viewer-chrome.tsx
• registry/new-york-v4/ui/plain-text-viewer-frame.tsx
• registry/new-york-v4/ui/code-viewer-content.tsx
• registry/new-york-v4/ui/code-viewer-projector.ts
• registry/new-york-v4/ui/code-viewer-projection-scheduler.ts
• registry/new-york-v4/ui/code-viewer-layout.ts
• registry/new-york-v4/ui/code-viewer-scale.ts
• registry/new-york-v4/ui/code-viewer-types.ts
• registry/new-york-v4/ui/code-viewer-syntax.ts
• registry/new-york-v4/ui/code-viewer-syntax-protocol.ts
• registry/new-york-v4/ui/code-viewer-syntax-prism.ts
• registry/new-york-v4/ui/code-viewer-syntax-worker.ts
• registry/new-york-v4/ui/code-viewer-syntax.worker.ts
• registry/new-york-v4/ui/code-viewer-prism-components.d.ts
• registry/new-york-v4/ui/code-viewer-syntax-style.tsx
• registry/new-york-v4/ui/code-viewer-virtualization.ts
• registry/new-york-v4/ui/code-viewer-viewport.tsx
• registry/new-york-v4/ui/viewer-download.tsx
• registry/new-york-v4/ui/viewer-error.tsx
• registry/new-york-v4/ui/text-viewer-ranges.ts
• registry/new-york-v4/ui/line-ranges.ts
• registry/new-york-v4/ui/text-viewer-resource.ts
• registry/new-york-v4/ui/plain-text-resource.ts
• registry/new-york-v4/lib/viewer-source.ts
• registry/new-york-v4/lib/viewer-resource.ts
• registry/new-york-v4/lib/viewer-download-actions.ts
• registry/new-york-v4/lib/viewer-errors.ts
• registry/new-york-v4/ui/use-is-client.ts
• registry/new-york-v4/ui/code-viewer-long-lines.ts
• registry/new-york-v4/ui/text-viewer-scroll-interactions.ts