38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
"use client";
|
|
import MDEditor from "@uiw/react-md-editor";
|
|
import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
|
|
import { cn } from "@repo/shared-components";
|
|
|
|
interface MarkdownEditorProps<T extends FieldValues> {
|
|
name: Path<T>;
|
|
form: UseFormReturn<T>;
|
|
formOptions?: RegisterOptions<T>;
|
|
label?: string;
|
|
placeholder?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export const MarkdownEditor = <T extends FieldValues>({
|
|
name,
|
|
label = name,
|
|
placeholder = label,
|
|
form,
|
|
className,
|
|
}: MarkdownEditorProps<T>) => {
|
|
return (
|
|
<label className="floating-label w-full mt-5">
|
|
<span className="text-lg flex items-center gap-2">{label}</span>
|
|
<div className={cn("border rounded-lg p-2 w-full", className)}>
|
|
<MDEditor
|
|
value={form.watch(name)}
|
|
onChange={(value) => form.setValue(name, value as any, { shouldValidate: true })}
|
|
textareaProps={{ placeholder }}
|
|
/>
|
|
</div>
|
|
{form.formState.errors[name] && (
|
|
<p className="text-error">{form.formState.errors[name].message as string}</p>
|
|
)}
|
|
</label>
|
|
);
|
|
};
|