CodeMirror로 에디터를 만들어놨는데 쓰면 쓸수록 아닌 것 같았다. 개발자한테는 익숙한 느낌인데 일반 노트 용도로는 WYSIWYG이 훨씬 낫다. 그래서 Tiptap으로 전면 교체하기로 했다. 갈아엎는 거라 좀 무서웠는데 결과적으로 잘한 선택.
Tiptap으로 바꾸면서 한 것들
- 리치 텍스트 툴바 (헤딩, 볼드, 이탤릭, 체크리스트, 코드 블록)
- 테이블 삽입/편집
- 이미지 드래그 앤 드롭 + 리사이즈
- 마크다운이랑 리치텍스트 사이 변환
Tiptap이 ProseMirror 기반이라 확장성이 좋은데, 그만큼 초기에 세팅할 게 많다. 플러그인 조합이 잘못되면 에디터가 그냥 안 뜨기도 해서 디버깅이 좀 고통스러웠다.
AI 기능 첫 삽
FastAPI 쪽에 AI 라우터를 만들고, Ollama/Gemini/OpenAI/Anthropic 4개 프로바이더를 붙였다. 프론트에서는 텍스트 선택하고 Alt+A 누르면 AI 메뉴가 뜨는 식. 요약, 번역, 교정, 확장 같은 기본 작업을 넣었다.
제일 신경 쓴 건 인라인 Diff인데, AI가 수정한 부분을 에디터 안에서 바로 diff로 보여주고 수락/거절하는 방식이다. 이거 Tiptap 노드 데코레이션을 활용해서 구현했는데 생각보다 복잡했다.
휴지통이랑 테마
파일 삭제할 때 바로 날리지 않고 .trash 폴더로 옮기는 휴지통 기능을 넣었다. 그리고 UI 컬러를 보라색 그라데이션에서 따뜻한 앰버/골드 톤으로 바꿨는데, 처음에 넣었던 글로우/펄스 애니메이션이 너무 과해서 싹 걷어냈다. 깔끔한 게 낫더라.