Bagaimana Cara Menggunakan EditorJs Di NextJs?

EditorJS merupakan salat satu Rich Text Editor (RTE) terbaik saat ini. Selain gratis digunakan atau Open Source, EditorJs juga memberi ruang kepada developer untuk dapat berkreasi secara mandiri untuk menyempurnakan atau menambahkan fitur yang dibutuhkan dalam bentuk plugins maupun tools. Dengan munculnya berbagai teknologi baru dalam pemrograman, fleksibilitas yang diberikan oleh EditorJs dapat berdaptasi dengan berbagai teknologi terkini seperti salah satu framework frontend terbaik saat ini yaitu NextJs.

Berbeda dengan Rich Text Editor lainnya seperti CKFinder, Quill, Tiptap, Slate.js, TinyMCE, dll. EditorJs pada dasarnya adalah Block Editor atau apapun yang anda ditulis di sana terdiri dari block. Artinya, setiap elemen yang anda tulis atau buat seperti header, paragraph bahkan gambar merupakan satu unit tersendiri, sehingga memudahkan bagi anda untuk mengenal setiap elemen yang anda tulis dan dapat anda pindahkan tata letak posisi block atau mengubah suatu block ke jenis block lainnya.

Sekarang saya akan memberitahu anda cara menggunakan atau memasang EditorJs di NextJs.

Sebagai konteks, saya menganggap anda sudah mempunyai proyek NextJs. Jika belum silahkan pasang terlebih dahulu.

Jika sudah terpasang, pertama anda harus menginstall EditorJs terlebih dahulu dengan perintah berikut menggunakan npm:

npm install @editorjs/editorjs @editorjs/header

Perintah tersebut untuk mengingstall EditorJs dan juga tools header untuk kita gunakan sebagai tools bawaan, anda dapat gunakan tools lain jika anda butuhkan. Anda dapat melihat daftar plugin atau tool yang bisa anda gunakan di github Awesome EditorJs.

// componenets/content-editor.tsx
'use client';

import React, { useEffect, useRef } from 'react';
import EditorJS from '@editorjs/editorjs';
import HeaderTool from '@editorjs/header';

export default function ContentEditor({name, defaultValue} : {
  name: string;
  defaultValue?: string;
}) {
  const ejInstance = useRef<EditorJS | null>(null);
  const [value, setValue] = React.useState('');

  const initEditor = (defaultValue?: string) => {
    setValue(defaultValue || '');

    const editor = new EditorJS({
      holder: 'editorjs',
      placeholder: 'Let`s write an awesome story!',
      onReady: () => {
        ejInstance.current = editor;
      },
      autofocus: true,
      data: {
        blocks: JSON.parse(defaultValue || '')
      },
      onChange: async (event) => {
        editor.save()
        .then((savedData) => {
          setValue(JSON.stringify(savedData.blocks));
        })
        .catch((error) => {
          console.log('Saving failed: ', error);
        });
      },
      tools: { 
        header: HeaderTool,
      }
    });
  };

  useEffect(() => {
    if (ejInstance.current === null) {
      initEditor(defaultValue);
    }

    return () => {
      ejInstance?.current?.destroy();
      ejInstance.current = null;
    };
  }, []);

  return (
    <>
      <input type="hidden" name={name} value={value} />
      <div id='editorjs' className='prose w-full' />
    </>
  );
}

Kode diatas merupakan contoh komponen ContentEditor yang sudah di integrasikan EditorJs. Anda dapat menyesuaikannya dengan kebutuhan anda. Jika komponen untuk editor sudah di integrasikan, selanjutnya kita pasang komponen ContentEditor ke halaman atau komponen lainnya seperti kode berikut saya pasang kedalam komponen PostEditorCard.

// app/page.tsx
'use client';

import { Suspense } from "react";
import dynamic from "next/dynamic";

const ContentEditor = dynamic(() => import('@/components/content-editor'), { 
    ssr: false,
    loading: () => <p>Loading Editor...</p>
})

export default function PostEditorCard() {
    return (
        <form>
            <Suspense fallback={<div>Loading...</div>}>
                <ContentEditor name="content" />
            </Suspense>
        </form>
    );
}

Kita harus mengimpor ContentEditor dengan dynamic import, agar editor js di render di klien bukan di server, karena EditorJs butuh akses ke window. Oleh karena itu, penting juga untuk kita mengubah ssr menjadi false di next.config.ts seperti berikut:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: false,
};

export default nextConfig;

Jika semua sudah, anda dapat menjalankannya dan melihat hasilnya. Yang saya tulis hanyalah sebuah contoh, anda dapat menyesuaikan dengan kebutuhan anda. Begitulah cara menggunakan EditorJs di NextJs.

Terima kasih Sudah membaca.