pass tiptap editor data into react hook form

Question

I have a form page like this:

const PostArticlePage: NextPage = () => {
  const form = useForm<PostArticleInput>();
  const { register, formState, handleSubmit, control } = form;

  return (
  <form onSubmit={handleSubmit(postArticle)}>
         <FormControl>
              <FormLabel>
                Add an article title.
              </FormLabel>
              <Input
                id="articleTitle"
                height="48px"
                {...register("title")}
              />
          </FormControl>
          <FormControl>
              <FormLabel>
                Add an article description.
              </FormLabel>
              <Input
                id="articleDescription"
                height="48px"
                {...register("description")}
              />
          </FormControl>
)

And I'm trying to pass in a tiptap editor as a form input:

const EditorArticle = (props: { description: string }) => {
  const editor = useEditor({
    extensions: [
      kit,
      Placeholder.configure({
        placeholder: "Write your article! You're the journalist.",
        showOnlyWhenEditable: false,
      }),
    ],
    content: props.description,
  });
  
  return (
      <EditorContent editor={editor} />
  );
};

I've tried passing it into a controller, but can't seem to connect the editor data to the form data:

              <FormControl>   
               <Controller 
                render={() => (
                  <EditorArticle description=""/>
                )}
                control={control}
                name="description" // {...register} doesn't work here for some reason
                defaultValue="."
                />
               </FormControl>

I tried passing in a prop into the editor and having the content update it, but it is not working. The form doesn't detect anything from the editor. Not sure how to resolve this.

Answer 1

I do not know TypeScript, so I have added what you needed in plain JavaScript. Hopefully, you can adjust it to TypeScript.

So what I have done is: in the EditorArticle, I have added the onChange prop (from react hook form). This is where you pass the content from the editor after you update it, and you get this new content from the onUpdate event of the editor.

In the Controller, you needed a way for react hook form to read content from the editor, and you do this by using the field object from react hook form(which contains the onChange method to read content from your editor's onUpdate method, and the value property of the field object stores that content)

const EditorArticle = (props: { description: string,onChange }) => {
      const editor = useEditor({
        extensions: [
          kit,
          Placeholder.configure({
            placeholder: "Write your article! You're the journalist.",
            showOnlyWhenEditable: false,
          }),
        ],
        content: props.description,
        onUpdate({ editor }) {
            onChange(editor.getHTML());
        });
      
      return (
          <EditorContent editor={editor} />
      );
};

<FormControl>
 <Controller
    render={({field}) => (
      <EditorArticle 
         description={field.value} 
         onChange={field.onChange}
      />
    )}
    name="description"
    defaultValue="" 
 />
</FormControl>