Use CodeMirror editor, fix dynamic editor import

Closes #35

imports/dashboard/files/dynamicEditor.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import { LinearProgress, Paper, Typography } from '@mui/material'
+import { LinearProgress, Typography } from '@mui/material'
 import dynamic from 'next/dynamic'
 
 const DynamicEditor = dynamic(() => import('./editor'), {
   ssr: false,
   loading: () => (
-    <Paper style={{ padding: 20 }}>
+    <>
       <Typography gutterBottom>Loading editor...</Typography>
       <LinearProgress color='secondary' />
-    </Paper>
+    </>
   ),
 })
 

imports/dashboard/files/editor.tsx

@@ -1,6 +1,28 @@
-import React, { useState } from 'react'
-import { Typography, Button, TextField, LinearProgress, IconButton, Tooltip } from '@mui/material'
+import React, { useEffect, useState } from 'react'
+import {
+  Typography,
+  Button,
+  TextField,
+  LinearProgress,
+  IconButton,
+  Tooltip,
+  useTheme,
+} from '@mui/material'
 import GetApp from '@mui/icons-material/GetApp'
+import CodeMirror, { type Extension } from '@uiw/react-codemirror'
+import { materialDark, materialLight } from '@uiw/codemirror-theme-material'
+import { languages } from '@codemirror/language-data'
+
+const getLanguageFromExtension = (extension: string): Promise<Extension> | undefined => {
+  const language = languages.find(lang => lang.extensions.includes(extension))
+  if (language?.name === 'Markdown')
+    return import('@codemirror/lang-markdown').then(m =>
+      m.markdown({ base: m.markdownLanguage, codeLanguages: languages }),
+    )
+  if (language?.name === 'JavaScript')
+    return import('@codemirror/lang-javascript').then(m => m.javascript({ jsx: true }))
+  return language?.load()
+}
 
 // TODO: Refresh button.
 const Editor = (props: {
@@ -12,6 +34,7 @@ const Editor = (props: {
   onClose: (setContent: React.Dispatch<React.SetStateAction<string>>) => void
   closeText?: string
 }): React.JSX.Element => {
+  const [language, setLanguage] = useState<Extension | undefined>()
   const [content, setContent] = useState(props.content)
   const [saving, setSaving] = useState(false)
   const [name, setName] = useState(props.name)
@@ -24,6 +47,12 @@ const Editor = (props: {
       .catch(console.error)
   }
 
+  useEffect(() => {
+    const extension = name.split('.').pop()
+    if (extension) getLanguageFromExtension(extension)?.then(setLanguage).catch(console.error)
+  }, [name])
+
+  // TODO: use flex: 1 on the parent Papers and resize codemirror automatically
   return (
     <>
       <div style={{ display: 'flex' }}>
@@ -55,17 +84,15 @@ const Editor = (props: {
           </Tooltip>
         )}
       </div>
-      <div style={{ paddingBottom: 10 }} />
-      <TextField
-        multiline
-        variant='outlined'
-        fullWidth
-        maxRows={30}
-        value={content}
-        slotProps={{ input: { style: { fontFamily: 'monospace', fontSize: '14px' } } }}
-        onChange={e => setContent(e.target.value)}
-      />
-      <br />
+      <div style={{ flex: 1, marginTop: 10, marginBottom: 20 }}>
+        <CodeMirror
+          height='65vh'
+          value={content}
+          theme={(useTheme().palette.mode === 'dark' ? materialDark : materialLight) as Extension}
+          extensions={[...(language ? [language] : [])]}
+          onChange={value => setContent(value)}
+        />
+      </div>
       <div style={{ display: 'flex', marginTop: 10 }}>
         <Button variant='outlined' onClick={() => props.onClose(setContent)}>
           {props.closeText ?? 'Close'}

package.json

@@ -18,12 +18,20 @@
     "lint": "eslint . && tsc --noEmit"
   },
   "dependencies": {
+    "@babel/runtime": "^7.26.0",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-markdown": "^6.3.1",
+    "@codemirror/language-data": "^6.5.1",
+    "@codemirror/view": "^6.36.1",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.0",
+    "@lezer/highlight": "^1.2.1",
     "@mui/icons-material": "^6.2.1",
     "@mui/material": "^6.2.1",
+    "@uiw/codemirror-theme-material": "^4.23.7",
+    "@uiw/react-codemirror": "^4.23.7",
     "ky": "^1.7.4",
     "next": "^15.1.2",
     "react": "^19.0.0",