File size: 2,421 Bytes
5da4770 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 'use client';
import React, { useEffect, useState } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
import { langs } from '@uiw/codemirror-extensions-langs';
import { cn } from '@/lib/utils';
import { ScrollArea } from '@/components/ui/scroll-area';
import { xcodeLight } from '@uiw/codemirror-theme-xcode';
import { useTheme } from 'next-themes';
import { EditorView } from '@codemirror/view';
interface CodeRendererProps {
content: string;
language?: string;
className?: string;
}
// Map of language aliases to CodeMirror language support
const languageMap: Record<string, any> = {
js: langs.javascript,
jsx: langs.jsx,
ts: langs.typescript,
tsx: langs.tsx,
html: langs.html,
css: langs.css,
json: langs.json,
md: langs.markdown,
python: langs.python,
py: langs.python,
rust: langs.rust,
go: langs.go,
java: langs.java,
c: langs.c,
cpp: langs.cpp,
cs: langs.csharp,
php: langs.php,
ruby: langs.ruby,
sh: langs.shell,
bash: langs.shell,
sql: langs.sql,
yaml: langs.yaml,
yml: langs.yaml,
// Add more languages as needed
};
export function CodeRenderer({
content,
language = '',
className,
}: CodeRendererProps) {
// Get current theme
const { resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
// Set mounted state to true after component mounts
useEffect(() => {
setMounted(true);
}, []);
// Determine the language extension to use
const langExtension =
language && languageMap[language] ? [languageMap[language]()] : [];
// Add line wrapping extension
const extensions = [...langExtension, EditorView.lineWrapping];
// Select the theme based on the current theme
const theme = mounted && resolvedTheme === 'dark' ? vscodeDark : xcodeLight;
return (
<ScrollArea className={cn('w-full h-full', className)}>
<div className="w-full">
<CodeMirror
value={content}
theme={theme}
extensions={extensions}
basicSetup={{
lineNumbers: false,
highlightActiveLine: false,
highlightActiveLineGutter: false,
foldGutter: false,
}}
editable={false}
className="text-sm w-full min-h-full"
style={{ maxWidth: '100%' }}
height="auto"
/>
</div>
</ScrollArea>
);
}
|