feat: advanced prompt (#1330)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: Gillian97 <jinling.sunshine@gmail.com>

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

@@ -0,0 +1,65 @@
+import type {
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  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-[#155EEF]', '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
+}