From 77950e48c76f4a3b29d01831d43039caba29888a Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期二, 18 十一月 2025 14:12:42 +0800
Subject: [PATCH] 修改
---
app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx | 67 +++++++++++++++++++++++----------
1 files changed, 47 insertions(+), 20 deletions(-)
diff --git a/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 1fac467..db04289 100644
--- a/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -3,29 +3,26 @@
import Editor, { loader } from '@monaco-editor/react'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import Base from '../base'
-import { WEB_PREFIX } from '@/config'
import cn from '@/utils/classnames'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import {
getFilesInLogs,
} from '@/app/components/base/file-uploader/utils'
-import { Theme } from '@/types/app'
-import useTheme from '@/hooks/use-theme'
+
import './style.css'
-import { noop } from 'lodash-es'
// load file from local instead of cdn https://github.com/suren-atoyan/monaco-react/issues/482
-loader.config({ paths: { vs: `${WEB_PREFIX}/vs` } })
+loader.config({ paths: { vs: '/vs' } })
const CODE_EDITOR_LINE_HEIGHT = 18
export type Props = {
value?: string | object
- placeholder?: React.JSX.Element | string
+ placeholder?: JSX.Element | string
onChange?: (value: string) => void
- title?: React.JSX.Element
+ title?: JSX.Element
language: CodeLanguage
- headerRight?: React.JSX.Element
+ headerRight?: JSX.Element
readOnly?: boolean
isJSONStringifyBeauty?: boolean
height?: number
@@ -37,7 +34,7 @@
onGenerated?: (value: string) => void
showCodeGenerator?: boolean
className?: string
- tip?: React.JSX.Element
+ tip?: JSX.Element
}
export const languageMap = {
@@ -46,10 +43,19 @@
[CodeLanguage.json]: 'json',
}
+const DEFAULT_THEME = {
+ base: 'vs',
+ inherit: true,
+ rules: [],
+ colors: {
+ 'editor.background': '#F2F4F7', // #00000000 transparent. But it will has a blue border
+ },
+}
+
const CodeEditor: FC<Props> = ({
value = '',
placeholder = '',
- onChange = noop,
+ onChange = () => { },
title = '',
headerRight,
language,
@@ -70,7 +76,7 @@
const [isMounted, setIsMounted] = React.useState(false)
const minHeight = height || 200
const [editorContentHeight, setEditorContentHeight] = useState(56)
- const { theme: appTheme } = useTheme()
+
const valueRef = useRef(value)
useEffect(() => {
valueRef.current = value
@@ -108,7 +114,27 @@
setIsFocus(false)
})
- monaco.editor.setTheme(appTheme === Theme.light ? 'light' : 'vs-dark') // Fix: sometimes not load the default theme
+ monaco.editor.defineTheme('default-theme', DEFAULT_THEME)
+
+ 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',
+ },
+ })
+
+ monaco.editor.setTheme('default-theme') // Fix: sometimes not load the default theme
onMount?.(editor, monaco)
setIsMounted(true)
@@ -120,16 +146,17 @@
try {
return JSON.stringify(value as object, null, 2)
}
- catch {
+ catch (e) {
return value as string
}
})()
- const theme = useMemo(() => {
- if (appTheme === Theme.light)
- return 'light'
- return 'vs-dark'
- }, [appTheme])
+ const theme = (() => {
+ if (noWrapper)
+ return 'default-theme'
+
+ return isFocus ? 'focus-theme' : 'blur-theme'
+ })()
const main = (
<>
@@ -159,14 +186,14 @@
}}
onMount={handleEditorDidMount}
/>
- {!outPutValue && !isFocus && <div className='pointer-events-none absolute left-[36px] top-0 text-[13px] font-normal leading-[18px] text-gray-300'>{placeholder}</div>}
+ {!outPutValue && !isFocus && <div className='pointer-events-none absolute left-[36px] top-0 leading-[18px] text-[13px] font-normal text-gray-300'>{placeholder}</div>}
</>
)
return (
<div className={cn(isExpand && 'h-full', className)}>
{noWrapper
- ? <div className='no-wrapper relative' style={{
+ ? <div className='relative no-wrapper' style={{
height: isExpand ? '100%' : (editorContentHeight) / 2 + CODE_EDITOR_LINE_HEIGHT, // In IDE, the last line can always be in lop line. So there is some blank space in the bottom.
minHeight: CODE_EDITOR_LINE_HEIGHT,
}}>
--
Gitblit v1.8.0