우선 tiptap은 완성된 에디터를 가져다 쓰는 것이 아니라 최소한만 제공해 주고 나머지들은 커스텀하며 사용하는 방식이다. 이 커스텀하기 위한 라이브러리들이 세부적으로 나눠져 있다. 그래서 필요하거나 내가 사용하고 싶은 기능들만 설치해 추가해 사용하는 방식이다.
tiptap사용 예시들이 문서화가 잘 되어있다.
https://tiptap.dev/docs/examples 이 링크를 타고 들어가면 아래와 같은 화면을 확인할 수 있는데 내가 필요한 기능들을 선택해 비슷하게 사용하면 된다.
https://tiptap.dev/docs/editor/api/commands
매우 중요한 내용이 담겨있다. TipTap의 전부라 할 수 있는 Editor에 담겨져 있는 함수들에 대한 설명들이다. 이제 이 함수들을 사용해 원하는 기능들을 추가할 수 있다.
드래그를 하게 되면 스타일을 수정할 수 있는 메뉴를 뜨게 할 수 있다.
평소 editor의 최 상단에 고정적으로 있는 menu창을 추가할 수 있다.
특정 문자들을 적으면 스타일이 적용되게 할 수 있다.
요즘 트렌드를 생각했을 때 floating menu는 잘 사용하지 않는다고 판단해 추가하지 않았고 나머지 markdown과 bubble menu 기능만 우리 서비스에 추가하였다.
그렇게 여러 기능들을 추가하고 나니 문제가 생겼다.. 기본적으로 제공해 줄줄 알았던 tab과 shift-tab을 눌렀을 때 들여쓰기와 내어쓰기가 되는 기능들이 전혀 작동하지 않았다..