feat: add codemirror editor and fix layout

package.json

@@ -8,6 +8,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@codemirror/view": "^6.0.3",
+    "@lezer/highlight": "^1.0.0",
+    "@uiw/codemirror-themes": "^4.11.4",
+    "@uiw/react-codemirror": "^4.11.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0"

pnpm-lock.yaml

@@ -1,22 +1,26 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@codemirror/view': ^6.0.3
+  '@lezer/highlight': ^1.0.0
   '@types/react': ^18.0.0
   '@types/react-dom': ^18.0.0
   '@types/react-router-dom': ^5.3.3
+  '@uiw/codemirror-themes': ^4.11.4
+  '@uiw/react-codemirror': ^4.11.4
   '@vitejs/plugin-react': ^1.3.0
-  codemirror: ^6.0.1
   react: ^18.0.0
-  react-codemirror2: ^7.2.1
   react-dom: ^18.0.0
   react-router-dom: ^6.3.0
   typescript: ^4.6.3
   vite: ^2.9.9
 
 dependencies:
-  codemirror: 6.0.1
+  '@codemirror/view': 6.0.3
+  '@lezer/highlight': 1.0.0
+  '@uiw/codemirror-themes': 4.11.4
+  '@uiw/react-codemirror': 4.11.4_zkjxn7zmjazops4ey5en2fchna
   react: 18.2.0
-  react-codemirror2: 7.2.1_zuovgz2ulb34y4plqf6p2rpz4q
   react-dom: 18.2.0_react@18.2.0
   react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y
 
@@ -347,6 +351,15 @@ packages:
     resolution: {integrity: sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg==}
     dev: false
 
+  /@codemirror/theme-one-dark/6.0.0:
+    resolution: {integrity: sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.3
+      '@lezer/highlight': 1.0.0
+    dev: false
+
   /@codemirror/view/6.0.3:
     resolution: {integrity: sha512-1gDBymhbx2DZzwnR/rNUu1LiQqjxBJtFiB+4uLR6tHQ6vKhTIwUsP5uZUQ7SM7JxVx3UihMynnTqjcsC+mczZg==}
     dependencies:
@@ -458,6 +471,42 @@ packages:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
     dev: true
 
+  /@uiw/codemirror-extensions-basic-setup/4.11.4:
+    resolution: {integrity: sha512-pc9pQtCQFmAH5nV9UmX37VB0+yzSFQ2kbSvLHBFST9siYnacaR6HxmkBBBbYYXwVK/n9pGZ6A8ZefAUNTFfo/A==}
+    dependencies:
+      '@codemirror/autocomplete': 6.0.4
+      '@codemirror/commands': 6.0.1
+      '@codemirror/language': 6.2.0
+      '@codemirror/lint': 6.0.0
+      '@codemirror/search': 6.0.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.3
+    dev: false
+
+  /@uiw/codemirror-themes/4.11.4:
+    resolution: {integrity: sha512-tp4wahAuGRhMoKNMk/6lt8nNr21UZ4zhFqdDTZZ4jLc2w4BKTQ23AkublXAM8vMSuYt/LpE+cajuq4/aSYn01w==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.3
+    dev: false
+
+  /@uiw/react-codemirror/4.11.4_zkjxn7zmjazops4ey5en2fchna:
+    resolution: {integrity: sha512-p7DNBI6kj+DUzTe7MjBJwZ3qo0nSOav7T0MEGRpRNZA9ZO3RnzhPMie6swDA8e3dz1s59l9UdFB1fgyam1vFhQ==}
+    peerDependencies:
+      '@codemirror/view': '>=6.0.0'
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@babel/runtime': 7.18.6
+      '@codemirror/theme-one-dark': 6.0.0
+      '@codemirror/view': 6.0.3
+      '@uiw/codemirror-extensions-basic-setup': 4.11.4
+      codemirror: 6.0.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@vitejs/plugin-react/1.3.2:
     resolution: {integrity: sha512-aurBNmMo0kz1O4qRoY+FM4epSA39y3ShWGuqfLRA/3z0oEJAdtoSfgA3aO98/PCCHAqMaduLxIxErWrVKIFzXA==}
     engines: {node: '>=12.0.0'}
@@ -883,16 +932,6 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /react-codemirror2/7.2.1_zuovgz2ulb34y4plqf6p2rpz4q:
-    resolution: {integrity: sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==}
-    peerDependencies:
-      codemirror: 5.x
-      react: '>=15.5 <=16.x'
-    dependencies:
-      codemirror: 6.0.1
-      react: 18.2.0
-    dev: false
-
   /react-dom/18.2.0_react@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:

src/App.tsx

@@ -6,8 +6,12 @@ function App() {
 	return (
 		<Router>
 			<div
-				className="App"
+				className="container"
-				style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					height: "100%",
+				}}>
 				<Routes>
 					<Route path="/" element={<Home />} />
 					<Route path="/:id" element={<Paste />} />

src/components/BottomBar.tsx

@@ -1,6 +1,6 @@
 const BottomBar = () => {
 	return (
-		<div
+		<footer
 			style={{
 				height: "5vh",
 				minHeight: "30px",
@@ -9,7 +9,6 @@ const BottomBar = () => {
 				alignItems: "center",
 				justifyContent: "space-between",
 				paddingInline: "20px",
-				justifySelf: "end",
 			}}
 			className="BottomBar">
 			<a
@@ -26,8 +25,8 @@ const BottomBar = () => {
 				className="controls"
 				style={{
 					display: "flex",
-					justifyItems: "center",
 					marginBottom: "2px",
+					alignItems: "center",
 				}}>
 				<ButtonControl text="raw" link="/" />
 				<Separator />
@@ -35,7 +34,7 @@ const BottomBar = () => {
 				<Separator />
 				<ButtonControl text="source" link="/" />
 			</ul>
-		</div>
+		</footer>
 	);
 };
 

src/components/Editor.tsx

@@ -1,19 +1,22 @@
+import CodeMirror from "@uiw/react-codemirror";
+import { GithubDark } from "./EditorTheme";
+
 const Editor = () => {
 	return (
-		<textarea
+		// TODO: custom implementation?
+		// TODO: fix line wrap
+		<CodeMirror
 			className="editor"
 			autoFocus={true}
+			height="100%"
 			style={{
-				width: "auto",
+				width: "100%",
-				backgroundColor: "black",
-				padding: "10px",
-				resize: "none",
-				borderWidth: 0,
 				flex: 1,
-				color: "#fbfbfb",
+				overflowY: "auto",
-				fontSize: 16,
+				fontFamily: "IBM Plex Mono",
-				outline: "none",
+				fontSize: "1rem",
 			}}
+			theme={GithubDark}
 		/>
 	);
 };

src/components/EditorTheme.tsx

@@ -0,0 +1,34 @@
+import { tags as t } from "@lezer/highlight";
+import { createTheme } from "@uiw/codemirror-themes";
+
+export const GithubDark = createTheme({
+	theme: "dark",
+	settings: {
+		background: "black",
+		// gutterBackground: "#0B0E14",
+		gutterBackground: "black",
+		gutterForeground: "#B8D7A3",
+		foreground: "#c9d1d9",
+		caret: "#c9d1d9",
+		selection: "#003d73",
+		selectionMatch: "#003d73",
+		lineHighlight: "transparent",
+	},
+	styles: [
+		{ tag: [t.comment, t.bracket], color: "#8b949e" },
+		{ tag: [t.className, t.propertyName], color: "#d2a8ff" },
+		{
+			tag: [t.variableName, t.attributeName, t.number, t.operator],
+			color: "#79c0ff",
+		},
+		{
+			tag: [t.keyword, t.typeName, t.typeOperator, t.typeName],
+			color: "#ff7b72",
+		},
+		{ tag: [t.string, t.meta, t.regexp], color: "#a5d6ff" },
+		{ tag: [t.name, t.quote], color: "#7ee787" },
+		{ tag: [t.heading], color: "#d2a8ff", fontWeight: "bold" },
+		{ tag: [t.emphasis], color: "#d2a8ff", fontStyle: "italic" },
+		{ tag: [t.deleted], color: "#ffdcd7", backgroundColor: "#ffeef0" },
+	],
+});

src/index.css

@@ -1,14 +1,17 @@
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');
 
 * {
-  padding: 0%;
+  margin: 0;
-  margin: 0%;
+  font-family: "IBM Plex Mono", monospace;
 }
 
-body{
+body {
   font-family: "IBM Plex Mono", monospace;
   background: black;
   color: white;
   /* min-height: 100%; */
+}
+
+#root {
   height: 100vh;
 }