perf: prompt textarea (#625)

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useRef } from 'react';
 
 import {
   Box,
@@ -16,11 +16,13 @@ import MyModal from '@/components/MyModal';
 
 type Props = TextareaProps & {
   title?: string;
-  showSetModalModeIcon?: boolean;
   // variables: string[];
 };
 
 const PromptTextarea = (props: Props) => {
+  const ModalTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const TextareaRef = useRef<HTMLTextAreaElement>(null);
+
   const { t } = useTranslation();
   const { title = t('core.app.edit.Prompt Editor'), value, ...childProps } = props;
 
@@ -28,21 +30,30 @@ const PromptTextarea = (props: Props) => {
 
   return (
     <>
-      <Editor {...childProps} value={value} showSetModalModeIcon onSetModalMode={onOpen} />
+      <Editor textareaRef={TextareaRef} {...childProps} onOpenModal={onOpen} />
       {isOpen && (
         <MyModal iconSrc="/imgs/modal/edit.svg" title={title} isOpen onClose={onClose}>
           <ModalBody>
             <Editor
+              textareaRef={ModalTextareaRef}
               {...childProps}
-              value={value}
               minH={'300px'}
               maxH={'auto'}
               minW={['100%', '512px']}
-              showSetModalModeIcon={false}
             />
           </ModalBody>
           <ModalFooter>
-            <Button onClick={onClose}>{t('common.Confirm')}</Button>
+            <Button
+              onClick={() => {
+                if (ModalTextareaRef.current && TextareaRef.current) {
+                  TextareaRef.current.value = ModalTextareaRef.current.value;
+                }
+
+                onClose();
+              }}
+            >
+              {t('common.Confirm')}
+            </Button>
           </ModalFooter>
         </MyModal>
       )}
@@ -53,23 +64,26 @@ const PromptTextarea = (props: Props) => {
 export default PromptTextarea;
 
 const Editor = React.memo(function Editor({
-  showSetModalModeIcon = true,
-  onSetModalMode,
+  onOpenModal,
+  textareaRef,
   ...props
-}: Props & { onSetModalMode?: () => void }) {
+}: Props & {
+  textareaRef: React.RefObject<HTMLTextAreaElement>;
+  onOpenModal?: () => void;
+}) {
   const { t } = useTranslation();
 
   return (
     <Box h={'100%'} w={'100%'} position={'relative'}>
-      <Textarea wordBreak={'break-all'} maxW={'100%'} {...props} />
-      {showSetModalModeIcon && (
+      <Textarea ref={textareaRef} wordBreak={'break-all'} maxW={'100%'} {...props} />
+      {onOpenModal && (
         <Box
           zIndex={1}
           position={'absolute'}
           bottom={1}
           right={2}
           cursor={'pointer'}
-          onClick={onSetModalMode}
+          onClick={onOpenModal}
         >
           <MyTooltip label={t('common.ui.textarea.Magnifying')}>
             <MyIcon name={'fullScreenLight'} w={'14px'} color={'myGray.600'} />
@@ -79,35 +93,3 @@ const Editor = React.memo(function Editor({
     </Box>
   );
 });
-
-const VariableSelectBlock = React.memo(function VariableSelectBlock({
-  variables
-}: {
-  variables: string[];
-}) {
-  return <></>;
-});
-
-const Placeholder = React.memo(function Placeholder({
-  placeholder = ''
-}: {
-  placeholder?: string;
-}) {
-  return (
-    <Box
-      zIndex={0}
-      userSelect={'none'}
-      color={'myGray.400'}
-      px={3}
-      py={2}
-      position={'absolute'}
-      top={0}
-      right={0}
-      bottom={0}
-      left={0}
-      fontSize={'sm'}
-    >
-      {placeholder}
-    </Box>
-  );
-});