How to use custom WYSIWYG?

[ilikali]

Hello. Refine is pretty awesome. I want to use a third-party library to edit content (react-editor-js). This library works based on objects. I tried something like this, but it didn't work.
<ReactEditorJS defaultValue={{...register("content")}} />
And the second question is how can I save the data that comes from ReactEditorJS. Thank you in advance.

[omeraplak]

Hey @ilikali ,
Thank you for contacting us. Are you using Ant Design or react-hook-form? The sample project I will prepare for you will be shaped accordingly :)

[ilikali]

I would be very grateful if you could prepare an sample project. Btw yes i'm using react-hook-form. Thanks again)

[omeraplak]

great, give me some time :)

[mlhekinci]

Hey @ilikali
Thank you for contacting us! Let's see what we can do about it. We will keep you informed as soon as possible.

[mlhekinci]

Hi @ilikali, sorry for my late response. I created a custom react-draftjs-wysiwyg example with refine for you. When using custom component with react-hook-form, you need to manage it with Controller. On the refine Create page, we have defined the Editor component in the Controller and registered it. In the next step, the refine onFinish method automatically saves the content you created in the Editor to your database.

import { useForm, Controller } from "@pankod/refine-react-hook-form";
import { EditorJs } from "components/editor";

export const PostCreate: React.FC = () => {
  const {
    refineCore: { onFinish, formLoading },
    register,
    handleSubmit,
    control,
    formState: { errors },
  } = useForm({
    mode: "onChange",
  });

  return (
    <form onSubmit={handleSubmit(onFinish)}>
      <label>Content: </label>
      <br />

      <Controller
        {...register("content", { required: true })}
        control={control}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <EditorJs
            onChange={onChange}
            onBlur={onBlur}
            selected={value}
            ref={ref}
          />
        )}
      />
      {errors.content && <span>This field is required</span>}
      <br />
      <input type="submit" value="Submit" />
      {formLoading && <p>Loading</p>}
    </form>
  );
};

As you can see in the above gif, we created and saved the content of a post with custom WYSIWYG. In this example, I saved the content as html. If you want, you can save it as editor block data.

You can test it from the live example below and see how the content is saved at https://api.fake-rest.refine.dev/landing

CodeSandbox: https://codesandbox.io/s/refine-custom-editor-zy2ij0

You can manage the editor or component you want in this way with refine and react-hook-form.

[ilikali]

Thanks a lot! You are awesome!