How to use Editorjs in nextjs ?

Editorjs is a great rich text editor. Basically its a block editor, every thing you write or create are just blocks.

In most of editors, the workspace is provided by single contenteditable element in where you can create different HTML markup.

On the other hand Editorjs outputs clean data in JSON instead of heavy confusing HTML markup.

Here is how you can use it in your nextjs project:

//This is my pages route eg. 'pages/create-new'
import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import Loading from 'components/Loading';


const CreateNew = () => {
  const CreateNewBlog = dynamic(
    () => import('src/pages-sections/CreateNewBlog'),
    { ssr: false }
  );
  return (
    <>
      <Layout showFooter={false} showFab={false}>
        <CreateNewBlog />
      </Layout>
    </>
  );
};

export default CreateNew;

I have import my Editor as dynamic component where “ssr : false” , it is very important you import it like this

Next up Editor Component

// This is my Editorjs component, better if make a seperate component and use it

import React, { useEffect, useRef, useState } from "react";
import EditorJS,from "@editorjs/editorjs";
import CheckList from "@editorjs/checklist";
import Code from "@editorjs/code";
import Delimiter from "@editorjs/delimiter";
import Embed from "@editorjs/embed";
import Image from "@editorjs/image";
import InlineCode from "@editorjs/inline-code";
import List from "@editorjs/list";
import Quote from "@editorjs/quote";
import Table from "@editorjs/table";
import SimpleImage from "@editorjs/simple-image";
import Paragraph from "@editorjs/paragraph";
import Header from "@editorjs/header";
import Raw from "@editorjs/raw";

const EDITOR_TOOLS = {
  code: Code,
  header: {
    class: Header,
    shortcut: "CMD+H",
    inlineToolbar: true,
    config: {
      placeholder: "Enter a Header",
      levels: [2, 3, 4],
      defaultLevel: 2,
    },
  },
  paragraph: {
    class: Paragraph,
    // shortcut: 'CMD+P',
    inlineToolbar: true,
  },
  checklist: CheckList,
  inlineCode: InlineCode,
  table: Table,
  list: List,
  quote: Quote,
  delimiter: Delimiter,
  raw: Raw,
};
function Editor({ data, onChange, holder }) {
  //add a reference to editor
  const ref = useRef();
  //initialize editorjs
  useEffect(() => {
    //initialize editor if we don't have a reference
    if (!ref.current) {
      const editor = new EditorJS({
        holder: holder,
        placeholder: "Start writting here..",
        tools: EDITOR_TOOLS,
        data,
        async onChange(api, event) {
          const content = await api.saver.save();
          // console.log(content, "sdfb");
          onChange(content);
        },
      });
      ref.current = editor;
    }

    //add a return function handle cleanup
    return () => {
      if (ref.current && ref.current.destroy) {
        ref.current.destroy();
      }
    };
  }, []);

  return (
    <>
      <div
        id={holder}
        style={{
          width: "100%",
          minHeight: 500,
          borderRadius: " 7px",
          background: "fff",
        }}
      />
    </>
  );
}

export default Editor;

This is where i used my Editorjs component

//import Editorjs component as a dynamic import where ssr is false
import dynamic from "next/dynamic";
let Editor = dynamic(() => import("./Editor"), {
  ssr: false,
});


const CreateNewBlog = () => {
  const [content, setContent] = useState(null);
  return(
        <Editor
          data={content}
          onChange={(e) => setContent(e)}
          holder="editor_create"
        />
  )

export default CreateNewBlog;

If you get any error like package not found just install that package and you are good to go.

This all you need to use Editorjs in Nextjs .

have any question or error feel free to comment ..