savvykang 2024-03-02 | parent | ★ favorite | on: Tiptap Editor - Headless WYSIWG 에디터(github.com/ueberdosis)

문서화가 나름 잘 되어있다고 하시는 말에 동의하기가 어렵습니다. 제가 느끼기에는 시작하기 문서와 API 문서 사이에 간극이 너무 커서 학습 곡선이 높습니다. 저희가 진행하는 리액트 프로젝트에서는 Prosemirror와 react-prosemirror 의 문서화 스타일이 좀더 사용자 친화적이고 완성도 있다고 판단해서, react-prosemirror를 선택하고 tiptap을 선택하지 않았습니다.

저희의 요구사항에 대한 poc용 샘플코드를 만들기 위해 리액트 예제를 파악하는 동안 다음과 같은 문제가 있었습니다.

  1. StarterKit을 추가했을 때 사용 가능한 요소는 무엇일까요? 패키지 이름으로 별도 문서를 찾아야 합니다. tiptap 예제를 실행해보던 집중상태에서 벗어나게 됩니다.
  2. ListItem은 StarterKit에 포함되어 있는데 예제에서는 왜 또 ListItem을 프로젝트에 포함시킨걸까요? extension에 대한 환경설정을 하기 위해서 입니다.
  3. 왜 editor().chain().focus() 같은 구문을 써야 하나요? 메소드 체이닝에 대한 설계 원리나 설명이 없습니다
  4. Bubble menu와 Floating menu는 리액트 예제에 빠져있습니다. Try it live 페이지 (https://templates.tiptap.dev/pjrwkQtNpq)에서 본 기능과 다르게 동작하므로 왜 기능이 빠져있는지 문서를 살펴봐야 합니다.
  5. 표 기능이 없어서 Extensions 페이지에서 table 키워드로 검색을 합니다. Table, TableCell, TableHeader, TableRow 가 검색결과에 나옵니다. 이것들을 다 추가해야 할까요?
  6. Table과 갖가지 extension을 어찌저찌 추가했습니다. 기능이 제대로 동작하는지 알아보려면 표 삽입부터 해야 합니다. 툴바 커맨드는 어떻게 작성해야 하나요? editor 툴바의 어디에 해당 커맨드들에 대한 함수가 추가될까요? 전혀 힌트가 없습니다
  7. 표 안에 다른 표를 중첩시키지 못해야 한다는 요구사항이 있습니다. 커서가 표 안에 있는지 판단하는 로직은 어떻게 구현해야 할까요? 전혀 힌트가 없습니다.
  8. Color가 extension으로 패키징되어 있던 것을 기억하고 궁금증이 생겨 소스코드를 열어봅니다. src 디렉토리에 파일이 단 두 개 있는 것을 보고 탄식이 나옵니다. 왜 이렇게 자잘한 모듈을 만들었는지 의도를 이해할 수 없습니다. 이렇게 작은 기능도 패키지로 만들면 재사용성보다는 의존성 버전 관리에 부담이 있지 않을까요?

1-3, 4-6, 8은 의문이나 불편함을 전혀 느끼지 못해 저는 동의하기 어렵네요.

1-2
StarterKit은 말그대로 Starter를 위한 Kit인 만큼, 실사용 시점에는 별 의미가 없어보입니다.
ListItem의 경우 말씀하신대로요. Color 익스텐션의 설정을 위한 요소입니다. 마찬가지로 StarterKit을 사용하지 않으면 그만인 부분이라고 생각해요.

3
chain().something().run() 은 단순 신택스 슈거와 같은 존재지만, 배터리 포함 라이브러리의 컨셉에 알맞는 기능을 제공한다고 생각합니다.
볼드 후 포커스 같은 액션이 사실상 필수인 모바일 환경에서 아주 유용하게 쓰고 있습니다.

4
해당 기능을 사용하지 않아 잘 모르겠네요.
(내가 사용하지 않을 기능에 대한 정보를 굳이 보지 않아도 된다는 점에서 1번의 집중상태에서 벗어나게 된다고 언급하신 단점의 반대급부로 오는 장점이라고 생각합니다.)

5-6
각 익스텐션의 문서에 잘 나와있을 뿐더러, 일반적으로 에디터를 구현하는 것과 다를게 전혀 없습니다.
솔직히 6번에서 말씀하신 부분은 제가 savvykang님의 말씀을 제대로 이해한게 맞는지도 잘 모르겠습니다... '이게 왜 의문이지...? 대체 어떤 힌트가 필요한거지...?' 라는 생각이 계속 드네요ㅎㅎ...

7
"다른 노드들의 것과 같이" editor.isActive('table') 으로 포커스를 확인할 수 있습니다.
다만, 단순히 포커스 노드만 파악한다고 해결될 문제가 아닌거 같아요. 붙여넣기에 대한 필터링, 개발자도구를 통한 삽입 등 많은 부분을 고려해야 하는 요구사항인 것 같습니다.

8
의존성 버전 관리에 부담이 된다는 부분에는 동의합니다만, 필요하지 않은 기능의 코드를 가지고 있지 않아도 된다는 점에서 장점을 가져가는 부분이라고 생각합니다.
딱 저희 케이스에서 언급하신 Color 익스텐션을 사용하지 않을 상황이었거든요. 각자의 장단점이 있는 것 같습니다.

.
언급하신 react-prosemirror와 tiptap은 컨셉이 완전히 다른 친구라고 생각합니다.

prosemirror를 리액트스럽게 쓸 수 있게 하는 친구
vs
prosemirror 기반인지 아닌지는 중요하지 않고, 아무튼 내 서비스에 어울리는 에디터를 구현하는데 필요한 것들을 몽땅 모아둔 친구