Editorjs custom block renders twice on click when made as default block in react project

Question

I followed this tutorial to integrate editorjs in react and create a custom editorjs plugin. This tutorial works fine to create a custom block but I wanted to make the custom block as a default block in editorjs. In doing so, the block renders twice when I click on empty space in the editor. What might be the problem.

This is code for Editor.jsx file to create editorjs text editor:

import { default as React, useEffect, useRef } from "react";
import EditorJS from "@editorjs/editorjs";
import { EDITOR_JS_TOOLS } from "./tools";
import { Box } from "@mui/material";

const DEFAULT_INITIAL_DATA = () => {
  return {
    time: new Date().getTime(),
    blocks: [
      {
        type: "header",
        data: {
          text: "This is my awesome editor!",
          level: 1,
        },
      },
    ],
  };
};

const EDITTOR_HOLDER_ID = "editorjs";

const Editor = (props) => {
  const ejInstance = useRef();
  const [editorData, setEditorData] = React.useState(DEFAULT_INITIAL_DATA);

  // This will run only once
  useEffect(() => {
    if (!ejInstance.current) {
      initEditor();
    }
    return () => {
      ejInstance.current.destroy();
      ejInstance.current = null;
    };
  }, []);

  const initEditor = () => {
    const editor = new EditorJS({
      holder: EDITTOR_HOLDER_ID,
      logLevel: "ERROR",
      data: editorData,
      onReady: () => {
        ejInstance.current = editor;
      },
      onChange: async () => {
        let content = await this.editorjs.saver.save();
        // Put your logic here to save this data to your DB
        setEditorData(content);
      },
      autofocus: true,
      tools: EDITOR_JS_TOOLS,
      defaultBlock: "timeline", // I have made timeline (custom block) as default block.
    });
  };

  return (
    <React.Fragment>
      <Box id={EDITTOR_HOLDER_ID} sx={{ py: 2 }}></Box>
    </React.Fragment>
  );
};

export default Editor;

Answer 1

i also faced the same issue so i used react-editor-js instead, however simply rendering the ReactEditor component cannot be done as it will give the same result(duplicated blocks) as the parent component gets rendered twice, i don't know why, i kept the editorjs rendering mecahnism in the useEffect and refer the render container by id.

import React from "react";
import ReactDOM from "react-dom";

import { createReactEditorJS } from "react-editor-js";
import Header from "@editorjs/header";

import textBox from "./tools/textBox";

const ReactEditor = createReactEditorJS();

const Editor = () => {
  React.useEffect(() => {
    ReactDOM.render(
      <ReactEditor
        tools={{
          header: Header,
          textBox: textBox,
        }}
        defaultBlock="textBox"
      />,
      document.getElementById("react-editor-container")
    );
  }, []);

  return <div id="react-editor-container"></div>;
};

However, i am a noob and this may not be the best solution !!