Lexical: 모던 텍스트 에디터 프레임워크
Lexical은 Meta에서 개발한 차세대 텍스트 에디터 프레임워크로, 다양한 웹 애플리케이션에서 복잡한 텍스트 편집 기능을 구현할 수 있게 해준다.
Lexical은 React와 같은 특정 프레임워크에 종속되지 않으며, Vue나 VanillaJS와 같은 다른 라이브러리와도 통합하여 사용할 수 있다는 점에서 유연성이 돋보인다.
기존의 리치 텍스트 에디터와는 달리 Lexical은 에디터를 완성된 상태로 제공하지 않고, 최소한의 구조만 제공하여 개발자가 필요한 기능을 자유롭게 추가할 수 있도록 설계되었다. 예를 들어, 화면에 표시되는 기본 텍스트 편집 요소는 div에 contentEditable 속성이 적용된 단순한 구조이지만, 도구 버튼이나 스타일링 UI는 사용자가 직접 구현해야 한다.
이러한 접근 방식은 사용자 정의가 자유로운 텍스트 에디터를 만들고자 하는 개발자들에게 유리하다.
EditorState: 에디터의 핵심 상태 관리 모델
Lexical의 에디터는 크게 EditorState와 Editor라는 두 가지 핵심 개념으로 나뉜다.
그중에서 EditorState는 에디터의 상태를 관리하는 불변 객체로, 편집 중인 컨텐츠와 선택된 텍스트, 즉 Selection을 관리한다. EditorState는 변경될 때마다 새로운 인스턴스를 생성하여 상태를 업데이트하고, 이로 인해 에디터는 언제나 최신 상태를 유지한다.
EditorState의 중요한 특징 중 하나는 이 상태를 JSON으로 직렬화할 수 있다는 점이다. 이는 편집된 내용을 저장하거나 서버와 동기화할 때 매우 유용하며, 저장된 JSON 데이터를 통해 EditorState를 완벽하게 복원할 수도 있다. 이러한 구조 덕분에 Lexical은 높은 확장성과 복잡한 에디터의 상태 관리를 쉽게 처리할 수 있다.
Selection: 텍스트 편집의 핵심
Selection은 사용자가 선택한 텍스트 영역이나 커서 위치를 나타내며, 이 정보는 에디터 UI와 상호작용할 때 핵심적으로 활용된다.
Selection의 종류:
- RangeSelection: 텍스트 범위를 선택할 때 사용. 사용자가 단어, 문장 또는 단락을 선택할 때 이 Selection이 활성화된다.
- NodeSelection: 텍스트가 아닌 특정 노드(예: 이미지나 비디오)를 선택할 때 사용.
- GridSelection: 이 Selection은 아직 명확히 문서화되지 않았지만, 표나 그리드 같은 복잡한 레이아웃에서 선택을 관리할 때 사용될 가능성이 있다.
Selection은 에디터에서 커서의 위치를 추적하는 데도 사용된다.
예를 들어, 에디터에 포커스가 없을 경우, Selection은 null이 되어 선택 상태가 사라진다. 이를 기반으로 커서가 어디에 있는지, 텍스트가 선택되었는지 등을 확인하여 다양한 UI를 제어할 수 있다.
💻
EditorState와 Selection을 활용하면, 단순한 텍스트 편집 기능을 넘어서 다양한 사용자 맞춤형 기능을 추가할 수 있다.
특히 MDX 에디터와 같은 복잡한 편집기를 만들 때, Lexical의 Selection 모델을 적절히 활용하면 Markdown 문법과 같은 텍스트 처리 로직을 더 쉽게 적용할 수 있다. MDX의 특성상 텍스트와 컴포넌트를 함께 사용할 때 동적 처리가 중요하기 때문에, Selection 상태를 기반으로 적절한 반응형 UI를 구축하는 것이 핵심이 된다.
참고자료
- Editor State | Lexical
https://lexical.dev/docs/concepts/editor-state- Selection | Lexical
https://lexical.dev/docs/concepts/selection
