Merge branch 'develop' into feature/workflow_import_zy

web/src/views/Workflow/components/Editor/plugin/AutocompletePlugin.tsx

@@ -4,7 +4,7 @@
  * @Last Modified by: ZhaoYing
  * @Last Modified time: 2026-03-03 10:12:33
  */
-import { useEffect, useState, type FC } from 'react';
+import { useEffect, useState, useRef, type FC } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_HIGH, KEY_ENTER_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND } from 'lexical';
 
@@ -30,6 +30,26 @@ const AutocompletePlugin: FC<{ options: Suggestion[], enableJinja2?: boolean }>
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  const scrollSelectedIntoView = () => {
+    if (!popupRef.current) return;
+    
+    const selectedElement = popupRef.current.querySelector('[data-selected="true"]');
+    if (!selectedElement) return;
+    
+    const container = popupRef.current;
+    const element = selectedElement as HTMLElement;
+    
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    
+    if (elementRect.bottom > containerRect.bottom) {
+      container.scrollTop += elementRect.bottom - containerRect.bottom;
+    } else if (elementRect.top < containerRect.top) {
+      container.scrollTop -= containerRect.top - elementRect.top;
+    }
+  };
 
   // Listen to editor updates and show suggestions when '/' is typed
   useEffect(() => {
@@ -140,7 +160,7 @@ const AutocompletePlugin: FC<{ options: Suggestion[], enableJinja2?: boolean }>
   };
 
   // Group suggestions by node ID
-  const groupedSuggestions = options.reduce((groups: Record<string, any[]>, suggestion) => {
+  const groupedSuggestions = options.reduce((groups: Record<string, Suggestion[]>, suggestion) => {
     const { nodeData } = suggestion
     const nodeId = nodeData.id as string;
     if (!groups[nodeId]) {
@@ -190,7 +210,9 @@ const AutocompletePlugin: FC<{ options: Suggestion[], enableJinja2?: boolean }>
             while (nextIndex < allOptions.length && allOptions[nextIndex].disabled) {
               nextIndex++;
             }
-            return nextIndex >= allOptions.length ? prev : nextIndex;
+            const newIndex = nextIndex >= allOptions.length ? prev : nextIndex;
+            setTimeout(() => scrollSelectedIntoView(), 0);
+            return newIndex;
           });
           return true;
         }
@@ -210,7 +232,9 @@ const AutocompletePlugin: FC<{ options: Suggestion[], enableJinja2?: boolean }>
             while (prevIndex >= 0 && allOptions[prevIndex].disabled) {
               prevIndex--;
             }
-            return prevIndex < 0 ? prev : prevIndex;
+            const newIndex = prevIndex < 0 ? prev : prevIndex;
+            setTimeout(() => scrollSelectedIntoView(), 0);
+            return newIndex;
           });
           return true;
         }
@@ -247,6 +271,7 @@ const AutocompletePlugin: FC<{ options: Suggestion[], enableJinja2?: boolean }>
   }
   return (
     <div
+      ref={popupRef}
       data-autocomplete-popup="true"
       onMouseDown={(e) => e.preventDefault()}
       style={{
@@ -279,6 +304,7 @@ const AutocompletePlugin: FC<{ options: Suggestion[], enableJinja2?: boolean }>
               return (
                 <div
                   key={option.key}
+                  data-selected={selectedIndex === globalIndex}
                   style={{
                     padding: '8px 12px',
                     cursor: option.disabled ? 'not-allowed' : 'pointer',