0
337
ViewsEditor.js rendering/outputting two editors in React
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 usewindowAPI 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?
·
Juan Pablo Isaza
1 answers
Answer question0
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" />
</>
);
}
·
Juan Pablo Isaza
Report
Answer question