From 9839b5cb53e91ff13c27c19d50ffaec21eb6b624 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 6 Mar 2024 11:23:34 +0800
Subject: [PATCH] fix: enchance code editor syle

---
 .../index.tsx}                                | 42 +++++++++++++++++--
 .../components/editor/code-editor/style.css   |  3 ++
 .../components/workflow/nodes/code/panel.tsx  |  1 +
 .../nodes/http/components/edit-body/index.tsx |  3 ++
 .../nodes/template-transform/panel.tsx        |  3 ++
 5 files changed, 49 insertions(+), 3 deletions(-)
 rename web/app/components/workflow/nodes/_base/components/editor/{code-editor.tsx => code-editor/index.tsx} (59%)
 create mode 100644 web/app/components/workflow/nodes/_base/components/editor/code-editor/style.css

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/index.tsx
similarity index 59%
rename from web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
rename to web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index a593961442..6af5317e54 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -1,9 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import Editor from '@monaco-editor/react'
-import React from 'react'
-import Base from './base'
+import React, { useRef } from 'react'
+import Base from '../base'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import './style.css'
 
 type Props = {
   value: string
@@ -11,6 +12,7 @@ type Props = {
   title: JSX.Element
   language: CodeLanguage
   headerRight?: JSX.Element
+  readOnly?: boolean
 }
 
 const CodeEditor: FC<Props> = ({
@@ -19,12 +21,43 @@ const CodeEditor: FC<Props> = ({
   title,
   headerRight,
   language,
+  readOnly,
 }) => {
   const [isFocus, setIsFocus] = React.useState(false)
 
   const handleEditorChange = (value: string | undefined) => {
     onChange(value || '')
   }
+
+  const editorRef = useRef(null)
+  const handleEditorDidMount = (editor: any, monaco: any) => {
+    editorRef.current = editor
+    editor.onDidFocusEditorText(() => {
+      setIsFocus(true)
+    })
+    editor.onDidBlurEditorText(() => {
+      setIsFocus(false)
+    })
+
+    monaco.editor.defineTheme('blur-theme', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#F2F4F7',
+      },
+    })
+
+    monaco.editor.defineTheme('focus-theme', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#ffffff',
+      },
+    })
+  }
+
   return (
     <div>
       <Base
@@ -38,18 +71,21 @@ const CodeEditor: FC<Props> = ({
         <Editor
           className='h-full'
           defaultLanguage={language === CodeLanguage.javascript ? 'javascript' : 'python'}
+          theme={isFocus ? 'focus-theme' : 'blur-theme'}
           value={value}
           onChange={handleEditorChange}
           // https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
           options={{
+            readOnly,
             quickSuggestions: false,
             minimap: { enabled: false },
+            lineNumbersMinChars: 1, // would change line num width
             // lineNumbers: (num) => {
             //   return <div>{num}</div>
             // }
           }}
+          onMount={handleEditorDidMount}
         />
-
       </Base>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/style.css b/web/app/components/workflow/nodes/_base/components/editor/code-editor/style.css
new file mode 100644
index 0000000000..6e3f39a5de
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/style.css
@@ -0,0 +1,3 @@
+.margin-view-overlays {
+  padding-left: 10px;
+}
\ No newline at end of file
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index d7ca9f9970..a87e106b5d 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -59,6 +59,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
         <Split />
         {inputs.code_language}
         <CodeEditor
+          readOnly={readOnly}
           title={
             <TypeSelector
               options={codeLanguages}
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index 164231ae46..9c93d93b06 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -9,6 +9,7 @@ import useKeyValueList from '../../hooks/use-key-value-list'
 import KeyValue from '../key-value'
 import TextEditor from '../../../_base/components/editor/text-editor'
 import CodeEditor from '../../../_base/components/editor/code-editor'
+import { CodeLanguage } from '../../../code/types'
 
 type Props = {
   readonly: boolean
@@ -123,8 +124,10 @@ const EditBody: FC<Props> = ({
 
         {type === BodyType.json && (
           <CodeEditor
+            readOnly={readonly}
             title={<div className='uppercase'>JSON</div>}
             value={payload.data} onChange={handleBodyValueChange}
+            language={CodeLanguage.javascript}
           />
         )}
       </div>
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index ec46f16637..f3334d3b53 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { CodeLanguage } from '../code/types'
 import useConfig from './use-config'
 import type { TemplateTransformNodeType } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
@@ -46,6 +47,8 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
         </Field>
         <Split />
         <CodeEditor
+          readOnly={readOnly}
+          language={CodeLanguage.python3}
           title={
             <div className='uppercase'>{t(`${i18nPrefix}.code`)}</div>
           }