diff --git a/src/app/components/CodeEditor.tsx b/src/app/components/CodeEditor.tsx index ad28d07..b93da65 100644 --- a/src/app/components/CodeEditor.tsx +++ b/src/app/components/CodeEditor.tsx @@ -7,11 +7,13 @@ import { Eye, Pencil, Save } from 'lucide-react'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'; -export type CodeMode = 'text' | 'json' | 'xml'; +export type CodeMode = 'text' | 'json' | 'xml' | 'code'; interface CodeEditorProps { text: string; mode: CodeMode; + /** Prism language id for syntax highlighting in view mode (used when mode='code'). */ + syntaxHighlightLang?: string; readOnly?: boolean; onSave?: (text: string) => Promise; } @@ -27,10 +29,11 @@ const langExt: Record = { json: json(), xml: xml(), text: [], + code: [], // no CM lang pack needed; SyntaxHighlighter handles view-mode }; const syntaxLang: Record = { - text: 'text', json: 'json', xml: 'xml', + text: 'text', json: 'json', xml: 'xml', code: 'text', }; function prettify(text: string, mode: CodeMode): string { @@ -40,7 +43,7 @@ function prettify(text: string, mode: CodeMode): string { return text; } -export default function CodeEditor({ text, mode, readOnly = false, onSave }: CodeEditorProps) { +export default function CodeEditor({ text, mode, syntaxHighlightLang, readOnly = false, onSave }: CodeEditorProps) { const [editMode, setEditMode] = useState(false); const [editInitText, setEditInitText] = useState(''); const [saving, setSaving] = useState(false); @@ -71,7 +74,7 @@ export default function CodeEditor({ text, mode, readOnly = false, onSave }: Cod )}
= { - text: 'Text', markdown: 'Markdown', json: 'JSON', xml: 'HTML/XML', hex: 'Hex', image: 'Image', config: 'Config', + code: 'Code', text: 'Text', markdown: 'Markdown', json: 'JSON', xml: 'HTML/XML', hex: 'Hex', image: 'Image', config: 'Config', +}; + +const EXT_TO_LANG: Record = { + asm: 'nasm', s: 'nasm', bas: 'basic', + js: 'javascript', ts: 'typescript', jsx: 'jsx', tsx: 'tsx', + css: 'css', scss: 'scss', + py: 'python', c: 'c', cpp: 'cpp', h: 'cpp', hpp: 'cpp', + lua: 'lua', sh: 'bash', bash: 'bash', + php: 'php', rb: 'ruby', rs: 'rust', go: 'go', + java: 'java', cs: 'csharp', kt: 'kotlin', sql: 'sql', pl: 'perl', }; // ─── Viewer components ─────────────────────────────────────────────────────── @@ -132,6 +145,7 @@ function ViewerModeIcon({ mode, className }: { mode: ViewMode; className?: strin case 'text': return ; case 'markdown': return ; case 'json': return ; + case 'code': return ; case 'xml': return ; case 'hex': return ; case 'image': return ; @@ -1319,6 +1333,15 @@ export default function MediaManager({ initialPath = '/', rootPath, title, confi {!viewLoading && viewMode === 'config' && viewText !== null && ( saveViewFile(s)} /> )} + {!viewLoading && viewMode === 'code' && viewText !== null && ( + saveViewFile(s)} + /> + )}
)}