feat: change to new editor

brettkolodny · brettkolodny · commit 8c0ce500696e · 2025-06-10T13:33:09.000Z
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@fontsource/dm-mono": "^5.2.5",
     "@hono/valibot-validator": "^0.5.2",
     "@microlink/react-json-view": "^1.26.2",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -35,6 +36,7 @@
     "hono": "^4.7.11",
     "lodash": "^4.17.21",
     "lucide-react": "^0.511.0",
+    "monaco-editor": "^0.52.2",
     "motion": "^12.15.0",
     "nanoid": "^5.1.5",
     "prismjs": "^1.30.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/client/Editor.tsx b/src/client/Editor.tsx
@@ -27,28 +27,16 @@ import {
 	ZapIcon,
 } from "lucide-react";
 import { type FC, useCallback, useEffect, useRef, useState } from "react";
-import CodeEditor from "react-simple-code-editor";
+import { Editor as MonacoEditor } from "@monaco-editor/react";
 
-// The following imports can't be re-ordered otherwise things break
-// @ts-expect-error TODO: create types for this
-import { highlight, languages } from "prismjs/components/prism-core";
-import "prismjs/components/prism-hcl";
-import "prismjs/themes/prism.css";
 import { cn } from "@/utils/cn";
 import type { ParameterFormType } from "@/gen/types";
 import { multiSelect, radio, switchInput, textInput } from "@/client/snippets";
-
-// Adds line numbers to the highlight.
-const hightlightWithLineNumbers = (input: string, language: unknown) =>
-	highlight(input, language)
-		.split("\n")
-		.map(
-			(line: string, i: number) =>
-				`<span class='editorLineNumber'>${i + 1}</span>${line}`,
-		)
-		.join("\n");
+import { useTheme } from "@/client/contexts/theme";
 
 export const Editor: FC = () => {
+	const { appliedTheme } = useTheme();
+
 	const $code = useStore((state) => state.code);
 	const $setCode = useStore((state) => state.setCode);
 
@@ -160,7 +148,7 @@ export const Editor: FC = () => {
 					)}
 				>
 					<Button
-						className="pointer-events-auto z-10"
+						className="pointer-events-auto z-10 hidden"
 						variant="subtle"
 						size="sm"
 						onClick={onCopy}
@@ -170,15 +158,30 @@ export const Editor: FC = () => {
 				</div>
 
 				<Tabs.Content value="code" asChild={true}>
-					<div className="h-full w-full overflow-y-scroll bg-surface-secondary font-mono">
-						<CodeEditor
+					<div className="h-full w-full bg-surface-secondary font-mono">
+						<MonacoEditor
 							value={$code}
-							onValueChange={(code) => $setCode(code)}
-							highlight={(code) =>
-								hightlightWithLineNumbers(code, languages.hcl)
-							}
-							textareaId="codeArea"
-							className="editor pt-3"
+							onChange={(code) => {
+								if (code !== undefined) {
+									$setCode(code);
+								}
+							}}
+							theme={appliedTheme === "dark" ? "vs-dark" : "vs-light"}
+							className=""
+							defaultLanguage="hcl"
+							options={{
+								minimap: {
+									enabled: false,
+								},
+								automaticLayout: true,
+								fontFamily: "DM Mono",
+								fontSize: 14,
+								wordWrap: "on",
+								padding: {
+									top: 16,
+									bottom: 16,
+								},
+							}}
 						/>
 					</div>
 				</Tabs.Content>
