From 794c57b9385111f627ea3dd823d2b928abc230ea Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 27 Mar 2024 13:49:22 +0800
Subject: [PATCH] fix: code editor readonly can get focus

---
 .../components/editor/code-editor/index.tsx   | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 343c934600..fb6f173e67 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -86,27 +86,31 @@ const CodeEditor: FC<Props> = ({
         isFocus={isFocus}
         minHeight={200}
       >
-        {/* https://www.npmjs.com/package/@monaco-editor/react */}
-        <Editor
-          className='h-full'
-          // language={language === CodeLanguage.javascript ? 'javascript' : 'python'}
-          language={languageMap[language] || 'javascript'}
-          theme={isFocus ? 'focus-theme' : 'blur-theme'}
-          value={outPutValue}
-          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
-            wordWrap: 'on', // auto line wrap
-            // lineNumbers: (num) => {
-            //   return <div>{num}</div>
-            // }
-          }}
-          onMount={handleEditorDidMount}
-        />
+        <>
+          {/* https://www.npmjs.com/package/@monaco-editor/react */}
+          <Editor
+            className='h-full'
+            // language={language === CodeLanguage.javascript ? 'javascript' : 'python'}
+            language={languageMap[language] || 'javascript'}
+            theme={isFocus ? 'focus-theme' : 'blur-theme'}
+            value={outPutValue}
+            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
+              wordWrap: 'on', // auto line wrap
+              // lineNumbers: (num) => {
+              //   return <div>{num}</div>
+              // }
+            }}
+            onMount={handleEditorDidMount}
+          />
+          {/* mask to disable focus but left space to  scroll and resize panel */}
+          {readOnly && <div className='absolute left-0 top-0 right-[10px] bottom-[12px]  z-10'></div>}
+        </>
       </Base>
     </div>
   )