2

I'm using Editor.js in React (Next.js) & have the original package, not the 3rd party wrappers for react.

For a reason I don't know, it is rendering/showing/outputting two codex-editores on the page! Both of them are working correctly and independently.

Screenshot (I added borders to show the area)

screenshot of the problem

Codes

index.jsx

import EditorJS from "@editorjs/editorjs";
import css from "./removeme.module.scss" // just to see the area;

export default function index(params) {
   const editor = new EditorJS({
      holder: "editorjs",
   });

   return (
      <>
         <h1>New Note</h1>
         <div className={css["editor-area"]} id="editorjs" />
      </>
   );
}

_app.js

function SafeHydrate({ children }) {
   return <div suppressHydrationWarning>{typeof window === "undefined" ? null : children}</div>;
}

function MyApp({ Component, pageProps }) {
   return (
      <SafeHydrate>
         <Body>
            <Sidebar items={SidebarLinks} />
            <Page>
               <Component {...pageProps} />
            </Page>
         </Body>
      </SafeHydrate>
   );
}

export default MyApp;

What I tried

  • Commenting <SafeHydrate> and render the page normally: no luck. (I added SafeHydrate so I can use window API and also disable SSR)
  • Removing my custom CSS (the borders): no luck.
  • Removing id="editorjs" from <div>: nothing shows up.

Additional Notes

The page localhost:3001/notes/editor is only accessible if visited from sidebar menu (SPA-like). I mean, it shows 'window is not defined' if opened directly.

What's causing the problem?

Shahriar
  • 1,855
  • 2
  • 21
  • 45
  • Had the same issue some weeks ago: https://stackoverflow.com/questions/67990522/editorjs-always-renders-two-editors – PRSHL Oct 06 '21 at 11:03
  • Strange I didn't find your question before posting mine @PRSHL. Also, it's not just 2, I tried again & see it can be 4 or 5 or more editors! – Shahriar Oct 06 '21 at 11:23

1 Answers1

1

Using useEffect solves the issue since it only runs after the initial page render:

export default function index(params) {
   useEffect(() => {
      const editor = new EditorJS({
         holder: "editorjs",
      });
   }, []);
   
   return (
      <>
         <h1>New Note</h1>
         <div className={css["editor-area"]} id="editorjs" />
      </>
   );
}
Shahriar
  • 1,855
  • 2
  • 21
  • 45
  • Also check this answer https://stackoverflow.com/questions/62563285/editorjs-in-nextjs-not-able-to-load-plugins for furhter configuration and usage of editor.js + next.js. – Shahriar Oct 06 '21 at 12:00