javascript - 当在 React 项目中作为默认块时，Editorjs 自定义块在单击时呈现两次

Question

我按照本教程集成editorjs并react创建了一个自定义editorjs插件。本教程可以很好地创建自定义块，但我想将自定义块制作为default blockin editorjs. 这样做时，当我单击编辑器中的空白区域时，该块会呈现两次。可能是什么问题。

这是 Editor.jsx 文件的代码，用于创建 editorjs 文本编辑器：

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;