I am using editorJS in createPost.jsx. The editor is in RichEditor component. The save and publish buttons are in createPost.jsx. On clicking either of these buttons I need the editor content to be reset to empty object.

Below is the RichEditor Component

const RichEditor = ({ onContentChange, data, resetKey }) => {
  const edjsInstance = useRef();

  const initEditor = () => {
    const editor = new EditorJS({
      holder: 'editorjs',
      onReady: () => {
        edjsInstance.current = editor;
      },
      data: data,
      onChange: async () => {
        let updatedContent = await editor.saver.save();
        onContentChange(updatedContent);
      },
      tools: EditorJS_Tools,
      placeholder: 'Lets write something awesome today...',
    });
  };

  useEffect(() => {
    if (edjsInstance.current === null) {
      initEditor();
    }

    return () => {
      edjsInstance?.current?.destroy();
      edjsInstance.current = null;
    };
  }, [resetKey]);

  return (
    <>
      <div id="editorjs"></div>
    </>
  );
};

export default RichEditor;

The createPost.jsx code is below:

const Default_Initial_Data = {
  time: new Date().getTime(),
  blocks: [],
};

const url = 'http://localhost:3000/api/v1/';

const CreatePost = () => {
  const [editorContent, setEditorContent] = useState(Default_Initial_Data);
  const [resetKey, setResetKey] = useState(0);

  const schema = yup.object().shape({
    title: yup.string().required('Title is required'),
    subTitle: yup.string().required('Sub title is required'),
    tags: yup.string().required('Tags are required'),
  });

  const {
    register,
    handleSubmit,
    formState,
    formState: { errors },
    reset,
  } = useForm({
    defaultValues: {
      title: '',
      subTitle: '',
      tags: '',
    },
    resolver: yupResolver(schema),
  });

  const onSubmit = async (data, event) => {
    event.preventDefault();
    const { tags } = data;
    const tagArray = tags.split(' ');
    let postData = {};
    console.log(postData);
    if (event.nativeEvent.submitter.name === 'save-btn') {
      console.log('save button pressed');
      postData = {
        ...data,
        tags: tagArray,
        content: editorContent,
        saved: true,
        published: false,
      };
    }
    if (event.nativeEvent.submitter.name === 'publish-btn') {
      console.log('publish button pressed');
      postData = {
        ...data,
        tags: tagArray,
        content: editorContent,
        saved: true,
        published: true,
      };
    }

    setResetKey((prev) => prev + 1);

    try {
      const response = await axios.post(`${url}posts`, { ...postData });
      console.log('Post sent successfully');
      console.log(response.data);
    } catch (error) {
      console.log('Error sending post', error);
    }
  };

  useEffect(() => {
    if (formState.isSubmitSuccessful) {
      reset();
    }
  }, [formState, reset]);

  const handleEditorChange = (content) => {
    setEditorContent(content);
  };

  return (
    <div className="createPost">
      <div className="post-content">
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            type="text"
            className="textInput"
            placeholder="Post Title"
            {...register('title')}
          />
          <p className="error-message">{errors.title?.message}</p>
          <input
            type="text"
            className="textInput"
            placeholder="Post Sub Title"
            {...register('subTitle')}
          />
          <p className="error-message">{errors.subTitle?.message}</p>
          <input
            type="text"
            className="textInput"
            placeholder="Enter tags separated by space"
            {...register('tags')}
          />
          <p className="error-message">{errors.tags?.message}</p>
          <div className="separator">Write post content below</div>
          <hr />

          <RichEditor
            onContentChange={handleEditorChange}
            data={editorContent}
            resetKey={resetKey}
          />

          <hr />
          <div className="form-action">
            <button type="submit" name="save-btn" className="btn btn-fill">
              Save
            </button>
            <button
              type="submit"
              name="publish-btn"
              className="btn btn-outline"
            >
              Publish
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

I have used a resetKey which i pass to RichEditor and it should reinitialize the editor on it’s change. But this does not work. It did work once or twice but it does not work now.