feat: api support var logic

web/app/components/base/prompt-editor/index.tsx

@@ -51,6 +51,7 @@ import type {
 
 export type PromptEditorProps = {
   className?: string
+  placeholder?: string
   style?: React.CSSProperties
   value?: string
   editable?: boolean
@@ -99,6 +100,7 @@ export type PromptEditorProps = {
 
 const PromptEditor: FC<PromptEditorProps> = ({
   className,
+  placeholder,
   style,
   value,
   editable = true,
@@ -139,7 +141,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
     show: true,
     selectable: true,
     variables: [],
-    getWorkflowNode: () => {},
+    getWorkflowNode: () => { },
     onInsert: () => { },
     onDelete: () => { },
   },
@@ -189,7 +191,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
       <div className='relative'>
         <RichTextPlugin
           contentEditable={<ContentEditable className={`${className} outline-none text-sm text-gray-700 leading-6`} style={style || {}} />}
-          placeholder={<Placeholder />}
+          placeholder={<Placeholder value={placeholder} />}
           ErrorBoundary={LexicalErrorBoundary}
         />
         <ComponentPicker

web/app/components/base/prompt-editor/plugins/placeholder.tsx

@@ -1,11 +1,15 @@
 import { useTranslation } from 'react-i18next'
 
-const Placeholder = () => {
+const Placeholder = ({
+  value,
+}: {
+  value?: string
+}) => {
   const { t } = useTranslation()
 
   return (
     <div className='absolute top-0 left-0 h-full w-full text-sm text-gray-300 select-none pointer-events-none leading-6'>
-      {t('common.promptEditor.placeholder')}
+      {value || t('common.promptEditor.placeholder')}
     </div>
   )
 }