[javascript] Draft.js에서 텍스트 에디터의 스크롤 및 페이지네이션 구현하기

24 Nov 2023

javascript

Draft.js는 React 기반의 강력한 텍스트 에디팅 프레임워크로, 다양한 에디터 애플리케이션을 개발할 수 있습니다. 이번 글에서는 Draft.js를 사용하여 텍스트 에디터의 스크롤과 페이지네이션 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 스크롤 구현하기

텍스트 에디터를 스크롤 가능하도록 만들기 위해서는 Editor 컴포넌트를 <ScrollContainer> 컴포넌트로 감싸야 합니다. <ScrollContainer> 컴포넌트는 스크롤이 가능한 영역을 제공하며, 텍스트 에디터의 내용을 자식으로 포함시켜야 합니다.

import { Editor } from 'draft-js';

const ScrollContainer = ({ children }) => {
  return (
    <div style={{ height: '300px', overflow: 'scroll' }}>
      {children}
    </div>
  );
};

const MyEditor = () => {
  return (
    <ScrollContainer>
      <Editor />
    </ScrollContainer>
  );
};

위의 예시에서는 ScrollContainer 컴포넌트를 사용하여 텍스트 에디터를 스크롤 가능한 영역으로 만들었습니다. ScrollContainer 컴포넌트의 스타일을 조정하여 원하는 크기와 스타일을 적용할 수 있습니다.

2. 페이지네이션 구현하기

Draft.js에서 페이지네이션을 구현하려면 EditorState와 ContentState를 사용하여 텍스트 내용을 관리해야 합니다. 페이지 마다 표시할 텍스트의 시작과 끝 offset 값을 계산하여, 해당 영역만을 표시하는 방식으로 페이지네이션을 구현할 수 있습니다.

import { Editor, EditorState, ContentState } from 'draft-js';

const MyEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const handlePageChange = (pageNumber) => {
    // 페이지에 따른 offset 계산
    const pageSize = 1000; // 한 페이지에 표시할 글자 수
    const startOffset = (pageNumber - 1) * pageSize;
    const endOffset = pageNumber * pageSize;

    // 현재 에디터 상태의 contentState를 가져옴
    const currentContentState = editorState.getCurrentContent();

    // offset을 이용하여 페이지에 해당하는 텍스트만 가져옴
    const selectedContentState = ContentState.createFromText(
      currentContentState.getPlainText().substring(startOffset, endOffset)
    );
    
    // 새로운 EditorState 생성
    const newEditorState = EditorState.createWithContent(selectedContentState);

    // 새로운 EditorState로 상태 갱신
    setEditorState(newEditorState);
  };

  return (
    <>
      <button onClick={() => handlePageChange(1)}>Page 1</button>
      <button onClick={() => handlePageChange(2)}>Page 2</button>
      <button onClick={() => handlePageChange(3)}>Page 3</button>
      <Editor editorState={editorState} onChange={setEditorState} />
    </>
  );
};

위의 예시에서는 handlePageChange 함수를 통해 페이지 변경 버튼을 클릭할 때마다 해당 페이지에 대한 텍스트를 가져와 새로운 EditorState를 생성합니다. 사용자가 페이지를 변경하는 동작에 따라서 EditorState가 업데이트되어 텍스트 에디터가 해당 페이지의 내용을 표시하게 됩니다.

이렇게하면 Draft.js를 사용하여 텍스트 에디터에 스크롤 및 페이지네이션 기능을 구현할 수 있습니다. 자세한 내용은 Draft.js의 공식 문서를 참조하시기 바랍니다.

참고 자료

Draft.js 공식 문서