Fix: The pop-up menu of the PromptEditor will be blocked. #14126 (#14127)

### What problem does this PR solve?

Fix: The pop-up menu of the PromptEditor will be blocked.  #14126

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

Co-authored-by: balibabu <assassin_cike@163.com>
This commit is contained in:
balibabu
2026-04-15 18:42:02 +08:00
committed by GitHub
parent 2520065c5a
commit c56a7f99d1
4 changed files with 84 additions and 32 deletions

54
web/package-lock.json generated
View File

@@ -12,6 +12,7 @@
"@ant-design/pro-layout": "^7.17.16",
"@antv/g2": "^5.2.10",
"@antv/g6": "^5.1.0",
"@floating-ui/react": "^0.27.19",
"@hookform/resolvers": "^3.9.1",
"@js-preview/excel": "^1.7.14",
"@lexical/react": "^0.23.1",
@@ -2466,31 +2467,46 @@
}
},
"node_modules/@floating-ui/core": {
"version": "1.7.3",
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz",
"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
"version": "1.7.5",
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.5.tgz",
"integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
"license": "MIT",
"dependencies": {
"@floating-ui/utils": "^0.2.10"
"@floating-ui/utils": "^0.2.11"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.7.4",
"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.4.tgz",
"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
"version": "1.7.6",
"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.6.tgz",
"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
"license": "MIT",
"dependencies": {
"@floating-ui/core": "^1.7.3",
"@floating-ui/utils": "^0.2.10"
"@floating-ui/core": "^1.7.5",
"@floating-ui/utils": "^0.2.11"
}
},
"node_modules/@floating-ui/react": {
"version": "0.27.19",
"resolved": "https://registry.npmmirror.com/@floating-ui/react/-/react-0.27.19.tgz",
"integrity": "sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==",
"license": "MIT",
"dependencies": {
"@floating-ui/react-dom": "^2.1.8",
"@floating-ui/utils": "^0.2.11",
"tabbable": "^6.0.0"
},
"peerDependencies": {
"react": ">=17.0.0",
"react-dom": ">=17.0.0"
}
},
"node_modules/@floating-ui/react-dom": {
"version": "2.1.6",
"resolved": "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
"integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
"version": "2.1.8",
"resolved": "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
"integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
"license": "MIT",
"dependencies": {
"@floating-ui/dom": "^1.7.4"
"@floating-ui/dom": "^1.7.6"
},
"peerDependencies": {
"react": ">=16.8.0",
@@ -2498,9 +2514,9 @@
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.10",
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz",
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
"version": "0.2.11",
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.11.tgz",
"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
"license": "MIT"
},
"node_modules/@hookform/devtools": {
@@ -26413,6 +26429,12 @@
"url": "https://opencollective.com/synckit"
}
},
"node_modules/tabbable": {
"version": "6.4.0",
"resolved": "https://registry.npmmirror.com/tabbable/-/tabbable-6.4.0.tgz",
"integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
"license": "MIT"
},
"node_modules/tailwind-merge": {
"version": "2.6.1",
"resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-2.6.1.tgz",

View File

@@ -31,6 +31,7 @@
"@ant-design/pro-layout": "^7.17.16",
"@antv/g2": "^5.2.10",
"@antv/g6": "^5.1.0",
"@floating-ui/react": "^0.27.19",
"@hookform/resolvers": "^3.9.1",
"@js-preview/excel": "^1.7.14",
"@lexical/react": "^0.23.1",

View File

@@ -149,7 +149,7 @@ export function LlmSettingFieldItems({
<FormLabel className="flex-1">{t('freedom')}</FormLabel>
<FormControl>
<Select
{...field}
value={field.value}
onValueChange={(val) => {
handleChange(val);
field.onChange(val);

View File

@@ -48,10 +48,18 @@ import {
useShowSecondaryMenu,
} from '@/pages/agent/hooks/use-build-structured-output';
import { useFilterQueryVariableOptionsByTypes } from '@/pages/agent/hooks/use-get-begin-query';
import {
flip,
FloatingPortal,
offset,
shift,
useFloating,
} from '@floating-ui/react';
import { LucideChevronRight } from 'lucide-react';
import { PromptIdentity } from '../../agent-form/use-build-prompt-options';
import { StructuredOutputSecondaryMenu } from '../structured-output-secondary-menu';
import { ProgrammaticTag } from './constant';
import './index.css';
const SelectedValueContext = createContext<string>('');
@@ -649,6 +657,11 @@ export default function VariablePickerMenuPlugin({
}
}, [parseTextToVariableNodes, editor, value]);
const { x, y, refs, strategy } = useFloating({
placement: 'bottom-start',
middleware: [offset(6), flip(), shift()],
});
// Fixed the issue where the cursor would go to the end when changing its own data
useEffect(() => {
return editor.registerUpdateListener(({ editorState, tags }) => {
@@ -678,6 +691,11 @@ export default function VariablePickerMenuPlugin({
}
triggerFn={testTriggerFn}
options={unifiedOptions.flattened}
onOpen={(r) => {
refs.setPositionReference({
getBoundingClientRect: r.getRect,
});
}}
menuRenderFn={(
anchorElementRef,
{ selectOptionAndCleanUp, options, selectedIndex },
@@ -694,21 +712,32 @@ export default function VariablePickerMenuPlugin({
''
}
>
<div className="typeahead-popover w-80 bg-bg-base border-0.5 border-border">
<ScrollArea className="p-2">
<div className="max-h-64 space-y-2">
{unifiedOptions.treeified.map((group) => (
<VariablePickerOptionGroup
key={group.title}
title={group.title}
options={group.options}
types={types}
selectOptionAndCleanUp={selectOptionAndCleanUp}
/>
))}
</div>
</ScrollArea>
</div>
<FloatingPortal>
<div
ref={refs.setFloating}
className="typeahead-popover w-80 bg-bg-base border-0.5 border-border"
style={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
width: 'max-content',
}}
>
<ScrollArea className="p-2">
<div className="max-h-64 space-y-2">
{unifiedOptions.treeified.map((group) => (
<VariablePickerOptionGroup
key={group.title}
title={group.title}
options={group.options}
types={types}
selectOptionAndCleanUp={selectOptionAndCleanUp}
/>
))}
</div>
</ScrollArea>
</div>
</FloatingPortal>
</SelectedValueContext.Provider>,
anchorElementRef.current,
);