Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?:\/\/\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/,
                embedUrl: '<%= 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,
}, [])


Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8

github_iconTop GitHub Comments

Jeff909Devcommented, Dec 2, 2022

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 😄

vikram2009commented, Oct 26, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Editor.js rendering/outputting two editors in React
Using useEffect solves the issue since it only runs after the initial page render: export default function index(params) { useEffect(() ...
Read more >
Configuration - Editor.js
Editor ready callback. Editor.js needs a bit time to initialize. It is an asynchronous action so it won't block execution of your main...
Read more >
Next.js & Editor.js Complete Setup Guide | by Fazley Rabbi
Step 2: Configure & Tools Installation. Each block of Editor.js is provided by a Plugin. By default, Editor.js comes with only a paragraph...
Read more >
Ace - The High Performance Code Editor for the Web
Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and...
Read more >
Trying to Setup Monaco Editor with Next.js - Day 14 - YouTube
We got Prismjs working.Code: at 6pm CT: you like cooking, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found