editors
짧은 댓글부터 번역까지 네 가지 편집 화면이 같은 편집 핵심(Lexical 기반)과 기능 조각(플러그인)을 함께 쓰는 에디터 묶음입니다.
4짧은 입력, 본문, 문서, 번역 네 편집 표면이 공유하는 하나의 코어
- 2024.04 ~ 현재
- Firstage
- 설계와 구현 (1인)
핵심 가치
새 글쓰기 화면이나 다른 제품도 에디터를 따로 만들지 않고, 같은 핵심에 필요한 기능만 골라 붙입니다.
성과
- Journey의 사진 댓글, 일기, 기록 본문에서 사용
- ROUND가 여러 언어의 대회 안내문을 편집하는 데 IntlEditor를 그대로 사용
- 채팅 입력창과 웹 페이지 빌더도 같은 핵심 위에서 동작
- 여러 사람이 동시에 편집하는 기능(Yjs)과 서버에서 미리 그리는 기능을 핵심 수정 없이 추가
기술 스택
배경
Firstage의 Journey 앱에는 사진 댓글 같은 짧은 입력부터 일기와 기록 본문까지 성격이 다른 글쓰기 화면이 있습니다. 화면마다 에디터를 따로 만들면 저장 형식과 편집 동작이 제각각 달라집니다. 그래서 공통 편집 기반 위에 화면별로 필요한 기능만 얹는 에디터 제품군을 만들었습니다. 패키지는 2024년 4월 같은 저장소에서 시작했습니다.
결정과 구현
- 처음에는 ProseMirror 기반인 Remirror로 마크다운 에디터를 만들었고, Slate도 써 본 뒤 Lexical을 골랐습니다. 코어는 작게 두고 기능은 플러그인으로 빼는 구조가 여러 편집 화면을 함께 유지하는 데 맞다고 판단했습니다.
- 짧은 입력(Plaintext), 본문(Richtext), 문서(Root), 번역(Intl) 네 화면이 React 없는 코어와 플러그인 층을 함께 씁니다. 화면은 플러그인에, 플러그인은 코어에 의존하는 한 방향 구조이며, 플러그인은 화면을 가져오지 않습니다.
- Yjs 동시 편집과 DOM 없는 서버 렌더는 코어를 고치지 않고 붙였습니다. 서버는 headless 진입점만 가져와 저장된 문서를 HTML로 그립니다.
- 멘션, 이미지 업로드, 링크 미리보기처럼 외부 데이터가 필요한 기능은 호스트가 주입한 함수로 동작합니다. 함수가 없으면 해당 동작을 끄고 가짜 저장을 흉내 내지 않으며, 권한, 저장, 공개 범위, 저장 상태 표시는 호스트가 책임집니다.
현재 상태
Journey 앱의 사진 댓글, 일기, 기록 본문 입력이 이 패키지를 씁니다. 같은 모노레포의 대회 운영 서비스 ROUND는 대회 안내문을 여러 언어로 편집하는 데 IntlEditor를 그대로 가져다 쓰고, chats의 입력기와 웹 페이지 빌더(cms)도 같은 코어 위에서 동작합니다. 기존 Root 에디터의 일반 텍스트와 서식 텍스트 경로를 새 공통 기반(EditorRoot)으로 옮기고 호환성을 확인하는 일이 남아 있습니다.