dify

dify/web/app/components/base/prompt-editor/plugins/variable-value-block/index.tsx

@@ -0,0 +1,52 @@
+import {
+  useCallback,
+  useEffect,
+} from 'react'
+import type { TextNode } from 'lexical'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useLexicalTextEntity } from '../../hooks'
+import {
+  $createVariableValueBlockNode,
+  VariableValueBlockNode,
+} from './node'
+import { getHashtagRegexString } from './utils'
+
+const REGEX = new RegExp(getHashtagRegexString(), 'i')
+
+const VariableValueBlock = () => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([VariableValueBlockNode]))
+      throw new Error('VariableValueBlockPlugin: VariableValueNode not registered on editor')
+  }, [editor])
+
+  const createVariableValueBlockNode = useCallback((textNode: TextNode): VariableValueBlockNode => {
+    return $createVariableValueBlockNode(textNode.getTextContent())
+  }, [])
+
+  const getVariableValueMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const hashtagLength = matchArr[0].length
+    const startOffset = matchArr.index
+    const endOffset = startOffset + hashtagLength
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useLexicalTextEntity<VariableValueBlockNode>(
+    getVariableValueMatch,
+    VariableValueBlockNode,
+    createVariableValueBlockNode,
+  )
+
+  return null
+}
+
+export default VariableValueBlock

dify/web/app/components/base/prompt-editor/plugins/variable-value-block/node.tsx

@@ -0,0 +1,64 @@
+import type {
+  EditorConfig,
+  LexicalNode,
+  SerializedTextNode,
+} from 'lexical'
+import {
+  $applyNodeReplacement,
+  TextNode,
+} from 'lexical'
+
+export class VariableValueBlockNode extends TextNode {
+  static getType(): string {
+    return 'variable-value-block'
+  }
+
+  static clone(node: VariableValueBlockNode): VariableValueBlockNode {
+    return new VariableValueBlockNode(node.__text, node.__key)
+  }
+
+  // constructor(text: string, key?: NodeKey) {
+  //   super(text, key)
+  // }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const element = super.createDOM(config)
+    element.classList.add('inline-flex', 'items-center', 'px-0.5', 'h-[22px]', 'text-text-accent', 'rounded-[5px]', 'align-middle')
+    return element
+  }
+
+  static importJSON(serializedNode: SerializedTextNode): TextNode {
+    const node = $createVariableValueBlockNode(serializedNode.text)
+    node.setFormat(serializedNode.format)
+    node.setDetail(serializedNode.detail)
+    node.setMode(serializedNode.mode)
+    node.setStyle(serializedNode.style)
+    return node
+  }
+
+  exportJSON(): SerializedTextNode {
+    return {
+      detail: this.getDetail(),
+      format: this.getFormat(),
+      mode: this.getMode(),
+      style: this.getStyle(),
+      text: this.getTextContent(),
+      type: 'variable-value-block',
+      version: 1,
+    }
+  }
+
+  canInsertTextBefore(): boolean {
+    return false
+  }
+}
+
+export function $createVariableValueBlockNode(text = ''): VariableValueBlockNode {
+  return $applyNodeReplacement(new VariableValueBlockNode(text))
+}
+
+export function $isVariableValueNodeBlock(
+  node: LexicalNode | null | undefined,
+): node is VariableValueBlockNode {
+  return node instanceof VariableValueBlockNode
+}

dify/web/app/components/base/prompt-editor/plugins/variable-value-block/utils.ts

@@ -0,0 +1,5 @@
+export function getHashtagRegexString(): string {
+  const hashtag = '\\{\\{[a-zA-Z_][a-zA-Z0-9_]{0,29}\\}\\}'
+
+  return hashtag
+}