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>
This commit is contained in:
parent
315e3aedc3
commit
da32fc7167
|
|
@ -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'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue