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>

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'
         },

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'
         },

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 }
+                            })
+                    }
+                }
+            })
+        ]
+    }
+})