Insert Text Operation – 에디터 아키텍처

개요

Insert text operation은 특정 경로에 문서에 텍스트 콘텐츠를 추가합니다. 사용자 입력을 위한 가장 일반적인 operation입니다.

인터페이스

interface InsertTextOperation extends Operation {
  type: 'insertText';
  path: Path;
  text: string;
  marks?: Mark[]; // 선택적 서식 마크
}

// Path는 문서 트리의 위치를 나타냄
type Path = number[];

// Mark는 텍스트 서식을 나타냄
interface Mark {
  type: string; // 예: 'bold', 'italic'
  value?: any;
}

사용법

// 기본 사용법
function insertText(editor: Editor, position: Path, text: string) {
  const operation: InsertTextOperation = {
    type: 'insertText',
    path: position,
    text: text
  };
  
  editor.applyOperation(operation);
}

// 서식 마크와 함께
function insertBoldText(editor: Editor, position: Path, text: string) {
  const operation: InsertTextOperation = {
    type: 'insertText',
    path: position,
    text: text,
    marks: [{ type: 'bold', value: true }]
  };
  
  editor.applyOperation(operation);
}

// Transaction에서
function insertTextInTransaction(editor: Editor, position: Path, text: string) {
  const tx = editor.beginTransaction();
  tx.add({
    type: 'insertText',
    path: position,
    text: text
  });
  tx.commit();
}

리버스 Operation

Insert text의 리버스 Operation은 delete text입니다:

function getInverse(operation: InsertTextOperation): DeleteTextOperation {
  return {
    type: 'deleteText',
    path: operation.path,
    length: operation.text.length
  };
}

// Undo에서 사용
function undoInsertText(editor: Editor, operation: InsertTextOperation) {
  const inverse = getInverse(operation);
  editor.applyOperation(inverse);
}