Luan Martins
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import CodeMirror from "@uiw/react-codemirror";
|
|
import { vscodeDark } from "@uiw/codemirror-theme-vscode";
|
|
import { EditorView } from "@codemirror/view";
|
|
import type { Extension } from "@codemirror/state";
|
|
import { getCodeMirrorExtensionFromPath } from "@/lib/languages";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type FileViewerContentProps = {
|
|
path: string;
|
|
content: string;
|
|
className?: string;
|
|
};
|
|
|
|
export function FileViewerContent({ path, content, className }: FileViewerContentProps) {
|
|
const langExt = getCodeMirrorExtensionFromPath(path);
|
|
const extensions: Extension[] = [EditorView.lineWrapping, EditorView.editable.of(false)];
|
|
if (langExt) {
|
|
extensions.push(langExt);
|
|
}
|
|
|
|
return (
|
|
<CodeMirror
|
|
value={content}
|
|
height="100%"
|
|
theme={vscodeDark}
|
|
extensions={extensions}
|
|
readOnly
|
|
basicSetup={{
|
|
lineNumbers: true,
|
|
foldGutter: true,
|
|
highlightActiveLine: false,
|
|
highlightSelectionMatches: true,
|
|
}}
|
|
className={cn(
|
|
// Wrapper must have a bounded height so CodeMirror's internal .cm-scroller
|
|
// scrolls instead of expanding to content height. touch-pan-y on
|
|
// .cm-scroller is what makes vertical touch scroll work on mobile —
|
|
// without it, .cm-content captures the gesture for selection.
|
|
"h-full overflow-hidden text-xs",
|
|
"[&_.cm-scroller]:touch-pan-y [&_.cm-scroller]:overscroll-contain",
|
|
className,
|
|
)}
|
|
/>
|
|
);
|
|
}
|