From da32fc7167203b2770201ebc4b34611c64359948 Mon Sep 17 00:00:00 2001
From: Debottam Mandal <131802431+DebottamMandal123@users.noreply.github.com>
Date: Wed, 26 Nov 2025 06:03:54 +0530
Subject: [PATCH] Fixed: Variable syntax highlighting lost after copy-paste
 from external editor in Agentflow V2 (#5513)

* Fixed: Variable syntax highlighting lost after copy-paste from external editor in Agentflow V2

* Fixed: Variable syntax highlighting lost after copy paste

* Rename CustomMention.js to customMention.js

* Update ExpandRichInputDialog.jsx

* Update RichInput.jsx

* Update customMention.js

* Update ExpandRichInputDialog.jsx

* Update RichInput.jsx

* lint fix

---------

Co-authored-by: Henry Heng <henryheng@flowiseai.com>
---
 .../dialog/ExpandRichInputDialog.jsx          |  4 +--
 .../ui/src/ui-component/input/RichInput.jsx   |  4 +--
 packages/ui/src/utils/customMention.js        | 26 +++++++++++++++++++
 3 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/utils/customMention.js

diff --git a/packages/ui/src/ui-component/dialog/ExpandRichInputDialog.jsx b/packages/ui/src/ui-component/dialog/ExpandRichInputDialog.jsx
index ae94e97d2..d9f555696 100644
--- a/packages/ui/src/ui-component/dialog/ExpandRichInputDialog.jsx
+++ b/packages/ui/src/ui-component/dialog/ExpandRichInputDialog.jsx
@@ -16,11 +16,11 @@ import { useEditor, EditorContent } from '@tiptap/react'
 import Placeholder from '@tiptap/extension-placeholder'
 import { mergeAttributes } from '@tiptap/core'
 import StarterKit from '@tiptap/starter-kit'
-import Mention from '@tiptap/extension-mention'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { common, createLowlight } from 'lowlight'
 import { suggestionOptions } from '@/ui-component/input/suggestionOption'
 import { getAvailableNodesForVariable } from '@/utils/genericHelper'
+import { CustomMention } from '@/utils/customMention'
 
 const lowlight = createLowlight(common)
 
@@ -78,7 +78,7 @@ const extensions = (availableNodesForVariable, availableState, acceptNodeOutputA
     StarterKit.configure({
         codeBlock: false
     }),
-    Mention.configure({
+    CustomMention.configure({
         HTMLAttributes: {
             class: 'variable'
         },
diff --git a/packages/ui/src/ui-component/input/RichInput.jsx b/packages/ui/src/ui-component/input/RichInput.jsx
index 6ae4be38d..b020984f9 100644
--- a/packages/ui/src/ui-component/input/RichInput.jsx
+++ b/packages/ui/src/ui-component/input/RichInput.jsx
@@ -7,11 +7,11 @@ import { mergeAttributes } from '@tiptap/core'
 import StarterKit from '@tiptap/starter-kit'
 import { styled } from '@mui/material/styles'
 import { Box } from '@mui/material'
-import Mention from '@tiptap/extension-mention'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { common, createLowlight } from 'lowlight'
 import { suggestionOptions } from './suggestionOption'
 import { getAvailableNodesForVariable } from '@/utils/genericHelper'
+import { CustomMention } from '@/utils/customMention'
 
 const lowlight = createLowlight(common)
 
@@ -20,7 +20,7 @@ const extensions = (availableNodesForVariable, availableState, acceptNodeOutputA
     StarterKit.configure({
         codeBlock: false
     }),
-    Mention.configure({
+    CustomMention.configure({
         HTMLAttributes: {
             class: 'variable'
         },
diff --git a/packages/ui/src/utils/customMention.js b/packages/ui/src/utils/customMention.js
new file mode 100644
index 000000000..f8a8df10e
--- /dev/null
+++ b/packages/ui/src/utils/customMention.js
@@ -0,0 +1,26 @@
+import Mention from '@tiptap/extension-mention'
+import { PasteRule } from '@tiptap/core'
+
+export const CustomMention = Mention.extend({
+    renderText({ node }) {
+        return `{{${node.attrs.label ?? node.attrs.id}}}`
+    },
+    addPasteRules() {
+        return [
+            new PasteRule({
+                find: /\{\{([^{}]+)\}\}/g,
+                handler: ({ match, chain, range }) => {
+                    const label = match[1].trim()
+                    if (label) {
+                        chain()
+                            .deleteRange(range)
+                            .insertContentAt(range.from, {
+                                type: this.name,
+                                attrs: { id: label, label: label }
+                            })
+                    }
+                }
+            })
+        ]
+    }
+})