Draft.js는 JavaScript로 작성된 리액트 기반의 리치 텍스트 편집기 라이브러리입니다. 이 라이브러리를 사용하면 텍스트 편집기와 관련된 여러 기능들을 손쉽게 구현할 수 있습니다. 이번 블로그 포스트에서는 Draft.js를 사용하여 텍스트 복사 및 붙여넣기 기능을 구현하는 방법에 대해 알아보겠습니다.

복사 기능 구현하기

텍스트 복사 기능을 구현하기 위해서는 Draft.js 내장 명령어인 DefaultDraftCopyCommand를 사용할 수 있습니다. 이 명령어를 실행하면 현재 선택된 텍스트를 클립보드에 복사할 수 있습니다.

import { EditorState, DefaultDraftCopyCommand, RichUtils } from 'draft-js';

const handleCopy = () => {
  const editorState = EditorState.forceSelection(
    getCurrentEditorState(),
    getCurrentSelection()
  );
  RichUtils.handleKeyCommand(editorState, DefaultDraftCopyCommand);
};

위 예제 코드에서 handleCopy 함수는 현재 선택된 텍스트를 클립보드에 복사하기 위해 DefaultDraftCopyCommand 명령어를 사용합니다. getCurrentEditorState 함수는 현재 편집기의 상태를 가져오고, getCurrentSelection 함수는 현재 선택된 텍스트의 영역을 가져옵니다.

붙여넣기 기능 구현하기

Draft.js에서 텍스트 붙여넣기 기능은 DefaultDraftPasteCommand 명령어를 사용하여 구현할 수 있습니다. 이 명령어를 사용하면 클립보드의 내용을 텍스트 에디터에 붙여넣을 수 있습니다.

import { EditorState, DefaultDraftPasteCommand, RichUtils } from 'draft-js';

const handlePaste = () => {
  const editorState = EditorState.forceSelection(
    getCurrentEditorState(),
    getCurrentSelection()
  );
  RichUtils.handleKeyCommand(editorState, DefaultDraftPasteCommand);
};

위 예제 코드에서 handlePaste 함수는 클립보드의 내용을 편집기에 붙여넣기 위해 DefaultDraftPasteCommand 명령어를 사용합니다. getCurrentEditorState 함수와 getCurrentSelection 함수는 앞서 설명한 것과 동일한 역할을 수행합니다.

결론

이번 블로그 포스트에서는 Draft.js를 사용하여 텍스트 복사 및 붙여넣기 기능을 구현하는 방법에 대해 알아보았습니다. Draft.js의 내장 명령어를 사용하여 간단하게 구현할 수 있으며, 텍스트 에디터에 다양한 기능을 추가하는 데 유용합니다.

참고 자료:

• Draft.js 문서
• Draft.js GitHub 저장소