chore: can render note

web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx

@@ -10,7 +10,7 @@ import Badge from '@/app/components/base/badge'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { RiCloseLine } from '@remixicon/react'
-import { Variable, rehypeVariable } from './variable-in-markdown'
+import { Variable, rehypeNotes, rehypeVariable } from './variable-in-markdown'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
@@ -41,7 +41,7 @@ const FormContentPreview: FC<Props> = ({
       <div className='max-h-[calc(100vh-167px)] overflow-y-auto px-4'>
         <Markdown
           content={content}
-          rehypePlugins={[rehypeVariable]}
+          rehypePlugins={[rehypeVariable, rehypeNotes]}
           customComponents={{
             variable: ({ node, ...props }: any) => (
               <Variable path={node.properties?.path as string} />

web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx

@@ -1,19 +1,20 @@
 import type React from 'react'
 
-const regex = /\{\{#(.+?)#\}\}/g
+const variableRegex = /\{\{#(.+?)#\}\}/g
+const noteRegex = /\{\{#\$(.+?)#\}\}/g
 
 export function rehypeVariable() {
   return (tree: any) => {
     const iterate = (node: any, index: number, parent: any) => {
       const value = node.value
 
-      regex.lastIndex = 0
-      if(node.type === 'text' && regex.test(value)) {
+      variableRegex.lastIndex = 0
+      if(node.type === 'text' && variableRegex.test(value) && !noteRegex.test(value)) {
         let m: RegExpExecArray | null
         let last = 0
         const parts: any[] = []
-        regex.lastIndex = 0
-        while ((m = regex.exec(value))) {
+        variableRegex.lastIndex = 0
+        while ((m = variableRegex.exec(value))) {
           if (m.index > last)
             parts.push({ type: 'text', value: value.slice(last, m.index) })
 
@@ -52,6 +53,68 @@ export function rehypeVariable() {
   }
 }
 
+export function rehypeNotes() {
+  return (tree: any) => {
+    const iterate = (node: any, index: number, parent: any) => {
+      const value = node.value
+
+      noteRegex.lastIndex = 0
+      if(node.type === 'text' && noteRegex.test(value)) {
+        let m: RegExpExecArray | null
+        let last = 0
+        const parts: any[] = []
+        noteRegex.lastIndex = 0
+        while ((m = noteRegex.exec(value))) {
+          if (m.index > last)
+            parts.push({ type: 'text', value: value.slice(last, m.index) })
+
+          parts.push({
+            type: 'element',
+            tagName: 'h2',
+            properties: {},
+            children: [
+              {
+                type: 'text',
+                value: 'Notes',
+              },
+            ],
+          })
+          parts.push({
+            type: 'element',
+            tagName: 'note', // choose a right tag
+            properties: { path: m[0].trim() },
+            children: [],
+          })
+
+          last = m.index + m[0].length
+        }
+
+        if (parts.length) {
+          if (last < value.length)
+            parts.push({ type: 'text', value: value.slice(last) })
+
+          parent.children.splice(index, 1, ...parts)
+          parent.tagName = 'div' // h2 can not in p
+        }
+      }
+      if (node.children) {
+        let i = 0
+        // Caution: can not use forEach. Because the length of tree.children may be changed because of change content: parent.children.splice(index, 1, ...parts)
+        while(i < node.children.length) {
+          iterate(node.children[i], i, node)
+          i++
+        }
+      }
+    }
+    let i = 0
+    // Caution: can not use forEach. Because the length of tree.children may be changed because of change content: parent.children.splice(index, 1, ...parts)
+    while(i < tree.children.length) {
+      iterate(tree.children[i], i, tree)
+      i++
+    }
+  }
+}
+
 export const Variable: React.FC<{ path: string }> = ({ path }) => {
   return <span className='text-text-accent'>{
     path.replaceAll('.', '/')