바닥부터 시작하는 웹앱 에디터 개발기

핵심 내용

• 웹앱 기반 모임 서비스에 리치텍스트와 블록 배치를 지원하는 에디터를 처음부터 직접 구현한 개발기
• 블록 단위 콘텐츠 구조를 바탕으로 서버에는 필수 데이터만 저장하고, 에디터에서 블록 구조를 재구성하는 방식 채택
• Tiptap보다 ProseMirror의 직접 사용을 선택해 확장성과 유지보수성을 확보하려는 판단

문제 상황

• 모바일 웹앱 환경에서 키보드 커맨드 제약으로 블록이 의도치 않게 삭제되는 UX 문제
• 드래그 앤 드롭과 스크롤이 충돌하며 터치 영역과 스크롤 보정이 불안정한 문제

원인 분석

• ProseMirror의 백스페이스 동작이 텍스트 병합 실패 시 이전 블록 삭제로 이어지는 내부 로직
• 상대적 스크롤 이동과 ProseMirror의 자체 스크롤 관리가 겹치며 좌표 오차와 화면 흔들림 발생

해결 방법

• 텍스트 노드 시작점에서의 백스페이스와 블록 선택 상태의 키 입력을 제어해 비의도적 삭제 방지
• 절대값 기반 스크롤 보정으로 전환해 커서 위치와 화면 동기화 문제 완화