feat: mouse right click can add new comment

web/app/components/workflow/comment/comment-input.spec.tsx

@@ -9,6 +9,7 @@ type MentionInputProps = {
   onSubmit: (content: string, mentionedUserIds: string[]) => void
   placeholder?: string
   autoFocus?: boolean
+  disabled?: boolean
   className?: string
 }
 

web/app/components/workflow/comment/comment-input.tsx

@@ -10,6 +10,8 @@ type CommentInputProps = {
   position: { x: number, y: number }
   onSubmit: (content: string, mentionedUserIds: string[]) => void
   onCancel: () => void
+  autoFocus?: boolean
+  disabled?: boolean
   onPositionChange?: (position: {
     pageX: number
     pageY: number
@@ -18,7 +20,14 @@ type CommentInputProps = {
   }) => void
 }
 
-export const CommentInput: FC<CommentInputProps> = memo(({ position, onSubmit, onCancel, onPositionChange }) => {
+export const CommentInput: FC<CommentInputProps> = memo(({
+  position,
+  onSubmit,
+  onCancel,
+  autoFocus = true,
+  disabled = false,
+  onPositionChange,
+}) => {
   const [content, setContent] = useState('')
   const { t } = useTranslation()
   const { userProfile } = useAppContext()
@@ -124,7 +133,10 @@ export const CommentInput: FC<CommentInputProps> = memo(({ position, onSubmit, o
 
   return (
     <div
-      className="absolute z-[60] w-96"
+      className={cn(
+        'absolute z-[60] w-96',
+        disabled && 'pointer-events-none opacity-80',
+      )}
       style={{
         left: position.x,
         top: position.y,
@@ -162,7 +174,8 @@ export const CommentInput: FC<CommentInputProps> = memo(({ position, onSubmit, o
               onChange={setContent}
               onSubmit={handleMentionSubmit}
               placeholder={t('comments.placeholder.add', { ns: 'workflow' })}
-              autoFocus
+              autoFocus={autoFocus}
+              disabled={disabled}
               className="relative"
             />
           </div>

web/app/components/workflow/comment/cursor.spec.tsx

@@ -5,6 +5,7 @@ import { CommentCursor } from './cursor'
 
 const mockState = {
   controlMode: ControlMode.Pointer,
+  isCommentPlacing: false,
   mousePosition: {
     elementX: 10,
     elementY: 20,

web/app/components/workflow/comment/cursor.tsx

@@ -7,8 +7,9 @@ import { ControlMode } from '../types'
 export const CommentCursor: FC = memo(() => {
   const controlMode = useStore(s => s.controlMode)
   const mousePosition = useStore(s => s.mousePosition)
+  const isCommentPlacing = useStore(s => s.isCommentPlacing)
 
-  if (controlMode !== ControlMode.Comment)
+  if (controlMode !== ControlMode.Comment || isCommentPlacing)
     return null
 
   return (