텍스트 에디터는 많은 사용자들이 동시에 작업하거나 문서의 이력을 추적할 필요가 있는 경우에 유용합니다. 이를 위해 Draft.js는 히스토리 관리를 쉽게 할 수 있는 기능을 제공합니다.

히스토리 관리란 무엇인가요?

히스토리 관리는 텍스트 에디터에서 사용자의 작업 이력을 기록하고 되돌리거나 다시 실행하는 기능을 말합니다. 예를 들어, 사용자가 텍스트를 입력하거나 삭제하는 경우, 이를 기록하고 원하는 경우에 이전 단계로 되돌아갈 수 있습니다.

Draft.js에서 히스토리 관리하기

Draft.js에서 텍스트 에디터의 히스토리 관리는 EditorState 객체를 사용하여 처리됩니다. EditorState는 에디터의 상태를 나타내는 불변의 객체이며, 변경이 일어날 때마다 새로운 EditorState 객체가 생성됩니다.

import { EditorState } from 'draft-js';

function MyEditorComponent() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  // 텍스트 입력 시 호출되는 콜백 함수
  const onInputChange = (event) => {
    const newEditorState = EditorState.push(
      editorState,
      event.target.value,
      'insert-characters'
    );
    setEditorState(newEditorState);
  };

  return (
    <div>
      <textarea
        value={editorState.getCurrentContent().getPlainText()}
        onChange={onInputChange}
      />
    </div>
  );
}

위의 예제에서, EditorState.createEmpty()를 사용하여 초기 에디터 상태를 생성합니다. 상태를 변경할 때마다 EditorState.push()를 호출하여 새로운 상태를 생성하고, 이를 setEditorState 함수를 사용하여 업데이트합니다.

텍스트 에디터의 내용을 추적하려면 getCurrentContent() 메서드를 사용하여 현재 내용을 가져올 수 있습니다.

히스토리 되돌리기

Draft.js에서 히스토리를 되돌리기 위해서는 EditorState 객체를 이전 상태로 되돌려야 합니다.

function MyEditorComponent() {
  // ...

  // 되돌리기 버튼 클릭 시 호출되는 콜백 함수
  const onUndo = () => {
    const newEditorState = EditorState.undo(editorState);
    setEditorState(newEditorState);
  };

  return (
    <div>
      <button onClick={onUndo}>되돌리기</button>
    </div>
  );
}

위의 예제에서, EditorState.undo() 메서드를 사용하여 이전 상태로 되돌릴 수 있습니다. 이전 상태로 돌아가는 것은 EditorState 객체를 수정하는 것이 아니라, 이전 상태를 가리키는 새로운 EditorState 객체를 생성하고, 이를 setEditorState 함수를 사용하여 업데이트하는 것을 의미합니다.

결론

Draft.js를 사용하여 텍스트 에디터의 히스토리를 관리하는 것은 간단하면서도 유용합니다. EditorState 객체와 관련된 메서드를 사용하여 변경 이력을 추적하고, 원하는 경우에 히스토리를 되돌릴 수 있습니다. 이를 통해 사용자가 편리하게 텍스트를 편집할 수 있는 기능을 제공할 수 있습니다.

참고 자료:

• Draft.js
• Draft.js Github Repository