From 9bdd7e54659e2b74f35bc3f4afefbd6f845b36e9 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 5 Sep 2025 14:25:52 +0800
Subject: [PATCH] fix: note match and render problem

---
 .../components/form-content-preview.tsx       |  7 +++++-
 .../components/variable-in-markdown.tsx       | 25 +++++++------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
index 36efbd2270..327bb5259c 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
@@ -55,7 +55,12 @@ const FormContentPreview: FC<Props> = ({
                 )
               }
               const placeholder = input.placeholder
-              return <Note placeholder={placeholder!} />
+              return (
+                <Note
+                  placeholder={placeholder!}
+                  title={t('workflow.nodes.humanInput.editor.notes')}
+                />
+              )
             })(),
           }}
         />
diff --git a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
index d6c6732f6d..761898303b 100644
--- a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
@@ -10,6 +10,7 @@ export function rehypeVariable() {
       const value = node.value
 
       variableRegex.lastIndex = 0
+      noteRegex.lastIndex = 0
       if(node.type === 'text' && variableRegex.test(value) && !noteRegex.test(value)) {
         let m: RegExpExecArray | null
         let last = 0
@@ -69,17 +70,6 @@ export function rehypeNotes() {
           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',
-              },
-            ],
-          })
           const name = m[0].split('.').slice(-1)[0].replace('#}}', '')
           parts.push({
             type: 'element',
@@ -96,7 +86,7 @@ export function rehypeNotes() {
             parts.push({ type: 'text', value: value.slice(last) })
 
           parent.children.splice(index, 1, ...parts)
-          parent.tagName = 'div' // h2 can not in p
+          parent.tagName = 'div' // h2 can not in p. In note content include the h2
         }
       }
       if (node.children) {
@@ -124,11 +114,14 @@ export const Variable: React.FC<{ path: string }> = ({ path }) => {
       .replace('#}}', '}}')}</span>
 }
 
-export const Note: React.FC<{ placeholder: FormInputItemPlaceholder }> = ({ placeholder }) => {
+export const Note: React.FC<{ placeholder: FormInputItemPlaceholder, title: string }> = ({ placeholder, title }) => {
   const isVariable = placeholder.type === 'variable'
   return (
-    <div className='mt-3 rounded-[10px] bg-components-input-bg-normal px-2.5 py-2'>
-      {isVariable ? <Variable path={`{{${placeholder.selector.join('.')}}}`} /> : <span>{placeholder.value}</span>}
-    </div>
+    <>
+      <h2>{title}</h2>
+      <div className='mt-3 rounded-[10px] bg-components-input-bg-normal px-2.5 py-2'>
+        {isVariable ? <Variable path={`{{${placeholder.selector.join('.')}}}`} /> : <span>{placeholder.value}</span>}
+      </div>
+    </>
   )
 }