65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
};
|