fix: code editor readonly can get focus

This commit is contained in:
Joel 2024-03-27 13:49:22 +08:00
parent 9eff8715fb
commit 794c57b938

View File

@ -86,27 +86,31 @@ const CodeEditor: FC<Props> = ({
isFocus={isFocus} isFocus={isFocus}
minHeight={200} minHeight={200}
> >
{/* https://www.npmjs.com/package/@monaco-editor/react */} <>
<Editor {/* https://www.npmjs.com/package/@monaco-editor/react */}
className='h-full' <Editor
// language={language === CodeLanguage.javascript ? 'javascript' : 'python'} className='h-full'
language={languageMap[language] || 'javascript'} // language={language === CodeLanguage.javascript ? 'javascript' : 'python'}
theme={isFocus ? 'focus-theme' : 'blur-theme'} language={languageMap[language] || 'javascript'}
value={outPutValue} theme={isFocus ? 'focus-theme' : 'blur-theme'}
onChange={handleEditorChange} value={outPutValue}
// https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html onChange={handleEditorChange}
options={{ // https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
readOnly, options={{
quickSuggestions: false, readOnly,
minimap: { enabled: false }, quickSuggestions: false,
lineNumbersMinChars: 1, // would change line num width minimap: { enabled: false },
wordWrap: 'on', // auto line wrap lineNumbersMinChars: 1, // would change line num width
// lineNumbers: (num) => { wordWrap: 'on', // auto line wrap
// return <div>{num}</div> // lineNumbers: (num) => {
// } // return <div>{num}</div>
}} // }
onMount={handleEditorDidMount} }}
/> 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> </Base>
</div> </div>
) )