TipTap RichTextEditor con React Hook Form y Zod solo muestra «Se esperaba una cadena, se recibió null»

Solución al problema de TipTap RichTextEditor con React Hook Form y Zod

El problema descrito se debe a que el valor del campo "description" del RichTextEditor está llegando como null en vez de como una cadena vacía, lo que provoca un error de validación. Para solucionarlo, asegurémonos de que el componente RichTextEditor maneje correctamente los valores vacíos y que el estado del formulario se comunique adecuadamente con el editor.

Modificación en el Componente RichTextEditor

1. Asegúrate de que content reciba un valor por defecto:
   En el componente RichTextEditor, modifica la propiedad content para que nunca sea undefined ni null. Esto se puede lograr asignando un valor predeterminado:

   content = content || "";

   Así el content siempre será una cadena, evitando el problema del null.

2. Actualización de la lógica en onChange:
   Al momento de actualizar el estado en onChange, no deberías validar si value es nulo, simplemente deberías usarlo. Asegúrate de que siempre se esté pasando un valor:

   onChange(editor.getHTML() || ""); // Asegura que se pase al menos una cadena vacía

Ajuste en el Formulario

1. Verifica el valor inicial en useForm:
   En la configuración de useForm, asegúrate de que description tenga un valor predeterminado como una cadena vacía:

   defaultValues: {
    description: "",
    bookImageUrl: "",
   },

Resumen de Código Corregido

const form = useForm<BookInferSchema>({
  resolver: zodResolver(BookSchema),
  defaultValues: {
    description: "",
    bookImageUrl: "",
  },
});

<FormField
  control={form.control}
  name="description"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Description</FormLabel>
      <FormControl>
        <RichTextEditor
          content={field.value || ""}
          onChange={(value) => field.onChange(value || "")}
        />
      </FormControl>
      <FormMessage />
      {state?.errors?.description && (
        <FormDescription>
          {state.errors.description}
        </FormDescription>
      )}
    </FormItem>
  )}
/>

Validación en la Función addBook

Finalmente, asegúrate de que en tu función addBook se maneje el valor de descripción adecuadamente:

const validatedFields = BookSchema.safeParse({
  description: formData.get("description") || "", // Usa una cadena vacía como valor predeterminado
});

Conclusión

Con estas modificaciones, deberías resolver el problema de recibir un valor null en el campo de descripción. Esta solución asegura que el campo siempre tenga un valor de cadena, lo que evitará errores de validación en Zod.