From 2ccef3ac84ef7b1c7d85dc898ffde70f7ef79c3e Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 26 Jan 2026 11:46:52 +0800
Subject: [PATCH] fix: human input field dragging

---
 .../base/prompt-editor/plugins/draggable-plugin/index.tsx  | 2 +-
 .../plugins/hitl-input-block/component-ui.tsx              | 2 +-
 .../base/prompt-editor/plugins/hitl-input-block/index.tsx  | 7 +++++--
 .../base/prompt-editor/plugins/hitl-input-block/node.tsx   | 2 +-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
index 6260cc3e98..68daed4761 100644
--- a/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/draggable-plugin/index.tsx
@@ -61,7 +61,7 @@ export default function DraggableBlockPlugin({
       menuComponent={
         isSupportDrag
           ? (
-              <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-6 top-4 cursor-grab opacity-0 will-change-transform active:cursor-move')}>
+              <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-2.5 top-4 cursor-grab opacity-0 will-change-transform active:cursor-move')}>
                 <RiDraggable className="size-3.5 text-text-tertiary" />
               </div>
             )
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
index 903138aaec..736f6bafe9 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
@@ -111,7 +111,7 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
         </div>
       </div>
 
-      <div className="flex w-full items-center gap-x-0.5 pr-8">
+      <div className="flex w-full items-center gap-x-0.5 pr-5">
         <div className="min-w-0 grow">
           {/* Default Value Info */}
           {isDefaultValueVariable && (
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/index.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/index.tsx
index 9e0187da56..49b0e3d150 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/index.tsx
@@ -13,6 +13,7 @@ import {
   memo,
   useEffect,
 } from 'react'
+import { CustomTextNode } from '../custom-text/node'
 import {
   $createHITLInputNode,
   HITLInputNode,
@@ -70,9 +71,11 @@ const HITLInputBlock = memo(({
             undefined,
             readonly,
           )
-
+          const prev = new CustomTextNode('\n')
+          $insertNodes([prev])
           $insertNodes([currentHITLNode])
-
+          const next = new CustomTextNode('\n')
+          $insertNodes([next])
           if (onInsert)
             onInsert()
 
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
index cc76e2e722..bf3c44acf3 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/node.tsx
@@ -164,7 +164,7 @@ export class HITLInputNode extends DecoratorNode<React.JSX.Element> {
 
   createDOM(): HTMLElement {
     const div = document.createElement('div')
-    div.classList.add('flex', 'items-center', 'align-middle', 'support-drag')
+    div.classList.add('inline-flex', 'w-[calc(100%-1px)]', 'items-center', 'align-middle', 'support-drag')
     return div
   }