EditorJS always renders two editors how to stop it from doing that in nextjs

EditorJS always renders two editors how to stop it from doing that in nextjs

I’m using Nextjs with Editor.js how to stop editorjs from rendering 2 editors the image below shows the problem im facing my code and image :-

useEffect(() => {
    let editor = { isReady: false };
    const Editorjs = require('@editorjs/editorjs')
    const Header = require('@editorjs/header');
    const SimpleImage = require('@editorjs/simple-image');
    const Embed = require('@editorjs/embed');
    const Quote = require('@editorjs/quote');
    if(!editor.isReady) {

    editor =   new Editorjs({
      holder: 'editorjs',
 placeholder: "Start typing",
      tools: {
        header: {
          class: Header,
          shortcut: 'ALT+SHIFT+H',
          inlineToolbar: ['link' , 'bold'],
        },
        image: {
class: SimpleImage,
        },
        embed: {
          class: Embed,
          inlineToolbar: true,
          config: {
            services: {
              youtube: true,
              coub: true,
              codepen: {
                regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/,
                embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
                html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
                height: 300,
                width: 600,
                
              }
            }
          }
        },
      },
    }
      
    )
      
      
  }
}, [])

[Jeff909Dev]

ok never mind, I got it. We just need to disable Strict Mode in next.config.js:

// next.config.js
module.exports = {
  reactStrictMode: false,
}

Instead of disable strict mode, that can be useful for a lot of situations I prefer using a ref to control if Editor has been loaded:

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

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

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

Hope it helps 😄

[vikram2009]

Thank you for ur solutions, but i fixed this problem myself @santiagoalcazarch