How To Add Editor.Js To Your Next.Js Code

Note: This article will be using the App Router

In case you have an application that requires the user or yourself to type something and save it in a database, you will need to use something like Editor.js to accomplish this.

Of course, there are other options.

Like, you can choose to use the Quill WYSIWYG rich text editor that I talk about here. Anyways, today we will solely discuss using Editor.js inside our next.js projects. Let’s dive into it.

Run this command in your terminal:

npm i @editorjs/editorjs react-editor-js @editorjs/embed @editorjs/table @editorjs/paragraph @editorjs/list @editorjs/warning @editorjs/code @editorjs/link @editorjs/image @editorjs/raw @editorjs/header @editorjs/quote @editorjs/marker @editorjs/checklist @editorjs/delimiter @editorjs/inline-code @editorjs/simple-image

Note: There’s something I want to go over before we get started. When installing @editorjs/header, @editorjs/paragraph, and so on, when importing and using typescript, you must change the file to a .js file. If you don’t, it will result in “Could not find a declaration file for module…”

So, with that being said, let’s continue.

Integrating Editor.js into Next.js Project

Create an editor.js file inside your components folder, or whatever folder you want to use. Add this code to 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,
    inlineToolbar: true,
  },
  checklist: CheckList,
  inlineCode: InlineCode,
  table: Table,
  list: List,
  quote: Quote,
  delimiter: Delimiter,
  raw: Raw,
};
function Editor({ data, onChange, holder }) {
  const ref = useRef();
  useEffect(() => {
    if (!ref.current) {
      const editor = new EditorJS({
        holder: holder,
        placeholder: "Start writing here..",
        tools: EDITOR_TOOLS,
        data,

      });
      ref.current = editor;
    }

    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;

Now, inside your page.tsx file you want to have the editor in, add this code:

'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import dynamic from 'next/dynamic';

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

const DocumentPage = () => {
  const Editor = dynamic(
    () => import('../../components/editor'),
    { ssr: false }
  );
  const [value, setValue] = useState('');;

  return (
    <main className="p-4">
        <Editor data={value} onChange={(e: any) => setValue(e)} holder="Start Typing Here..." />
    </main>
  );
};

export default DocumentPage;

---

So, that’s how you add editor.js to your next.js code. If you liked this short article, follow me on Medium and subscribe to my newsletter.

Happy Coding Folks!