replace monaco with codemirror

src/components/graph/FunctionNode.tsx

@@ -1,5 +1,6 @@
-import React, { memo, useCallback, useContext, useEffect, useRef, useState } from 'react'
-import Editor, { loader } from '@monaco-editor/react'
+import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import CodeMirror from '@uiw/react-codemirror'
+import { javascript } from '@codemirror/lang-javascript'
 import FlowContext from '../../lib/flowContext'
 import {
     BaseNode,
@@ -11,8 +12,6 @@ import {
 import { InputHandle, OutputHandle } from './NodeHandles'
 import { Code2 } from 'lucide-react'
 
-loader.config({ paths: { vs: 'https://unpkg.com/monaco-editor@latest/min/vs' } })
-
 type Props = {
     id: string
     data: { body?: string }
@@ -26,8 +25,6 @@ export const FunctionNode = memo(function FunctionNode({ id, data }: Props) {
     const [value, setValue] = useState<string>(data?.body ?? DEFAULT_BODY)
     const ctx = useContext(FlowContext)
     const setNodes = ctx?.setNodes
-    const editorRef = useRef<any>(null)
-    const monacoRef = useRef<any>(null)
 
     useEffect(() => {
         if (setNodes) {
@@ -39,29 +36,21 @@ export const FunctionNode = memo(function FunctionNode({ id, data }: Props) {
     }, [])
 
     const onChange = useCallback(
-        (val?: string) => {
-            const v = val ?? ''
-            setValue(v)
+        (val: string) => {
+            setValue(val)
             if (setNodes) {
                 setNodes((nds: any[]) =>
-                    nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, body: v } } : n))
+                    nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, body: val } } : n))
                 )
             }
         },
         [id, setNodes]
     )
 
-    const handleEditorMount = useCallback((editor: any, monaco: any) => {
-        editorRef.current = editor
-        monacoRef.current = monaco
-        try {
-            editor.onKeyDown((e: any) => e?.browserEvent?.stopPropagation())
-            editor.onMouseDown((e: any) => e?.event?.stopPropagation())
-        } catch {}
-    }, [])
-
     const storedBody = ctx?.nodes?.find((n: any) => n.id === id)?.data?.body ?? ''
 
+    const extensions = useMemo(() => [javascript()], [])
+
     return (
         <BaseNode className="w-72">
             <BaseNodeHeader className="border-b">
@@ -73,23 +62,14 @@ export const FunctionNode = memo(function FunctionNode({ id, data }: Props) {
                 <p className="text-[10px] text-muted-foreground mb-1">
                     Call in config: <code className="rounded bg-muted px-0.5">$&#123;{id}(var1, var2)&#125;</code>
                 </p>
-                <div style={{ height: 120 }} className="w-full nodrag nopan rounded border border-input overflow-hidden">
-                    <Editor
-                        height="100%"
-                        defaultLanguage="javascript"
+                <div style={{ height: 120 }} className="w-full nodrag nopan overflow-hidden rounded border border-input">
+                    <CodeMirror
                         value={value}
-                        theme="vs-light"
-                        onMount={handleEditorMount}
+                        height="120px"
+                        extensions={extensions}
                         onChange={onChange}
-                        options={{
-                            minimap: { enabled: false },
-                            fontSize: 11,
-                            lineHeight: 16,
-                            lineNumbers: 'on',
-                            lineDecorationsWidth: 2,
-                            scrollBeyondLastLine: false,
-                            padding: { top: 4, bottom: 4 },
-                        }}
+                        basicSetup={{ lineNumbers: true, foldGutter: false }}
+                        className="text-xs [&_.cm-editor]:outline-none [&_.cm-editor]:cursor-text [&_.cm-gutters]:border-0"
                     />
                 </div>
             </BaseNodeContent>