0
212
VistasEditorjs custom block renders twice on click when made as default block in react project
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;
1 Respuestas
Responde la pregunta0
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 !!