From 4d3e3426cab9f4ad9df729a7365134ce362a083a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E5=A4=B4981?= <riverhohai@gmail.com>
Date: Mon, 27 May 2024 05:32:24 +0800
Subject: [PATCH] feat: support code editor (#105)

* feat: support code editor

* Update codeblock

* refactor: remove unused class

---------

Co-authored-by: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
---
 .../advanced/traefik/show-traefik-config.tsx  |  13 +-
 .../traefik/update-traefik-config.tsx         |   8 +-
 .../file-system/show-traefik-file.tsx         |  12 +-
 .../file-system/show-traefik-system.tsx       |   4 +-
 .../web-server/show-main-traefik-config.tsx   |   6 +-
 .../show-server-middleware-config.tsx         |   8 +-
 .../web-server/show-server-traefik-config.tsx |   8 +-
 .../settings/web-server/terminal-modal.tsx    |   2 +-
 components/shared/code-editor.tsx             |  45 ++++
 package.json                                  |   4 +
 pnpm-lock.yaml                                | 246 ++++++++++++++++++
 styles/globals.css                            |  41 +--
 12 files changed, 349 insertions(+), 48 deletions(-)
 create mode 100644 components/shared/code-editor.tsx

diff --git a/components/dashboard/application/advanced/traefik/show-traefik-config.tsx b/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
index 7a87e4e8c..6b5415044 100644
--- a/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
+++ b/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
@@ -9,6 +9,7 @@ import {
 import { api } from "@/utils/api";
 import { File } from "lucide-react";
 import { UpdateTraefikConfig } from "./update-traefik-config";
+import { CodeEditor } from "@/components/shared/code-editor";
 interface Props {
 	applicationId: string;
 }
@@ -43,11 +44,13 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 relative">
-						<div className="flex flex-col  gap-6 bg-input p-4 rounded-md max-h-[35rem] min-h-[10rem] overflow-y-auto">
-							<div>
-								<pre className="font-sans">{data || "Empty"}</pre>
-							</div>
-							<div className="flex justify-end absolute z-50 right-6">
+						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
+							<CodeEditor
+								value={data || "Empty"}
+								disabled
+								className="font-mono"
+							/>
+							<div className="flex justify-end absolute z-50 right-6 top-6">
 								<UpdateTraefikConfig applicationId={applicationId} />
 							</div>
 						</div>
diff --git a/components/dashboard/application/advanced/traefik/update-traefik-config.tsx b/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
index 0155fc1f5..13bec2424 100644
--- a/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
+++ b/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -25,6 +24,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import jsyaml from "js-yaml";
+import { CodeEditor } from "@/components/shared/code-editor";
 
 const UpdateTraefikConfigSchema = z.object({
 	traefikConfig: z.string(),
@@ -122,7 +122,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 					<form
 						id="hook-form-update-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4"
+						className="grid w-full py-4 overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
@@ -132,8 +132,8 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 									<FormItem>
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:
diff --git a/components/dashboard/file-system/show-traefik-file.tsx b/components/dashboard/file-system/show-traefik-file.tsx
index 4c478dc37..c1d23f3e7 100644
--- a/components/dashboard/file-system/show-traefik-file.tsx
+++ b/components/dashboard/file-system/show-traefik-file.tsx
@@ -9,16 +9,15 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { validateAndFormatYAML } from "../application/advanced/traefik/update-traefik-config";
+import { CodeEditor } from "@/components/shared/code-editor";
 
 const UpdateServerMiddlewareConfigSchema = z.object({
 	traefikConfig: z.string(),
@@ -88,13 +87,12 @@ export const ShowTraefikFile = ({ path }: Props) => {
 	return (
 		<div>
 			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-
 			<Form {...form}>
 				<form
 					onSubmit={form.handleSubmit(onSubmit)}
-					className="grid w-full relative"
+					className="grid w-full relative z-[5]"
 				>
-					<div className="flex flex-col">
+					<div className="flex flex-col overflow-auto">
 						<FormField
 							control={form.control}
 							name="traefikConfig"
@@ -105,8 +103,8 @@ export const ShowTraefikFile = ({ path }: Props) => {
 										{path}
 									</FormDescription>
 									<FormControl>
-										<Textarea
-											className="h-[35rem] font-mono"
+										<CodeEditor
+											wrapperClassName="h-[35rem] font-mono"
 											placeholder={`http:
 routers:
     router-name:
diff --git a/components/dashboard/file-system/show-traefik-system.tsx b/components/dashboard/file-system/show-traefik-system.tsx
index 1bc64bdb8..0c153b4cf 100644
--- a/components/dashboard/file-system/show-traefik-system.tsx
+++ b/components/dashboard/file-system/show-traefik-system.tsx
@@ -14,7 +14,7 @@ export const ShowTraefikSystem = () => {
 
 	return (
 		<div className={cn("mt-6 md:grid gap-4")}>
-			<div className="flex flex-col md:flex-row gap-4 md:gap-10 w-full">
+			<div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
 				{directories?.length === 0 && (
 					<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
 						<span className="text-muted-foreground text-lg font-medium">
@@ -27,7 +27,7 @@ export const ShowTraefikSystem = () => {
 					<>
 						<Tree
 							data={directories}
-							className="md:max-w-[19rem] w-full md:h-[660px] border rounded-lg"
+							className="lg:max-w-[19rem] w-full lg:h-[660px] border rounded-lg"
 							onSelectChange={(item) => setFile(item?.id || null)}
 							folderIcon={Folder}
 							itemIcon={Workflow}
diff --git a/components/dashboard/settings/web-server/show-main-traefik-config.tsx b/components/dashboard/settings/web-server/show-main-traefik-config.tsx
index 28781a18e..4a14d2207 100644
--- a/components/dashboard/settings/web-server/show-main-traefik-config.tsx
+++ b/components/dashboard/settings/web-server/show-main-traefik-config.tsx
@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateMainTraefikConfigSchema = z.object({
@@ -105,8 +105,8 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 									<FormItem className="relative">
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`providers:
     docker:
         defaultRule: 'Host('dokploy.com')'
diff --git a/components/dashboard/settings/web-server/show-server-middleware-config.tsx b/components/dashboard/settings/web-server/show-server-middleware-config.tsx
index 17a52aff1..6d53648f4 100644
--- a/components/dashboard/settings/web-server/show-server-middleware-config.tsx
+++ b/components/dashboard/settings/web-server/show-server-middleware-config.tsx
@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateServerMiddlewareConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative"
+						className="grid w-full py-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
@@ -108,8 +108,8 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 									<FormItem className="relative">
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:
diff --git a/components/dashboard/settings/web-server/show-server-traefik-config.tsx b/components/dashboard/settings/web-server/show-server-traefik-config.tsx
index 9e42f3fd3..56dcb767b 100644
--- a/components/dashboard/settings/web-server/show-server-traefik-config.tsx
+++ b/components/dashboard/settings/web-server/show-server-traefik-config.tsx
@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateServerTraefikConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative"
+						className="grid w-full py-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
@@ -108,8 +108,8 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 									<FormItem className="relative">
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:
diff --git a/components/dashboard/settings/web-server/terminal-modal.tsx b/components/dashboard/settings/web-server/terminal-modal.tsx
index e76e88342..b2ecc1926 100644
--- a/components/dashboard/settings/web-server/terminal-modal.tsx
+++ b/components/dashboard/settings/web-server/terminal-modal.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 import {
 	Dialog,
 	DialogContent,
diff --git a/components/shared/code-editor.tsx b/components/shared/code-editor.tsx
new file mode 100644
index 000000000..7269912e6
--- /dev/null
+++ b/components/shared/code-editor.tsx
@@ -0,0 +1,45 @@
+import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
+import { yaml } from "@codemirror/lang-yaml";
+import { json } from "@codemirror/lang-json";
+import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
+import { cn } from "@/lib/utils";
+import { useTheme } from "next-themes";
+
+interface Props extends ReactCodeMirrorProps {
+	wrapperClassName?: string;
+	disabled?: boolean;
+}
+
+export const CodeEditor = ({
+	className,
+	wrapperClassName,
+	...props
+}: Props) => {
+	const { resolvedTheme } = useTheme();
+
+	return (
+		<div className={cn("relative overflow-auto", wrapperClassName)}>
+			<CodeMirror
+				basicSetup={{
+					lineNumbers: true,
+					foldGutter: true,
+					highlightSelectionMatches: true,
+					highlightActiveLine: !props.disabled,
+					allowMultipleSelections: true,
+				}}
+				theme={resolvedTheme === "dark" ? githubDark : githubLight}
+				extensions={[yaml(), json()]}
+				{...props}
+				editable={!props.disabled}
+				className={cn(
+					"w-full h-full text-sm leading-relaxed",
+					`cm-theme-${resolvedTheme}`,
+					className,
+				)}
+			/>
+			{props.disabled && (
+				<div className="absolute top-0 left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)]" />
+			)}
+		</div>
+	);
+};
diff --git a/package.json b/package.json
index 8143d4cfc..10b796aa3 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,8 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "3.515.0",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-yaml": "^6.1.1",
     "@faker-js/faker": "^8.4.1",
     "@hookform/resolvers": "^3.3.4",
     "@lucia-auth/adapter-drizzle": "1.0.7",
@@ -59,6 +61,8 @@
     "@trpc/next": "^10.43.6",
     "@trpc/react-query": "^10.43.6",
     "@trpc/server": "^10.43.6",
+    "@uiw/codemirror-theme-github": "^4.22.1",
+    "@uiw/react-codemirror": "^4.22.1",
     "@xterm/addon-attach": "0.10.0",
     "@xterm/xterm": "^5.4.0",
     "bcrypt": "5.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb727c9a6..ec15f6690 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ dependencies:
   '@aws-sdk/client-s3':
     specifier: 3.515.0
     version: 3.515.0
+  '@codemirror/lang-json':
+    specifier: ^6.0.1
+    version: 6.0.1
+  '@codemirror/lang-yaml':
+    specifier: ^6.1.1
+    version: 6.1.1(@codemirror/view@6.26.3)
   '@faker-js/faker':
     specifier: ^8.4.1
     version: 8.4.1
@@ -92,6 +98,12 @@ dependencies:
   '@trpc/server':
     specifier: ^10.43.6
     version: 10.45.2
+  '@uiw/codemirror-theme-github':
+    specifier: ^4.22.1
+    version: 4.22.1(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)
+  '@uiw/react-codemirror':
+    specifier: ^4.22.1
+    version: 4.22.1(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.16.0)(@codemirror/language@6.10.1)(@codemirror/lint@6.8.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.26.3)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
   '@xterm/addon-attach':
     specifier: 0.10.0
     version: 0.10.0(@xterm/xterm@5.4.0)
@@ -983,6 +995,7 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: true
     optional: true
@@ -992,6 +1005,7 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -1001,6 +1015,7 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: true
     optional: true
@@ -1010,6 +1025,7 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -1032,6 +1048,97 @@ packages:
     dev: true
     optional: true
 
+  /@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1):
+    resolution: {integrity: sha512-P/LeCTtZHRTCU4xQsa89vSKWecYv1ZqwzOd5topheGRf+qtacFgBeIMQi3eL8Kt/BUNvxUWkx+5qP2jlGoARrg==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@codemirror/commands@6.5.0:
+    resolution: {integrity: sha512-rK+sj4fCAN/QfcY9BEzYMgp4wwL/q5aj/VfNSoH1RWPF9XS/dUwBkvlL3hpWgEjOqlpdN1uLC9UkjJ4tmyjJYg==}
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@codemirror/lang-json@6.0.1:
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@lezer/json': 1.0.2
+    dev: false
+
+  /@codemirror/lang-yaml@6.1.1(@codemirror/view@6.26.3):
+    resolution: {integrity: sha512-HV2NzbK9bbVnjWxwObuZh5FuPCowx51mEfoFT9y3y+M37fA3+pbxx4I7uePuygFzDsAmCTwQSc/kXh/flab4uw==}
+    dependencies:
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/yaml': 1.0.3
+    transitivePeerDependencies:
+      - '@codemirror/view'
+    dev: false
+
+  /@codemirror/language@6.10.1:
+    resolution: {integrity: sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.0
+      style-mod: 4.1.2
+    dev: false
+
+  /@codemirror/lint@6.8.0:
+    resolution: {integrity: sha512-lsFofvaw0lnPRJlQylNsC4IRt/1lI4OD/yYslrSGVndOJfStc58v+8p9dgGiD90ktOfL7OhBWns1ZETYgz0EJA==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      crelt: 1.0.6
+    dev: false
+
+  /@codemirror/search@6.5.6:
+    resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      crelt: 1.0.6
+    dev: false
+
+  /@codemirror/state@6.4.1:
+    resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
+    dev: false
+
+  /@codemirror/theme-one-dark@6.1.2:
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+      '@lezer/highlight': 1.2.0
+    dev: false
+
+  /@codemirror/view@6.26.3:
+    resolution: {integrity: sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==}
+    dependencies:
+      '@codemirror/state': 6.4.1
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+    dev: false
+
   /@emnapi/core@0.45.0:
     resolution: {integrity: sha512-DPWjcUDQkCeEM4VnljEOEcXdAD7pp8zSZsgOujk/LGIwCXWbXJngin+MO4zbH429lzeC3WbYLGjE2MaUOwzpyw==}
     requiresBuild: true
@@ -1763,6 +1870,38 @@ packages:
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
     dev: false
 
+  /@lezer/common@1.2.1:
+    resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
+    dev: false
+
+  /@lezer/highlight@1.2.0:
+    resolution: {integrity: sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==}
+    dependencies:
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@lezer/json@1.0.2:
+    resolution: {integrity: sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==}
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.0
+    dev: false
+
+  /@lezer/lr@1.4.0:
+    resolution: {integrity: sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==}
+    dependencies:
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@lezer/yaml@1.0.3:
+    resolution: {integrity: sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==}
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.0
+    dev: false
+
   /@lucia-auth/adapter-drizzle@1.0.7(lucia@3.1.1):
     resolution: {integrity: sha512-X/V7fLBca8EC/gPXCntwbQpb0+F9oEuRoHElvsi9rCrdnGhCMNxHgwAvgiQ6pes+rIYpyvx4n3hvjqo/fPo03A==}
     peerDependencies:
@@ -1874,6 +2013,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -1883,6 +2023,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -1892,6 +2033,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -1901,6 +2043,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -1991,6 +2134,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -2000,6 +2144,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -2009,6 +2154,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -2018,6 +2164,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -2138,6 +2285,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -2147,6 +2295,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -2156,6 +2305,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: false
     optional: true
@@ -2165,6 +2315,7 @@ packages:
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: false
     optional: true
@@ -4386,6 +4537,75 @@ packages:
       '@types/node': 18.19.24
     dev: true
 
+  /@uiw/codemirror-extensions-basic-setup@4.22.1(@codemirror/autocomplete@6.16.0)(@codemirror/commands@6.5.0)(@codemirror/language@6.10.1)(@codemirror/lint@6.8.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3):
+    resolution: {integrity: sha512-Iz8eFaZBNrwjaAADszOxOv2byDMn4rqob/luuSPAzJjTrSn5KawRXcoNLoWGPGNO6Mils6bIly/g2LaU34otNw==}
+    peerDependencies:
+      '@codemirror/autocomplete': '>=6.0.0'
+      '@codemirror/commands': '>=6.0.0'
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/lint': '>=6.0.0'
+      '@codemirror/search': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+    dependencies:
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
+      '@codemirror/commands': 6.5.0
+      '@codemirror/language': 6.10.1
+      '@codemirror/lint': 6.8.0
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+    dev: false
+
+  /@uiw/codemirror-theme-github@4.22.1(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3):
+    resolution: {integrity: sha512-trotMuMd8PQjvst4hg9b5Mz5qlD5HQzPVAZQFlQKaaF8mEKMk77nFCPhfD3Rg2WEq02lx6fqmOcErQjY0GRHew==}
+    dependencies:
+      '@uiw/codemirror-themes': 4.22.1(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+    dev: false
+
+  /@uiw/codemirror-themes@4.22.1(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3):
+    resolution: {integrity: sha512-5TeB8wCc0aNd3YEhzOvgekpAFQfEm4fCTUcGmEIQqaRNgKAM83HYNpE1JF2j7x2oDFugdiO0yJynS6bo1zVOuw==}
+    peerDependencies:
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+    dev: false
+
+  /@uiw/react-codemirror@4.22.1(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.16.0)(@codemirror/language@6.10.1)(@codemirror/lint@6.8.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.26.3)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-yrq9FdGZ6E4Rh+7W0xyirSEeESGyG/k54/DfFqSk40fqel/3x/3fqjIImEZUYPxxgFPmZ3RtP+O0Em46nwRvgg==}
+    peerDependencies:
+      '@babel/runtime': '>=7.11.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/theme-one-dark': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+      codemirror: '>=6.0.0'
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@babel/runtime': 7.24.0
+      '@codemirror/commands': 6.5.0
+      '@codemirror/state': 6.4.1
+      '@codemirror/theme-one-dark': 6.1.2
+      '@codemirror/view': 6.26.3
+      '@uiw/codemirror-extensions-basic-setup': 4.22.1(@codemirror/autocomplete@6.16.0)(@codemirror/commands@6.5.0)(@codemirror/language@6.10.1)(@codemirror/lint@6.8.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)
+      codemirror: 6.0.1(@lezer/common@1.2.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@codemirror/autocomplete'
+      - '@codemirror/language'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+    dev: false
+
   /@xterm/addon-attach@0.10.0(@xterm/xterm@5.4.0):
     resolution: {integrity: sha512-ES/XO8pC1tPHSkh4j7qzM8ajFt++u8KMvfRc9vKIbjHTDOxjl9IUVo+vcQgLn3FTCM3w2czTvBss8nMWlD83Cg==}
     peerDependencies:
@@ -4825,6 +5045,20 @@ packages:
       - '@types/react'
     dev: false
 
+  /codemirror@6.0.1(@lezer/common@1.2.1):
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
+      '@codemirror/commands': 6.5.0
+      '@codemirror/language': 6.10.1
+      '@codemirror/lint': 6.8.0
+      '@codemirror/search': 6.5.6
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.3
+    transitivePeerDependencies:
+      - '@lezer/common'
+    dev: false
+
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -4879,6 +5113,10 @@ packages:
     dev: false
     optional: true
 
+  /crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+    dev: false
+
   /cron-parser@4.9.0:
     resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
     engines: {node: '>=12.0.0'}
@@ -7014,6 +7252,10 @@ packages:
     resolution: {integrity: sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==}
     dev: false
 
+  /style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+    dev: false
+
   /styled-jsx@5.1.1(react@18.2.0):
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
@@ -7328,6 +7570,10 @@ packages:
       d3-timer: 3.0.1
     dev: false
 
+  /w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+    dev: false
+
   /webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: false
diff --git a/styles/globals.css b/styles/globals.css
index dbb8aa755..20518621e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -33,6 +33,7 @@
     --ring: 240 10% 3.9%;
 
     --radius: 0.5rem;
+    --overlay: rgba(0, 0, 0, 0.2);
   }
 
   .dark {
@@ -63,6 +64,8 @@
     --border: 240 3.7% 15.9%;
     --input: 240 4% 10%;
     --ring: 240 4.9% 83.9%;
+
+    --overlay:  rgba(0, 0, 0, 0.5);
   }
 }
 
@@ -86,13 +89,7 @@
 .xterm .xterm-screen {
   overflow: hidden;
 }
-/* .no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-.no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none; */
-/* } */
+
 @layer utilities {
   /* Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
@@ -110,16 +107,24 @@
   font-weight: 500;
   letter-spacing: 0px !important;
 }
-.xterm-rows {
-  /* padding-left: 1rem;
-  padding-right: 1rem; */
-  /* padding-top: 1rem;
-  padding-bottom: 1rem; */
+
+/* Codemirror */
+.cm-editor {
+  @apply w-full h-full rounded-md overflow-hidden border border-solid border-border outline-none;
 }
 
-/* .xterm-cursor {
-  background-color: transparent !important;
-  border-color: transparent !important;
-  outline: none !important;
-  outline-offset: 0px !important;
-} */
+.cm-editor .cm-scroller {
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.cm-editor.cm-focused {
+  @apply outline-none;
+}
+
+/* fix: placeholder bg */
+.cm-editor .cm-activeLine:has(.cm-placeholder) {
+  background-color: transparent;
+}
+
+