Refactor RichInput component: adjust ScrollArea padding and EditorContent min-height

This commit is contained in:
Amruth Pillai
2025-11-04 15:27:40 +01:00
parent 40f27a53b6
commit 53213dfb26

View File

@ -44,10 +44,10 @@ import { Button } from "./button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./form"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./form";
import { Input } from "./input"; import { Input } from "./input";
import { Popover, PopoverContent } from "./popover"; import { Popover, PopoverContent } from "./popover";
import { ScrollArea } from "./scroll-area";
import { Skeleton } from "./skeleton"; import { Skeleton } from "./skeleton";
import { Toggle } from "./toggle"; import { Toggle } from "./toggle";
import { Tooltip } from "./tooltip"; import { Tooltip } from "./tooltip";
import { ScrollArea } from "./scroll-area";
const InsertImageFormSchema = z.object({ const InsertImageFormSchema = z.object({
src: z.string(), src: z.string(),
@ -527,18 +527,18 @@ export const RichInput = forwardRef<Editor, RichInputProps>(
<div> <div>
{!hideToolbar && <Toolbar editor={editor} />} {!hideToolbar && <Toolbar editor={editor} />}
<ScrollArea orientation="vertical" className="rounded-sm border px-3 py-2"> <ScrollArea orientation="vertical" className="rounded-sm border p-3 pt-0">
<EditorContent <EditorContent
editor={editor} editor={editor}
className={cn( className={cn(
"grid min-h-[160px] w-full bg-transparent text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50", "grid min-h-[140px] w-full bg-transparent text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
hideToolbar && "pt-2", hideToolbar && "pt-2",
className, className,
)} )}
{...props} {...props}
/> />
</ScrollArea> </ScrollArea>
{footer?.(editor)} {footer?.(editor)}
</div> </div>
); );