ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-07-23 13:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: variable label picker scroll & focus disappear (#2135)

Browse Source 
* fix: variable label picker scroll & focus disappear

* fix

* fix filter

* revert
This commit is contained in:
heheer
2024-07-23 18:03:53 +08:00
committed by GitHub
parent f37cdabb15
commit bf5145e632
10 changed files with 39 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/components/common/Textarea/PromptEditor/Editor.tsx
View File

@@ -129,7 +129,7 @@ export default function Editor({
});
}}
/>
<VariableLabelPickerPlugin variables={variables} />
<VariableLabelPickerPlugin variables={variables} isFocus={focus} />
<VariablePlugin variables={variables} />
<VariableLabelPlugin variables={variables} />
<OnBlurPlugin onBlur={onBlur} />

32
packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPickerPlugin/index.tsx
View File

@@ -27,13 +27,18 @@ interface TransformedParent {
}
export default function VariableLabelPickerPlugin({
variables
variables,
isFocus
}: {
variables: EditorVariablePickerType[];
isFocus: boolean;
}) {
const { t } = useTranslation();
const [editor] = useLexicalComposerContext();
const [queryString, setQueryString] = useState<string | null>(null);
const [currentIndex, setCurrentIndex] = useState<number>(0);
const [highlightIndex, setHighlightIndex] = useState<number | null>(null);
const highlightedItemRef = React.useRef<any>(null);
const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
minLength: 0
@@ -58,6 +63,15 @@ export default function VariableLabelPickerPlugin({
[editor]
);
React.useEffect(() => {
if (highlightedItemRef.current) {
highlightedItemRef.current.scrollIntoView({
behavior: 'auto',
block: 'end'
});
}
}, [currentIndex]);
return (
<LexicalTypeaheadMenuPlugin
onQueryChange={setQueryString}
@@ -71,7 +85,11 @@ export default function VariableLabelPickerPlugin({
if (anchorElementRef.current == null) {
return null;
}
return anchorElementRef.current && variables.length
if (currentIndex !== selectedIndex) {
setCurrentIndex(selectedIndex || 0);
setHighlightIndex(selectedIndex || 0);
}
return anchorElementRef.current && variables.length && isFocus
? ReactDOM.createPortal(
<Box
bg={'white'}
@@ -123,7 +141,7 @@ export default function VariableLabelPickerPlugin({
{item.label}
</Box>
</Flex>
{item.children?.map((child, index) => (
{item.children?.map((child) => (
<Flex
alignItems={'center'}
as={'li'}
@@ -136,7 +154,8 @@ export default function VariableLabelPickerPlugin({
_notLast={{
mb: 1
}}
{...(selectedIndex === child.index
ref={selectedIndex === child.index ? highlightedItemRef : null}
{...(highlightIndex === child.index
? {
bg: '#1118240D',
color: 'primary.700'
@@ -145,12 +164,11 @@ export default function VariableLabelPickerPlugin({
bg: 'white',
color: 'myGray.600'
})}
onClick={() => {
setHighlightedIndex(child.index);
onMouseDown={() => {
selectOptionAndCleanUp({ ...child, parent: item });
}}
onMouseEnter={() => {
setHighlightedIndex(child.index);
setHighlightIndex(child.index);
}}
>
<Box ml={2} fontSize={'sm'} whiteSpace={'nowrap'}>

2
packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/utils.ts
View File

@@ -221,7 +221,7 @@ export function getHashtagRegexString(): string {
const hashtag =
`(${hashLeftCharList})` +
`(${hashLeftCharList})` +
`(${hashMiddleCharList})([a-zA-Z0-9_\\.]{0,29})(${hashMiddleCharList})` +
`(${hashMiddleCharList})([a-zA-Z0-9_\\.]{0,100})(${hashMiddleCharList})` +
`(${hashRightCharList})(${hashRightCharList})`;
return hashtag;