Editor.js rendering/outputting two editors in React

Question

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)

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?

Had the same issue some weeks ago: stackoverflow.com/questions/67990522/… — PRSHL
– PRSHL, Commented Oct 6, 2021 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
– Shahriar, Commented Oct 6, 2021 at 11:23

Shahriar · Accepted Answer · 2021-10-06 11:32:23Z

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" />
      </>
   );
}

answered Oct 6, 2021 at 11:32

Shahriar

2,4737 gold badges32 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shahriar Over a year ago

Also check this answer stackoverflow.com/questions/62563285/… for furhter configuration and usage of editor.js + next.js.

Collectives™ on Stack Overflow

Editor.js rendering/outputting two editors in React

Screenshot (I added borders to show the area)

Codes

index.jsx

_app.js

What I tried

Additional Notes

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Screenshot (I added borders to show the area)

Codes

index.jsx

_app.js

What I tried

Additional Notes

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related