From d3dfadbd9b27e68aa6924696168c52ceae238c5a Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 5 Mar 2024 17:37:20 +0800
Subject: [PATCH] feat: add code editor

---
 .../(commonLayout)/workflow/nodes/page.tsx    |  5 ++--
 .../nodes/_base/components/editor/base.tsx    |  2 +-
 .../_base/components/editor/code-editor.tsx   | 29 ++++++++++++++-----
 .../components/workflow/nodes/code/panel.tsx  |  2 ++
 .../workflow/nodes/code/use-config.ts         |  4 +--
 web/package.json                              |  1 +
 web/yarn.lock                                 | 26 ++++++++++++++++-
 7 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index 3179a48032..83086233fa 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -32,8 +32,8 @@ const allMockData = {
   [BlockEnum.End]: EndNodeMock,
 }
 const nodes = [
-  BlockEnum.Start/* 1 */, BlockEnum.QuestionClassifier/* 5 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */,
-  BlockEnum.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */,
+  BlockEnum.Code/* 7 */, BlockEnum.Start/* 1 */, BlockEnum.QuestionClassifier/* 5 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */,
+  BlockEnum.IfElse/* 6 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */,
   BlockEnum.VariableAssigner/* 11 */, BlockEnum.End/* 12 */,
 ].map((item, i) => {
   const payload = allMockData[item]
@@ -78,7 +78,6 @@ const Page: FC = () => {
       <Workflow
         nodes={initialNodes}
         edges={initialEdges}
-        selectedNodeId='1'
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index 09f004c44c..3f3f8d5f9c 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -40,7 +40,7 @@ const Base: FC<Props> = ({
   }, [isExpanded])
 
   return (
-    <div className={cn(className, 'rounded-lg border', isFocus ? 'bg-white border-gray-200' : 'bg-gray-100 border-gray-100')}>
+    <div className={cn(className, 'rounded-lg border', isFocus ? 'bg-white border-gray-200' : 'bg-gray-100 border-gray-100 overflow-hidden')}>
       <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-1'>
         <div className='text-xs font-semibold text-gray-700'>{title}</div>
         <div className='flex items-center'>
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
index d8e819c118..a593961442 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
@@ -1,13 +1,15 @@
 'use client'
 import type { FC } from 'react'
+import Editor from '@monaco-editor/react'
 import React from 'react'
 import Base from './base'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 
 type Props = {
   value: string
   onChange: (value: string) => void
   title: JSX.Element
-  language?: string
+  language: CodeLanguage
   headerRight?: JSX.Element
 }
 
@@ -16,9 +18,13 @@ const CodeEditor: FC<Props> = ({
   onChange,
   title,
   headerRight,
+  language,
 }) => {
   const [isFocus, setIsFocus] = React.useState(false)
 
+  const handleEditorChange = (value: string | undefined) => {
+    onChange(value || '')
+  }
   return (
     <div>
       <Base
@@ -26,15 +32,24 @@ const CodeEditor: FC<Props> = ({
         value={value}
         headerRight={headerRight}
         isFocus={isFocus}
-        minHeight={86}
+        minHeight={200}
       >
-        <textarea
+        {/* https://www.npmjs.com/package/@monaco-editor/react */}
+        <Editor
+          className='h-full'
+          defaultLanguage={language === CodeLanguage.javascript ? 'javascript' : 'python'}
           value={value}
-          onChange={e => onChange(e.target.value)}
-          onFocus={() => setIsFocus(true)}
-          onBlur={() => setIsFocus(false)}
-          className='w-full h-full p-3 resize-none bg-transparent'
+          onChange={handleEditorChange}
+          // https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
+          options={{
+            quickSuggestions: false,
+            minimap: { enabled: false },
+            // lineNumbers: (num) => {
+            //   return <div>{num}</div>
+            // }
+          }}
         />
+
       </Base>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index aebdbaec7a..d7ca9f9970 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -57,6 +57,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
           />
         </Field>
         <Split />
+        {inputs.code_language}
         <CodeEditor
           title={
             <TypeSelector
@@ -65,6 +66,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
               onChange={handleCodeLanguageChange}
             />
           }
+          language={inputs.code_language}
           value={inputs.code}
           onChange={handleCodeChange}
         />
diff --git a/web/app/components/workflow/nodes/code/use-config.ts b/web/app/components/workflow/nodes/code/use-config.ts
index da13d54eb8..d052bb28b3 100644
--- a/web/app/components/workflow/nodes/code/use-config.ts
+++ b/web/app/components/workflow/nodes/code/use-config.ts
@@ -17,14 +17,14 @@ const useConfig = (id: string, payload: CodeNodeType) => {
       draft.code = code
     })
     setInputs(newInputs)
-  }, [setInputs])
+  }, [inputs, setInputs])
 
   const handleCodeLanguageChange = useCallback((codeLanguage: CodeLanguage) => {
     const newInputs = produce(inputs, (draft) => {
       draft.code_language = codeLanguage
     })
     setInputs(newInputs)
-  }, [setInputs])
+  }, [inputs, setInputs])
 
   const { handleVarListChange: handleOutputVarListChange, handleAddVariable: handleAddOutputVariable } = useOutputVarList<CodeNodeType>({
     inputs,
diff --git a/web/package.json b/web/package.json
index 6abe8ec8c0..66bb78383c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -23,6 +23,7 @@
     "@lexical/react": "^0.12.2",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
+    "@monaco-editor/react": "^4.6.0",
     "@next/mdx": "^14.0.4",
     "@sentry/react": "^7.54.0",
     "@sentry/utils": "^7.54.0",
diff --git a/web/yarn.lock b/web/yarn.lock
index 8959403028..313ce99caf 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -490,6 +490,20 @@
   resolved "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz"
   integrity sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==
 
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.6.0":
+  version "4.6.0"
+  resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
+  dependencies:
+    "@monaco-editor/loader" "^1.4.0"
+
 "@next/env@14.1.0":
   version "14.1.0"
   resolved "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz"
@@ -5343,6 +5357,11 @@ miragejs@^0.1.47:
     lodash.values "^4.3.0"
     pretender "^3.4.7"
 
+"monaco-editor@>= 0.21.0 < 1", "monaco-editor@>= 0.25.0 < 1":
+  version "0.46.0"
+  resolved "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.46.0.tgz"
+  integrity sha512-ADwtLIIww+9FKybWscd7OCfm9odsFYHImBRI1v9AviGce55QY8raT+9ihH8jX/E/e6QVSGM+pKj4jSUSRmALNQ==
+
 mri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz"
@@ -5957,7 +5976,7 @@ react-18-input-autosize@^3.0.0:
   dependencies:
     prop-types "^15.5.8"
 
-react-dom@*, "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", "react-dom@^16 || ^17 || ^18", react-dom@^18.2.0, react-dom@>=16.0.0, react-dom@>=16.14.0, react-dom@>=16.8.0, react-dom@>=16.9.0, react-dom@>=17, react-dom@>=17.x:
+react-dom@*, "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", "react-dom@^16 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0, react-dom@>=16.0.0, react-dom@>=16.14.0, react-dom@>=16.8.0, react-dom@>=16.9.0, react-dom@>=17, react-dom@>=17.x:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -6676,6 +6695,11 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz"
   integrity sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz"