feat: code editor base

web/app/components/workflow/nodes/_base/components/editor/base.tsx

@@ -0,0 +1,71 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import copy from 'copy-to-clipboard'
+import cn from 'classnames'
+import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
+import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import { Expand04 } from '@/app/components/base/icons/src/vender/solid/arrows'
+type Props = {
+  className?: string
+  title: JSX.Element
+  headerRight?: JSX.Element
+  children: JSX.Element
+  minHeight?: number
+  value: string
+  isFocus: boolean
+}
+
+const Base: FC<Props> = ({
+  className,
+  title,
+  headerRight,
+  children,
+  minHeight = 120,
+  value,
+  isFocus,
+}) => {
+  const editorContentMinHeight = minHeight - 28
+  const [editorContentHeight, setEditorContentHeight] = useState(editorContentMinHeight)
+
+  const [isCopied, setIsCopied] = React.useState(false)
+  const handleCopy = useCallback(() => {
+    copy(value)
+    setIsCopied(true)
+  }, [value])
+
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  const toggleExpand = useCallback(() => {
+    setIsExpanded(!isExpanded)
+  }, [isExpanded])
+
+  return (
+    <div className={cn(className, 'rounded-lg border', isFocus ? 'bg-white border-gray-200' : 'bg-gray-100 border-gray-100')}>
+      <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-1'>
+        <div className=''>{title}</div>
+        <div className='flex'>
+          {headerRight}
+          {!isCopied
+            ? (
+              <Clipboard className='mx-1 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleCopy} />
+            )
+            : (
+              <ClipboardCheck className='mx-1 w-3.5 h-3.5 text-gray-500' />
+            )
+          }
+          <Expand04 className='ml-2 mr-2 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={toggleExpand} />
+        </div>
+      </div>
+      <PromptEditorHeightResizeWrap
+        height={editorContentHeight}
+        minHeight={editorContentMinHeight}
+        onHeightChange={setEditorContentHeight}
+      >
+        <div className='h-full'>
+          {children}
+        </div>
+      </PromptEditorHeightResizeWrap>
+    </div>
+  )
+}
+export default React.memo(Base)

web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx

@@ -0,0 +1,39 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { CodeLanguage } from '../../../code/types'
+import Base from './base'
+
+type Props = {
+  value: string
+  onChange: (value: string) => void
+  codeLanguage: string
+  onCodeLanguageChange: (codeLanguage: CodeLanguage) => void
+}
+
+const CodeEditor: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  const [isFocus, setIsFocus] = React.useState(false)
+
+  return (
+    <div>
+      <Base
+        title={<div>Code</div>}
+        value={value}
+        isFocus={isFocus}
+        minHeight={86}
+      >
+        <textarea
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          onFocus={() => setIsFocus(true)}
+          onBlur={() => setIsFocus(false)}
+          className='w-full h-full p-3 resize-none bg-transparent'
+        />
+      </Base>
+    </div>
+  )
+}
+export default React.memo(CodeEditor)

web/app/components/workflow/nodes/code/panel.tsx

@@ -5,7 +5,8 @@ import { mockData } from './mock'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
-
+import Split from '@/app/components/workflow/nodes/_base/components/split'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 const i18nPrefix = 'workflow.nodes.code'
 
 const Panel: FC = () => {
@@ -16,6 +17,8 @@ const Panel: FC = () => {
     inputs,
     handleVarListChange,
     handleAddVariable,
+    handleCodeChange,
+    handleCodeLanguageChange,
   } = useConfig(mockData)
   return (
     <div className='mt-2 px-4 space-y-4'>
@@ -31,6 +34,14 @@ const Panel: FC = () => {
           onChange={handleVarListChange}
         />
       </Field>
+      <Split />
+      <CodeEditor
+        value={inputs.code}
+        onChange={handleCodeChange}
+        codeLanguage={inputs.code_language}
+        onCodeLanguageChange={handleCodeLanguageChange}
+      />
+      <Split />
     </div>
   )
 }

web/app/components/workflow/nodes/code/use-config.ts

@@ -1,6 +1,6 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import useVarList from '../_base/hooks/use-var-list'
-import type { CodeNodeType } from './types'
+import type { CodeLanguage, CodeNodeType } from './types'
 
 const useConfig = (initInputs: CodeNodeType) => {
   const [inputs, setInputs] = useState<CodeNodeType>(initInputs)
@@ -9,10 +9,20 @@ const useConfig = (initInputs: CodeNodeType) => {
     setInputs,
   })
 
+  const handleCodeChange = useCallback((code: string) => {
+    setInputs(prev => ({ ...prev, code }))
+  }, [setInputs])
+
+  const handleCodeLanguageChange = useCallback((codeLanguage: CodeLanguage) => {
+    setInputs(prev => ({ ...prev, code_language: codeLanguage }))
+  }, [setInputs])
+
   return {
     inputs,
     handleVarListChange,
     handleAddVariable,
+    handleCodeChange,
+    handleCodeLanguageChange,
   }
 }