Tiptap

에디터에는 UI가 전혀 없다. 편집 로직만 받고 툴바, 떠 있는 메뉴, 레이아웃은 직접 그린다. 그래서 Tiptap은 디자인 규칙이 엄격한 제품에 맞는다. 기성 부품은 거기서 다른 모든 것과 부딪힌다.

React, Vue 3와 Vue 2, Svelte, Angular, Next.js, Nuxt, 순수 자바스크립트에서 돌아간다. 주요 프레임워크에는 공식 패키지가 있고, 나머지는 커뮤니티 바인딩이 채운다. 같은 코어를 설치하고 렌더링 계층만 자기 스택에 맞춰 바꾸면 된다.

공식과 커뮤니티 확장 기능 100개 넘게 서식, 표, 문법 강조가 되는 코드 블록, 이미지, 멘션, 사용자 정의 노드를 아우른다. 필요한 것만 켜면 된다. StarterKit이 흔한 것들을 묶어주니 기본 에디터는 몇 분이면 선다.

협업 확장 기능이 Yjs CRDT로 사용자 간 편집을 동기화하고, 오픈소스 Hocuspocus 백엔드나 Tiptap Cloud에서 돈다. 접속 표시, 커서 추적, 충돌 처리가 기본으로 붙어 있어 동기화 계층을 직접 짜맞출 필요가 없다.

댓글은 문서에 스레드를 달고, 버전 기록은 사용자가 이전 상태로 되돌리게 한다. Snapshot Compare는 두 버전 사이에서 무엇이 바뀌었는지 짚어준다. 법률, 편집, 컴플라이언스 문서에서는 기록이 근거로 버텨야 하니 중요하다.

Tracked Changes는 제안 모드와 교정을 켠다. 리뷰어가 편집을 제안하고 삽입과 삭제가 기록되며, 변경은 하나씩 또는 한꺼번에 수락하거나 거절한다. 제안마다 귀속이 붙으니 누가 무엇을 냈는지 안다.

AI Toolkit은 AI 에이전트에 문서 편집 능력을 준다. 선택 영역과 문서 전체를 읽고, 정확한 패치를 적용하고, 내용을 흘려보내고, AI 제안을 검토용으로 보여준다. 스키마를 인지하니 에이전트는 에디터가 정한 규칙 안에 머문다.

가져오기와 내보내기가 DOCX, Markdown, PDF, ODT, EPUB을 아우른다. Word에서 옮겨오는 팀이나 블로그를 만드는 사람은 변환기를 처음부터 쓰지 않고 내용을 넣고 뺀다.

Team 이상은 Webhook 연동과 REST API 접근을 더하고, 백엔드에서 문서를 조작한다. 문서를 JSON으로 받아오고, 프로그램으로 편집을 밀어 넣고, 내용이 바뀌면 알림을 받는다.