perf:textarea auto height (#2967)

* perf:textarea auto height

* optimize editor height & fix variable label split

projects/app/src/components/common/Textarea/MyTextarea/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 
 import {
   Box,
@@ -13,11 +13,12 @@ import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyModal from '@fastgpt/web/components/common/MyModal';
+import ResizeTextarea from 'react-textarea-autosize';
 
 type Props = TextareaProps & {
   title?: string;
   iconSrc?: string;
-  // variables: string[];
+  autoHeight?: boolean;
 };
 
 const MyTextarea = React.forwardRef<HTMLTextAreaElement, Props>(function MyTextarea(props, ref) {
@@ -28,6 +29,10 @@ const MyTextarea = React.forwardRef<HTMLTextAreaElement, Props>(function MyTexta
   const {
     title = t('common:core.app.edit.Prompt Editor'),
     iconSrc = 'modal/edit',
+    autoHeight = false,
+    onChange,
+    maxH,
+    minH,
     ...childProps
   } = props;
 
@@ -35,16 +40,27 @@ const MyTextarea = React.forwardRef<HTMLTextAreaElement, Props>(function MyTexta
 
   return (
     <>
-      <Editor textareaRef={TextareaRef} {...childProps} onOpenModal={onOpen} />
+      <Editor
+        textareaRef={TextareaRef}
+        autoHeight={autoHeight}
+        onChange={onChange}
+        maxH={maxH}
+        minH={minH}
+        showResize={!autoHeight}
+        {...childProps}
+        onOpenModal={onOpen}
+      />
       {isOpen && (
         <MyModal iconSrc={iconSrc} title={title} isOpen onClose={onClose}>
           <ModalBody>
             <Editor
               textareaRef={ModalTextareaRef}
+              onChange={onChange}
               {...childProps}
-              minH={'300px'}
-              maxH={'auto'}
+              maxH={500}
+              minH={500}
               minW={['100%', '512px']}
+              showResize={false}
             />
           </ModalBody>
           <ModalFooter>
@@ -71,17 +87,44 @@ export default React.memo(MyTextarea);
 const Editor = React.memo(function Editor({
   onOpenModal,
   textareaRef,
+  autoHeight = false,
+  onChange,
+  maxH,
+  minH,
+  showResize,
   ...props
 }: Props & {
   textareaRef: React.RefObject<HTMLTextAreaElement>;
   onOpenModal?: () => void;
+  showResize?: boolean;
 }) {
   const { t } = useTranslation();
+  const [scrollHeight, setScrollHeight] = useState(0);
 
   return (
     <Box h={'100%'} w={'100%'} position={'relative'}>
-      <Textarea ref={textareaRef} maxW={'100%'} {...props} />
-      {onOpenModal && (
+      <Textarea
+        ref={textareaRef}
+        maxW={'100%'}
+        as={autoHeight ? ResizeTextarea : undefined}
+        sx={
+          !showResize
+            ? {
+                '::-webkit-resizer': {
+                  display: 'none'
+                }
+              }
+            : {}
+        }
+        {...props}
+        maxH={`${maxH}px`}
+        minH={`${minH}px`}
+        onChange={(e) => {
+          setScrollHeight(e.target.scrollHeight);
+          onChange?.(e);
+        }}
+      />
+      {onOpenModal && maxH && scrollHeight > Number(maxH) && (
         <Box
           zIndex={1}
           position={'absolute'}