I am trying to use the Editor of EditorJS. Everything works fine, except that when I first load the page it initializes two editors at the beginning and keeps appending new editors everytime I reload the page. But they are all inside the <div id='editorjs' /> div. Is there something I am missing?

// react etc. imports
import EditorJS from '@editorjs/editorjs'

const EditorComponent = (props) => {
    const [input, setInput] = useState({})
    const currentuser = useSelector((state) => state.currentuser)

    const editor = new EditorJS({
        holderId: 'editorjs',
        autofocus: true,
    })

    const postNews = () => {
        // POSTING SUTFF
    }

    return (
        <Grid>
            <Grid templateRows='auto min-content' gap={6}>
                <div id='editorjs' />
                <Button onClick={postNews}>Post news</Button>
            </Grid>
        </Grid>
    )
}

Here is a screenshot from the dom where two editors are added immediately after loading the page.

I am trying to use the Editor of EditorJS. Everything works fine, except that when I first load the page it initializes two editors at the beginning and keeps appending new editors everytime I reload the page. But they are all inside the <div id='editorjs' /> div. Is there something I am missing?

// react etc. imports
import EditorJS from '@editorjs/editorjs'

const EditorComponent = (props) => {
    const [input, setInput] = useState({})
    const currentuser = useSelector((state) => state.currentuser)

    const editor = new EditorJS({
        holderId: 'editorjs',
        autofocus: true,
    })

    const postNews = () => {
        // POSTING SUTFF
    }

    return (
        <Grid>
            <Grid templateRows='auto min-content' gap={6}>
                <div id='editorjs' />
                <Button onClick={postNews}>Post news</Button>
            </Grid>
        </Grid>
    )
}

Here is a screenshot from the dom where two editors are added immediately after loading the page.

• javascript
• reactjs
• editorjs

• 3 Move the new EditorJs statement outside of the function body. It's creating a new one every render. – Brian Thompson Commented Jun 15, 2021 at 16:58
• But when I do move it outside it can't find the id of the holding div. – PRSHL Commented Jun 15, 2021 at 17:08
• 1 Because the div does not exist in the DOM yet. I guess you could try putting it in a useEffect with an empty dependency array? – Brian Thompson Commented Jun 15, 2021 at 17:09
• Yeah I tried it with useEffect and the empty dependency array, but it keeps on adding new editors. But I think thats just a problem during development with the hot reload, and should not appear in production. Thank you – PRSHL Commented Jun 15, 2021 at 17:13
• I know it's too late, but you could use useRef to store editorJs instance so if check ref's current value if it's null then creates new instance only if ref is null...don't forget to assign new instance to ref.current – Bakaji Commented Apr 5, 2022 at 15:00

6 Answers 6

I removed the react strict mode and it helped me

Found a simple solution

const <Your Component Name> = () => {
const [editor, setEditor] = useState("");

useEffect(() => {
  setEditor(() => new EditorJS(PostEditorConfig()));
  }, []);


// .... other ponents
return (
<div id=editorjs></div>
)}

The key is to use editor.isReady which is provided by editorjs. If it is true then EditorJS is already running.

import React, { useEffect } from "react";
import EditorJS from "@editorjs/editorjs";

const Editor = () => {
  let editor = { isReady: false };
  useEffect(() => {
    if (!editor.isReady) {
      editor = new EditorJS({
        holder: "editorjs",
      });
    }
  }, []);
  return (
    <main>
      <div id="editorjs"></div>
    </main>
  );
};

export default Editor;

This worked for me. In useEffect(), I first checked to make sure if the editor is in its default state, (""), then proceed to create a new instance of EditorJS, otherwise skip it.

const [editor, setEditor] = useState("")

useEffect(() => {
    editor === "" && setEditor( () => new EditorJS({
      holder: "editorjs",
      logLevel: "VERBOSE",
      placeholder: "Any new inspirations today?",
    }))   
    
}, [])

In my case, I have removed <React.StrictMode> </React.StrictMode> from my main.js file. It worked for me in "react": "^18.2.0"

export const TextEditor = () => {
  const isReady = useRef(false);

  const config: EditorConfig = {
        holder: "textEditor",
        data: {
            version: "1",
            time: Date.now(),
            blocks: [],
        },
        placeholder: "Let's write...",
    };

    useEffect(() => {
        if (!isReady.current) {
            new EditorJS(config);
            isReady.current = true;
        }
    }, []);

  return <div id="textEditor" />;
};