1. 깊어지는 고민.

널리 사용되는 에디터에서 이런 문제점들이 연달아 터져나온다는 것은 필경 내 실력 부족일 가능성이 매우 높다. 나름 에디터 구조를 파악하고 사용법을 익히려고 노력해보았으나 아래와 같은 이유들로 인해 어려움을 겪게 되었다.

• 하나, 구현에 필요한 패키지가 너무 많다.
  -> draft.js
  -> react-draft-wysiwyg
  -> draftjs-to-html
  -> html-to-draftjs
  (...)

• 둘, 에디터에서 입력한 데이터가 한번 변환되어야 DB에 저장할 수 있는데, DB에서 꺼내올 때는 또 재변환을 거쳐야한다.

(...)
  const htmlToEditor = docSnap.data().text;
  const blocksFromHtml = htmlToDraft(htmlToEditor);
  if (blocksFromHtml) {
    const { contentBlocks, entityMap } = blocksFromHtml;
    const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
    const editorState = EditorState.createWithContent(contentState);
    setRawTextData(editorState);
  }
(...)

• DB에 저장된 데이터를 조회하는 코드의 일부. htmlToEditor의 패키지의 htmlToDraft 함수를 이용해서 데이터를 변환한 다음 반환된 데이터에서 contentBlocks, entityMap를 구조분해 할당으로 각각 꺼내 또다른 변환 작업을 거친 뒤에 state에 set 한다.

2. 새롭게 시작하자..

이 에디터에서 줄 바꿈은 하나의 문장을 p 태그로 감싸 한 문장과 다음 문장 사이의 줄 바꿈을 처리해주는 방식으로 이루어지고 있었다.

그래서 이 에디터를 사용할 때 줄을 바꾸기 위해서는 enter 키만 입력한다고 되는 것이 아니라, 줄을 바꾸고 space bar로 빈 공백문자를 하나 넣어주어야 진짜 줄바꿈이 일어난다. 이건 정상적인 방법이라고 할 수 없다.

폰트와 글자 크기 변경 기능들이 때때로 동작하지 않는 것은 내가 입력한 코드에 에러가 있거나 최적화 문제로 입력이 인식되지 않는 것으로 추정되는 데 여러 패키지에서 함수들을 연달아 꺼내서 사용하는 탓에 이 부분은 내 실력으로는 어떻게 해결할 방법이 없었다.

데이터 출력 시 글자와 문장 간격 문제는 내가 블로그 프로젝트를 구현할 때, Reset CSS를 사용하여 HTML 태그에 기본적으로 적용되어 있던 CSS 속성을 없애서 발생한 문제였다. 글 데이터를 출력할 구역에서 CSS를 설정해주니 문제가 해결되었다.

나름 노력을 해봤지만 3가지 문제 중 2가지가 해결되지 않는다. 당장 내 실력으로 해결하는 것도 어려워 보이고, 이미 상당한 시간을 소모한 상황에서 더 투자할 여력도 없었다. 따라서 draft.js 말고 JavaScript 환경에서 사용하는 또 다른 웹 에디터를 찾아 에디터에 대한 이해도를 높임과 동시에 무엇이 더 사용하기 편리할 지 알아보기로 하였다.

3. 새로운 웹 에디터를 찾아라.

draft.js를 처음 찾았을 때는 일단 구글에서 검색 좀 되고 당장 작동만 되면 상관없다는 명분을 가지고 눈 앞에 보이는 에디터를 찾아 사용했었다.

따라서 이번에는 우선 'JavaScript 환경에서 사용하는 웹 에디터에는 무엇이 있는지'를 알아보았다.

구글 검색과 최근 세간의 화제가 되고 있는 ChatGPT의 추천을 받아보았는데..

• ChatGPT는,
  Quill, Draft.js, CKEditor, TinyMCE 등을.

• 한국인터넷진흥원(KISA)에서는 국내에서 가장 많이 사용되는 에디터를
  FCKeditor, CKeditor, SmartEditor2.0, GEditor, RainEditor, DaumEditor, TinyMCE Editor, EZEditor라고 설명하였고.

• 이외에는
  jodit, slate, medium-editor 등등의 이름이 거론되었다.

다음으로는 '사람들은 어떤 에디터를 가장 많이 사용하는가'를 알아보았다.

자료를 찾아보니 대략 npm trends라는 곳에서 다운로드 횟수를 기준으로 비교가 가능하다는 사실을 알았다.

결과적으로 JavaScript 환경에서 '많이' 사용되고있는 웹 에디터에는..
GEditor, ckeditor, draft-js, jodit, medium-editor, quill, react-draft-wysiwyg, slate, tinymce 정도가 있다는 결론을 내렸다.

다음에는 '최근까지 업데이트가 이루어지고 있는가'를 알아보았다.

내가 사용했었던 draft-js는 npm 다운로드 숫자로는 압도적이었으나 마지막 업데이트 시점에 3년에서 4년 전으로 지금 시점에서는 유지보수가 이루어지지 않는 것으로 파악되었다. 에디터에서 draft-js와 쌍벽을 이루고 있는 것은 quill이었으나 이쪽도 유지보수가 끊어져 있는 것으로 보였다.

다음 순서로는 slate와 tinymce를 가장 많이 사용하고 있었는데, 이들 모두 1달 혹은 몇 일 전까지 내용이 업데이트 된 것을 확인하였다.

결과적으로 오픈소스 소프트웨어에, 현재 업데이트가 이루어지고 있으며, 사용자의 사용 빈도도 적당하고, 구글에서 참고자료도 쉽게 접할 수 있는..

TinyMCE를 새로운 웹 에디터 구현에 사용할 것을 결정하였다!