TipTap Editor Troubleshooting

[eafiseemn]

Tiptap Editor의 Active 상태 변경 안됨

대상 스택: Next.js(App Router) + TailwindCSS v4.1.13 + @tiptap/react v3

Context: 언제/어디서/어떤 상황에서 문제 발생?

• 대상 페이지/컴포넌트 : Editor + Toolbar Component
• 기대 동작 : 현재 Cursor 위치에 적용된 스타일에 따라 Toolbar Button 의 active status가 변경되어야 함 (button background color 변경)
• 현재 상태 : Bold 처리된 부분으로 Selection이 바뀌어도 active 상태가 변경되지 않음

Hypotheses: 근본 원인 가설 1~2개

1. isActive('bold') 자체에 값이 false로 떨어짐
2. tiptap editor의 내부 상태는 변경 + isActive 값은 전해지지만 Toolbar의 버튼 컴포넌트가 리렌더링 되지 않음

Experiments: 시도한 실험/도구(Profiler, Network, Logs)

1. console.log로 찍어보면 isActive 값은 정상적으로 true / false로 찍힘
2. Profiler로 확인 시 selection / transaction 변경 시 렌더된 컴포넌트 없음
   = editor instance 의 내부 변화가 Toolbar Button Component의 Props나 상태로 전달되지 않음 → 리렌더 트리거 없음

Decision: 최종 해결책(대안 비교 포함)

선택 / 트랜잭션 이벤트를 구독해서 Toolbar에 리렌더 트리거 걸기

1. useState / useEffect 사용

• 방식 : tiptap 이벤트를 구독해서 강제로 리렌더 시키기
• 장점 : 쉽게 구현 가능, 바로 동작
• 단점 : 사용자가 편집하면서 Selection이 바뀔 때마다 toolbar가 계속 리렌더링 됨

2. local Hook 사용 (shallow diff)

• 방식 : 프레임당 1회 등 계산 제한을 걸고, 값이 바뀐 경우에만 setState + Button Memoization 으로 불필요한 렌더링 방지
• 장점 : 1번에 비해 가벼워질 수 있음
• 단점 : Toolbar 버튼이 많아서 hook 코드가 약간 복잡

3. 전역 상태(Zustand)로 관리

• 방식 : 이벤트를 한 번만 바인딩하고, 각 버튼이 필요한 슬라이스만 구독
• 장점 : 만약 toolbar를 여러 개 사용할 경우 (툴바 / BubbleMenu / FloatingMenu 등) 컴포넌트간 공유 쉬움, 슬라이스 구독으로 리렌더링 최소화
• 단점 : 공유 필요한 컴포넌트가 별로 없을 경우 과할 수 있음 → 현재 디자인상 Toolbar 1개 (Sticky top-0) + Editor 페이지 1개

→ 방식 2번 사용 (/src/hook/useToolbarSnapshot.ts)