개요
Insert node operation은 특정 경로에 문서에 블록 또는 인라인 노드를 추가합니다. 단락, 제목, 목록 및 기타 구조화된 콘텐츠 삽입에 사용됩니다.
인터페이스
interface InsertNodeOperation extends Operation {
type: 'insertNode';
path: Path;
node: Node;
}
interface Node {
type: string;
children?: Node[];
attributes?: Record<string, any>;
text?: string; // 텍스트 노드용
}사용법
// 단락 삽입
function insertParagraph(editor: Editor, position: Path) {
const operation: InsertNodeOperation = {
type: 'insertNode',
path: position,
node: {
type: 'paragraph',
children: [
{ type: 'text', text: '' }
]
}
};
editor.applyOperation(operation);
}
// 제목 삽입
function insertHeading(editor: Editor, position: Path, level: number, text: string) {
const operation: InsertNodeOperation = {
type: 'insertNode',
path: position,
node: {
type: 'heading',
attributes: { level },
children: [
{ type: 'text', text: text }
]
}
};
editor.applyOperation(operation);
}리버스 Operation
Insert node의 리버스 Operation은 delete node입니다:
function getInverse(operation: InsertNodeOperation): DeleteNodeOperation {
return {
type: 'deleteNode',
path: operation.path,
deletedNode: operation.node // undo를 위해 저장
};
}