서비스에 맞는 에디터를 찾기 위해 원하는 기능들을 나열해봤다.
- 한글 지원
- 마크다운 지원(개발자들을 타겟으로 한 서비스)
- 미리보기 지원(벨로그 처럼)
- 필수적인 옵션들(툴바의 폰트 크기, 색상 등등..)
- 이미지 업로드
- 복붙은 필수라고 생각하고, 드래그 앤 드롭이 되면 더 좋음
- 풍부한 생태계
사실 에디터 라이브러리가 정말 많았는데 우선 npm 다운로드 순으로 react-quill, react-draft-wysiwyg, toast-uti-editor들을 조사해봤다.
우선 react-quil이나 react-draft-wysiwyg는 마크다운을 지원하지 않아서 자연스레 toast-ui-edotr를 먼저 써보게 되었다.
마크다운은 물론이고 미리보기, 마크다운 파서 뷰어, 이미지 업로드 등을 쉽게 제공해줬고 국내에 사용하는 사람이 많아서 정보도 많았고 UI도 트렌디했다. 하지만, 현재 프로젝트에서 사용하고 있는 리액트 18 버전과 호환되지 않는 치명적인 단점이 있어서 사용할 수 없었다.
이후에 여러가지 라이브러리들을 써봤지만 라이브러리 마다 trade-off가 명확히 존재하기도 하고, 에디터 외에 Viewer를 따로 제공해주지 않으면 markdown-parser와 dompurify로 마크다운 데이터 형식을 직접 렌더링 해야 했는데 텍스트가 깨지는 경우가 대부분이었다. 따라서, 웬만하면 Viewer를 제공해주는 라이브러리를 골라야 겠다고 생각했고, 그러던 중 react-md-editor를 발견하였다.
내가 원하는 대부분의 요구사항들을 모두 충족시켜줬으며 이미지 업로드가 버튼이 아닌 복사 붙여넣기로 되지 않는 다는 점 빼고 완벽했다.
이와 관련해 정보가 그렇게 많지 않았지만 다행히 Github Issue의 구현사항이 있어서 적용해볼 수 있을듯 하다.