Lexical Editor Life Cycle

 

 

User/External

• 역할: 에디터 외부 시스템 또는 최종 사용자
• 책임:
  • 초기 HTML 데이터 제공
  • 사용자 입력 및 상호작용
  • 변경된 HTML 수신 및 처리 (onChange 콜백)

LexicalComposer

• 역할: Lexical 에디터의 React 래퍼 컴포넌트
• 책임:
  • initialConfig를 통한 에디터 설정
    • nodes: 사용 가능한 노드 타입 등록
    • theme: CSS 클래스 매핑 정의
    • onError: 전역 에러 핸들러
  • Context를 통해 하위 컴포넌트에 editor 인스턴스 제공
  • 플러그인 컴포넌트들의 컨테이너 역할

Plugins

• 주요 플러그인들:
  • LoadHTMLPlugin: HTML을 Lexical 노드로 변환 (초기 로딩)
  • OnChangePlugin: 에디터 상태 변경 감지 및 HTML 추출
  • RichTextPlugin: 기본 텍스트 편집 기능 제공
  • ImagePlugin: 이미지 삽입 명령어 등록 및 처리
  • HistoryPlugin: Undo/Redo 기능
• 책임:
  • editor.update()를 통한 상태 수정
  • editorState.read()를 통한 상태 읽기
  • 명령어(Command) 등록 및 리스너 관리
  • 외부와의 인터페이스 (onChange 콜백)

Lexical Core

• 역할: Lexical 라이브러리의 핵심 엔진
• 주요 구성 요소:
  • Editor Instance: 에디터의 중앙 컨트롤러
  • EditorState: 불변(immutable) 노드 트리 상태
  • Transaction System: 배치 업데이트 및 원자성 보장
• 주요 API:
  • $generateNodesFromDOM(): DOM → Lexical Nodes 변환
  • $generateHtmlFromNodes(): Lexical Nodes → HTML 변환
  • editor.update(fn): 쓰기 모드 - 상태 수정
  • editorState.read(fn): 읽기 모드 - 상태 조회
  • $getRoot(): 루트 노드 접근
• 책임:
  • 노드 트리 상태 관리
  • 트랜잭션 처리 및 커밋
  • 변경 감지 및 리스너 호출
  • 노드 타입별 변환 로직 조율

Nodes

• 역할: 에디터 콘텐츠의 데이터 모델
• 노드 타입:
  • DecoratorNode: 커스텀 React 컴포넌트 렌더링 (ImageNode)
  • ElementNode: 일반 DOM 요소 (ParagraphNode, HeadingNode)
  • TextNode: 텍스트 콘텐츠
• 주요 메서드:
  • 정적 메서드:
    • importDOM(): DOM → 노드 변환 규칙 정의
    • importJSON(): JSON → 노드 역직렬화
    • clone(): 노드 복제
  • 인스턴스 메서드:
    • exportDOM(): 노드 → DOM 변환
    • exportJSON(): 노드 → JSON 직렬화
    • decorate(): React 컴포넌트 반환 (DecoratorNode만)
    • createDOM(): DOM 요소 생성 (ElementNode)
    • getWritable(): 수정 가능한 노드 복사본 반환
• 책임:
  • 데이터 저장 (__src, __alt 등 private 속성)
  • Import/Export 로직 구현
  • 렌더링 방식 정의
  • 불변성 유지 (getWritable 패턴)

Browser DOM

• 역할: 실제 브라우저 렌더링 엔진
• 책임:
  • Lexical 노드가 생성한 DOM 요소 렌더링
  • 사용자 입력 이벤트 캡처
  • Layout 계산 및 Paint
  • React 컴포넌트(DecoratorNode) 마운트

 

참고용 에디터 Example. https://lexical.bini59.dev

Lexical Editor Example