ProseMirror 뜯어보기 - prosemirror-model의 node.ts

해당 게시글은 정보 공유 보다는 개인적인 학습을 위한 게시글입니다.

1. 노드(Node)의 역할

• 문서의 최소 단위이자 트리 구조의 구성 요소
• ProseMirror에서 문서(doc)는 Node 객체의 계층적 트리로 구성됨
• 불변 객체(Immutable) - 한 번 생성된 Node는 수정되지 않고, 수정 시 새 Node를 생성

! 핵심 포인트

• 모든 콘텐츠(문단, 이미지, 텍스트 등)는 Node로 표현
• 내부에 Fragment로 자식 노드를 저장
• Mark(볼드, 이탤릭, 링크 등)

2. 주요 속성

속성	타입	설명
type	NodeType	노드의 타입(예: paragraph, heading, text)
attrs	Attrs	노드 속성(예: heading의 level, image의 src)
content	Frament	자식 노드 집합
marks	readonly Mark[]	적용된 마크(스타일) 목록
text	string	텍스트 노드일 경우 텍스트 내용

3.주요 Getter/ 메서드 분류

구조 탐색 관련

• children : 자식 Node 배열
• child(index) / maybeChild(index) : 자식 노드 접근
• firstChild / lastChild : 첫/마지막 자식
• nodeAt(pos) : 특정 문서 좌표에 있는 노드
• nodesBetween(from, to, f) : 특정 범위의 모든 하위 노드를 순회

활용 예: 특정 위치에 이미지 노드 있는지 확인, 하위 텍스트 추출

---

텍스트 관련

• textContent : 모든 하위 노드의 텍스트 결합
• textBetween(from, to, blockSeparator, leafText) : 범위 내 텍스트 추출

활용 예: 문서의 특정 범위만 텍스트로 가져와서 검색/하이라이팅

---

노드 비교/검사

• eq(other) : 같은 노드인지 비교(마크업, 콘텐츠 동일 여부)
• sameMarkup(other) : 마크업(타입, 속성, 마크)만 비교
• hasMarkup(type, attrs, marks) : 특정 마크업과 일치하는지
• canReplace(from, to, replacement) : 특정 범위에 다른 노드/콘텐츠를 넣을 수 있는지
• canReplaceWith(from, to, type, marks) : 특정 타입 노드로 대체 가능한지
• canAppend(other) : 다른 노드를 이어 붙일 수 있는지

 활용 예: 드래그 앤 드롭 시, 붙이기 가능한 위치인지 검사

---

수정/생성

• copy(content) : 같은 마크업으로 새 노드 생성
• mark(marks) : 마크를 변경한 새 노드 생성
• cut(from, to) : 범위를 잘라낸 새 노드 생성
• slice(from, to, includeParents) : 잘라낸 부분을 Slice로 반환
• replace(from, to, slice) : 범위 교체

활용 예: bold 적용, 문단 일부 잘라내기, 붙여넣기

---

직렬화/역직렬화

• toJSON() : JSON 형태로 변환
• fromJSON(schema, json) : JSON → Node 변환

 활용 예: 서버 저장/불러오기

---

4. TextNode 특화 클래스

TextNode는 Node를 상속하며, 다음 특징이 있음:

• text 필수
• withText(text) : 텍스트만 변경한 새 노드 생성
• cut(from, to) : 텍스트 일부만 잘라낸 새 노드 생성
• mark(marks) : 마크 변경 가능

즉, 일반 Node는 content(Fragment)로 자식을 가지지만, TextNode는 순수 텍스트만 가짐.

---

5. 불변성(Immutable) 패턴

• 모든 변경은 원본 수정이 아니라 새 Node 생성
• 장점:
  • Undo/Redo 구현 용이
  • 이전 상태 참조 가능
  • 구조 공유(Structural Sharing)로 메모리 효율

정리

• Node는 ProseMirror 문서의 기본 단위이자 데이터 구조의 핵심
• 불변 구조라서 편집 상태 관리와 협업 기능에 유리
• content(Fragment)를 통해 트리형 구조를 가지며, 다양한 메서드로 조작 가능
• TextNode는 Node의 특수한 형태
• canReplace / canReplaceWith 같은 유효성 검사 로직이 에디터 안정성의 핵심