Files
FastGPT/packages/web/components/common/Input/HttpInput/Editor.tsx
Archer 3f9b0fa1d4 V4.12.3 features (#5595)
* refactor: remove ModelProviderIdType and update related types (#5549)

* perf: model provider

* fix eval create split (#5570)

* git rebase --continuedoc

* add more variable types (#5540)

* variable types

* password

* time picker

* internal var

* file

* fix-test

* time select default value & range

* password & type render

* fix

* fix build

* fix

* move method

* split date select

* icon

* perf: variable code

* prompt editor add markdown plugin (#5556)

* editor markdown

* fix build

* pnpm lock

* add props

* update code

* fix list

* editor ui

* fix variable reset (#5586)

* perf: variables type code

* customize lexical indent (#5588)

* perf: multiple selector

* perf: tab plugin

* doc

* refactor: update workflow constants to use ToolTypeEnum (#5491)

* refactor: replace FlowNodeTemplateTypeEnum with string literals in workflow templates

* perf: tool type

---------

Co-authored-by: archer <545436317@qq.com>

* update doc

* fix: make table's row more natural while dragging it (#5596)

* feat: add APIGetTemplate function and refactor template fetching logic (#5498)

* feat: add APIGetTemplate function and refactor template fetching logic

* chore: adjust the code

* chore: update sdk

---------

Co-authored-by: FinleyGe <m13203533462@163.com>

* perf init system

* doc

* remove log

* remove i18n

* perf: variables render

---------

Co-authored-by: Ctrlz <143257420+ctrlz526@users.noreply.github.com>
Co-authored-by: heheer <heheer@sealos.io>
Co-authored-by: 伍闲犬 <whoeverimf5@gmail.com>
Co-authored-by: FinleyGe <m13203533462@163.com>
2025-09-07 14:41:48 +08:00

135 lines
4.4 KiB
TypeScript

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import { useState, useRef, useTransition, useEffect, useMemo } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
import { Box, Flex } from '@chakra-ui/react';
import styles from './index.module.scss';
import type { EditorState, LexicalEditor } from 'lexical';
import { getNanoid } from '@fastgpt/global/common/string/tools';
import {
type EditorVariableLabelPickerType,
type EditorVariablePickerType
} from '../../Textarea/PromptEditor/type';
import { VariableNode } from '../../Textarea/PromptEditor/plugins/VariablePlugin/node';
import { textToEditorState } from '../../Textarea/PromptEditor/utils';
import { SingleLinePlugin } from '../../Textarea/PromptEditor/plugins/SingleLinePlugin';
import OnBlurPlugin from '../../Textarea/PromptEditor/plugins/OnBlurPlugin';
import VariablePlugin from '../../Textarea/PromptEditor/plugins/VariablePlugin';
import FocusPlugin from '../../Textarea/PromptEditor/plugins/FocusPlugin';
import VariableLabelPlugin from '../../Textarea/PromptEditor/plugins/VariableLabelPlugin';
import { VariableLabelNode } from '../../Textarea/PromptEditor/plugins/VariableLabelPlugin/node';
import VariableLabelPickerPlugin from '../../Textarea/PromptEditor/plugins/VariableLabelPickerPlugin';
export default function Editor({
h = 40,
variables,
variableLabels,
onChange,
onBlur,
value,
currentValue,
placeholder = '',
updateTrigger
}: {
h?: number;
variables: EditorVariablePickerType[];
variableLabels: EditorVariableLabelPickerType[];
onChange?: (editorState: EditorState, editor: LexicalEditor) => void;
onBlur?: (editor: LexicalEditor) => void;
value?: string;
currentValue?: string;
placeholder?: string;
updateTrigger?: boolean;
}) {
const [key, setKey] = useState(getNanoid(6));
const [_, startSts] = useTransition();
const [focus, setFocus] = useState(false);
const initialConfig = {
namespace: 'HttpInput',
nodes: [VariableNode, VariableLabelNode],
editorState: textToEditorState(value),
onError: (error: Error) => {
throw error;
}
};
useEffect(() => {
if (focus) return;
setKey(getNanoid(6));
}, [value, variables.length]);
useEffect(() => {
setKey(getNanoid(6));
setFocus(false);
}, [updateTrigger]);
return (
<Flex
position={'relative'}
width={'full'}
minH={`${h}px`}
h={'full'}
flexDirection={'column'}
cursor={'text'}
overflowY={'visible'}
>
<LexicalComposer initialConfig={initialConfig} key={key}>
<PlainTextPlugin
contentEditable={<ContentEditable className={styles.contentEditable} />}
placeholder={
<Box
position={'absolute'}
top={0}
left={0}
right={0}
bottom={0}
py={3}
px={2}
pointerEvents={'none'}
overflow={'overlay'}
>
<Box
color={'myGray.500'}
fontSize={'xs'}
userSelect={'none'}
whiteSpace={'pre-wrap'}
wordBreak={'break-all'}
h={'100%'}
>
{placeholder}
</Box>
</Box>
}
ErrorBoundary={LexicalErrorBoundary}
/>
<HistoryPlugin />
<FocusPlugin focus={focus} setFocus={setFocus} />
<OnChangePlugin
onChange={(editorState: EditorState, editor: LexicalEditor) => {
startSts(() => {
onChange?.(editorState, editor);
});
}}
/>
<VariablePlugin variables={variables} />
<VariableLabelPlugin variables={variableLabels} />
<VariableLabelPickerPlugin variables={variableLabels} isFocus={focus} />
<OnBlurPlugin onBlur={onBlur} />
<SingleLinePlugin />
</LexicalComposer>
</Flex>
);
}