소개
이번 포스트에서는 Draft.js 라이브러리를 사용하여 텍스트 에디터에서 북마크를 추가하고 관리하는 기능을 구현하는 방법에 대해 알아보겠습니다. 북마크는 특정 위치를 저장하여 나중에 쉽게 찾을 수 있도록 도와주는 기능으로, 텍스트 에디터에서 자주 사용되는 기능 중 하나입니다.
Draft.js와 필요한 라이브러리 설치하기
먼저 Draft.js와 관련된 라이브러리를 설치해보겠습니다. 이를 위해서는 npm을 사용하여 다음 명령을 실행합니다:
npm install draft-js react react-dom
북마크의 데이터 구조 정의하기
북마크 기능을 구현하기 위해서는 북마크의 데이터 구조를 먼저 정의해야 합니다. 여기서는 각 북마크의 위치를 표현하기 위해 텍스트의 시작과 끝 인덱스를 사용하는 방식을 선택했습니다.
{
id: string,
startOffset: number,
endOffset: number
}
위와 같이 id, startOffset, endOffset로 구성된 객체로 북마크를 표현합니다. id는 북마크의 고유 식별자이며, startOffset은 텍스트 시작 위치, endOffset는 텍스트 끝 위치를 나타냅니다.
텍스트 에디터 컴포넌트 생성하기
이제 북마크 기능을 구현할 텍스트 에디터 컴포넌트를 생성해보겠습니다.
import React, { useState } from 'react';
import { Editor, EditorState, ContentState, SelectionState } from 'draft-js';
const TextEditor = () => {
const [editorState, setEditorState] = useState(() =>
EditorState.createEmpty()
);
const handleAddBookmark = () => {
const currentSelection = editorState.getSelection();
const startOffset = currentSelection.getStartOffset();
const endOffset = currentSelection.getEndOffset();
const bookmark = {
id: Date.now().toString(),
startOffset,
endOffset
};
// 북마크 추가 작업 실행
const updatedEditorState = /* ... */;
setEditorState(updatedEditorState);
};
return (
<div>
<button onClick={handleAddBookmark}>북마크 추가</button>
<Editor editorState={editorState} onChange={setEditorState} />
</div>
);
};
export default TextEditor;
위 코드에서 TextEditor 컴포넌트는 Draft.js의 Editor 컴포넌트를 사용하여 텍스트 에디터를 렌더링합니다. handleAddBookmark 함수는 현재 선택된 텍스트를 기준으로 북마크를 추가하고, 변경된 텍스트 에디터 상태를 업데이트합니다.
북마크 추가 및 관리 기능 구현하기
북마크를 추가하고 관리하기 위해서는 handleAddBookmark 함수를 수정해야 합니다. 여기서는 북마크를 editorState에 추가하고 해당 위치를 강조 표시하는 방식을 사용하겠습니다.
const handleAddBookmark = () => {
const currentSelection = editorState.getSelection();
const startOffset = currentSelection.getStartOffset();
const endOffset = currentSelection.getEndOffset();
const bookmark = {
id: Date.now().toString(),
startOffset,
endOffset
};
// 북마크 추가 및 텍스트 스타일링 작업 실행
const contentState = editorState.getCurrentContent();
const selectionState = SelectionState.createEmpty();
const updatedSelection = selectionState.merge({
anchorOffset: startOffset,
focusOffset: endOffset
});
const updatedContentState = contentState.createEntity('bookmark', 'IMMUTABLE', bookmark);
const entityKey = updatedContentState.getLastCreatedEntityKey();
const updatedEditorState = EditorState.set(editorState, { currentContent: updatedContentState, selection: updatedSelection });
// 북마크 스타일 강조 적용
const newEditorState = RichUtils.toggleInlineStyle(updatedEditorState, 'BOLD');
setEditorState(newEditorState);
};
위 코드에서 handleAddBookmark 함수는 다음 작업을 수행합니다:
- 현재 선택된 텍스트의 시작과 끝 인덱스를 가져옵니다.
- 북마크 객체를 생성하고, 북마크를
editorState에 추가합니다. - 텍스트 에디터 상태를 업데이트하고, 북마크를 강조 표시하기 위해 텍스트에 스타일을 적용합니다.
결론
이제 텍스트 에디터에서 북마크를 추가하고 관리할 수 있는 기능을 구현해 보았습니다. Draft.js를 사용하면 텍스트 에디터를 사용자 정의할 수 있는 다양한 기능을 구현할 수 있습니다. 북마크 추가와 관리 기능을 통해 사용자는 텍스트 내에서 중요한 부분을 쉽게 찾을 수 있게 됩니다.