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)