FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

web/app/components/base/prompt-editor/plugins/query-block/index.tsx

@@ -1,5 +1,7 @@
-import type { FC } from 'react'
-import { useEffect } from 'react'
+import {
+  memo,
+  useEffect,
+} from 'react'
 import {
   $insertNodes,
   COMMAND_PRIORITY_EDITOR,
@@ -7,6 +9,7 @@ import {
 } from 'lexical'
 import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import type { QueryBlockType } from '../../types'
 import {
   $createQueryBlockNode,
   QueryBlockNode,
@@ -19,10 +22,10 @@ export type QueryBlockProps = {
   onInsert?: () => void
   onDelete?: () => void
 }
-const QueryBlock: FC<QueryBlockProps> = ({
+const QueryBlock = memo(({
   onInsert,
   onDelete,
-}) => {
+}: QueryBlockType) => {
   const [editor] = useLexicalComposerContext()
 
   useEffect(() => {
@@ -57,6 +60,9 @@ const QueryBlock: FC<QueryBlockProps> = ({
   }, [editor, onInsert, onDelete])
 
   return null
-}
+})
+QueryBlock.displayName = 'QueryBlock'
 
-export default QueryBlock
+export { QueryBlock }
+export { QueryBlockNode } from './node'
+export { default as QueryBlockReplacementBlock } from './query-block-replacement-block'

web/app/components/base/prompt-editor/plugins/query-block/query-block-replacement-block.tsx

@@ -0,0 +1,60 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+} from 'react'
+import { $applyNodeReplacement } from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { decoratorTransform } from '../../utils'
+import { QUERY_PLACEHOLDER_TEXT } from '../../constants'
+import type { QueryBlockType } from '../../types'
+import {
+  $createQueryBlockNode,
+  QueryBlockNode,
+} from '../query-block/node'
+import { CustomTextNode } from '../custom-text/node'
+
+const REGEX = new RegExp(QUERY_PLACEHOLDER_TEXT)
+
+const QueryBlockReplacementBlock = ({
+  onInsert,
+}: QueryBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([QueryBlockNode]))
+      throw new Error('QueryBlockNodePlugin: QueryBlockNode not registered on editor')
+  }, [editor])
+
+  const createQueryBlockNode = useCallback((): QueryBlockNode => {
+    if (onInsert)
+      onInsert()
+    return $applyNodeReplacement($createQueryBlockNode())
+  }, [onInsert])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + QUERY_PLACEHOLDER_TEXT.length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createQueryBlockNode)),
+    )
+  }, [])
+
+  return null
+}
+
+export default memo(QueryBlockReplacementBlock)