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-10-20 02:34:52 +00:00 · 2025-09-07 14:41:48 +08:00
parent c747fc03ad
commit 3f9b0fa1d4
166 changed files with 3407 additions and 11604 deletions
--- a/packages/web/components/common/Textarea/PromptEditor/Editor.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/Editor.tsx
@@ -9,20 +9,26 @@
 import { useMemo, useState, useTransition } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
 import VariableLabelPickerPlugin from './plugins/VariableLabelPickerPlugin';
+import ListDisplayFixPlugin from './plugins/ListDisplayFixPlugin';
 import { Box, Flex } from '@chakra-ui/react';
 import styles from './index.module.scss';
 import VariablePlugin from './plugins/VariablePlugin';
 import { VariableNode } from './plugins/VariablePlugin/node';
 import type { EditorState, LexicalEditor } from 'lexical';
 import OnBlurPlugin from './plugins/OnBlurPlugin';
-import MyIcon from '../../Icon';
-import type { FormPropsType } from './type.d';
-import { type EditorVariableLabelPickerType, type EditorVariablePickerType } from './type.d';
+import type { FormPropsType } from './type';
+import { type EditorVariableLabelPickerType, type EditorVariablePickerType } from './type';
 import { getNanoid } from '@fastgpt/global/common/string/tools';
 import FocusPlugin from './plugins/FocusPlugin';
 import { textToEditorState } from './utils';
@@ -31,8 +37,38 @@ import { VariableLabelNode } from './plugins/VariableLabelPlugin/node';
 import VariableLabelPlugin from './plugins/VariableLabelPlugin';
 import { useDeepCompareEffect } from 'ahooks';
 import VariablePickerPlugin from './plugins/VariablePickerPlugin';
+import MarkdownPlugin from './plugins/MarkdownPlugin';
+import MyIcon from '../../Icon';
+import TabToSpacesPlugin from './plugins/TabToSpacesPlugin';
+import ListExitPlugin from './plugins/ListExitPlugin';
+
+const Placeholder = ({ children }: { children: React.ReactNode }) => (
+  <Box
+    position={'absolute'}
+    top={0}
+    left={0}
+    right={0}
+    bottom={0}
+    py={3}
+    px={3.5}
+    pointerEvents={'none'}
+    overflow={'hidden'}
+  >
+    <Box
+      color={'myGray.400'}
+      fontSize={'mini'}
+      userSelect={'none'}
+      whiteSpace={'pre-wrap'}
+      wordBreak={'break-all'}
+      h={'100%'}
+    >
+      {children}
+    </Box>
+  </Box>
+);

 export type EditorProps = {
+  isRichText?: boolean;
  variables?: EditorVariablePickerType[];
  variableLabels?: EditorVariableLabelPickerType[];
  value?: string;
@@ -50,6 +86,7 @@ export type EditorProps = {
 };

 export default function Editor({
+  isRichText = false,
  minH = 200,
  maxH = 400,
  maxLength,
@@ -71,7 +108,7 @@ export default function Editor({
    onOpenModal?: () => void;
    onChange: (editorState: EditorState, editor: LexicalEditor) => void;
    onChangeText?: ((text: string) => void) | undefined;
-    onBlur: (editor: LexicalEditor) => void;
+    onBlur?: (editor: LexicalEditor) => void;
  }) {
  const [key, setKey] = useState(getNanoid(6));
  const [_, startSts] = useTransition();
@@ -79,8 +116,17 @@ export default function Editor({
  const [scrollHeight, setScrollHeight] = useState(0);

  const initialConfig = {
-    namespace: 'promptEditor',
-    nodes: [VariableNode, VariableLabelNode],
+    namespace: isRichText ? 'richPromptEditor' : 'promptEditor',
+    nodes: [
+      VariableNode,
+      VariableLabelNode,
+      HeadingNode,
+      ListNode,
+      ListItemNode,
+      QuoteNode,
+      CodeNode,
+      CodeHighlightNode
+    ],
    editorState: textToEditorState(value),
    onError: (error: Error) => {
      throw error;
@@ -125,59 +171,75 @@ export default function Editor({
      borderRadius={'md'}
    >
      <LexicalComposer initialConfig={initialConfig} key={key}>
-        <PlainTextPlugin
-          contentEditable={
-            <ContentEditable
-              className={isInvalid ? styles.contentEditable_invalid : styles.contentEditable}
-              style={{
-                minHeight: `${minH}px`,
-                maxHeight: `${maxH}px`
-              }}
-            />
-          }
-          placeholder={
-            <Box
-              position={'absolute'}
-              top={0}
-              left={0}
-              right={0}
-              bottom={0}
-              py={3}
-              px={3.5}
-              pointerEvents={'none'}
-              overflow={'hidden'}
-            >
-              <Box
-                color={'myGray.400'}
-                fontSize={'mini'}
-                userSelect={'none'}
-                whiteSpace={'pre-wrap'}
-                wordBreak={'break-all'}
-                h={'100%'}
-              >
-                {placeholder}
-              </Box>
-            </Box>
-          }
-          ErrorBoundary={LexicalErrorBoundary}
-        />
-        <HistoryPlugin />
-        <MaxLengthPlugin maxLength={maxLength || 999999} />
-        <FocusPlugin focus={focus} setFocus={setFocus} />
-        <OnChangePlugin
-          onChange={(editorState, editor) => {
-            const rootElement = editor.getRootElement();
-            setScrollHeight(rootElement?.scrollHeight || 0);
-            startSts(() => {
-              onChange?.(editorState, editor);
-            });
-          }}
-        />
-        <VariableLabelPlugin variables={variableLabels} />
-        <VariablePlugin variables={variables} />
-        <VariableLabelPickerPlugin variables={variableLabels} isFocus={focus} />
-        <VariablePickerPlugin variables={variableLabels.length > 0 ? [] : variables} />
-        <OnBlurPlugin onBlur={onBlur} />
+        {/* Text type */}
+        {isRichText ? (
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable
+                className={`${isInvalid ? styles.contentEditable_invalid : styles.contentEditable} ${styles.richText}`}
+                style={{
+                  minHeight: `${minH}px`,
+                  maxHeight: `${maxH}px`
+                }}
+                onFocus={() => setFocus(true)}
+                onBlur={() => setFocus(false)}
+              />
+            }
+            placeholder={<Placeholder>{placeholder}</Placeholder>}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+        ) : (
+          <PlainTextPlugin
+            contentEditable={
+              <ContentEditable
+                className={isInvalid ? styles.contentEditable_invalid : styles.contentEditable}
+                style={{
+                  minHeight: `${minH}px`,
+                  maxHeight: `${maxH}px`
+                }}
+              />
+            }
+            placeholder={<Placeholder>{placeholder}</Placeholder>}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+        )}
+
+        {/* Basic Plugin */}
+        <>
+          <HistoryPlugin />
+          <MaxLengthPlugin maxLength={maxLength || 999999} />
+          <FocusPlugin focus={focus} setFocus={setFocus} />
+
+          <VariablePlugin variables={variables} />
+          {variableLabels.length > 0 && (
+            <>
+              <VariableLabelPlugin variables={variableLabels} />
+              <VariableLabelPickerPlugin variables={variableLabels} isFocus={focus} />
+            </>
+          )}
+          {variableLabels.length > 0 && <VariablePickerPlugin variables={variables} />}
+          <OnBlurPlugin onBlur={onBlur} />
+          <ListDisplayFixPlugin />
+          <OnChangePlugin
+            onChange={(editorState, editor) => {
+              const rootElement = editor.getRootElement();
+              setScrollHeight(rootElement?.scrollHeight || 0);
+              startSts(() => {
+                onChange?.(editorState, editor);
+              });
+            }}
+          />
+
+          {isRichText && (
+            <>
+              {/* <ListPlugin />
+              <CheckListPlugin />
+              <ListExitPlugin /> */}
+              <TabToSpacesPlugin />
+              {/* <MarkdownPlugin /> */}
+            </>
+          )}
+        </>
      </LexicalComposer>

      {onChangeText &&