diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 568d1c4ba8..0111946620 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -35,6 +35,7 @@ import {
 import {
   WorkflowVariableBlock,
   WorkflowVariableBlockNode,
+  WorkflowVariableBlockReplacementBlock,
 } from './plugins/workflow-variable-block'
 import VariableBlock from './plugins/variable-block'
 import VariableValueBlock from './plugins/variable-value-block'
@@ -156,6 +157,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           externalToolBlock={externalToolBlock}
           workflowVariableBlock={workflowVariableBlock}
         />
+        <ContextBlockReplacementBlock {...contextBlock} />
         {
           contextBlock?.show && (
             <>
@@ -192,6 +194,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
           workflowVariableBlock?.show && (
             <>
               <WorkflowVariableBlock {...workflowVariableBlock} />
+              <WorkflowVariableBlockReplacementBlock {...workflowVariableBlock} />
             </>
           )
         }
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
index 89c6cb9c0c..2e2e5749fd 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
@@ -41,11 +41,11 @@ export const usePromptOptions = (
           new PromptOption(t('common.promptEditor.context.item.title'), {
             icon: <File05 className='w-4 h-4 text-[#6938EF]' />,
             onSelect: () => {
-              if (contextBlock?.selectable)
+              if (!contextBlock?.selectable)
                 return
               editor.dispatchCommand(INSERT_CONTEXT_BLOCK_COMMAND, undefined)
             },
-            disabled: contextBlock?.selectable,
+            disabled: !contextBlock?.selectable,
           }),
         ]
         : [],
@@ -54,11 +54,11 @@ export const usePromptOptions = (
           new PromptOption(t('common.promptEditor.query.item.title'), {
             icon: <UserEdit02 className='w-4 h-4 text-[#FD853A]' />,
             onSelect: () => {
-              if (queryBlock?.selectable)
+              if (!queryBlock?.selectable)
                 return
               editor.dispatchCommand(INSERT_QUERY_BLOCK_COMMAND, undefined)
             },
-            disabled: queryBlock?.selectable,
+            disabled: !queryBlock?.selectable,
           }),
         ]
         : [],
@@ -67,11 +67,11 @@ export const usePromptOptions = (
           new PromptOption(t('common.promptEditor.history.item.title'), {
             icon: <MessageClockCircle className='w-4 h-4 text-[#DD2590]' />,
             onSelect: () => {
-              if (historyBlock?.selectable)
+              if (!historyBlock?.selectable)
                 return
               editor.dispatchCommand(INSERT_HISTORY_BLOCK_COMMAND, undefined)
             },
-            disabled: historyBlock?.selectable,
+            disabled: !historyBlock?.selectable,
           }),
         ]
         : [],
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
index 3d39171a26..6937872786 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
@@ -49,7 +49,7 @@ export const PromptMenuItem = memo(({
     <div
       key={option.key}
       className={`
-        flex items-center px-3 h-6 cursor-pointer hover:bg-gray-50
+        flex items-center px-3 h-6 cursor-pointer hover:bg-gray-50 rounded-md
         ${isSelected && !option.disabled && '!bg-gray-50'}
         ${option.disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-gray-50 cursor-pointer'}
       `}
diff --git a/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
index 84327193d3..34343ca50f 100644
--- a/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
@@ -54,7 +54,7 @@ const ContextBlockReplacementBlock = ({
     return mergeRegister(
       editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createContextBlockNode)),
     )
-  }, [editor, getMatch, createContextBlockNode])
+  }, [])
 
   return null
 }
diff --git a/web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx
index 960b9c926f..38c7eb1420 100644
--- a/web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx
@@ -52,7 +52,7 @@ const HistoryBlockReplacementBlock = ({
     return mergeRegister(
       editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createHistoryBlockNode)),
     )
-  }, [editor, getMatch, createHistoryBlockNode])
+  }, [])
 
   return null
 }
diff --git a/web/app/components/base/prompt-editor/plugins/query-block/query-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/query-block/query-block-replacement-block.tsx
index 1f0decf396..60addcea29 100644
--- a/web/app/components/base/prompt-editor/plugins/query-block/query-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/query-block/query-block-replacement-block.tsx
@@ -51,7 +51,7 @@ const QueryBlockReplacementBlock = ({
     return mergeRegister(
       editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createQueryBlockNode)),
     )
-  }, [editor, getMatch, createQueryBlockNode])
+  }, [])
 
   return null
 }
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/index.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/index.tsx
index e1bc55e20c..0fcf8856b4 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/index.tsx
@@ -68,3 +68,4 @@ WorkflowVariableBlock.displayName = 'WorkflowVariableBlock'
 
 export { WorkflowVariableBlock }
 export { WorkflowVariableBlockNode } from './node'
+export { default as WorkflowVariableBlockReplacementBlock } from './workflow-variable-block-replacement-block'
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx
new file mode 100644
index 0000000000..d2ed697d2e
--- /dev/null
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/workflow-variable-block-replacement-block.tsx
@@ -0,0 +1,61 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+} from 'react'
+import type { TextNode } from 'lexical'
+import { $applyNodeReplacement } from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { decoratorTransform } from '../../utils'
+import type { WorkflowVariableBlockType } from '../../types'
+import { CustomTextNode } from '../custom-text/node'
+import { $createWorkflowVariableBlockNode } from './node'
+import { WorkflowVariableBlockNode } from './index'
+
+const REGEX = /\{\{#(\d+|sys)(\.[a-zA-Z_][a-zA-Z0-9_]{0,29})+#\}\}/gi
+
+const WorkflowVariableBlockReplacementBlock = ({
+  getWorkflowNode = () => undefined,
+  onInsert,
+}: WorkflowVariableBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([WorkflowVariableBlockNode]))
+      throw new Error('WorkflowVariableBlockNodePlugin: WorkflowVariableBlockNode not registered on editor')
+  }, [editor])
+
+  const createWorkflowVariableBlockNode = useCallback((textNode: TextNode): WorkflowVariableBlockNode => {
+    if (onInsert)
+      onInsert()
+
+    const nodePathString = textNode.getTextContent().slice(3, -3)
+    return $applyNodeReplacement($createWorkflowVariableBlockNode(nodePathString.split('.'), getWorkflowNode))
+  }, [onInsert, getWorkflowNode])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    console.log(matchArr, 'ma')
+    const startOffset = matchArr.index
+    const endOffset = startOffset + matchArr[0].length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createWorkflowVariableBlockNode)),
+    )
+  }, [])
+
+  return null
+}
+
+export default memo(WorkflowVariableBlockReplacementBlock)
diff --git a/web/app/components/base/prompt-editor/utils.ts b/web/app/components/base/prompt-editor/utils.ts
index b053d8c5d3..c344d6e99e 100644
--- a/web/app/components/base/prompt-editor/utils.ts
+++ b/web/app/components/base/prompt-editor/utils.ts
@@ -190,7 +190,7 @@ export function registerLexicalTextEntity<T extends TextNode>(
 export const decoratorTransform = (
   node: CustomTextNode,
   getMatch: (text: string) => null | EntityMatch,
-  createNode: () => LexicalNode,
+  createNode: (textNode: TextNode) => LexicalNode,
 ) => {
   if (!node.isSimpleText())
     return
@@ -241,7 +241,7 @@ export const decoratorTransform = (
     else
       [, nodeToReplace, currentNode] = currentNode.splitText(match.start, match.end)
 
-    const replacementNode = createNode()
+    const replacementNode = createNode(nodeToReplace)
     nodeToReplace.replace(replacementNode)
 
     if (currentNode == null)
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 2d8e96d9eb..2dc8796935 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -124,8 +124,6 @@ const Editor: FC<Props> = ({
                 contextBlock={{
                   show: justVar ? false : isShowContext,
                   selectable: !hasSetBlockStatus?.context,
-                  datasets: [],
-                  onAddContext: () => { },
                   canNotAddContext: true,
                 }}
                 historyBlock={{
@@ -135,7 +133,6 @@ const Editor: FC<Props> = ({
                     user: 'Human',
                     assistant: 'Assistant',
                   },
-                  onEditRole: () => { },
                 }}
                 queryBlock={{
                   show: justVar ? false : isShowQuery,