블럭 에디터를 사용해보자

노션을 사용하면 아래와 같은 블럭 에디터를 사용할 수 있다.

editor.js 라이브러리를 사용하면 노션에서 사용하는 블럭 에디터를 사용해볼 수 있다.

react에서 사용하기 위해서는 아래 패키지를 설치한다.

npm i @editorjs/editorjs --save

패키지를 설치한 후, 에디터를 사용하기 위해서는 Editor 객체를 생성해야 한다.

import EditorJS from "@editorjs/editorjs";
import { useEffect, useRef } from "react";

const Editor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      return;
    }
    const editor = new EditorJS({
      holder: "editor",
    });
    editorRef.current = editor;

    return () => {
      if (editorRef.current.destroy) {
        editorRef.current.destroy();
      }
    };
  }, []);

  return <div id="editor"></div>;
};

export default Editor;

 

useEffect를 사용하여 초기화 단계에서 <div id="editor"></div> 태그에 editor를 초기화를 해야 하며 이를 위해, Editor 생성 시, holder로 div 태그의 id를 넘겨준다.

그리고 리엑트에서 에디터의 상태를 알기 위해, editor 객체를 editorRef에 저장한다.

초기화 시, editorRef.current의 값을 조사하지 않으면, React.StrictMode로 인해 같은 에디터 객체가 두개가 생성되는 오류가 발생하므로, editorRect.current의 값에 따라 초기화 여부를 결정해야 한다.

if (editorRef.current) {
  return;
}

컴포넌트 생명주기에서 해체시, 에디터 객체를 정상적으로 해체하기 위해 editor의 destory() 함수를 호출해주는데, 이때 역시, destroy함수 여부를 검사하지 않으면 오류가 발생한다.

  useEffect(() => {
....
    return () => {
      if (editorRef.current.destroy) {
        editorRef.current.destroy();
      }
    };
  }, []);