forked from
whey.party/red-dwarf
an independent Bluesky client using Constellation, PDS Queries, and other services
AutoGrowTextarea
+24
-3
+24
-3
src/components/Composer.tsx
+24
-3
src/components/Composer.tsx
···
1
1
import { RichText } from "@atproto/api";
2
2
import { useAtom } from "jotai";
3
-
import { useEffect, useState } from "react";
3
+
import { useEffect, useRef, useState } from "react";
4
4
5
5
import { useAuth } from "~/providers/UnifiedAuthProvider";
6
6
import { composerAtom } from "~/utils/atoms";
···
186
186
<div className="flex w-full gap-1 flex-col">
187
187
<ProfileThing agent={agent} large/>
188
188
<div className="flex pl-[50px]">
189
-
<textarea
190
-
className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white"
189
+
<AutoGrowTextarea
190
+
className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2"
191
191
rows={5}
192
192
placeholder={getPlaceholder()}
193
193
value={postText}
···
221
221
)}
222
222
</div>
223
223
</div>
224
+
);
225
+
}
226
+
227
+
function AutoGrowTextarea({ value, className, onChange, ...props }: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>) {
228
+
const ref = useRef<HTMLTextAreaElement>(null);
229
+
230
+
useEffect(() => {
231
+
const el = ref.current;
232
+
if (!el) return;
233
+
el.style.height = "auto";
234
+
el.style.height = el.scrollHeight + "px";
235
+
}, [value]);
236
+
237
+
return (
238
+
<textarea
239
+
ref={ref}
240
+
className={className}
241
+
value={value}
242
+
onChange={onChange}
243
+
{...props}
244
+
/>
224
245
);
225
246
}