fix: enchance code editor syle

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>
   )

web/app/components/workflow/nodes/_base/components/editor/code-editor/style.css

@@ -0,0 +1,3 @@
+.margin-view-overlays {
+  padding-left: 10px;
+}

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}

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>

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>
           }