From 8c0ce500696ef468955280773a2cc3f5a9ac639c Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Tue, 10 Jun 2025 13:33:09 +0000 Subject: [PATCH 1/2] feat: change to new editor --- package.json | 2 ++ pnpm-lock.yaml | 37 ++++++++++++++++++++++++++++++ src/client/Editor.tsx | 53 +++++++++++++++++++++++-------------------- 3 files changed, 67 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 6d5bd04..1dde321 100644 --- 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 index 5c10b04..6c6340b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@microlink/react-json-view': specifier: ^1.26.2 version: 1.26.2(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@monaco-editor/react': + specifier: ^4.7.0 + version: 4.7.0(monaco-editor@0.52.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@radix-ui/react-checkbox': specifier: ^1.3.2 version: 1.3.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -83,6 +86,9 @@ importers: lucide-react: specifier: ^0.511.0 version: 0.511.0(react@19.1.0) + monaco-editor: + specifier: ^0.52.2 + version: 0.52.2 motion: specifier: ^12.15.0 version: 12.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -776,6 +782,16 @@ packages: react: '>= 15' react-dom: '>= 15' + '@monaco-editor/loader@1.5.0': + resolution: {integrity: sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==} + + '@monaco-editor/react@4.7.0': + resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==} + peerDependencies: + monaco-editor: '>= 0.25.0 < 1' + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -2704,6 +2720,9 @@ packages: engines: {node: '>=10'} hasBin: true + monaco-editor@0.52.2: + resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==} + motion-dom@12.15.0: resolution: {integrity: sha512-D2ldJgor+2vdcrDtKJw48k3OddXiZN1dDLLWrS8kiHzQdYVruh0IoTwbJBslrnTXIPgFED7PBN2Zbwl7rNqnhA==} @@ -3197,6 +3216,9 @@ packages: stat-mode@0.3.0: resolution: {integrity: sha512-QjMLR0A3WwFY2aZdV0okfFEJB5TRjkggXZjxP3A1RsWsNHNu3YPv8btmtc6iCFZ0Rul3FE93OYogvhOUClU+ng==} + state-local@1.0.7: + resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==} + statuses@1.5.0: resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==} engines: {node: '>= 0.6'} @@ -4110,6 +4132,17 @@ snapshots: transitivePeerDependencies: - '@types/react' + '@monaco-editor/loader@1.5.0': + dependencies: + state-local: 1.0.7 + + '@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': + dependencies: + '@monaco-editor/loader': 1.5.0 + monaco-editor: 0.52.2 + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -6299,6 +6332,8 @@ snapshots: mkdirp@3.0.1: {} + monaco-editor@0.52.2: {} + motion-dom@12.15.0: dependencies: motion-utils: 12.12.1 @@ -6766,6 +6801,8 @@ snapshots: stat-mode@0.3.0: {} + state-local@1.0.7: {} + statuses@1.5.0: {} stream-to-array@2.3.0: diff --git a/src/client/Editor.tsx b/src/client/Editor.tsx index 9d26248..1b4658c 100644 --- 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) => - `${i + 1}${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 = () => { )} >