🥛 동시편집 마크다운 에디터 구현기

문제 정의: 우리가 원하는 에디터

1. 마크다운을 지원하는 에디터

마크다운은 간결하고 효율적으로 글의 구조를 표현할 수 있기 때문에, 최근 많은 에디터에서 지원하고 있고 선호도가 높습니다. 따라서 에디터 요구사항에 추가되었습니다.

2. 협업이 가능한 에디터

허니플로우 서비스 목표에 ‘동시 편집’이 포함되어있습니다. 이는 협업 환경을 고려하는 것으로 Notion 과 같은 실시간 동시편집 기능을 목표로 구현을 시작하게 되었습니다.

Milkdown으로 만드는 유연한 마크다운 에디터

마크다운 에디터를 구현하기 위해 Milkdown 라이브러리를 사용합니다.

Milkdown은 텍스트 편집 엔진인 ProseMirror 스택 위에서 구현되었으며, 플러그인 형태로 기능을 제공하여 확장성과 커스터마이징이 매우 뛰어납니다. 또한, headless 컴포넌트로 설계되어 있어 스타일을 자유롭게 커스터마이징할 수 있습니다. Milkdown은 Y.js와의 결합성이 뛰어나 실시간 협업 기능 구현에 적합하며, Vue와 React와의 통합도 지원합니다.

다른 어떤 장점보다, Yjs 와 결합이 뛰어나다는 점이 가장 컸습니다. 동시 편집 기능을 지원하기 위해서 이미 Yjs를 기반으로 설계가 이루어지고 있었기 때문입니다.

Block 단위로 편집하기

Milkdown의 BlockProvider을 사용하여, 문단 옆에 드래그 가능한 Block View를 표시합니다. 이 UI를 조작하면 에디터의 컨텍스트에도 변경 사항이 반영되는 방식으로 구현됩니다.

Block View란, 플러그인이 에디터 뷰와 상호 작용하거나 DOM에서 무언가를 설정해야 하는 경우 사용됩니다. 이 함수는 플러그인의 상태가 에디터 뷰와 연결될 때 호출됩니다.

협업 가능하게 하기

Yjs를 통한 협업 기능을 구현하기 위해서 collab 플러그인을 사용합니다. 전체적인 흐름은 다음과 같습니다.

1. Y.Doc 인스턴스를 생성하여 문서 상태를 관리합니다.
2. y-websocket을 사용하여 웹소켓 연결을 구성하고, 실시간 협업을 위한 데이터 동기화를 활성화합니다.
3. Milkdown의 협업 서비스(CollabService)를 초기화하고, Y.doc 인스턴스와 에디터 컨텍스트를 바인딩합니다.
4. 초기 동기화 과정이 완료되면 발생하는 synced 이벤트가 감지되면, 기본 템플릿을 문서에 적용합니다.
5. 컴포넌트가 언마운트될 때 WebSocket 연결을 해제하고, 관련 리소스를 정리하여 메모리 누수를 방지합니다.

서버 관점에서 바라보기

서버에서는 웹소켓 연결 시 공유되고 있는 Y.doc 데이터를 내부에서 제공되는 메서드인 Y.encodeStateAsUpdate 를 통해서 바이너리 데이터로 변환하여 가져올 수 있습니다. 이렇게 가져온 데이터를 문자열로 변환하여 DB에 저장하는 것도 가능합니다. 만약, 이미 저장되어있는 바이너리 데이터를 Y.doc 데이터에 적용하고 싶을 때는, Y.applyUpdate를 사용하면 모든 공유되고 있는 데이터에 업데이트를 적용시킬 수 있습니다.

트러블 슈팅

flushSync가 라이프사이클 메서드 내부에서 사용되면 안됨

• react warns: "flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task."
• flushSync()가 렌더링 중에 호출되었기 때문에 발생합니다. 즉각적으로 렌더링을 강제하는 flushSync를 렌더링이 진행 중일 때 호출하면 React의 내부 처리 흐름을 방해할 수 있어 경고가 발생합니다.
• 확인 결과, 에디터와 협업 플러그인을 결합하는 로직에서 사용하는 라이브러리가 flushSync를 사용하고 있었습니다. 이 기능이 useEffect 안에서, 즉 라이프사이클 메서드 내에서 사용되고 있기 때문에 문제가 되었던 것입니다.

문제 해결 방법

• 이 문제를 해결하려면 flushSync() 호출을 setTimeout과 같은 방법으로 매크로 태스크로 취급되게 하여 해결할 수 있습니다. 에러 문구에서는 스케쥴러 태스크 혹은 마이크로 태스크로 이동할 것을 권장하고 있지만, 마이크로 태스크로 옮기게 될 시 렌더링 사이클 또한 마이크로 태스크이기 때문에 똑같은 에러를 다시 마주할 수 있습니다. 매크로 태스크로 이동시키면 React가 렌더링 사이클을 완료한 후에 처리할 것을 확실히 할 수 있습니다.

useEffect(() => {
  setTimeout(() => {
    flushSync(() => {
      // 동기적으로 처리할 코드
    });
  }, 0);
}, []);

앞으로의 개선지점

• 추가 기능 도입: Notion과 같이 툴팁이나 슬래시를 통해 서식을 추가/변경할 수 있는 기능 도입이 필요합니다.
• 통일된 UI: 사용중인 shadcn가 UI로 사용될 수 있도록 결합 과정이 추가적으로 필요합니다.
• 동시편집 테스트: 다양한 동시 편집 상황에서 발생할 수 있는 문제점을 테스트를 통해 확인이 필요합니다.

References

[Collaborative Editing | Milkdown](https://milkdown.dev/docs/guide/collaborative-editing)

[Total Studio – Serverless CRDT-Based Markdown Editor | Computer Science Blog @ HdM Stuttgart](https://blog.mi.hdm-stuttgart.de/index.php/2024/08/31/total-studio-serverless-crdt-based-markdown-editor/)

[Using Milkdown Kit | Milkdown](https://milkdown.dev/docs/guide/using-milkdown-kit)

https://docs.yjs.dev/api/document-updates