init

src/pages/chat/MessageItem/components/MessageEditArea.tsx

@@ -0,0 +1,64 @@
+import { cn } from '@heroui/react';
+import { useEffect, useRef, useState } from 'react';
+
+export type MessageEditAreaProps = {
+  isUser: boolean;
+  editedMessage: string;
+  onEditChange: (content: string) => void;
+  onEditAreaShow: () => void;
+};
+
+export const MessageEditArea = ({
+  isUser,
+  editedMessage,
+  onEditChange,
+  onEditAreaShow,
+}: MessageEditAreaProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [wrapHeight, setWrapHeight] = useState(0);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: useMount
+  useEffect(() => {
+    const t = textareaRef.current;
+    if (t) {
+      const parent = t.parentElement;
+      console.log(parent);
+
+      t.style.height = 'auto';
+      t.style.height = t.scrollHeight + 'px';
+      if (parent) {
+        parent.style.height = t?.scrollHeight + 'px';
+      }
+
+      t.focus();
+      // 光标移到最后
+      const length = t.value.length;
+      t.setSelectionRange(length, length);
+      onEditAreaShow();
+    }
+  }, []);
+
+  return (
+    <div
+      className="w-full"
+      style={{
+        height: wrapHeight,
+      }}
+    >
+      <textarea
+        ref={textareaRef}
+        className={cn(
+          'w-full outline-none resize-none h-fit overflow-hidden p-4 bg-background rounded-xl text-[16px]',
+          isUser ? 'rounded-br-sm' : 'rounded-bl-sm',
+        )}
+        value={editedMessage}
+        onChange={(e) => {
+          onEditChange(e.target.value);
+          e.target.style.height = '5px';
+          e.target.style.height = `${e.target.scrollHeight}px`;
+          setWrapHeight(e.target.scrollHeight);
+        }}
+      />
+    </div>
+  );
+};