feat: enchance prompt and code (#23633)

Co-authored-by: stream <stream@dify.ai>
Co-authored-by: Stream <1542763342@qq.com>
Co-authored-by: Stream <Stream_2@qq.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/base/prompt-editor/plugins/current-block/component.tsx

@@ -0,0 +1,44 @@
+import { type FC, useEffect } from 'react'
+import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useSelectOrDelete } from '../../hooks'
+import { CurrentBlockNode, DELETE_CURRENT_BLOCK_COMMAND } from '.'
+import cn from '@/utils/classnames'
+import { CodeAssistant, MagicEdit } from '../../../icons/src/vender/line/general'
+
+type CurrentBlockComponentProps = {
+  nodeKey: string
+  generatorType: GeneratorType
+}
+
+const CurrentBlockComponent: FC<CurrentBlockComponentProps> = ({
+  nodeKey,
+  generatorType,
+}) => {
+  const [editor] = useLexicalComposerContext()
+  const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_CURRENT_BLOCK_COMMAND)
+
+  const Icon = generatorType === GeneratorType.prompt ? MagicEdit : CodeAssistant
+  useEffect(() => {
+      if (!editor.hasNodes([CurrentBlockNode]))
+        throw new Error('WorkflowVariableBlockPlugin: WorkflowVariableBlock not registered on editor')
+    }, [editor])
+
+  return (
+    <div
+      className={cn(
+        'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px] text-util-colors-violet-violet-600 hover:border-state-accent-solid hover:bg-state-accent-hover',
+        isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
+      )}
+      onClick={(e) => {
+        e.stopPropagation()
+      }}
+      ref={ref}
+    >
+      <Icon className='mr-0.5 h-[14px] w-[14px]' />
+      <div className='text-xs font-medium'>{generatorType === GeneratorType.prompt ? 'current_prompt' : 'current_code'}</div>
+    </div>
+  )
+}
+
+export default CurrentBlockComponent

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

@@ -0,0 +1,62 @@
+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 { CURRENT_PLACEHOLDER_TEXT } from '../../constants'
+import type { CurrentBlockType } from '../../types'
+import {
+  $createCurrentBlockNode,
+  CurrentBlockNode,
+} from './node'
+import { CustomTextNode } from '../custom-text/node'
+
+const REGEX = new RegExp(CURRENT_PLACEHOLDER_TEXT)
+
+const CurrentBlockReplacementBlock = ({
+  generatorType,
+  onInsert,
+}: CurrentBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([CurrentBlockNode]))
+      throw new Error('CurrentBlockNodePlugin: CurrentBlockNode not registered on editor')
+  }, [editor])
+
+  const createCurrentBlockNode = useCallback((): CurrentBlockNode => {
+    if (onInsert)
+      onInsert()
+    return $applyNodeReplacement($createCurrentBlockNode(generatorType))
+  }, [onInsert, generatorType])
+
+  const getMatch = useCallback((text: string) => {
+    const matchArr = REGEX.exec(text)
+
+    if (matchArr === null)
+      return null
+
+    const startOffset = matchArr.index
+    const endOffset = startOffset + CURRENT_PLACEHOLDER_TEXT.length
+    return {
+      end: endOffset,
+      start: startOffset,
+    }
+  }, [])
+
+  useEffect(() => {
+    REGEX.lastIndex = 0
+    return mergeRegister(
+      editor.registerNodeTransform(CustomTextNode, textNode => decoratorTransform(textNode, getMatch, createCurrentBlockNode)),
+    )
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return null
+}
+
+export default memo(CurrentBlockReplacementBlock)

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

@@ -0,0 +1,66 @@
+import {
+  memo,
+  useEffect,
+} from 'react'
+import {
+  $insertNodes,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+} from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import type { CurrentBlockType } from '../../types'
+import {
+  $createCurrentBlockNode,
+  CurrentBlockNode,
+} from './node'
+
+export const INSERT_CURRENT_BLOCK_COMMAND = createCommand('INSERT_CURRENT_BLOCK_COMMAND')
+export const DELETE_CURRENT_BLOCK_COMMAND = createCommand('DELETE_CURRENT_BLOCK_COMMAND')
+
+const CurrentBlock = memo(({
+  generatorType,
+  onInsert,
+  onDelete,
+}: CurrentBlockType) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([CurrentBlockNode]))
+      throw new Error('CURRENTBlockPlugin: CURRENTBlock not registered on editor')
+
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_CURRENT_BLOCK_COMMAND,
+        () => {
+          const currentBlockNode = $createCurrentBlockNode(generatorType)
+
+          $insertNodes([currentBlockNode])
+
+          if (onInsert)
+            onInsert()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        DELETE_CURRENT_BLOCK_COMMAND,
+        () => {
+          if (onDelete)
+            onDelete()
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    )
+  }, [editor, generatorType, onDelete, onInsert])
+
+  return null
+})
+CurrentBlock.displayName = 'CurrentBlock'
+
+export { CurrentBlock }
+export { CurrentBlockNode } from './node'
+export { default as CurrentBlockReplacementBlock } from './current-block-replacement-block'

web/app/components/base/prompt-editor/plugins/current-block/node.tsx

@@ -0,0 +1,78 @@
+import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical'
+import { DecoratorNode } from 'lexical'
+import CurrentBlockComponent from './component'
+import type { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
+
+export type SerializedNode = SerializedLexicalNode & { generatorType: GeneratorType; }
+
+export class CurrentBlockNode extends DecoratorNode<React.JSX.Element> {
+  __generatorType: GeneratorType
+  static getType(): string {
+    return 'current-block'
+  }
+
+  static clone(node: CurrentBlockNode): CurrentBlockNode {
+    return new CurrentBlockNode(node.__generatorType, node.getKey())
+  }
+
+  isInline(): boolean {
+    return true
+  }
+
+  constructor(generatorType: GeneratorType, key?: NodeKey) {
+    super(key)
+
+    this.__generatorType = generatorType
+  }
+
+  createDOM(): HTMLElement {
+    const div = document.createElement('div')
+    div.classList.add('inline-flex', 'items-center', 'align-middle')
+    return div
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  decorate(): React.JSX.Element {
+    return (
+      <CurrentBlockComponent
+        nodeKey={this.getKey()}
+        generatorType={this.getGeneratorType()}
+      />
+    )
+  }
+
+  getGeneratorType(): GeneratorType {
+    const self = this.getLatest()
+    return self.__generatorType
+  }
+
+  static importJSON(serializedNode: SerializedNode): CurrentBlockNode {
+    const node = $createCurrentBlockNode(serializedNode.generatorType)
+
+    return node
+  }
+
+  exportJSON(): SerializedNode {
+    return {
+      type: 'current-block',
+      version: 1,
+      generatorType: this.getGeneratorType(),
+    }
+  }
+
+  getTextContent(): string {
+    return '{{#current#}}'
+  }
+}
+export function $createCurrentBlockNode(type: GeneratorType): CurrentBlockNode {
+  return new CurrentBlockNode(type)
+}
+
+export function $isCurrentBlockNode(
+  node: CurrentBlockNode | LexicalNode | null | undefined,
+): boolean {
+  return node instanceof CurrentBlockNode
+}