<aside> 📋 CRDT 시리즈

1. CRDT... 널 알고 싶어 - (1)
2. CRDT. 너 왜비나랑 만나볼래? - (2)
3. CRDT를 납작하게 만들어줘요. - (3)
4. CRDT를 블럭 여러개에 적용해봐요. - (4)
5. CRDT야 이것좀 붙여넣게 해줘 - (5)
6. CRDT 블럭아 포커스 좀 잡아줘 - (6) </aside>

블럭 여러개짜리 에디터

CRDT를 블럭 여러개에 적용해봐요. - (4) 작업을 복습해볼게요. 공동 편집을 지원하는 왜비나 회의록은 두 개의 CRDT 계층을 가져요.

• <Mom /> 회의록 내부의 블럭 id들을 CRDT로 관리해요.
• <Block /> 블럭 내부의 텍스트 문자들을 CRDT로 관리해요.

그리고 회의록 컴포넌트는 가지고 있는 블럭 id를 사용해 이렇게 블럭을 렌더링해요.

{blocks.map((id) => (
  <Block key={id} id={id} />
))}

CRDT의 localInsert/Delete, remoteInsert/Delete를 활용해 블럭을 추가하고 삭제하는 기능이 생겼지만 실제로 사용하기에는 불편했어요.

블럭을 추가해도 커서가 기존 위치에 고정되어있고, 삭제했을 때는 심지어 사라져버렸거든요.

UX를 위해 블럭을 추가하고 삭제하는 동작에 사용자 커서가 이동되는 기능이 필요했어요.