Colin's Blog
[javascript] Draft.js를 이용한 텍스트 에디터의 블록 병합 및 분할 기능 구현하기

이번 기술 블로그에서는 Draft.js를 사용하여 텍스트 에디터에서 블록 병합 및 분할 기능을 구현하는 방법에 대해 알아보겠습니다. Draft.js는 React를 기반으로 한 강력한 텍스트 에디팅 라이브러리로, Rich Text 기능을 쉽게 구현할 수 있습니다.

Draft.js란?

Draft.js는 Facebook에서 개발한 오픈 소스 텍스트 에디팅 라이브러리로, React 컴포넌트 기반의 방식으로 동작합니다. Draft.js를 사용하면 텍스트 에디터를 빠르고 쉽게 구현할 수 있으며, 다양한 Rich Text 기능을 추가할 수 있습니다.

블록 병합 기능 구현하기

먼저, 텍스트 에디터에서 연속된 블록을 병합하는 기능을 구현해보겠습니다. 이 기능을 구현하기 위해서는 Draft.js의 ContentState를 사용해야 합니다.

import { Modifier, EditorState } from 'draft-js';

// 블록을 병합하는 함수
function mergeBlocks(editorState) {
  const content = editorState.getCurrentContent();
  const selection = editorState.getSelection();

  // 현재 선택된 블록 이전의 블록 가져오기
  const previousBlock = content.getBlockBefore(selection.getStartKey());
  // 현재 선택된 블록 가져오기
  const currentBlock = content.getBlockForKey(selection.getStartKey());

  // 현재 블록의 텍스트 가져오기
  const currentText = currentBlock.getText();
  // 이전 블록의 텍스트 가져오기
  const previousText = previousBlock.getText();

  // 이전 블록의 텍스트와 현재 블록의 텍스트를 병합
  const mergedText = previousText + currentText;

  // 이전 블록에 병합된 텍스트 적용
  const newContentState = Modifier.replaceText(
    content,
    selection.merge({
      anchorKey: previousBlock.getKey(),
      anchorOffset: 0,
      focusKey: currentBlock.getKey(),
      focusOffset: currentText.length
    }),
    mergedText
  );

  const newEditorState = EditorState.push(
    editorState,
    newContentState,
    'merge-blocks'
  );

  return EditorState.forceSelection(newEditorState, selection);
}

위의 코드는 mergeBlocks라는 함수를 통해 블록을 병합할 수 있는 기능을 구현한 예시입니다. 이 함수를 적절한 이벤트 핸들러와 연결하여 사용할 수 있습니다.

블록 분할 기능 구현하기

이제 텍스트 에디터에서 선택한 위치에서 블록을 분할하는 기능을 구현해보겠습니다. 마찬가지로 ContentState를 사용하여 구현할 수 있습니다.

import { Modifier, EditorState } from 'draft-js';

// 블록을 분할하는 함수
function splitBlock(editorState) {
  const content = editorState.getCurrentContent();
  const selection = editorState.getSelection();

  // 현재 선택된 블록 가져오기
  const currentBlock = content.getBlockForKey(selection.getStartKey());

  // 분할된 텍스트 생성
  const splitText = currentBlock.getText().slice(0, selection.getStartOffset());
  
  // 분할된 텍스트를 기준으로 블록 분할
  const [contentWithNewBlock, newBlock] = Modifier.splitBlock(
    content,
    selection,
  );

  const newContentState = Modifier.replaceText(
    contentWithNewBlock,
    newBlock.getSelectionAfter(),
    splitText
  );

  const newEditorState = EditorState.push(
    editorState,
    newContentState,
    'split-block'
  );

  return EditorState.forceSelection(newEditorState, newBlock.getSelectionAfter());
}

위의 코드는 splitBlock이라는 함수를 통해 블록을 분할하는 기능을 구현한 예시입니다. 이 함수를 적절한 이벤트 핸들러와 연결하여 사용할 수 있습니다.

마무리

이번 포스트에서는 Draft.js를 사용하여 텍스트 에디터에서 블록 병합 및 분할 기능을 구현하는 방법에 대해 알아보았습니다. Draft.js는 강력한 기능을 제공하며, 커스터마이즈도 용이합니다. 다양한 Rich Text 에디터 기능 추가에 활용해보세요!

참고 자료

© 2018 Colin. All rights reserved.