nextjs text-editor 조사

Draft.js

페이스 북에서 16년도 부터 만들어져서 사용되고 있는데 에디터다. 

star: 21.9k  weekly donwloads : 81.5k

장점

1. 페이스북에서 만들었고, 유지보수하며, 많은 사용자들이 사용하고 있어 React와 잘 맞는다.

2. 공식 문서가 나름 상세하게 잘 구성되어져 있다.

3. 확장성과 사용자 정의가 가능하다.

단점

1. SSR에서 에러가난다! https://github.com/facebook/draft-js/issues/2332

물론 해결책은 이슈를 보면 존재한다.

const emptyContentState = convertFromRaw({
    entityMap: {},
    blocks: [
        {
            text: '',
            key: 'foo',
            type: 'unstyled',
            entityRanges: [],
        },
    ],
});
...
const [editorState, setEditorState] = React.useState(() => EditorState.createWithContent(emptyContentState));
...
<Editor
    ref={editor}
    editorState={editorState}
    placeholder=""
/>

해당 코드로 값을 초기화해준다면 에러는 발생하지 않는다.

2.  React 17.6 이전에 만들어진 프로젝트이기 때문에 class형으로 된 예제가 많다.

최근에 React로 만들어지고 있는 프로젝트들은 function형으로 작성되는 경우가 많기 때문에, class로된 예제를 변환하는데 까다롭다.

3. 현재 업데이트가 중단된 프로젝트다.

업데이트가 중단된 이후 다른 프로젝트를 진행중이다.

4. 테이블과 같은 복잡한 콘텐츠 구조가 필요한 경우 편집기가 느려지고 코드가 복잡해진다.

5. 공식 모바일 지원이 없다.

※ 총평 : 해당 프로젝트의 docs를 훑어본 후 예시를 보면서 간단하게 만들어보려고 했다. 그런데 class형으로 된 예제가 많아 예시 프로젝트를 만드는데 생각대로 작동하지 않는 부분도 많고, 어려운 부분이 많다고 판단된다.

 

Lexical

Lexical은 처음부터 간결하고 확장 가능한 텍스트 편집 프레임워크로 만들어졌습니다.

star : 11.1k weekly downloads : 2.7k

장점

1. 여러 플랫폼을 고려하고 만들어져 호환성이 좋다.

2. ui 적요소에 의존하지 않기때문에 빠르다.

3. CKEditor, Quill과 같은 프레임워크에 익숙하다면 빠르게 익힐 수 있다.

단점

1. 아직 정식 배포버전이 아니기때문에 변경될 여지가 존재한다.

※ 총평 : 일단 테스트 예제코드 단에서 문제는 없었다. 또한 잘 커스텀된 예제를 페이지 자체적으로 제공하고 있어서 추가적인 기능을 사용하기 편하지 않을까란 생각이 들었다.

 

---

Quill

편리하고, 확장가능한 텍스트 에디터

star : 33.4k weekly-downlad: 86.5k

장점

1. API 기반 설계로 다른 텍스트 편집기 처럼 HTML이나 다른 DOM 트리 분석이 필요가 없다.

2. 편집기 스타일을 위한 사전설정을 통한 사용자 정의 콘텐츠 및 형식을 지원한다.

3. cross platform 과 cross browser 지원

4. 설정이 쉽다.

단점

1. XSS 보안이슈

2. 사용자 기능 정의 제한

3. 업데이트 및 패치수가 적다.

4. react에서 사용하려면 ReactQuill을 사용하는 편이 더 편하다. star: 5.3k

5. nextjs에서 사용 시 document관련 ssr에러가 발생하기 때문에 dynamic을 통한 import가 필요하다.

 

※ 총평 : 옵션만 집어넣으면 되서 만드는데 편하다! 근데 커스텀에 제한이 있어 원하는 디자인이 있다면 사용이 어려울 듯하다.