Plate editor with react hook form

[BertVanHeckeCertifisc]

I need the Plate editor to work with react hook form, but i can't get it to work. Also the value of the rich text editor should be converted to a string that contains the HTML, because i need to save it in a database. Anyone that knows how to do this?

[zbeyens]

See https://platejs.org/docs/controlled

For database saving, you can either store the JSON or stringify it.

[zbeyens]

Call editor.tf.setValue(value) anytime the form value updates

[BertVanHeckeCertifisc]

Is there a simplified example somewhere?

[zbeyens]

React hook form docs should have some

[BertVanHeckeCertifisc]

  const editor = usePlateEditor({
    value: 'Initial Value',
    // Disable the editor if initial value is not yet ready
    // enabled: !!value,
  }); 

Gives: Cannot find name 'usePlateEditor'. Did you mean 'PlateEditor'?

[BertVanHeckeCertifisc]

Also, if you have time; could you please work out a basic example where you use the text editor with react-hook-form? i got somehting working thanks to your help but i feel like something is not right. My code below:

export function PlateEditor({
  form,
  value,
  readOnly,
}: {
  form?: UseFormReturn<z.infer<typeof CreateMemoSchema>>;
  value?: string;
  readOnly?: boolean;
}) {
  useEffect(() => {
    if (value) {
      editor.tf.setValue(JSON.parse(value));
    }
  }, [editor, value]);

  return (
    <TooltipProvider>
      <DndProvider backend={HTML5Backend}>
        <Plate
          readOnly={readOnly}
          editor={editor}
          onChange={({ value }) =>
            form && form.setValue("content", JSON.stringify(value))
          }
        >
          <FixedToolbar>
            <FixedToolbarButtons />
          </FixedToolbar>

          <Editor readOnly={readOnly} />

          <FloatingToolbar>
            <FloatingToolbarButtons />
          </FloatingToolbar>
        </Plate>
      </DndProvider>
    </TooltipProvider>
  );
}

          <FormField
            control={form.control}
            name="content"
            render={({ field }) => (
              <FormItem className="w-full">
                <FormLabel>Inhoud</FormLabel>
                <FormControl>
                  <PlateEditor form={form} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />