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